/* Arial-metric font bundled with the app (fonts/OFL.txt), so text measures and wraps the same on every computer */
@font-face{font-family:'Arial';font-weight:400;font-style:normal;src:url(../fonts/PatchworkSans-Regular.woff2) format('woff2');unicode-range:U+0000-024F,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2100-215F,U+2190-21FF,U+2200-22FF,U+25A0-25FF;}
@font-face{font-family:'Arial';font-weight:700;font-style:normal;src:url(../fonts/PatchworkSans-Bold.woff2) format('woff2');unicode-range:U+0000-024F,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF,U+2100-215F,U+2190-21FF,U+2200-22FF,U+25A0-25FF;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;height:calc(var(--vh,1vh)*100);}
body{font-family:Arial,Helvetica,sans-serif;background:#111;color:#e0e0e0;overflow:hidden;display:flex;flex-direction:column;
  background-image:radial-gradient(circle at 82% -12%,#1f1a10 0%,#111 55%);}
button{font-family:inherit;}

/* ===== top bars ===== */
#bar1{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #1f1f2e;background:#0e0e15;flex-shrink:0;overflow-x:auto;scrollbar-width:none;}
#bar2{display:flex;align-items:center;gap:6px;padding:5px 10px;border-bottom:1px solid #1f1f2e;background:#0c0c12;flex-shrink:0;overflow-x:auto;scrollbar-width:none;min-height:42px;}
#bar1::-webkit-scrollbar,#bar2::-webkit-scrollbar{display:none;}
#brand{display:flex;align-items:center;gap:8px;margin-right:6px;flex-shrink:0;}
#brand .mark{width:24px;height:24px;border-radius:7px;background:#10131f;border:1px solid #5a4a2b;display:flex;align-items:center;justify-content:center;}
#brand .name{font-weight:700;font-size:14px;color:#ede6d8;white-space:nowrap;}
#brand .name b{color:#f59e0b;}
.mbtn{width:36px;height:36px;border-radius:8px;border:1px solid #23232f;background:#13131c;color:#bcbcd0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:.1s;}
.mbtn:hover{background:#1c1c28;color:#e0e0e0;}
.mbtn.on{background:#241c0d;border-color:#5a4a2b;color:#fbbf24;}
.mbtn:disabled{opacity:.32;cursor:default;}
.mbtn svg{display:block;pointer-events:none;width:18px;height:18px;}
.bsep{width:1px;height:24px;background:#23232f;margin:0 6px;flex-shrink:0;}
#spacer-r{margin-left:auto;}
#now{height:32px;padding:0 11px;border-radius:8px;border:1px solid #23232f;background:#13131c;color:#bcbcd0;font-size:11.5px;cursor:pointer;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:6px;}
#now:hover{border-color:#5a4a2b;color:#fbbf24;}
/* ink controls */
#inkbar{display:none;align-items:center;gap:6px;}
.sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.18);cursor:pointer;flex-shrink:0;padding:0;transition:transform .08s;}
.sw:hover{transform:scale(1.12);}
.sw.on{outline:2px solid #fbbf24;outline-offset:1px;}
#sizewrap{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:0 2px;}
#size{width:90px;accent-color:#f59e0b;cursor:pointer;}
#sizeval{font-size:11px;color:#8d8da4;font-family:monospace;min-width:34px;text-align:right;}
#handmsg{display:none;font-size:11.5px;color:#56566e;padding:0 4px;}

/* ===== stage / layers ===== */
#stage{flex:1;min-height:0;position:relative;}
#wrap{position:absolute;inset:0;overflow-y:scroll;overflow-x:hidden;touch-action:pan-x pan-y;z-index:1;}
#wrap::-webkit-scrollbar{width:10px;height:10px;}#wrap::-webkit-scrollbar-corner{background:transparent;}   /* the corner where the two scrollbars meet */
#wrap::-webkit-scrollbar-thumb{background:#2a2330;border-radius:6px;border:2px solid #0e0e15;}
#wrap::-webkit-scrollbar-track{background:transparent;}
#pad{position:relative;min-height:100%;}
#ink{position:absolute;inset:0;display:block;z-index:5;pointer-events:none;touch-action:none;}
#ink.pan{cursor:grab;}#ink.pan.panning{cursor:grabbing;}
#ink.m-pen,#ink.m-hl{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z%22%20stroke%3D%22%23000%22%20stroke-width%3D%223.6%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22/%3E%3C/svg%3E") 3 21, crosshair;}

/* ===== rich text editor (module) ===== */
.toolbar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;}
.tbtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;color:#bbb;border:none;background:transparent;font-size:12px;font-weight:500;flex-shrink:0;user-select:none;transition:background .1s;}
.tbtn:hover{background:#23232f;}.tbtn.on{background:#1e3a5f;color:#60a5fa;}
.tsep{width:1px;height:16px;background:#2a2a3a;margin:0 1px;flex-shrink:0;}
.toolbar select,.toolbar input[type="number"]{height:24px;font-size:11px;padding:0 3px;border:1px solid #2a2a3a;border-radius:5px;background:#111;color:#bbb;}
.toolbar select{max-width:120px;}
.toolbar input[type="number"]{width:40px;text-align:center;}
.color-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;cursor:pointer;user-select:none;flex-shrink:0;transition:background .1s;}
.color-btn:hover{background:#23232f;}
.color-btn.on{background:#1e3a5f;}
.color-btn .cletter{font-size:12px;font-weight:600;line-height:1;color:#bbb;}
.color-btn .cbar{height:3px;width:16px;border-radius:2px;margin-top:2px;transition:background .15s;}
.color-pop{position:fixed;z-index:10000;background:#1c1c28;border:1px solid #3a3a4a;border-radius:10px;padding:10px;box-shadow:0 8px 28px rgba(0,0,0,.5);width:196px;display:none;}
.color-pop.open{display:block;}
.color-pop .cp-row{display:flex;align-items:center;gap:7px;width:100%;background:transparent;border:none;color:#c0c0d8;font-size:12px;font-family:inherit;cursor:pointer;padding:6px;border-radius:6px;text-align:left;}
.color-pop .cp-row:hover{background:#262635;}
.color-pop .cp-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5a5a72;margin:9px 2px 5px;}
.color-pop .cp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.color-pop .cp-fav-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;}
.color-pop .cp-sw{width:100%;aspect-ratio:1;border-radius:4px;border:1px solid rgba(255,255,255,.12);cursor:pointer;position:relative;transition:transform .08s,border-color .1s;padding:0;}
.color-pop .cp-sw:hover{transform:scale(1.14);border-color:rgba(255,255,255,.45);z-index:1;}
.color-pop .cp-fav{width:100%;aspect-ratio:1;border-radius:5px;border:1px solid rgba(255,255,255,.18);cursor:pointer;position:relative;transition:transform .08s;padding:0;}
.color-pop .cp-fav:hover{transform:scale(1.1);}
.color-pop .cp-fav .cp-x{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:#2a2a3a;border:1px solid #4a4a5a;color:#ddd;font-size:10px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;}
.color-pop .cp-fav:hover .cp-x{display:flex;}
.color-pop .cp-fav-add{width:100%;aspect-ratio:1;border-radius:5px;border:1px dashed #4a4a5a;background:transparent;color:#7a7a92;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;position:relative;padding:0;}
.color-pop .cp-fav-add:hover{border-color:#60a5fa;color:#60a5fa;}
.color-pop .cp-divider{height:1px;background:#2a2a38;margin:9px 0;}
.color-pop .cp-current{position:relative;}
.color-pop .cp-current .cp-cur-sw{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.25);flex-shrink:0;}
.color-pop .cp-current span:nth-child(2){flex:1;}
.color-pop .cp-current .cp-cur-hex{font-family:monospace;font-size:10px;color:#7a7a92;}
.color-pop .cp-star{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:#2a2a3a;border:1px solid #4a4a5a;color:#fbbf24;font-size:8px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;}
.color-pop .cp-fav:hover .cp-star{display:flex;}
.img-resize-group{display:none;align-items:center;gap:8px;border:1px solid #3a5a3a;border-radius:9px;padding:4px 8px;height:38px;background:#161e16;}
.img-resize-group.visible{display:flex;}
.img-resize-group .resize-label{font-size:10px;color:#7dba7d;white-space:nowrap;user-select:none;}
.img-resize-group input[type="range"]{width:64px;height:4px;accent-color:#4caf50;cursor:pointer;}
.img-resize-group .resize-val{font-size:10px;color:#7dba7d;min-width:30px;text-align:right;font-family:monospace;}
/* infinite, top-aligned flow (valign neutralised for a scrolling page) */
.editor-valign-wrap{position:static;display:block;overflow:visible;}
.editor{outline:none;font-size:15px;line-height:1.75;color:#e0e0e0;cursor:text;caret-color:#e0e0e0;padding:18px 20px 45vh 70px;min-height:60vh;}
.editor .line{min-height:1.75em;white-space:pre-wrap;word-break:break-word;}
.img-run{display:inline-block;vertical-align:middle;position:relative;cursor:default;}.img-run img{-webkit-user-drag:none;user-select:none;}
.img-resize-group.img-pop{position:fixed;z-index:70;box-shadow:0 6px 18px rgba(0,0,0,.45);}
.img-drop{position:fixed;width:3px;background:#4caf50;border-radius:2px;z-index:70;pointer-events:none;display:none;box-shadow:0 0 6px #4caf50;}
body.img-dragging,body.img-dragging *{cursor:default!important;}body.img-dragging #ink{pointer-events:none!important;}   /* the drop spot is looked up under the ink layer */
.img-run.img-selected img{outline:2px solid #4caf50;border-radius:2px;}
.status{display:none;}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(18px);background:#13131e;border:1px solid #2a2a3a;color:#c0c0e0;font-size:12px;padding:8px 16px;border-radius:9px;box-shadow:0 4px 20px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.2s;z-index:11000;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.show:has(button){pointer-events:auto;}
#toast.ok{border-color:#22543d;color:#4ade80;}#toast.err{border-color:#7f1d1d;color:#f87171;}#toast.info{border-color:#1e3a5f;color:#60a5fa;}
#hint{position:absolute;left:50%;top:34%;transform:translateX(-50%);text-align:center;color:#4a4a60;font-size:14px;line-height:2;pointer-events:none;user-select:none;z-index:6;}
#hint b{color:#6a5a35;}
@media (max-width:560px){#brand .name{display:none;}#size{width:66px;}.editor{padding-left:54px;}}

/* ===== marks / panels (riffrolled-style) ===== */
:root{--accent:#818cf8;--accent2:#6366f1;--panel:#15151f;--pborder:#2a2a3a;--pmut:#8a8aa4;}
#gut{position:absolute;left:0;top:0;bottom:0;z-index:6;width:70px;}
#gut-grip{position:absolute;top:0;bottom:0;right:0;width:8px;cursor:col-resize;}
#gut-grip:hover{background:linear-gradient(90deg,transparent,rgba(129,140,248,.3));}
#gut-tools{position:absolute;top:6px;right:13px;display:flex;gap:8px;align-items:center;z-index:7;}#gut-add{width:26px;height:26px;border-radius:50%;border:1px solid #5a4a2b;background:#1a1510;color:#fbbf24;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#gut-add:hover{background:#241c0d;}
#bar2{position:relative;}
#bar2 #gut-tools{position:absolute;left:0;top:0;bottom:0;right:auto;justify-content:center;gap:8px;border-right:1px solid #2a2233;background:#0c0c12;}
.panel{position:fixed;z-index:9000;background:var(--panel);border:1px solid var(--pborder);border-radius:13px;box-shadow:0 24px 70px rgba(0,0,0,.6);color:#e6e6f0;width:330px;max-width:94vw;display:flex;flex-direction:column;overflow:hidden;}
.panel-h{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid #20202e;cursor:grab;user-select:none;}
.panel-h.drag{cursor:grabbing;}
.panel-ic{width:26px;height:26px;border-radius:8px;background:#1d1d2b;border:1px solid var(--pborder);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.panel-t{font-weight:700;font-size:13.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.panel-x{width:26px;height:26px;border-radius:7px;border:1px solid var(--pborder);background:#16161f;color:#9090a8;font-size:15px;cursor:pointer;flex-shrink:0;}
.panel-x:hover{color:#f87171;border-color:#5a2b2b;}
.panel-b{padding:12px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;max-height:62vh;}
.pf{display:flex;flex-direction:column;gap:5px;}
.pf-l{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pmut);}
.pf-in{height:32px;background:#0f0f18;border:1px solid #26263a;border-radius:8px;color:#e6e6f0;font-size:13px;padding:0 11px;outline:none;font-family:inherit;}
.pf-in:focus{border-color:var(--accent);}
.seg{display:flex;gap:5px;}
.seg button{flex:1;height:30px;border-radius:8px;border:1px solid #26263a;background:#0f0f18;color:#9898b4;font-size:11.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;}
.seg button.on{border-color:var(--accent);color:#fff;background:#22223a;}
.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:#22223a;border:1px solid #34345a;color:#c4cafc;font-size:11px;}
.chip b{cursor:pointer;color:#7a7ab0;font-weight:400;}.chip b:hover{color:#f87171;}
.chip.link{cursor:pointer;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip.link:hover{border-color:var(--accent);}
.tagin{height:26px;background:#0f0f18;border:1px solid #26263a;border-radius:7px;color:#e6e6f0;font-size:11px;padding:0 9px;outline:none;width:118px;}
.tagin:focus{border-color:var(--accent);}
.pf-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c4c4dc;}
.pf-cb{width:16px;height:16px;accent-color:#4ade80;cursor:pointer;}
.pf-time{font-size:11px;color:var(--pmut);font-family:monospace;}
.pbtn{height:28px;padding:0 11px;border-radius:8px;border:1px dashed #3a3a6a;background:transparent;color:var(--accent);font-size:11.5px;cursor:pointer;align-self:flex-start;}
.pbtn:hover{border-color:var(--accent);background:#1a1a2a;}
.panel-f{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid #20202e;}
.pdel{margin-left:auto;height:27px;padding:0 12px;border-radius:7px;border:1px solid #3a2222;background:#1c1010;color:#f87171;font-size:11px;cursor:pointer;}
.pdel:hover{background:#2a1414;}
.psave{font-size:10.5px;color:#4ade80;font-family:monospace;}
.sp-f{height:26px;padding:0 11px;border-radius:999px;border:1px solid #26263a;background:#0f0f18;color:#9898b4;font-size:11px;cursor:pointer;}
.sp-f.on{border-color:var(--accent);color:#fff;background:#22223a;}
.sr{padding:9px 11px;border-radius:9px;cursor:pointer;display:flex;gap:9px;align-items:flex-start;}
.sr:hover{background:#1c1c2a;}
.sr-b{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;flex-shrink:0;margin-top:1px;letter-spacing:.04em;}
.sr-main{flex:1;min-width:0;}
.sr-name{font-size:13px;color:#e6e6f0;font-weight:600;word-break:break-word;}
.sr-name.done{text-decoration:line-through;color:#7a7a92;}
.sr-meta{font-size:10.5px;color:var(--pmut);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;}
.sr-empty{padding:34px;text-align:center;color:#56566e;font-size:13px;}
#tagbar{position:fixed;z-index:8800;background:#161622;border:1px solid var(--pborder);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.55);display:none;padding:5px;gap:4px;}
#tagbar.show{display:flex;}
#tagbar button{height:28px;padding:0 10px;border-radius:7px;border:1px solid #26263a;background:#0f0f18;color:#c4c4dc;font-size:11.5px;cursor:pointer;display:flex;align-items:center;gap:6px;}
#tagbar button:hover{filter:brightness(1.3);}
#tagbar .tb-dot{width:8px;height:8px;border-radius:50%;}
#tagbar{flex-wrap:wrap;max-width:min(460px,94vw);}
#tagbar .tb-plus{width:28px;padding:0;justify-content:center;border-style:dashed;color:#9898b4;font-size:15px;}
.seg.wrap{flex-wrap:wrap;}.seg.wrap button{flex:0 0 auto;padding:0 10px;}
.pf-ta{height:auto;min-height:32px;padding:7px 11px;resize:vertical;line-height:1.4;}
.mark-flash{animation:mflash 1.1s ease;border-radius:3px;}
@keyframes mflash{0%,100%{background:transparent;}30%{background:rgba(129,140,248,.45);}}

/* projects + floating search */
.panel.wide{width:540px;}
.proj-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;}
.proj-row:hover{background:#1c1c2a;}
.proj-row.cur{background:#22223a;}
.proj-row .pr-name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.proj-row .pr-cnt{font-size:10px;color:var(--pmut);font-family:monospace;}
.proj-row .pr-tool{width:23px;height:23px;border:none;background:transparent;color:#7a7a92;border-radius:6px;cursor:pointer;font-size:12px;}
.proj-row .pr-tool:hover{background:#2a2a3a;color:#e6e6f0;}
.proj-row .pr-tool.armed{color:#f87171;background:#2a1414;}
.proj-new{display:flex;gap:6px;margin-top:6px;padding-top:9px;border-top:1px solid #20202e;}
.proj-new .pf-in{flex:1;}
.proj-new button{height:32px;width:36px;border-radius:8px;border:1px solid var(--accent);background:#22223a;color:#fff;font-size:17px;cursor:pointer;}
.sr-proj{color:var(--accent);}
.pk-list{display:flex;flex-direction:column;gap:2px;max-height:48vh;overflow:auto;}

/* type filter bar */
#filterbar{display:flex;gap:6px;align-items:center;}
.fchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid #26263a;background:#0f0f18;color:#9898b4;font-size:11.5px;cursor:pointer;white-space:nowrap;user-select:none;flex-shrink:0;transition:.1s;}
.fchip:hover{border-color:#3a3a52;}
.fchip.on{color:#e6e6f0;background:#1c1c2a;border-color:#3a3a52;}
.fchip.off{opacity:.42;}
.fchip .fdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fchip .fcnt{font-size:10px;font-family:monospace;color:#7a7a92;background:#000;border-radius:999px;padding:1px 6px;min-width:18px;text-align:center;}
.fchip.on .fcnt{color:#c4c4dc;}

/* sidebar */
#side{position:fixed;left:0;top:0;bottom:0;width:250px;background:#0d0d14;border-right:1px solid #1f1f2e;z-index:8500;transform:translateX(-100%);transition:transform .18s;display:flex;flex-direction:column;box-shadow:6px 0 28px rgba(0,0,0,.5);}
#side.open{transform:none;}
#side-scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:8400;opacity:0;pointer-events:none;transition:opacity .18s;}
#side-scrim.open{opacity:1;pointer-events:auto;}
.side-top{display:flex;align-items:center;padding:12px 10px 8px 14px;}
.side-title{flex:1;font-weight:700;font-size:13px;color:#ede6d8;}
.side-search{display:flex;align-items:center;gap:7px;margin:0 12px 8px;padding:0 10px;height:34px;background:#0f0f18;border:1px solid #26263a;border-radius:9px;}
.side-search:focus-within{border-color:var(--accent);}
.side-search svg{flex-shrink:0;color:#6a6a85;}
.side-search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#e6e6f0;font-size:13px;font-family:inherit;}
#side-results{overflow-y:auto;max-height:40vh;padding:0 6px;flex-shrink:0;}
#side-results:empty{display:none;}
.side-sech{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#5f5f78;padding:12px 14px 6px;}
#filterbar{display:flex;flex-direction:column;gap:4px;padding:0 8px 14px;overflow-y:auto;}
.fchip{display:flex;align-items:center;gap:9px;height:36px;padding:0 11px;border-radius:9px;border:1px solid #23232f;background:#13131c;color:#9898b4;font-size:12.5px;cursor:pointer;white-space:nowrap;}
.fchip:hover{border-color:#3a3a52;color:#c4c4dc;}
.fchip.on{color:#e6e6f0;background:#1c1c2a;border-color:#3a3a52;}
.fchip.off{opacity:.45;}
.fchip .flabel{flex:1;}
.fchip .fdot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.fchip .fcnt{font-size:10px;font-family:monospace;color:#7a7a92;background:#000;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;}
.fchip.on .fcnt{color:#c4c4dc;}
.fchip .fcaret{opacity:.5;font-size:13px;padding:0 2px;}
.fchip:hover .fcaret{opacity:1;color:var(--accent);}
#side-fly{position:fixed;z-index:8800;width:244px;max-height:52vh;overflow:auto;background:#14141f;border:1px solid #2e2e5a;border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.6);display:none;padding:6px;}
#side-fly.open{display:block;}
@media (max-width:560px){#side{width:84vw;}}

.ink-color-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 8px;border-radius:8px;border:1px solid #2a2a3a;background:#15151f;color:#9a9ab0;cursor:pointer;}
.ink-color-btn:hover{border-color:#3a3a52;color:#cfcfe2;}
.ink-color-btn .icb-sw{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.28);}
.ink-color-btn .icb-cv{font-size:9px;}

#gut-find{width:26px;height:26px;border-radius:50%;border:1px solid #2c2c40;background:#13131c;color:#9898b4;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#gut-find:hover{background:#1c1c2a;color:var(--accent);}
.ink-tool-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;width:32px;border-radius:8px;border:1px solid #2a2a3a;background:#15151f;color:#9a9ab0;cursor:pointer;}
.ink-tool-btn:hover{border-color:#3a3a52;color:#cfcfe2;}
.ink-tool-btn.on{background:#1c1c2a;border-color:var(--accent);color:var(--accent);}

.pok{height:27px;padding:0 15px;border-radius:7px;border:1px solid #3a3a52;background:#1c1c2a;color:#dfe0ee;font-size:11px;cursor:pointer;font-family:inherit;}
.pok:hover{background:#26263a;}
/* highlight factory */
.panel.factory{width:450px;height:78vh;min-width:320px;min-height:240px;max-height:96vh;max-width:96vw;resize:both;}
.factory .panel-b{max-height:none;flex:1;min-height:0;gap:9px;}
.fx-prof{display:flex;align-items:center;gap:6px;}
.fx-prof .pf-l{margin-right:2px;}
.fx-sel{height:28px;background:#0f0f18;border:1px solid #26263a;border-radius:8px;color:#e6e6f0;font-size:12px;padding:0 6px;font-family:inherit;max-width:190px;flex:1;min-width:0;}
.fx-ib{width:28px;height:28px;border-radius:8px;border:1px solid #26263a;background:#0f0f18;color:#9898b4;font-size:13px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.fx-ib:hover{color:#e6e6f0;border-color:#3a3a52;}.fx-ib.armed{color:#f87171;border-color:#5a2b2b;font-size:11px;}
.fx-hint{font-size:11px;color:#6a6a86;line-height:1.45;}
.fx-sec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5a5a72;margin-top:6px;}
.fx-list{display:flex;flex-direction:column;gap:4px;}
.fx-empty{font-size:12px;color:#56566e;padding:8px 2px;}
.fx-item{border:1px solid #20202e;border-radius:10px;background:#11111a;}
.fx-item.open{border-color:#34345a;background:#13131f;}
.fx-item.dragging{opacity:.55;border-style:dashed;}
.fx-row{display:flex;align-items:center;gap:9px;padding:6px 8px;cursor:pointer;min-height:40px;}
.fx-row.hidden .fx-nm,.fx-row.lib .fx-nm{color:#8a8aa4;}
.fx-grip{width:14px;color:#4a4a62;cursor:grab;touch-action:none;font-size:11px;letter-spacing:-3px;user-select:none;}
.fx-grip.off{cursor:default;}
.fx-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.fx-nm{flex:1;min-width:0;font-size:13px;font-weight:600;color:#e6e6f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fx-sample{font-size:12px;color:#c4c4dc;padding:0 3px;}
.fx-cnt{font-size:10px;font-family:monospace;color:#7a7a92;background:#000;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;}
.fx-ed{padding:4px 12px 12px 30px;display:flex;flex-direction:column;gap:11px;border-top:1px solid #1d1d2c;}
.fx-sw{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.fx-swb{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;}
.fx-swb.on{border-color:#fff;}
.fx-ci{width:26px;height:24px;border:1px solid #3a3a4a;border-radius:6px;background:#111;cursor:pointer;padding:1px;}
.fx-fx{display:flex;flex-wrap:wrap;gap:5px;}
.fx-prevwrap{font-size:11px;color:#6a6a86;margin-top:4px;}
.fx-prev{display:inline;font-size:14px;color:#e0e0e0;}
.fx-fields{display:flex;flex-direction:column;gap:5px;}
.fx-frow{display:flex;gap:6px;}.fx-frow .pf-in{flex:1;height:28px;font-size:12px;}
.fx-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;}
.fx-primary{height:30px;padding:0 13px;border-radius:8px;border:1px solid #5a4a2b;background:#241c0d;color:#fbbf24;font-size:12px;cursor:pointer;}
.fx-link{background:none;border:none;color:#8a8aa4;font-size:11.5px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px;}
.fx-link:hover{color:#e6e6f0;}.fx-link.danger:hover,.fx-link.armed{color:#f87171;}
.fx-add{margin-top:2px;}
@media (max-width:560px){.panel.factory{width:96vw;left:2vw!important;}}
/* explorer */
#explorer{position:fixed;inset:0;z-index:8900;background:rgba(5,5,10,.62);display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;}
.ex-card{width:min(980px,100%);max-height:92vh;background:var(--panel);border:1px solid var(--pborder);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;color:#e6e6f0;}
.ex-head{display:flex;align-items:center;gap:9px;padding:11px 12px;border-bottom:1px solid #20202e;}
.ex-top{padding:12px 14px 8px;display:flex;flex-direction:column;gap:9px;border-bottom:1px solid #1d1d2c;}
.ex-q{height:38px;font-size:14px;}
.ex-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.ex-row:empty{display:none;}
.ex-seg{display:flex;gap:3px;padding:2px;border:1px solid #20202e;border-radius:999px;}
.ex-seg .sp-f{border-color:transparent;}
.ex-sel{height:26px;font-size:11px;max-width:150px;flex:0 0 auto;border-radius:999px;}
.ex-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;border:1px solid #26263a;background:#0f0f18;color:#b4b4cc;font-size:12px;cursor:pointer;}
.ex-chip.on{border-color:var(--accent);background:#22223a;color:#fff;}
.ex-chip .fdot,.ex-gh .fdot,.ex-links .fdot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.ex-chip .fcnt,.ex-gh .fcnt{font-size:10px;font-family:monospace;color:#7a7a92;background:#000;border-radius:999px;padding:1px 6px;}
.ex-tag{cursor:pointer;}.ex-tag.on{border-color:var(--accent);color:#fff;}
.ex-sum{font-size:11px;color:var(--pmut);}
.ex-res{overflow-y:auto;padding:6px 14px 16px;}
.ex-gh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#c4c4dc;margin:14px 2px 8px;}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px;}
.ex-item{border:1px solid #20202e;border-left:3px solid var(--c);border-radius:10px;background:#11111a;padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0;}
.ex-item:hover{background:#171724;border-color:#2e2e46;border-left-color:var(--c);}
.ex-it-top{display:flex;align-items:center;gap:7px;}
.ex-when{margin-left:auto;font-size:10px;color:#6a6a86;white-space:nowrap;}
.ex-st{font-size:10px;color:#fbbf24;}.ex-st.done{color:#4ade80;}
.ex-snip{font-size:13.5px;line-height:1.45;color:#e6e6f0;word-break:break-word;}
.ex-snip.done{text-decoration:line-through;color:#7a7a92;}
.ex-name{font-size:11.5px;color:#9898b4;}
.ex-item mark{background:rgba(251,191,36,.28);color:inherit;border-radius:2px;}
.ex-fields{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:12px;}
.ex-fields dt{color:var(--pmut);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding-top:1px;}
.ex-fields dd{margin:0;color:#d4d4e8;word-break:break-word;}
.ex-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;color:var(--pmut);}.ex-meta:empty{display:none;}
.ex-mtag{color:#a5b4fc;}
.ex-links{display:flex;flex-wrap:wrap;gap:4px;}.ex-links .chip{font-size:10.5px;}
@media (max-width:560px){#explorer{padding:0;}.ex-card{max-height:100vh;height:100%;border-radius:0;}.ex-grid{grid-template-columns:1fr;}}
/* timeline */
#timeline{position:fixed;left:6vw;top:7vh;width:88vw;height:84vh;min-width:340px;min-height:300px;max-width:100vw;max-height:100vh;resize:both;overflow:hidden;z-index:8950;background:#0b0b10;display:flex;flex-direction:column;border:1px solid var(--pborder);border-radius:13px;box-shadow:0 24px 70px rgba(0,0,0,.6);}
.tl-bar{cursor:grab;user-select:none;display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #1f1f2e;background:#0e0e15;flex-wrap:wrap;}
.tl-title{display:flex;align-items:center;gap:8px;font-size:13px;color:#e6e6f0;flex:1;min-width:0;}
.tl-proj{color:#8a8aa4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tl-badge{font-size:10.5px;color:#fbbf24;border:1px solid #5a4a2b;background:#1a1510;border-radius:999px;padding:2px 9px;white-space:nowrap;}
#timeline.is-now .tl-badge{visibility:hidden;}
.tl-actions{display:flex;align-items:center;gap:12px;}
.tl-close{height:30px;padding:0 13px;border-radius:8px;border:1px solid #5a4a2b;background:#241c0d;color:#fbbf24;font-size:12px;cursor:pointer;}
.tl-stage{flex:1;min-height:0;position:relative;background:#111;}
.tl-wrap{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;}
.tl-pad{position:relative;min-height:100%;}
.tl-ed{cursor:default;caret-color:transparent;user-select:text;}
.tl-ink{position:absolute;inset:0;pointer-events:none;}
.tl-empty{position:absolute;left:50%;top:38%;transform:translateX(-50%);color:#56566e;font-size:14px;text-align:center;pointer-events:none;max-width:80%;}
.tl-dock{border-top:1px solid #1f1f2e;background:#0e0e15;padding:10px 16px 12px;display:flex;flex-direction:column;gap:8px;}
.tl-when{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-height:24px;}
.tl-big{font-size:18px;font-weight:700;color:#f3ead7;font-variant-numeric:tabular-nums;}
.tl-what{font-size:12.5px;color:#9898b4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.tl-sl{display:flex;align-items:center;gap:10px;}
.tl-step{width:32px;height:32px;border-radius:50%;border:1px solid #26263a;background:#13131c;color:#c4c4dc;font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;}
.tl-step:hover{border-color:#5a4a2b;color:#fbbf24;}
.tl-track{position:relative;flex:1;height:38px;border-radius:10px;background:#15151f;border:1px solid #23232f;cursor:pointer;touch-action:none;}
.tl-dens{position:absolute;inset:0;width:100%;height:100%;border-radius:10px;}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(251,191,36,.02),rgba(251,191,36,.10));border-radius:10px 0 0 10px;pointer-events:none;}
.tl-thumb{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;border-radius:3px;background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.18),0 0 18px rgba(251,191,36,.45);pointer-events:none;}
.tl-ends{display:flex;align-items:center;gap:10px;font-size:11px;color:#6a6a86;}
.tl-rng{display:flex;gap:4px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
@media (max-width:560px){.tl-badge{display:none;}.tl-big{font-size:15px;}}
/* handwriting lab */
.hw-inkbtn{width:auto!important;padding:0 9px!important;gap:4px;font-size:12px;display:flex;align-items:center;}
#hwlab{position:fixed;inset:0;z-index:8960;background:#0b0b10;display:flex;flex-direction:column;color:#e6e6f0;}
.hw-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid #1f1f2e;background:#0e0e15;flex-wrap:wrap;}
.hw-ic{font-size:16px;}.hw-sub{font-size:11px;color:#7a7a92;}
.hw-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;}
.hw-lang{max-width:130px;flex:0 0 auto;}
.hw-body{flex:1;min-height:0;overflow:auto;padding:16px;}
.hw-h{font-size:12px;font-weight:700;color:#c4c4dc;margin-bottom:8px;}.hw-h.small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#7a7a92;margin:14px 0 6px;}
.hw-hint{font-size:11px;color:#6a6a86;line-height:1.45;}
.hw-note{border:1px solid #5a4a2b;background:#1a1510;color:#e8d9b5;border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:14px;}
.hw-p{font-size:13px;color:#b4b4cc;line-height:1.55;max-width:680px;}
.hw-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.hw-grid3{display:grid;grid-template-columns:minmax(260px,340px) minmax(240px,1fr) minmax(220px,300px);gap:18px;align-items:start;}
.hw-col{background:#11111a;border:1px solid #1d1d2c;border-radius:12px;padding:12px;min-width:0;}
.hw-pad{display:block;width:100%;background:#15141d;border:1px solid #2a2a3a;border-radius:10px;touch-action:none;cursor:crosshair;}
.hw-pad.char{aspect-ratio:1/1;}.hw-pad.char.big{max-width:420px;margin:0 auto;}
.hw-pad.word{height:220px;}
.hw-norm{width:100%;aspect-ratio:1/1;display:block;background:#0f0f16;border-radius:10px;}
.hw-legend{font-size:10.5px;color:#6a6a86;margin:6px 0;}
.hw-stats table{width:100%;font-size:11.5px;border-collapse:collapse;}.hw-stats td{padding:3px 0;border-bottom:1px solid #1a1a26;}.hw-stats td:first-child{color:#7a7a92;}.hw-stats td:last-child{text-align:right;font-family:monospace;color:#d4d4e8;}
.hw-save .pf-in{width:46px;text-align:center;font-size:18px;height:34px;padding:0;}
.hw-best{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-height:52px;}
.hw-bigch{font-size:44px;font-weight:700;color:#f3ead7;line-height:1;min-width:34px;text-align:center;}
.hw-tier{font-size:11px;border-radius:999px;padding:3px 9px;border:1px solid;}
.hw-tier.high{color:#4ade80;border-color:#22543d;}.hw-tier.mid{color:#fbbf24;border-color:#5a4a2b;}.hw-tier.low{color:#f87171;border-color:#7f1d1d;}
.hw-m{display:grid;grid-template-columns:24px 1fr 38px 26px;align-items:center;gap:8px;font-size:12px;margin:3px 0;}
.hw-mch{font-size:16px;font-weight:700;text-align:center;}.hw-mbar{height:8px;background:#1b1b28;border-radius:5px;overflow:hidden;}.hw-mbar i{display:block;height:100%;background:linear-gradient(90deg,#818cf8,#fbbf24);}
.hw-mpc{font-family:monospace;color:#c4c4dc;text-align:right;}.hw-mn{font-size:10px;color:#6a6a86;}
.hw-near{width:90px;height:90px;display:block;background:#0f0f16;border-radius:8px;}
.hw-cal-setup{max-width:760px;}
.hw-sets{display:flex;flex-direction:column;gap:6px;margin:12px 0;}
.hw-set{display:flex;align-items:center;gap:8px;background:#11111a;border:1px solid #1d1d2c;border-radius:10px;padding:9px 11px;font-size:13px;flex-wrap:wrap;}
.hw-chars{color:#7a7a92;font-family:monospace;font-size:11.5px;flex:1;min-width:200px;}.hw-have{font-size:11px;color:#4ade80;}
.hw-cal{max-width:900px;margin:0 auto;}
.hw-cal-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}.hw-cal-title{font-weight:700;font-size:13px;}.hw-cal-count{font-family:monospace;font-size:12px;color:#7a7a92;}
.hw-prog{flex:1;height:5px;background:#1b1b28;border-radius:5px;overflow:hidden;}.hw-prog i{display:block;height:100%;background:#fbbf24;transition:width .2s;}
.hw-cal-main{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;}
.hw-target{text-align:center;}.hw-tch{font-size:96px;font-weight:700;color:#f3ead7;line-height:1.1;font-family:Georgia,serif;}
.hw-tp{font-size:13px;color:#c4c4dc;line-height:1.5;}.hw-tprev{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:12px;}
.hw-mini{width:40px;height:40px;background:#15141d;border-radius:6px;}
.hw-word{max-width:1100px;}
.hw-badge{display:inline-block;font-size:11px;color:#fbbf24;border:1px solid #5a4a2b;background:#1a1510;border-radius:999px;padding:2px 10px;margin-bottom:8px;}
.hw-result{margin-top:14px;display:flex;flex-direction:column;gap:8px;max-width:760px;}
.hw-out{display:flex;align-items:center;gap:10px;}.hw-ms{font-size:10.5px;color:#6a6a86;}
.hw-text{height:44px;font-size:20px;}
.hw-alts{display:flex;flex-direction:column;gap:5px;}.hw-altg{display:flex;flex-wrap:wrap;gap:5px;}
.hw-pp{font-size:9.5px;color:#7a7a92;margin-left:5px;font-family:monospace;}.hw-nd{color:#f87171;font-size:10px;}
.hw-model{max-width:1000px;}.hw-modeltop{justify-content:space-between;align-items:flex-start;margin-top:0;}
.hw-check{margin:14px 0;}.hw-checkres{background:#11111a;border:1px solid #1d1d2c;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.hw-big{font-size:24px;font-weight:700;color:#f3ead7;}
.hw-pairs{display:flex;flex-wrap:wrap;gap:6px;}.hw-pair{font-family:monospace;font-size:14px;padding:4px 10px;border-radius:8px;border:1px solid #5a4a2b;color:#fbbf24;}.hw-pair.bad{border-color:#7f1d1d;color:#f87171;}
.hw-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;}
.hw-cell{position:relative;height:66px;border:1px solid #1d1d2c;background:#11111a;border-radius:9px;cursor:pointer;}.hw-cell:hover{border-color:#3a3a52;}.hw-cell.empty{opacity:.5;}
.hw-cell canvas{position:absolute;inset:14px 6px 4px 18px;width:calc(100% - 24px);height:calc(100% - 18px);}
.hw-cch{position:absolute;left:6px;top:3px;font-weight:700;font-size:13px;color:#c4c4dc;}.hw-cn{position:absolute;right:6px;top:4px;font-size:10px;font-family:monospace;color:#7a7a92;}
#hw-charpop{margin-top:12px;background:#13131f;border:1px solid #34345a;border-radius:12px;padding:10px 12px;}
#hw-charpop .hw-row{margin-top:0;}#hw-charpop .panel-x{margin-left:auto;}
.hw-samps{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}.hw-samp{position:relative;width:78px;height:92px;background:#0f0f16;border-radius:8px;}
.hw-samp canvas{width:78px;height:74px;display:block;}.hw-samp span{font-size:9.5px;color:#6a6a86;padding-left:6px;}
.hw-samp button{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:1px solid #3a3a4a;background:#1c1c28;color:#c4c4dc;font-size:11px;cursor:pointer;line-height:1;}
@media (max-width:900px){.hw-grid3{grid-template-columns:1fr;}.hw-cal-main{grid-template-columns:1fr;}.hw-tch{font-size:64px;}.hw-sub{display:none;}}
/* highlight painting (class based so it never leaks into saved run formatting) */
.mk{border-radius:2px;}
.mk-bg{background:var(--mkbg);}
.mk-ul{border-bottom:2px solid var(--mk);}
.mk-b{font-weight:700;}
.mk-i{font-style:italic;}
.mk-s{text-decoration:line-through;text-decoration-color:var(--mk);}
.mk-tc{color:var(--mk)!important;}
/* hover text + text picker */
#hover-tip{position:fixed;z-index:9600;display:none;max-width:320px;background:#15151f;border:1px solid var(--pborder);border-left:3px solid var(--c,#818cf8);border-radius:9px;padding:8px 11px;box-shadow:0 10px 30px rgba(0,0,0,.55);font-size:13px;line-height:1.45;color:#e6e6f0;pointer-events:none;}
#hover-tip .ht-txt{white-space:pre-wrap;word-break:break-word;}#hover-tip .ht-src{font-size:10.5px;color:var(--pmut);margin-top:5px;}
.panel.tpick{width:520px;height:60vh;min-width:300px;min-height:240px;resize:both;}.tpick .panel-b{flex:1;min-height:0;max-height:none;}
.tp-page{flex:1;min-height:120px;overflow:auto;background:#111;border:1px solid #26263a;border-radius:8px;padding:10px 12px!important;cursor:text;user-select:text;}
/* pop-up editors */
html.mini #mini-btn,html.mini #brand .name{display:none;}
.panel.mini-win{width:min(620px,46vw);height:74vh;min-width:320px;min-height:260px;max-width:98vw;max-height:96vh;resize:both;z-index:8100;}
.mini-win iframe{flex:1;width:100%;border:0;background:#111;min-height:0;}
.mini-win .panel-h{padding:7px 10px;}
.panel.mini-menu{width:270px;z-index:9100;}.mini-list{display:flex;flex-direction:column;gap:3px;max-height:40vh;overflow:auto;}
.mini-pick{text-align:left;height:32px;padding:0 10px;border-radius:8px;border:1px solid #20202e;background:#11111a;color:#e6e6f0;font-size:12.5px;cursor:pointer;}.mini-pick:hover{border-color:#3a3a52;}.mini-pick:disabled{opacity:.4;cursor:default;}
/* folders */
#proj-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:12px;margin-bottom:4px;}
.pc-item{background:none;border:none;color:var(--accent);cursor:pointer;padding:2px 4px;border-radius:5px;font-size:12px;}.pc-item:hover{background:#1c1c2a;}.pc-item.cur{color:#e6e6f0;font-weight:700;cursor:default;}.pc-sep{color:#4a4a62;}
.pr-folder .pr-name{font-weight:600;}.pr-up{color:#8a8aa4;font-size:12px;}
.pr-move{max-width:150px;height:26px;font-size:11px;}
/* main menu + light mode */
#brand .mark{cursor:pointer;}#brand .mark:hover{border-color:#fbbf24;}
#main-menu{position:fixed;inset:0;z-index:9800;pointer-events:none;}
#main-menu .mm-scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .18s;}
#main-menu .mm-panel{position:absolute;left:0;top:0;bottom:0;width:330px;max-width:90vw;background:var(--panel);border-right:1px solid var(--pborder);box-shadow:6px 0 28px rgba(0,0,0,.5);transform:translateX(-100%);transition:transform .18s;display:flex;flex-direction:column;color:#e6e6f0;}
#main-menu.open{pointer-events:auto;}#main-menu.open .mm-scrim{opacity:1;}#main-menu.open .mm-panel{transform:none;}
.mm-items{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:4px;}.mm-bottom{padding:10px;border-top:1px solid #20202e;}
.mm-item{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 12px;border-radius:9px;border:1px solid #20202e;background:#11111a;color:#e6e6f0;font-size:13px;cursor:pointer;font-family:inherit;text-align:left;}.mm-item:hover{border-color:#3a3a52;}
html.light{filter:invert(1) hue-rotate(180deg);background:#fff;}
html.light img,html.light .fx-swb,html.light .cp-sw,html.light .cp-fav,html.light input[type=color]{filter:invert(1) hue-rotate(180deg);}
/* page indicator */
#page-ind{font-size:11px;color:#8a8aa4;font-family:monospace;white-space:nowrap;padding:0 6px;}
/* projects panel: resizable, folder button on the breadcrumb row, drag and drop */
.panel.proj-panel{width:340px;height:70vh;min-width:280px;min-height:280px;max-height:96vh;max-width:96vw;resize:both;}
.proj-panel .panel-b{flex:1;min-height:0;max-height:none;}
#proj-list{display:flex;flex-direction:column;gap:2px;flex:1;min-height:80px;overflow:auto;}
.pc-new{margin-left:auto;height:26px;padding:0 8px;border-radius:7px;border:1px solid #26263a;background:#0f0f18;color:#c4c4dc;font-size:12px;cursor:pointer;}.pc-new:hover{border-color:var(--accent);}
.proj-row.dragging{opacity:.45;}.proj-row.drop,.pc-item.drop{outline:2px dashed var(--accent);outline-offset:-2px;background:#1c1c2a;}
/* classroom */
.panel.cls-panel{width:400px;max-width:96vw;z-index:9050;}
.cls-code-big{font-family:monospace;font-size:26px;letter-spacing:.14em;color:#f3ead7;user-select:all;}
.cls-status{font-size:12.5px;color:#c4c4dc;display:flex;align-items:center;gap:6px;}
.cls-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5a5a72;flex-shrink:0;}.cls-dot.on{background:#4ade80;box-shadow:0 0 6px #4ade80;}.cls-dot.retry{background:transparent;border:2px solid #fbbf24;width:7px;height:7px;}.cls-dot.off{background:transparent;border:2px solid #5a5a72;width:7px;height:7px;}
.cls-privacy{border-top:1px solid #20202e;padding-top:8px;}
.cls-view .panel-h{gap:8px;}.cls-ro{font-size:10.5px;color:#fbbf24;border:1px solid #5a4a2b;border-radius:999px;padding:1px 8px;}.cls-follow{font-size:11px;color:#9898b4;display:flex;align-items:center;gap:4px;margin-left:auto;}
.cls-scroll{flex:1;min-height:0;overflow:auto;background:#111;position:relative;}
.cls-page{position:relative;transform-origin:0 0;}.cls-ed{cursor:default;caret-color:transparent;min-height:0;padding-bottom:40px;}.cls-ink{position:absolute;left:0;top:0;pointer-events:none;}
.cls-wait{padding:40px 20px;text-align:center;color:#56566e;font-size:13px;}
.cls-roster{display:flex;flex-direction:column;gap:2px;max-height:30vh;overflow:auto;border:1px solid #20202e;border-radius:9px;padding:4px;}
.cls-person{display:flex;align-items:center;gap:8px;padding:4px 6px;font-size:12.5px;}.cls-pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cls-kick{width:auto!important;padding:0 6px;}.cls-kick.armed{color:#f87171;background:#2a1414;}
.panel.cls-inbox-panel{width:420px;height:50vh;min-width:300px;min-height:220px;resize:both;z-index:9050;}.cls-inbox-panel .panel-b{flex:1;min-height:0;max-height:none;}
.inbox-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:4px;}.inbox-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid #20202e;border-radius:9px;}
.inbox-main{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px;}.inbox-file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c4c4dc;}
/* classroom: direct connection notice, teacher view docked as the right half, minimised pill */
.cls-modal{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;}
.cls-modal .panel.cls-notice{position:relative;width:min(440px,100%);}
.cls-notice .panel-h{cursor:default;}.cls-notice .panel-b{padding:14px 16px 16px;}
.cls-notice p{font-size:13.5px;line-height:1.55;margin:0 0 10px;color:#d6d6e4;}.cls-notice b{color:#fbbf24;}
.cls-pill{position:fixed;left:14px;bottom:14px;z-index:9050;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--pborder);background:var(--panel);color:#e6e6f0;font-size:12.5px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45);}
.cls-pill:hover{border-color:#5a4a2b;}
/* project privacy lock + right-click menu */
.proj-row .pr-lock{width:26px;height:24px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:13px;opacity:.55;flex-shrink:0;}
.proj-row .pr-lock.open{opacity:1;}.proj-row .pr-lock:hover{background:#2a2a3a;opacity:1;}
.panel.ctx-menu{width:auto;min-width:190px;padding:5px;z-index:9700;border-radius:10px;}
.ctx-item{display:block;width:100%;text-align:left;border:none;background:transparent;color:#e6e6f0;font-size:13px;padding:7px 10px;border-radius:6px;cursor:pointer;}
.ctx-item:hover{background:#22223a;}.ctx-item.danger{color:#f87171;}.ctx-item.danger:hover{background:#2a1414;}
.ctx-sep{height:1px;background:#20202e;margin:4px 2px;}
/* Teaching Mode: PRIVATE (this window) and CLASS (the pane) side by side, exactly 50:50; swapping only moves them */
body.cls-split{width:50%;}
body.cls-split.cls-swap{margin-left:50%;}
.cls-strip{flex:0 0 30px;height:30px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#15151f;border-bottom:1px solid var(--pborder);font-size:12px;color:#9898b4;position:relative;}
.cls-strip>b{letter-spacing:.16em;font-size:12px;}
.cls-strip-private{display:none;}body.cls-split .cls-strip-private{display:flex;}
.cls-strip-private>b{color:#a5b4fc;}.cls-strip-class>b{color:#fbbf24;}
.cls-strip-hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cls-strip-btn{height:22px;padding:0 9px;border-radius:6px;border:1px solid var(--pborder);background:#1a1a26;color:#e6e6f0;font-size:12px;cursor:pointer;flex-shrink:0;}
.cls-strip-btn:hover{border-color:#5a4a2b;}
.cls-pane{position:fixed;top:0;bottom:0;left:50%;width:50%;z-index:8000;display:flex;flex-direction:column;background:#111;box-shadow:-1px 0 0 var(--pborder);}
body.cls-swap .cls-pane{left:0;box-shadow:1px 0 0 var(--pborder);}
.cls-body{flex:1;min-height:0;display:flex;flex-direction:column;}
.cls-teach .cls-body iframe{flex:1;width:100%;border:0;background:#111;}
.cls-menu{position:fixed;top:40px;left:6px;z-index:9700;display:none;flex-direction:column;width:380px;max-width:calc(100vw - 12px);max-height:calc(100vh - 50px);overflow:auto;background:var(--panel);border:1px solid var(--pborder);border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.6);color:#e6e6f0;}
.cls-menu .panel.cls-panel.docked{position:static;width:auto;max-width:none;box-shadow:none;border:0;border-radius:0;display:flex;}
.cls-panel.docked .panel-h{display:none;}
.cls-tools{flex:0 0 auto;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;align-content:center;gap:6px;padding:4px 10px;border-bottom:1px solid var(--pborder);flex-wrap:wrap;font-size:12px;}
.cls-tool{height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--pborder);background:#16161f;color:#c8c8dc;font-size:12px;cursor:pointer;}
.cls-tool.on{border-color:#7a5510;background:#231a08;color:#fbbf24;}
.cls-col{width:18px;height:18px;border-radius:50%;border:2px solid #16161f;box-shadow:0 0 0 1px var(--pborder);cursor:pointer;padding:0;}
.cls-mine{position:absolute;left:0;top:0;pointer-events:none;}
.cls-learn.drawing .cls-mine{pointer-events:auto;touch-action:none;cursor:crosshair;}
/* classroom panel: icon beside each step */
.cls-sec{padding:4px 0 10px;border-bottom:1px solid #1d1d2a;}
.cls-ic-row{display:flex;align-items:flex-start;gap:12px;margin-top:4px;}
.cls-ic{width:34px;height:34px;flex-shrink:0;color:#fbbf24;padding:6px;border-radius:10px;background:#1c1810;border:1px solid #3a2f18;}
.cls-ic-row>div{min-width:0;}
.cls-auth{font-size:13px;}
/* viewing modes */
.cls-pane.cls-full{left:0!important;width:100%;box-shadow:none;}
body:not(.cls-split) .cls-swap-btn{display:none;}
body:not(.cls-default) .cls-priv-btn,.cls-teach .cls-priv-btn{display:none;}
.cls-strip-tabs{display:flex;min-width:0;max-width:45%;}
#class-chip{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;margin-left:6px;border-radius:999px;border:1px solid #2c5c3a;background:#122318;color:#7bd88f;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;}
#class-chip:hover{border-color:#4ade80;}
.mini-win.cls-private{border-color:#5a2b2b;}
.mini-win.cls-private .panel-h{background:linear-gradient(90deg,#2a1414,transparent 70%);}
.mini-priv{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#f87171;border:1px solid #5a2b2b;border-radius:999px;padding:1px 8px;white-space:nowrap;}
.cls-dot.off{background:#f87171;box-shadow:0 0 6px #f87171;}
.mini-priv .cls-dot,.mt-tab .cls-dot{width:7px;height:7px;}
/* pop-up editor tabs: sideways-scrolling strip after the timeline button */
#mini-tabs{display:flex;align-items:center;gap:2px;min-width:0;max-width:34vw;margin-left:4px;}
#mini-tabs .mt-track{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0;}
#mini-tabs .mt-track::-webkit-scrollbar{display:none;}
#mini-tabs .mt-arrow{display:none;width:20px;height:26px;border:none;background:transparent;color:#9898b4;cursor:pointer;font-size:16px;flex-shrink:0;}
#mini-tabs.over .mt-arrow{display:block;}
.mt-tab{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--pborder);background:#16161f;color:#c8c8dc;font-size:12px;cursor:pointer;white-space:nowrap;flex-shrink:0;max-width:180px;}
.mt-tab .mt-name{overflow:hidden;text-overflow:ellipsis;}
.mt-tab.priv{border-color:#5a2b2b;color:#fca5a5;}.mt-tab.min{opacity:.6;font-style:italic;}
.mt-tab:hover{border-color:#5a4a2b;}
/* mode chooser */
.cls-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 10px;}
.cls-mode{display:flex;flex-direction:column;gap:5px;text-align:left;padding:10px;border-radius:12px;border:2px solid var(--pborder);background:#12121a;color:#e6e6f0;cursor:pointer;}
.cls-mode.sel{border-color:#fbbf24;background:#1c1810;}.cls-mode b{font-size:14px;}.cls-mode span{font-size:12px;color:#9898b4;line-height:1.4;}
.cls-mode-pic{position:relative;height:110px;border-radius:8px;background:#0c0c12;border:1px solid #20202e;overflow:hidden;display:flex;}
.cm-green,.cm-red{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.12em;color:#fff;}
.cm-green small,.cm-red small{font-weight:600;letter-spacing:.04em;font-size:10px;opacity:.85;}
.cm-green{background:#15803d;}.cm-red{background:#b91c1c;}
.cm-big{position:absolute;inset:6px;border-radius:6px;}
.cm-pop{position:absolute;right:12px;bottom:12px;width:42%;height:42%;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.6);border:1px solid #fca5a5;}
.cm-half{flex:1;margin:6px 3px;border-radius:6px;}.cm-half:first-child{margin-left:6px;}.cm-half:last-child{margin-right:6px;}
.cls-vs{display:flex;align-items:center;gap:6px;font-size:12px;color:#9898b4;margin:4px 0;}
.cm-big{justify-content:flex-start;align-items:flex-start;padding:12px 14px;}

/* backup status chip (top bar) */
.bk-chip{height:24px;padding:0 10px;border-radius:999px;border:1px solid #2a2a3a;background:#121219;color:#9a9ab4;font-size:11px;cursor:pointer;margin-right:8px;white-space:nowrap;}
.bk-chip.ok{color:#6fbf8a;border-color:#244232;}.bk-chip.warn{color:#e0b453;border-color:#4a3c1c;}.bk-chip.bad{color:#f08a8a;border-color:#4d2626;}
.bk-chip:hover{background:#1a1a24;}html.mini .bk-chip{display:none;}
.ins-btn{width:auto!important;padding:0 7px;display:flex;align-items:center;}
.ins-pop{min-width:220px;}
.ink-tool-btn.ink-wide{width:auto;padding:0 9px;gap:4px;white-space:nowrap;}

/* free pictures (pics.js): above the text, below the ink */
#pics{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:2;}
.pic{position:absolute;pointer-events:auto;cursor:default;user-select:none;}
.pic img{display:block;width:100%;height:100%;-webkit-user-drag:none;}
.pic.on{outline:2px solid #4caf50;outline-offset:1px;}
.pic-h{position:absolute;width:16px;height:16px;border-radius:4px;background:#4caf50;border:2px solid #0e0e15;display:none;z-index:1;}
.pic-h.tl{left:-8px;top:-8px;cursor:nwse-resize;}.pic-h.br{right:-8px;bottom:-8px;cursor:nwse-resize;}.pic-h.tr{right:-8px;top:-8px;cursor:nesw-resize;}.pic-h.bl{left:-8px;bottom:-8px;cursor:nesw-resize;}
.pic.on .pic-h{display:block;}
.pic-menu{position:fixed;z-index:70;display:none;gap:4px;padding:3px;border:1px solid #3a5a3a;border-radius:8px;background:#161e16;box-shadow:0 6px 18px rgba(0,0,0,.45);}
.pic-menu button{height:24px;padding:0 9px;border-radius:6px;border:1px solid #2b3b2b;background:#0f160f;color:#9fd29f;font-size:11px;cursor:pointer;}
.pic-menu button:hover{border-color:#4caf50;color:#c9f0c9;}.pic-menu .pm-del{color:#f0a0a0;}
body.pic-dragging,body.pic-dragging *{cursor:grabbing!important;}
body.pic-through #pics,body.pic-through #pics *{pointer-events:none!important;}
.cls-pics{position:absolute;left:0;top:0;}

/* picture menu (in-line pictures) */
.img-resize-group .ip-ic{display:flex;align-items:center;color:#7dba7d;}
.img-resize-group input[type="range"]{width:110px;}
.img-resize-group .resize-val{font-size:12px;}
.ip-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:7px;border:1px solid #2b3b2b;background:#0f160f;color:#9fd29f;font-size:12px;cursor:pointer;}
.ip-btn:hover{border-color:#4caf50;color:#c9f0c9;}
.ip-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#161e16;border:1px solid #3a5a3a;border-radius:9px;padding:4px;box-shadow:0 6px 18px rgba(0,0,0,.45);}
.ip-menu.open{display:block;}
.ip-row{display:block;width:100%;text-align:left;white-space:nowrap;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:#c9f0c9;font-size:12px;cursor:pointer;}
.ip-row:hover{background:#1f2c1f;}
.pic-menu{padding:4px;gap:6px;}.pic-menu button{height:28px;padding:0 11px;font-size:12px;}

/* paragraph styles: headings and lists (editor.js) */
.line.hd{font-weight:bold;}.line.h1{margin-top:.35em;}.line.h2,.line.h3{margin-top:.2em;}
.line.li{position:relative;padding-left:calc(1.75em + var(--lv,0) * 1.5em);}
.line.li::before{position:absolute;left:calc(var(--lv,0) * 1.5em);width:1.3em;text-align:right;color:inherit;opacity:.85;user-select:none;pointer-events:none;}
.line.li-ul::before{content:"\2022";}.line.li-ul[data-lv="1"]::before,.line.li-ul[data-lv="3"]::before{content:"\25E6";}
.line.li-ol::before{content:attr(data-n) ".";font-variant-numeric:tabular-nums;}
.ps-sel{height:26px;background:#0f0f18;border:1px solid #26263a;border-radius:6px;color:#c8c8dc;font-size:11.5px;padding:0 4px;max-width:104px;}
.lnk{color:#7aa7ff;text-decoration:underline;text-decoration-color:rgba(122,167,255,.5);text-underline-offset:2px;}

/* page backgrounds (behind the text; lines follow the 15px text's line height) */
#pagebg,.cls-bg{position:absolute;top:0;bottom:0;z-index:-1;pointer-events:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.bg-lined{background:repeating-linear-gradient(to bottom,transparent 0,transparent 25.25px,rgba(170,170,210,.16) 25.25px,rgba(170,170,210,.16) 26.25px) 0 16px/100% 26.25px;}
.bg-grid{background:linear-gradient(to right,rgba(170,170,210,.11) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(to bottom,rgba(170,170,210,.11) 1px,transparent 1px) 0 0/24px 24px;}
.bg-dots{background:radial-gradient(circle,rgba(170,170,210,.28) 1.2px,transparent 1.6px) 0 0/24px 24px;}
.mm-bgrow{flex-wrap:wrap;gap:8px;cursor:default;}.mm-bgs{display:flex;gap:4px;}
.mm-bg{height:26px;padding:0 9px;border-radius:6px;border:1px solid #2a2a3a;background:#15151f;color:#b8b8cc;font-size:11.5px;cursor:pointer;}
.mm-bg.on{border-color:#5a4a2b;color:#fbbf24;background:#1f1a10;}

/* print / save as PDF: just the page (see beforeprint in app.js) */
#print-ink{position:absolute;left:0;top:0;z-index:3;pointer-events:none;display:none;}
@media print{
  html,body{height:auto!important;overflow:visible!important;}
  body{display:block!important;}
  #bar1,#bar2,#side,#side-scrim,#gut,#ink,#hint,.toast,#toast,.panel,.img-pop,.pic-menu,.mini-win,#main-menu,.cls-modal,.cls-pane,.cls-strip,#class-chip,.ctx-menu,.color-pop,.ins-pop,#tagbar,.tagbar{display:none!important;}
  html.printing body,html.printing #stage,html.printing #wrap{background:#000!important;background-image:none!important;}   /* black here = white on paper (light mode inverts) */
  #stage{position:static!important;}#wrap{position:relative!important;z-index:0;overflow:visible!important;height:auto!important;inset:auto!important;}
  #pad{zoom:var(--print-zoom,1);min-height:0!important;margin-left:calc(-1 * var(--print-gutter,0px));}
  .editor{padding-bottom:0!important;min-height:0!important;caret-color:transparent!important;}
  #print-ink{display:block;}
  .pic.on{outline:none!important;}.pic-h{display:none!important;}.img-run.img-selected img{outline:none!important;}
}

/* find & replace */
.fr-panel{position:fixed;top:96px;right:18px;width:390px;max-width:calc(100vw - 24px);z-index:80;}
.fr-row{display:flex;gap:6px;align-items:center;margin-bottom:8px;}.fr-row .pf-in{flex:1;min-width:0;}
.fr-st{font-size:11px;color:#8a8aa4;white-space:nowrap;min-width:58px;text-align:right;}
.fr-opt{font-size:12px;color:#a8a8c0;display:flex;gap:6px;align-items:center;}
::highlight(pw-find){background:rgba(251,191,36,.28);}::highlight(pw-find-on){background:rgba(251,146,60,.7);color:#111;}

/* streamlining: highlights menu, class button, shortcuts, welcome */
#hl-btn{width:auto;padding:0 10px;gap:6px;}#hl-btn .mb-lab{font-size:12px;}#hl-btn .mb-car{font-size:9px;opacity:.7;}
.hl-pop{min-width:270px;}
.top-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;margin-right:8px;border-radius:999px;border:1px solid #2a2a3a;background:#121219;color:#c0c0d8;font-size:12px;cursor:pointer;white-space:nowrap;}
.top-chip:hover{border-color:#5a4a2b;color:#fbbf24;}html.mini .top-chip{display:none;}
.sc-grid{display:grid;grid-template-columns:1fr;gap:12px;font-size:12.5px;}.sc-h{font-weight:bold;color:#c8c8dc;margin-bottom:4px;}
.sc-r{display:flex;gap:10px;align-items:baseline;padding:2px 0;}.sc-r kbd{min-width:150px;font:11px ui-monospace,Menlo,Consolas,monospace;color:#fbbf24;}
.wl{padding-left:18px;line-height:1.6;font-size:13px;}.wl li{margin-bottom:6px;}
@media (max-width:900px){#hl-btn .mb-lab,#hl-btn .mb-car{display:none;}}

/* project search (Projects panel) */
.proj-search{position:relative;margin-bottom:8px;}.proj-search .pf-in{width:100%;padding-right:28px;box-sizing:border-box;}
#proj-q-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:0;border-radius:50%;background:#20202e;color:#9a9ab4;cursor:pointer;line-height:1;visibility:hidden;}
.proj-hit{align-items:flex-start;}.ph-main{min-width:0;flex:1;}.proj-hit b{color:#fbbf24;font-weight:600;}
.ph-path{font-size:10.5px;color:#7a7a92;margin-top:2px;}.ph-snip{font-size:11.5px;color:#a8a8c0;margin-top:3px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* page up / down buttons at the bottom of the margin, only with a drawing tool */
#gut-pg{position:absolute;left:0;right:8px;bottom:16px;display:none;flex-direction:column;align-items:center;gap:8px;z-index:7;}
body.draw-tools #gut-pg{display:flex;}
#gut-pg button{width:36px;height:36px;border-radius:50%;border:1px solid #2a2a3a;background:#15151f;color:#c0c0d8;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#gut-pg button:hover{border-color:#5a4a2b;color:#fbbf24;}

/* YouTube objects (youtube.js): a title bar to drag, the official player below */
.pic-yt{background:#0b0b10;border:1px solid #2a2a3a;border-radius:8px;overflow:visible;display:flex;flex-direction:column;}
.pic-yt.pinned{z-index:4;box-shadow:0 8px 26px rgba(0,0,0,.5);}
.yt-bar{height:30px;flex:0 0 30px;display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;cursor:grab;font-size:11.5px;color:#c8c8dc;user-select:none;border-bottom:1px solid #20202e;}
.yt-logo{color:#f87171;font-weight:600;}.yt-t{font:11px ui-monospace,Menlo,Consolas,monospace;color:#9a9ab4;}.yt-sp{flex:1;}
.yt-bar button{height:22px;padding:0 8px;border-radius:6px;border:1px solid #2a2a3a;background:#15151f;color:#c0c0d8;font-size:11px;cursor:pointer;}
.yt-bar button:hover{border-color:#5a4a2b;color:#fbbf24;}.pic-yt.pinned .yt-pin{border-color:#fbbf24;}
.yt-act,.yt-stamp{display:none;}body.yt-mode .yt-act,body.yt-mode .pic-yt.yt-on .yt-stamp{display:inline-block;}body.yt-mode .pic-yt.yt-on .yt-act{display:none;}
body.yt-mode .pic-yt.yt-on{border-color:#f87171;box-shadow:0 0 0 1px #f87171;}
.yt-box{position:relative;flex:1;min-height:0;}.yt-box iframe{width:100%;height:100%;border:0;display:block;border-radius:0 0 8px 8px;}
.yt-fail{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:16px;font-size:12px;color:#9a9ab4;background:#0b0b10;}
.pic-yt.yt-failed .yt-fail{display:flex;}
body.pic-dragging .pic iframe{pointer-events:none;}
#yt-mode.on{border-color:#f87171;color:#f87171;}