:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1a1a1a;--desk:#f3f4f6;--paper:#faf8f3;--ink:#1a1a1a;--sheet-width:min(210mm,calc(100vw - 192px),calc(90dvh * 210 / 297));--sheet-ratio:210/297;--margin-x:52px;--margin-y:48px;--line-height:32px}
:root[data-size=letter]{--sheet-ratio:8.5/11;--sheet-width:min(8.5in,calc(100vw - 192px),calc(90dvh * 8.5 / 11))}
*{box-sizing:border-box}body{margin:0;background:var(--desk);transition:background .5s}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none}button:disabled{cursor:default;opacity:.28}button,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #6b7280;outline-offset:4px}button{touch-action:manipulation}svg{width:20px;height:20px;display:block;pointer-events:none}body.dark{--desk:#1a1a1a;--rail-ink:#fff}
#desk{min-height:100dvh;display:grid;place-items:center;padding:0 84px}#workspace{width:var(--sheet-width);position:relative}#paper{width:100%;aspect-ratio:var(--sheet-ratio);position:relative;isolation:isolate;overflow:hidden;border-radius:24px;border:1px solid #0000000f;background:var(--paper);box-shadow:6px 8px 24px #0000001f,3px 4px 12px #00000014,1px 2px 4px #0000000f;transition:background .2s,box-shadow .25s}#paper.edge-right{box-shadow:10px 8px 32px #0000002e,5px 4px 16px #0000001f,3px 4px 12px #00000014}#paper.edge-left{box-shadow:-4px 8px 32px #0000002e,-2px 4px 16px #0000001f,6px 8px 24px #00000014}
#page-number{position:absolute;left:-64px;top:0;font:48px Georgia,serif;letter-spacing:.5px;color:var(--rail-ink,#000);opacity:.2;transition:opacity 1s;user-select:none}#page-number.turning{opacity:1}
#pattern{position:absolute;inset:var(--margin-y) var(--margin-x);pointer-events:none}#pattern.lined{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--line-height) - 1px),#d1d5db33 calc(var(--line-height) - 1px),#d1d5db33 var(--line-height))}#pattern.dotted{background-image:radial-gradient(#96969640 1px,transparent 1px);background-size:20px 20px}#pattern.grid{background-image:linear-gradient(#96969626 1px,transparent 1px),linear-gradient(90deg,#96969626 1px,transparent 1px);background-size:20px 20px}
#texture{position:absolute;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
#editor{position:absolute;inset:var(--margin-y) var(--margin-x);width:calc(100% - 2 * var(--margin-x));height:calc(100% - 2 * var(--margin-y));padding:0;margin:0;resize:none;border:0;outline:0;background:transparent;color:#1a1a1a;font:16px/var(--line-height) Georgia,serif;overflow:auto;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:break-word;border-radius:0}#drawing{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}body.draw #drawing{pointer-events:auto;touch-action:none;cursor:crosshair}body.draw #editor{pointer-events:none}body.draw .page-edge{display:none}.page-edge{position:absolute;top:0;bottom:0;width:min(9%,52px);z-index:2;padding:0}.page-edge.left{left:0}.page-edge.right{right:0}#rail{position:absolute;top:0;left:calc(100% + 16px);display:flex;flex-direction:column;gap:12px;color:var(--rail-ink,#000)}.icon-button{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:12px;transition:background .15s,transform .15s}.icon-button:hover{background:#ffffff50}.icon-button:active{transform:scale(.94)}.circle{border-radius:50%;background:#ffffff33;border:1px solid #ffffff66;backdrop-filter:blur(20px);box-shadow:2px 3px 12px #0000001a,1px 2px 6px #00000014,inset 0 1px 0 #ffffff80}.circle:hover{background:#ffffff50}.tool-tray{padding:7px;display:flex;flex-direction:column;gap:2px;border-radius:24px;background:#ffffff33;border:1px solid #ffffff66;backdrop-filter:blur(24px);box-shadow:2px 3px 12px #0000001a,inset 0 1px 0 #ffffff80}.tool-tray .selected{background:#ffffff70}.tool-divider{height:1px;background:currentColor;opacity:.1;margin:5px 7px}
#page-footer{position:absolute;top:calc(100% + 6px);left:0;width:100%;display:flex;gap:12px;align-items:center;justify-content:center;color:var(--rail-ink,#000);font-size:11px;opacity:.4;transition:opacity .2s}#page-footer:hover,#page-footer:focus-within{opacity:.9}#notebook-title{padding:6px 0;max-width:50%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#page-count{font-variant-numeric:tabular-nums;font-size:10px} .quiet-button{width:24px;height:24px;display:grid;place-items:center;border-radius:50%}.quiet-button svg{width:15px;height:15px}.quiet-button:hover{background:#88888818}
.glass{color:#1f2937;background:linear-gradient(135deg,#ffffffbb,#ffffff99);backdrop-filter:blur(36px);border:1px solid #ffffffb3;box-shadow:0 0 0 1px #0000000f,inset 0 1px 0 #fffffff2,0 8px 32px #0000001a,0 4px 16px #00000012}.panel{position:fixed;z-index:40;width:320px;border-radius:24px;overflow:auto;max-height:calc(100dvh - 24px)}.panel[hidden],[hidden]{display:none!important}.panel-heading,.modal-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #00000014;padding:12px 20px}.panel h2{font-size:16px;font-weight:600;margin:0}.panel-body{padding:20px;display:grid;gap:18px}.setting-label,.modal-body>label{display:block;font-size:12px;font-weight:500;color:#6b7280;margin:0 0 10px}.segments{display:grid;gap:6px;padding:6px;background:#0000000a;border-radius:16px;grid-template-columns:repeat(var(--columns,3),1fr)}.segments button{font-size:12px;font-weight:500;text-transform:capitalize;border-radius:10px;padding:9px 4px;color:#6b7280}.segments button[aria-pressed=true]{background:white;color:#111827;box-shadow:0 2px 8px #00000014}.segments button:hover{color:#111827}.setting-value{float:right;color:#1f2937}.panel input[type=range]{width:100%;accent-color:#6b7280;cursor:pointer}.panel-footer{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:15px 20px;border-top:1px solid #00000014}.panel-footer button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 4px;background:#0000000a;border-radius:12px;font-size:12px;color:#4b5563}.panel-footer svg{width:16px;height:16px}.panel-note{font-size:10px;color:#6b7280;padding:0 20px 16px;line-height:1.6;margin:0}
.modal{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border-radius:24px}.modal::backdrop{background:#00000033;backdrop-filter:blur(5px)}.modal-heading h2{margin:0;font-size:18px;font-weight:500}.modal-body{padding:24px;display:grid;gap:12px}.modal-body>label{margin-bottom:-4px}.modal input:not([type=file]),.modal select{width:100%;border:1px solid #ffffff99;border-radius:12px;background:#ffffff70;padding:12px;color:#1f2937;outline:0;min-width:0}.modal input[type=file]{max-width:100%;font-size:12px}.modal input:focus,.modal select:focus{box-shadow:0 0 0 2px #6b728033}.primary-button{padding:12px 20px;border-radius:12px;background:#1f2937;color:white;font-size:13px;font-weight:500}.primary-button:hover{background:#374151}.small-note{color:#6b7280;font-size:12px;line-height:1.7;margin:0}.range-fields{display:flex;gap:12px}.range-fields label{flex:1;font-size:12px;color:#6b7280}.range-fields input{margin-top:6px}.search-result{display:block;text-align:left;width:100%;padding:14px 0;border-bottom:1px solid #0000000d;font-size:13px;line-height:1.7;overflow-wrap:anywhere}.search-result span{display:block;color:#6b7280;font-size:11px}.search-result:hover{background:#ffffff30}#search-results{max-height:45dvh;overflow:auto}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1f2937ed;color:white;border-radius:14px;padding:12px 20px;font-size:12px;max-width:calc(100vw - 32px);z-index:100;box-shadow:0 4px 16px #0000001a}#save-warning{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:110;background:#fff5d7;color:#573b12;border:1px solid #d6bd78;border-radius:12px;padding:12px 16px;font-size:12px;max-width:calc(100vw - 24px)}#save-warning button{text-decoration:underline;margin-left:12px}
@keyframes page-in-right{from{opacity:.3;transform:translateX(24px) scale(.98)}to{opacity:1;transform:none}}@keyframes page-in-left{from{opacity:.3;transform:translateX(-24px) scale(.98)}to{opacity:1;transform:none}}.turn-next{animation:page-in-right .4s cubic-bezier(.22,1,.36,1)}.turn-prev{animation:page-in-left .4s cubic-bezier(.22,1,.36,1)}
@media(max-width:640px){:root{--sheet-width:min(calc(100vw - 32px),calc((100dvh - 190px - env(safe-area-inset-bottom,0px)) * 210 / 297));--margin-x:28px;--margin-y:30px}#desk{padding:50px 16px 120px;min-height:100dvh;align-items:start}#workspace{margin:0 auto}#paper{border-radius:20px}#page-number{left:2px;top:-35px;font-size:24px}#rail{position:fixed;top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);flex-direction:row;gap:12px;z-index:20;max-width:calc(100vw - 24px)}.tool-tray{flex-direction:row;padding:6px;gap:0;max-width:100%;border-radius:24px}.tool-tray .icon-button{width:40px;height:44px}.tool-divider{height:auto;width:1px;margin:7px 3px}.circle{width:48px;height:48px}#page-footer{top:calc(100% + 9px);opacity:.6}.quiet-button{width:44px;height:40px}.panel{max-height:calc(100dvh - 108px);width:min(320px,calc(100vw - 24px))}.panel-body{gap:14px;padding:16px 20px}.segments button{padding:10px 3px}.modal input,.modal select{font-size:16px}.modal-heading{padding:10px 16px}.modal-body{padding:20px}.modal-heading h2{font-size:17px}#toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
@media(max-width:640px){:root[data-size=letter]{--sheet-width:min(calc(100vw - 32px),calc((100dvh - 190px - env(safe-area-inset-bottom,0px)) * 8.5 / 11))}}
@media(max-width:360px){.tool-tray .icon-button{width:36px}}
@media(max-height:540px) and (min-width:641px){:root{--sheet-width:min(60vw,calc(82dvh * 210 / 297))}:root[data-size=letter]{--sheet-width:min(60vw,calc(82dvh * 8.5 / 11))}#desk{padding:20px 80px 48px}.tool-tray{gap:0;padding:4px}.tool-tray .icon-button{height:34px}.tool-divider{margin:2px 7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#image-layer{position:absolute;inset:0;z-index:2;pointer-events:none}#text-layer{position:absolute;inset:0;z-index:3;pointer-events:none}#drawing{z-index:4}#pattern,#texture{z-index:0}
#text-layer:not(.is-create-mode){pointer-events:none!important}
.circle.selected{background:#ffffff99;color:#1a1a1a;box-shadow:0 2px 10px #00000012,inset 0 1px 0 #fff}.dark .circle.selected{background:#ffffff36;color:#fff}
#page-footer{gap:9px}#mode-hint{position:absolute;top:calc(100% + 31px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;color:var(--rail-ink,#000);opacity:.35;font-size:10px;text-align:center;line-height:1.5;pointer-events:none}
#cloud-status[data-state=saving]{opacity:.6}#cloud-status[data-state=conflict],#cloud-status[data-state=error],#cloud-status[data-state=offline]{color:#986a26}
.account-email{font-size:14px;font-weight:500;margin:0;overflow-wrap:anywhere}.account-link{font-size:12px;color:#6b7280;text-align:center;padding:8px}.primary-button{text-align:center;text-decoration:none}.secondary-button{border:1px solid #00000018;border-radius:12px;padding:12px 16px;font-size:12px;background:#ffffff66}
#cloud-loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;border-radius:20px;width:min(340px,calc(100vw - 40px));padding:24px;display:grid;gap:14px;text-align:center;font-size:13px;line-height:1.7}#cloud-loading p{margin:0}
@media(max-width:640px){#mode-hint{top:calc(100% + 50px);font-size:9px;max-width:calc(100vw - 40px)}#rail{gap:10px}#page-footer{gap:8px}#cloud-status{width:28px}}
@media(min-width:641px){#mode-hint{left:calc(100% + 17px);top:294px;transform:none;width:122px;text-align:left;max-width:12vw;font-size:10px;line-height:1.8}body.draw #mode-hint{top:382px}}
#paper-view{position:relative;width:100%;aspect-ratio:var(--sheet-ratio)}
.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-controls label{font-size:11px;color:#6b7280;display:flex;gap:8px;align-items:center;justify-content:space-between}.color-controls input{width:38px;height:32px;padding:2px;border:1px solid #00000010;border-radius:8px;cursor:pointer;background:#ffffff80}
@media(max-width:640px){#page-footer{gap:4px}.quiet-button{width:30px}#notebook-title{max-width:35%}#mode-hint{font-size:9px}}
.brush-toolbar-swatch{width:20px;height:20px;border-radius:50%;border:2px solid #fff;outline:1px solid #00000025;box-shadow:0 1px 4px #00000015}
@media(max-width:360px){.tool-tray .icon-button{width:33px}}
@media(min-width:641px){body.draw #mode-hint{top:430px}}
.phone-extra{display:none!important}
@media(max-width:640px){.tool-tray [data-action=highlighter],.tool-tray [data-action=redo]{display:none}.tool-tray .icon-button{width:44px}.phone-extra{display:flex!important}}