*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fafaf7;--text:#1a1a1a;--text-muted:#666;--border:#e0ddd8;--radius:8px;--shadow:0 1px 3px #00000014;--highlight-0:#fff3b0;--highlight-1:#b8d4e3;--highlight-2:#c2e0c6;--highlight-3:#f5c6cb;--serif:Georgia, "Times New Roman", serif;--sans:system-ui, -apple-system, "Segoe UI", sans-serif;--logo:"Instrument Serif", Georgia, serif}body{font-family:var(--sans);background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;line-height:1.6;display:flex}.site-header{text-align:center;border-bottom:1px solid var(--border);padding:1.25rem 1.5rem}.logo{font-family:var(--logo);color:var(--text);letter-spacing:-.02em;font-size:1.75rem;text-decoration:none}.logo-slash{color:var(--text-muted);margin:0 .05em}.logo:hover{opacity:.8}.nav-row{text-align:center;margin-top:.4rem}.nav-link{color:var(--text-muted);border-bottom:1px solid #0000;font-size:.85rem;text-decoration:none}.nav-link:hover{color:var(--text);border-bottom-color:var(--text)}.how-it-works{text-align:left;max-width:540px;margin:.75rem auto 0}.how-it-works summary{cursor:pointer;color:var(--text-muted);text-align:center;font-size:.85rem;list-style:none}.how-it-works summary::-webkit-details-marker{display:none}.how-it-works summary:before{content:"+ "}.how-it-works[open] summary:before{content:"− "}.how-it-works ol{color:var(--text);margin:.75rem 0 .5rem 1.25rem;font-size:.875rem;line-height:1.7}.how-it-works ol li{margin-bottom:.25rem}.how-note{color:var(--text-muted);text-align:center;margin-top:.25rem;font-size:.8rem;font-style:italic}#how-read{display:none}.site-footer{text-align:center;border-top:1px solid var(--border);color:var(--text-muted);margin-top:auto;padding:1.5rem;font-size:.8rem}.site-footer a{color:var(--text-muted);text-underline-offset:2px;text-decoration:underline}.site-footer a:hover{color:var(--text)}.screen{flex:1;max-width:720px;margin:0 auto;padding:2rem 1.5rem}#read-screen{max-width:860px}.hidden{display:none!important}.create-header{text-align:center;margin-bottom:2rem}.subtitle{color:var(--text-muted);margin-top:.5rem}.toggle-options{color:var(--text-muted);cursor:pointer;background:0 0;border:none;margin-bottom:.75rem;padding:0;font-size:.875rem}.toggle-options:hover{color:var(--text)}.optional-fields{flex-direction:column;gap:.5rem;margin-bottom:.75rem;display:flex}.optional-fields input{border:1px solid var(--border);border-radius:var(--radius);background:#fff;padding:.6rem .75rem;font-size:.95rem}textarea{border:1px solid var(--border);border-radius:var(--radius);width:100%;font-family:var(--serif);resize:vertical;background:#fff;padding:.75rem;font-size:1rem;line-height:1.7}.budget-bar{color:var(--text-muted);margin:.5rem 0;font-size:.8rem}.btn-primary{background:var(--text);color:var(--bg);border-radius:var(--radius);cursor:pointer;border:none;padding:.7rem 1.5rem;font-size:1rem;transition:opacity .15s;display:inline-block}.btn-primary:disabled{opacity:.4;cursor:default}.btn-primary:hover:not(:disabled){opacity:.85}.btn-secondary{color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:#fff;padding:.5rem 1rem;font-size:.875rem;display:inline-block}.btn-secondary:hover{background:#f5f5f0}.btn-small{padding:.35rem .75rem;font-size:.8rem}.output-area{margin-top:1.5rem}.url-row{gap:.5rem;margin-bottom:1rem;display:flex}.url-row input{border:1px solid var(--border);border-radius:var(--radius);flex:1;padding:.5rem .75rem;font-size:.85rem}.compression-meter{background:#e8e6e1;border-radius:4px;height:8px;margin-top:1rem;position:relative;overflow:hidden}.meter-fill{border-radius:4px;height:100%;transition:width .3s,background .3s}.meter-fill.green{background:#6abf69}.meter-fill.amber{background:#e6a817}.meter-fill.red{background:#d94040}.read-header{margin-bottom:1.5rem}.read-header h2{font-family:var(--serif);font-size:1.5rem}.prompt-text{color:var(--text-muted);margin-top:.25rem;font-style:italic}.instructions{color:var(--text-muted);border-radius:var(--radius);text-align:center;background:#f0efe9;margin-top:.75rem;padding:.9rem 1.25rem;font-size:1rem;line-height:1.5}.name-row{align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.name-row label{color:var(--text-muted);font-size:.875rem}.name-row input{border:1px solid var(--border);border-radius:var(--radius);width:160px;padding:.35rem .6rem;font-size:.875rem}.author-filters{flex-wrap:wrap;gap:.5rem;margin-top:.75rem;display:flex}.author-pill{cursor:pointer;border:1px solid var(--border);background:#fff;border-radius:999px;padding:.25rem .75rem;font-size:.8rem}.author-pill.active{background:var(--text);color:var(--bg);border-color:var(--text)}.passage-container{align-items:flex-start;gap:2rem;display:flex}.passage-text{font-family:var(--serif);white-space:pre-wrap;flex:1;font-size:1.1rem;line-height:1.9;position:relative}.highlight{cursor:pointer;mix-blend-mode:multiply;border-radius:2px;position:relative}.highlight[data-colour="0"]{background:var(--highlight-0)}.highlight[data-colour="1"]{background:var(--highlight-1)}.highlight[data-colour="2"]{background:var(--highlight-2)}.highlight[data-colour="3"]{background:var(--highlight-3)}.margin-notes{flex-shrink:0;width:240px;position:relative}.note-card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;width:100%;padding:.6rem .75rem;font-size:.85rem;position:absolute}.note-card .note-author{color:var(--text-muted);font-size:.75rem;font-weight:600}.note-card .note-snippet{color:var(--text-muted);margin:.25rem 0;font-size:.8rem;font-style:italic}.note-card .note-body{margin-top:.25rem}.note-card .note-actions{gap:.5rem;margin-top:.5rem;display:flex}.note-card .note-actions button{cursor:pointer;color:var(--text-muted);background:0 0;border:none;font-size:.75rem}.note-card .note-actions button:hover{color:var(--text)}.replies{border-top:1px solid #eee;margin-top:.4rem;padding-top:.4rem}.reply{margin-bottom:.3rem;font-size:.8rem}.reply-author{color:var(--text-muted);margin-right:.3rem;font-weight:600}.reply-text{color:var(--text)}.no-note{color:var(--text-muted);font-size:.8rem;font-style:italic}.note-card .note-snippet{cursor:pointer}.note-card .note-snippet:hover{color:var(--text)}.note-card.active{background:#fffff5;border-color:#bbb;transition:box-shadow .2s,border-color .2s,transform .2s,background .2s;transform:scale(1.02);box-shadow:0 4px 14px #0000002e}.highlight.active{outline-offset:1px;outline:2px solid #1a1a1a40;transition:outline .2s}.edit-form{gap:.4rem;margin-top:.4rem;display:flex}.edit-form input{border:1px solid var(--border);border-radius:var(--radius);flex:1;padding:.3rem .5rem;font-size:.8rem}.reply-form{gap:.4rem;margin-top:.4rem;display:flex}.reply-form input{border:1px solid var(--border);border-radius:var(--radius);flex:1;padding:.3rem .5rem;font-size:.8rem}.annotation-toolbar{border:1px solid var(--border);border-radius:var(--radius);z-index:100;background:#fff;flex-direction:column;gap:.5rem;min-width:220px;padding:.75rem;display:flex;position:fixed;box-shadow:0 4px 12px #0000001f}.colour-swatches{gap:.4rem;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:28px;height:28px}.swatch.selected{border-color:var(--text)}.annotation-toolbar input{border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .6rem;font-size:.85rem}.toolbar-actions{justify-content:flex-end;gap:.5rem;display:flex}.share-bar{background:var(--bg);border-top:1px solid var(--border);flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding:.75rem 0;display:flex;position:sticky;bottom:0}.share-bar .btn-secondary{border:1px solid var(--border);background:#fff;border-radius:999px;padding:.5rem 1.1rem;font-size:.8rem;font-weight:500;transition:background .15s,box-shadow .15s;box-shadow:0 1px 2px #0000000a}.share-bar .btn-secondary:hover{background:#f5f5f0;box-shadow:0 2px 4px #00000014}@media (width<=768px){.passage-container{flex-direction:column}.margin-notes{width:100%;position:static}.note-card{margin-bottom:.75rem;position:static!important}.screen{padding:1rem}.logo{font-size:1.4rem}.btn-primary{width:100%;padding:.85rem 1.5rem;font-size:1rem}.btn-secondary{padding:.6rem 1rem}.swatch{width:36px;height:36px}textarea,.optional-fields input{font-size:16px}.name-row input{width:100%;font-size:16px}.name-row{flex-direction:column;align-items:flex-start}.annotation-toolbar{border-radius:var(--radius) var(--radius) 0 0;min-width:unset;padding:1rem;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #00000026;top:auto!important}.annotation-toolbar input{padding:.6rem;font-size:16px}.toolbar-actions{gap:.75rem}.toolbar-actions .btn-primary,.toolbar-actions .btn-secondary{text-align:center;flex:1;padding:.6rem}.share-bar{justify-content:center;gap:.4rem;padding:.75rem 0}.share-bar .btn-secondary{text-align:center;flex:1;padding:.6rem .5rem;font-size:.75rem}.url-row{flex-direction:column}.url-row input{font-size:14px}.instructions{padding:.75rem 1rem;font-size:.9rem}.passage-text{font-size:1rem;line-height:1.8}.edit-form{flex-direction:column}.edit-form input{font-size:16px}.reply-form{flex-direction:column}.reply-form input{font-size:16px}.site-footer{padding-bottom:2rem}}