body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;line-height:1.6;color:#000c;background:#fffef7;margin:0;padding:20px}.container{width:100%;margin:0;padding:0}h1{font-size:2rem;font-weight:700;margin-bottom:1rem}h3{font-size:1.25rem;font-weight:600;margin-top:2rem;margin-bottom:1rem}p{margin-bottom:1rem}a{color:#4682b4;text-decoration:none}a:hover{text-decoration:underline}figure{margin:2rem 0}figcaption{font-size:.875rem;color:#0009;margin-top:.5rem;text-align:center}#text-as-graph{position:relative;width:100%;min-height:400px;margin:20px 0;display:flex;justify-content:center;align-items:flex-start}#text-as-graph input{font-family:monospace;word-spacing:30px;background-color:transparent;border:none;outline:none;width:100%;max-width:none}#text-as-graph rect{cursor:pointer}#text-as-graph text{-webkit-user-select:none;user-select:none;cursor:default}#text-as-graph svg text.top,#text-as-graph svg text.side{font-size:12px;fill:gray}#text-as-graph svg rect{shape-rendering:crispEdges}.text-input-section{background-color:#f8f9fa;padding:20px;border-radius:8px;margin:20px 0;border:1px solid #e9ecef}.text-input-section h4{margin-top:0;margin-bottom:15px;color:#495057;font-size:1.1em}.input-controls{display:flex;flex-direction:column;gap:10px}#manual-text-input{width:100%;padding:12px;font-family:system-ui,-apple-system,sans-serif;font-size:14px;border:2px solid #dee2e6;border-radius:6px;resize:vertical;transition:border-color .2s ease}#manual-text-input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 3px #4285f41a}#update-graph{align-self:flex-start;background-color:#4285f4;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}#update-graph:hover{background-color:#3367d6}#update-graph:active{background-color:#2851a3}.input-info{font-size:12px;color:#6c757d;text-align:right}#char-count{font-weight:500}