:root{--bg-color: #ffffff;--text-color: #000000;--timestamp-color: #666666}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #e0e0e0;--timestamp-color: #999999}*{transition:background-color .2s ease,color .2s ease}html{touch-action:manipulation;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;padding:0;font-family:monospace;display:flex;flex-direction:column;align-items:stretch;background-color:var(--bg-color);color:var(--text-color);min-height:100vh;touch-action:manipulation}.top-controls{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;width:100%;max-width:none;box-sizing:border-box;border-bottom:1px solid var(--timestamp-color);opacity:.3}.version-switcher{display:flex;gap:8px}.version-btn{background:transparent;border:1px solid var(--timestamp-color);color:var(--text-color);font-family:monospace;font-size:12px;padding:4px 8px;cursor:pointer;opacity:.5;transition:opacity .2s ease,border-color .2s ease}.version-btn:hover{opacity:1}.version-btn.active{opacity:1;border-color:var(--text-color)}.container{width:100%;max-width:none;display:grid;grid-template-columns:max-content max-content minmax(0,1fr);column-gap:16px;row-gap:8px;align-items:start;padding:20px 20px 20px 0;box-sizing:border-box}.container[data-version=v2],.container[data-version=v3],.container[data-version=v4],.container[data-version=v5]{grid-template-columns:minmax(0,1fr);row-gap:0}.entry{display:contents}.timestamp{font-size:var(--font-size, 14px);color:var(--timestamp-color);white-space:nowrap;text-align:left;grid-column:2;opacity:.5;transition:opacity 4s ease;line-height:1.6em}.entry-text{transition:opacity 4s ease}.timestamp.faded,.entry-text.faded{opacity:.2}.entry-text,.entry-input{text-align:left;width:100%;min-width:0;max-width:100%;box-sizing:border-box;font-size:var(--font-size, 14px);font-family:monospace;white-space:pre-wrap;color:var(--text-color);overflow-wrap:break-word;word-break:break-word;line-height:1.6em;grid-column:3}.container[data-version=v2] .entry-text,.container[data-version=v2] .entry-input,.container[data-version=v3] .entry-text,.container[data-version=v3] .entry-input,.container[data-version=v4] .entry-text,.container[data-version=v4] .entry-input,.container[data-version=v5] .entry-text,.container[data-version=v5] .entry-input{grid-column:1;padding-left:20px;padding-right:20px}.container[data-version=v3] .entry-text,.container[data-version=v3] .entry-input{font-family:Roboto Flex,sans-serif;text-align:left}.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.clickable:hover{opacity:.7}.entry-input{border:none;outline:none;background-color:transparent;resize:none;overflow:hidden;overflow-wrap:anywhere;min-height:1.6em;line-height:1.6em;padding:0;margin:0;touch-action:manipulation}.entry-input-contenteditable{white-space:pre-wrap;word-break:break-word;text-align:left;display:block;width:100%}.entry-input-contenteditable:empty:before{content:attr(data-placeholder);color:var(--timestamp-color);opacity:.5;pointer-events:none}.entry-input::placeholder{color:var(--timestamp-color);opacity:.5}.font-size-slider-container{display:flex;align-items:center;opacity:1}.font-size-slider{position:relative;width:120px;height:20px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.slider-track{position:relative;width:100%;height:2px;margin-top:9px}.slider-track:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:var(--timestamp-color);opacity:.3}.slider-fill{position:absolute;left:0;top:0;height:100%;background-color:var(--text-color);transition:width .1s ease;z-index:1}.slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background-color:var(--text-color);border-radius:50%;cursor:grab;transition:left .1s ease;z-index:2}.slider-thumb:active{cursor:grabbing}.container[data-version=v5] .entry:hover .v5-wave .v5-line{stroke:#000;transition:stroke .2s ease}.container[data-version=v5] .entry:hover .v5-text{color:#0000001a;transition:color .2s ease}[data-theme=dark] .container[data-version=v5] .entry:hover .v5-text{color:#e0e0e01a}.container[data-version=v5] .entry .v5-wave .v5-line{transition:stroke .2s ease}.container[data-version=v5] .entry .v5-text{transition:color .2s ease}