/* Layout: desktop-app shell (title bar, menu bar, tool bar, format bar) over a scrolling desk of paper calc sheets, variable store on the right, status bar at the foot. Sheets stay paper-white in both themes. */
:root{
  /* Brand theme "Equation Pad": logo blue #1778B4 and logo green #2EA961 */
  --brand-blue:#1778B4; --brand-green:#2EA961;
  --desk:#d3e3eb; --desk-img:linear-gradient(140deg,#cde1ee 0%,#d6e8ee 45%,#d3ebdf 100%);
  --chrome:#f5f8fa; --chrome-2:#e3ecf2; --chrome-3:#ecf2f6; --line:#c3d2dd;
  --ink:#14212c; --muted:#556777; --accent:#1670a8; --accent-soft:#d8e9f4;
  --title-bg:#1778B4; --title-img:linear-gradient(90deg,#1778B4 0%,#14699e 100%); --title-fg:#ffffff; --title-muted:#cfe5f4; --title-line:#2EA961;
  --field-bg:#ffffff;
  --paper:#ffffff; --paper-ink:#121a22; --paper-rule:#97a5b3; --paper-faint:#e2e7ec; --paper-label:#5a6672;
  --grid-dot:rgba(23,120,180,.22); --cursor:#d0312d; --edit-bg:#fffbea;
  --ok:#1b7a3d; --ok-bg:#e1f2e6; --bad:#b3261e; --bad-bg:#fbe4e1;
  --f-ui:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-label:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --desk:#0e161d; --desk-img:linear-gradient(140deg,#0d1822 0%,#0f1a1f 50%,#0e1b17 100%);
  --chrome:#141d25; --chrome-2:#1f2c37; --chrome-3:#19242d; --line:#2b3b48;
  --ink:#e2e9ef; --muted:#93a4b3; --accent:#5cb2e8; --accent-soft:#17344a;
  --title-bg:#0f3a57; --title-img:linear-gradient(90deg,#0f3a57 0%,#0c304a 100%); --title-fg:#eef6fb; --title-muted:#9fc3dc; --title-line:#2EA961; --field-bg:#0f161c;
  --paper:#f3f4f1; --paper-faint:#dcdfdb; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --desk:#0e161d; --desk-img:linear-gradient(140deg,#0d1822 0%,#0f1a1f 50%,#0e1b17 100%);
  --chrome:#141d25; --chrome-2:#1f2c37; --chrome-3:#19242d; --line:#2b3b48;
  --ink:#e2e9ef; --muted:#93a4b3; --accent:#5cb2e8; --accent-soft:#17344a;
  --title-bg:#0f3a57; --title-img:linear-gradient(90deg,#0f3a57 0%,#0c304a 100%); --title-fg:#eef6fb; --title-muted:#9fc3dc; --title-line:#2EA961; --field-bg:#0f161c;
  --paper:#f3f4f1; --paper-faint:#dcdfdb; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--desk);background-image:var(--desk-img,none);background-attachment:fixed;color:var(--ink);font-family:var(--f-ui);font-size:14px;overflow:hidden}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#app{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;height:100%}

/* title bar */
.titlebar{display:flex;align-items:center;gap:10px;padding:7px 16px;background:var(--title-bg);background-image:var(--title-img,none);color:var(--title-fg);min-width:0;border-bottom:3px solid var(--title-line,transparent)}
.titlebar svg.logo{width:32px;height:16px;flex:none;color:#fff}
.appname{font-family:var(--f-label);font-weight:600;font-size:16px;letter-spacing:.03em;white-space:nowrap}
.doctitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--title-muted);font-size:13.5px}
.doctitle b{color:var(--title-fg);font-weight:500}
.dirty{color:#f2c46d;margin-left:4px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--title-muted);white-space:nowrap}
.tb-right button{border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--title-fg);border-radius:5px;height:26px;padding:0 8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.tb-right button:hover{background:rgba(255,255,255,.08)}
.tb-right svg{width:15px;height:15px}

/* menu bar */
.menubar{display:flex;gap:2px;padding:2px 10px;background:var(--chrome);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.menubar::-webkit-scrollbar{display:none}
.mbtn{height:28px;padding:0 11px;border:0;background:transparent;border-radius:4px;cursor:pointer;white-space:nowrap}
.mbtn:hover,.mbtn.open{background:var(--chrome-2)}
.dropdown{position:fixed;z-index:60;min-width:250px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);overflow:auto;background:var(--chrome);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.22);padding:4px}
.mi .ck svg{width:16px;height:16px;display:block;color:var(--muted)}
.mi:hover .ck svg{color:var(--accent)}
.mi{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:center;width:100%;padding:6px 10px;border:0;background:transparent;border-radius:4px;text-align:left;cursor:pointer;white-space:nowrap}
.mi:hover:not(:disabled){background:var(--accent-soft)}
.mi:disabled{opacity:.42;cursor:default}
.mi kbd{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.mi .ck{color:var(--accent);font-weight:600}
.mi.has-sub kbd{font-family:var(--f-ui);font-size:12px}
.mi.sub-open{background:var(--accent-soft)}
.msep{height:1px;background:var(--line);margin:4px 6px}
.mhead{padding:6px 10px 2px;font-family:var(--f-label);font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}

/* dockable tool bars: docks on four sides of the sheet area, or floating */
.dock{display:flex;gap:2px 4px;background:var(--chrome);min-width:0;min-height:0}
.dock-h{flex-wrap:wrap;align-items:center;padding:0 8px}
#dockTop:not(:empty){border-bottom:1px solid var(--line);padding-block:2px}
#dockBottom:not(:empty){border-top:1px solid var(--line);padding-block:2px}
.dock-v{flex-direction:column;align-items:stretch;overflow-y:auto;overflow-x:hidden;flex:none}
#dockLeft:not(:empty){border-right:1px solid var(--line);padding:4px 3px}
#dockRight:not(:empty){border-left:1px solid var(--line);padding:4px 3px}
body.tb-dragging .dock{outline:1px dashed var(--line);outline-offset:-2px}
body.tb-dragging .dock-h{min-height:10px}
body.tb-dragging .dock-v{min-width:10px}
.dock.drop{background:var(--accent-soft);outline:2px dashed var(--accent)!important}
.tbar{display:flex;align-items:center;gap:2px;padding:2px 2px 2px 0;border-radius:6px;min-width:0;position:relative}
.tbar.ctx{background:var(--accent-soft)}
.tb-grip{width:9px;align-self:stretch;min-height:26px;cursor:grab;background-image:radial-gradient(circle,var(--muted) 1px,transparent 1.4px);background-size:4px 4px;opacity:.5;flex:none;margin-right:2px;touch-action:none}
.tb-grip:hover{opacity:.9}
.tb-name{display:none;font-family:var(--f-label);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:grab;user-select:none;touch-action:none;padding:4px 2px}
.tb-body{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
.tb-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;background:transparent;color:var(--muted);border-radius:3px;cursor:pointer;font-size:14px;line-height:1;padding:0;flex:none;opacity:0;align-self:flex-start}
.tbar:hover .tb-x,.tbar.float .tb-x{opacity:1}
.tb-x:hover{background:var(--chrome-2);color:var(--bad)}
.tgrp{display:flex;align-items:center;gap:2px;padding-right:5px;margin-right:3px;border-right:1px solid var(--line)}
.tgrp:last-child{border-right:0;margin-right:0;padding-right:0}
.dock-v .tbar{flex-direction:column;padding:0 0 4px;align-items:center}
.dock-v .tb-grip{width:auto;align-self:stretch;height:9px;min-height:0;margin:0 0 3px}
.dock-v .tb-body{flex-direction:column;flex-wrap:nowrap}
.dock-v .tgrp{flex-direction:column;border-right:0;border-bottom:1px solid var(--line);padding:0 0 4px;margin:0 0 3px}
.dock-v .tgrp:last-child{border-bottom:0}
.dock-v .tb-x{align-self:center}
.dock-v .tsel{width:96px}
.tbar.float{position:fixed;z-index:55;display:grid;grid-template-columns:auto 1fr auto;align-items:center;background:var(--chrome);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.25);padding:0 4px 4px;max-width:min(620px,calc(100vw - 16px))}
.tbar.float .tb-grip{grid-column:1;grid-row:1;width:12px;min-height:22px}
.tbar.float .tb-name{display:block;grid-column:2;grid-row:1}
.tbar.float .tb-x{grid-column:3;grid-row:1;align-self:center}
.tbar.float .tb-body{grid-column:1/-1;grid-row:2}
.tbar.dragging{opacity:.85;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;min-width:30px;padding:0 5px;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer;white-space:nowrap}
.tbtn:hover{background:var(--chrome-2)}
.tbtn.on{background:var(--accent-soft);border-color:var(--accent)}
.tbtn svg{width:18px;height:18px;flex:none}
.tbtn:hover svg{color:var(--accent)}
.tbtn .tl{font-size:13px}
.tsel{height:28px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);padding:0 4px;font-size:13px;max-width:150px}
.tin{height:28px;width:92px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);padding:0 6px;font-family:var(--f-mono);font-size:13px}
.tchk{display:inline-flex;gap:5px;align-items:center;font-size:13px;white-space:nowrap;padding:0 4px}
.pbtn{min-width:28px;height:28px;padding:0 6px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--paper-ink);cursor:pointer;font-family:var(--f-mono);font-size:13px}
.pbtn:hover{border-color:var(--accent)}
.tbtn.ch{font-family:Georgia,"Times New Roman",serif;font-size:15px}
.clr{display:inline-flex;align-items:center}
.clr .tbtn{padding:0 3px;border-top-right-radius:0;border-bottom-right-radius:0}
.clrpick{position:relative;display:inline-grid;place-items:center;width:14px;height:30px;border-radius:0 5px 5px 0;cursor:pointer;color:var(--muted);font-size:10px}
.clrpick:hover{background:var(--chrome-2)}
.clrpick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.swA{font-family:Georgia,serif;font-weight:700;font-size:15px;line-height:1;padding:0 2px 1px;border-bottom:4px solid #c62828}
.swH{font-size:12px;font-weight:600;line-height:1;padding:3px 3px;border-radius:2px;background:#fff59d;color:#222}
select.zoom{height:28px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);padding:0 6px;margin-left:2px}
#floatRoot{position:fixed;left:0;top:0;width:0;height:0;z-index:55}

/* find bar */
.findbar{display:flex;align-items:center;gap:8px;padding:5px 12px;background:var(--chrome-3);border-bottom:1px solid var(--line);flex-wrap:wrap}
.findbar input{height:30px;width:min(320px,60vw);border:1px solid var(--line);border-radius:5px;background:var(--field-bg);padding:0 8px}
.findbar .cnt{color:var(--muted);font-size:12.5px;min-width:70px}
.findbar .fcase{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.findbar .fcase input{width:auto;height:auto;margin:0}
.findbar .replrow{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.findbar #replInput{width:min(240px,50vw)}
.sbtn{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:5px;background:var(--chrome);cursor:pointer}
.sbtn:hover{border-color:var(--accent)}
.sbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--chrome)}

/* workspace */
.work{display:flex;min-height:0;min-width:0}
#desk{flex:1 1 auto;overflow:auto;padding-block:24px;padding-inline:16px;min-width:0;position:relative}
#pages{--z:1}
.pagewrap{position:relative;width:calc(var(--pw) * var(--z));height:calc(var(--ph) * var(--z));margin:0 auto 24px}
.page{position:absolute;left:0;top:0;transform:scale(var(--z));transform-origin:0 0;background:var(--paper);color:var(--paper-ink);box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 24px rgba(0,0,0,.12);cursor:crosshair;overflow:hidden;touch-action:pan-x pan-y}
.grid{position:absolute;pointer-events:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
body.nogrid .grid{display:none}
.layer{position:absolute;inset:0}
.marquee{position:absolute;border:1px dashed var(--accent);background:rgba(29,79,145,.08);pointer-events:none;z-index:8}

/* title block: logo box + 6 columns x 3 rows, ruled by the 1px gaps */
.tblock{position:absolute;z-index:3;display:grid;grid-template-rows:repeat(3,36px);background:var(--paper);border:1.5px solid var(--paper-ink);font-size:12.5px;cursor:default;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tblock>div{background:var(--paper);padding:3px 6px 3px;min-width:0;overflow:hidden;border-right:1px solid var(--paper-rule);border-bottom:1px solid var(--paper-rule)}
.tblock>div.r{border-right:0}.tblock>div.b{border-bottom:0}
.tblock .lab{display:block;font-family:var(--f-label);font-size:10px;text-transform:uppercase;letter-spacing:.04em;text-overflow:ellipsis;color:var(--paper-label);white-space:nowrap;overflow:hidden;line-height:13px}
.tblock .fld{min-height:18px;font-size:12px;text-overflow:ellipsis;outline:none;white-space:nowrap;overflow:hidden;font-weight:500;cursor:text;border-radius:2px;line-height:18px}
.tblock .fld:hover{background:var(--paper-faint)}
.tblock .fld:focus{background:var(--edit-bg);box-shadow:0 0 0 1px var(--accent)}
.tblock .fld:empty::before{content:attr(data-ph);color:#a3adb8;font-weight:400;font-style:italic}
.tblock .sheetno{cursor:default}
.tblock .sheetno:hover{background:transparent}
.tblock .logo{display:grid;place-items:center;padding:4px;cursor:pointer}
.tblock .logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tblock .logo:hover{background:var(--paper-faint)}
.logo-ph{font-family:var(--f-label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a3adb8;text-align:center;line-height:1.3;border:1px dashed #c3ccd5;border-radius:4px;padding:8px 6px;width:100%}
.foot{position:absolute;display:flex;align-items:flex-end;font-family:var(--f-label);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6a7682;pointer-events:none;border-top:1px solid var(--paper-faint)}
.foot>span{padding-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot .fl{flex:1 1 0;text-align:left}
.foot .fc{flex:none;text-align:center;padding-inline:12px}
.foot .fr{flex:1 1 0;text-align:right}
.foot.nocaps{text-transform:none;letter-spacing:.02em}

/* cursor */
.cursor{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;z-index:5}
.cursor::before,.cursor::after{content:"";position:absolute;background:var(--cursor)}
.cursor::before{left:8px;top:0;width:2px;height:18px}
.cursor::after{top:8px;left:0;height:2px;width:18px}

/* regions */
.region{position:absolute;cursor:default;border-radius:2px}
.region:hover{outline:1px dashed var(--paper-faint)}
.region.sel{outline:1px dashed var(--accent);background:rgba(29,79,145,.035)}
.region.dragging{opacity:.75;z-index:10}
.grip,.del{position:absolute;display:none;align-items:center;justify-content:center;border:1px solid var(--paper-rule);background:var(--paper);color:var(--paper-ink);border-radius:4px;padding:0;cursor:grab;z-index:6}
.grip{left:-22px;top:0;width:18px;height:20px;touch-action:none}
.grip svg{width:10px;height:14px}
.del{right:-10px;top:-10px;width:18px;height:18px;font-size:13px;line-height:1;cursor:pointer;color:var(--bad)}
.region:hover>.grip,.region.sel>.grip,.region.sel>.del{display:flex}

.math .mrender{display:inline-block;min-height:24px;min-width:16px;padding:2px 4px 2px 1.6em;text-indent:-1.35em;cursor:text;font-size:16px;line-height:1.35;overflow-x:auto;overflow-y:hidden;vertical-align:top;max-width:100%;white-space:normal}
.math .mpart{display:inline-block;text-indent:0;max-width:100%}
.math .mtext{text-indent:0;display:inline-block;font-family:var(--f-ui);font-size:11pt;line-height:1.45;white-space:pre-wrap;color:var(--paper-ink,#13212C)}
.plotwrap{position:relative;display:block;text-indent:0;margin:4px 0 2px;max-width:100%}
.plotwrap svg.plot{display:block;max-width:100%;height:auto}
.plottip{position:absolute;z-index:4;background:#fff;color:#0b0b0b;border:1px solid #d0d5da;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.14);padding:5px 8px;font:12px/1.4 var(--f-ui);white-space:nowrap;pointer-events:none}
.plottip i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.plotempty{font-size:12px;color:#6a7682;padding:8px}
@media print{.plottip{display:none!important}}
.math .mrender .fb{font-family:var(--f-mono);font-size:.8125em}
.math .mrender mjx-container{margin:0!important}
mjx-assistive-mml{display:none!important}
.math.err .mrender{box-shadow:inset 0 -2px 0 var(--bad)}
.math.stale .mrender{opacity:.55}
.merr{font-size:11.5px;color:var(--bad);padding:1px 4px 0;max-width:440px;line-height:1.3}
.medit{font-family:var(--f-mono);font-size:14px;padding:3px 6px;border:1px solid var(--accent);border-radius:3px;background:var(--edit-bg);color:var(--paper-ink);outline:none;min-width:8ch;max-width:100%}
.badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 8px;border-radius:3px;font-family:var(--f-label);font-weight:600;letter-spacing:.08em;font-size:13px;text-indent:0;white-space:nowrap;line-height:1.35}
.badge.pass{background:var(--ok-bg);color:var(--ok)}
.badge.fail{background:var(--bad-bg);color:var(--bad)}

.text .tedit{padding:2px 4px;line-height:1.45;font-size:11pt;outline:none;cursor:text;min-height:21px;overflow-wrap:anywhere}
.tedit h2{font-size:22px;font-weight:600;margin:0 0 6px;line-height:1.2}
.tedit blockquote{margin:0 0 4px 0;padding-left:12px;border-left:3px solid var(--paper-rule);color:#3a4652}
.tedit s,.tedit strike{text-decoration:line-through}
.text .tedit:focus{outline:1px solid var(--accent);background:rgba(255,251,234,.6)}
.text .tedit:empty::before{content:"Type text…";color:#9aa5b0}
.text .tedit{position:relative}
.text .tedit:has(> div:only-child > br:only-child)::before{content:"Type text…";color:#9aa5b0;position:absolute;left:4px;top:2px;pointer-events:none}
.tedit h3{font-size:18px;font-weight:600;margin:0 0 4px;line-height:1.25}
.tedit h4{font-family:var(--f-label);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin:0 0 2px;color:#33414f}
.tedit p,.tedit div{margin:0 0 4px}
.tedit p:last-child{margin-bottom:0}
.tedit ul,.tedit ol{margin:0 0 4px;padding-left:20px}
.rsz-x{position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:ew-resize;display:none;touch-action:none}
.rsz{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border:2px solid var(--accent);background:var(--paper);border-radius:2px;cursor:nwse-resize;display:none;touch-action:none}
.region.sel>.rsz,.region.sel>.rsz-x,.region:hover>.rsz-x{display:block}
.region.sel>.rsz-x{background:linear-gradient(90deg,transparent 3px,var(--accent) 3px,var(--accent) 5px,transparent 5px)}
.image img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.break .pbreak{height:16px;position:relative}
.break .pbreak::before{content:"";position:absolute;left:0;right:0;top:7px;border-top:1.5px dashed #8ea0b3}
.break .pbreak span{position:absolute;right:8px;top:0;font-family:var(--f-label);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--paper);color:#6a7682;padding:0 6px;line-height:16px}

.table .tname{font-family:var(--f-mono);font-size:12.5px;font-style:italic;padding:0 2px 2px;color:#33414f}
.table .tscroll{overflow-x:auto;max-width:100%}
.table table{border-collapse:collapse;font-size:13.5px}
.table td{border:1px solid var(--paper-rule);padding:0}
.table tr.hd td{border-bottom:1.5px solid var(--paper-ink);background:#f0f3f6}
.table .cell{display:block;border:0;background:transparent;padding:4px 6px;color:var(--paper-ink);font-variant-numeric:tabular-nums;outline:none;font-size:13.5px;min-height:26px;white-space:nowrap;overflow:hidden}
.table .cell.num{text-align:right}
.table tr.hd .cell{font-weight:600;text-align:left}
.table .cell:focus{background:var(--edit-bg);box-shadow:inset 0 0 0 1.5px var(--accent);text-align:left;font-family:var(--f-mono);font-size:12.5px}
.table .cell.err{color:var(--bad)}
.table .cell.picked{background:#e5f5ea}
.table .cell.picked.pk-t{border-top:2px dashed #2f9e5b}.table .cell.picked.pk-b{border-bottom:2px dashed #2f9e5b}.table .cell.picked.pk-l{border-left:2px dashed #2f9e5b}.table .cell.picked.pk-r{border-right:2px dashed #2f9e5b}
.table .gut{display:none;font-family:var(--f-mono);font-size:10.5px;color:#7a8692;font-weight:400;text-align:center;padding:1px 4px;background:transparent;border:0}
.region.sel .gut,.region.table:focus-within .gut{display:table-cell}
.table tr.addr{display:none}.region.sel .table tr.addr,.region.table.sel tr.addr,.region.table:focus-within tr.addr{display:table-row}
.table th.colh,.table th.rowh,.table th.corner{cursor:pointer;user-select:none}
.table th.colh:hover,.table th.rowh:hover{background:var(--accent-soft);color:var(--accent)}
.table th.addc{border:0;background:transparent;padding:0 0 0 3px}
.table tr.addr th{border:0;padding:3px 0 0}
.tadd,.tmenu{width:20px;height:20px;padding:0;border:1px solid var(--paper-rule);border-radius:4px;background:var(--paper);color:var(--accent);cursor:pointer;font-size:14px;line-height:1;font-weight:600}
.tadd:hover,.tmenu:hover{background:var(--accent-soft);border-color:var(--accent)}
.tmenu{width:18px;font-size:13px}
.table .cell.insel{background:rgba(29,79,145,.13);box-shadow:inset 0 0 0 1px rgba(29,79,145,.35)}

/* program blocks */
.region.prog .prender{cursor:text;padding:2px 4px;font-size:16px}
.region.prog .phead{display:flex;align-items:baseline;gap:8px}
.region.prog .pval{color:var(--paper-ink)}
.region.prog .pblk{border-left:1.5px solid #3b4652;margin:2px 0 4px 14px;padding-left:10px}
.region.prog .pl{min-height:22px;line-height:1.35;white-space:nowrap}
.region.prog .pkw{font-family:var(--f-ui);font-weight:600;font-size:14px;color:#1d4f91;margin-right:4px}
.region.prog .pfb{font-family:var(--f-mono);font-size:12.5px;margin:0;white-space:pre}
.region.prog .pedit{display:block;font-family:var(--f-mono);font-size:13px;line-height:1.5;min-width:340px;max-width:100%;padding:6px 8px;border:1px solid var(--accent);border-radius:4px;background:var(--edit-bg);color:var(--paper-ink);outline:none;resize:both;tab-size:2}
/* collapsible areas */
.region.area .abar{display:flex;align-items:center;gap:6px;border-top:1.5px solid #8ea0b3;background:#f2f5f8;padding:2px 6px;min-height:26px;font-family:var(--f-label);font-size:13px;color:#33414f}
.region.area.collapsed .abar{border-bottom:1.5px solid #8ea0b3}
.region.area .atog{width:22px;height:22px;border:1px solid #c3ccd5;border-radius:4px;background:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0;color:#33414f}
.region.area .atog:hover{border-color:var(--accent);color:var(--accent)}
.region.area .atitle{font-weight:600;letter-spacing:.04em;outline:none;min-width:40px;cursor:text;padding:1px 3px;border-radius:2px}
.region.area .atitle:focus{background:var(--edit-bg);box-shadow:0 0 0 1px var(--accent)}
.region.area .ainfo{margin-left:auto;font-size:11.5px;color:#6a7682;text-transform:uppercase;letter-spacing:.06em}
.region.aend .aendl{height:12px;position:relative;border-top:1.5px dashed #8ea0b3;margin-top:5px}
.region.aend .aendl span{position:absolute;right:8px;top:-8px;background:var(--paper);padding:0 6px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#6a7682}
/* notes, answers, step mode */
.rnote{position:absolute;right:-30px;top:-2px;width:22px;height:22px;padding:2px;border:1px solid #e0c34c;border-radius:4px;background:#fff3a6;color:#7a5c00;cursor:pointer;z-index:6}
.rnote svg{width:16px;height:16px;display:block}
.region.answer>.mrender{outline:1.5px dashed #2f9e5b;outline-offset:3px;border-radius:3px;min-width:160px}
.ansph{color:#6a7682;font-style:italic;font-size:14px;font-family:var(--f-ui);margin-left:6px}
body.stepping .page .region{pointer-events:none}
.region.stephide{visibility:hidden}
.region.stepcur{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
#stepBar{position:fixed;left:50%;bottom:calc(44px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:8px;background:var(--chrome);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:8px 10px}
#stepInfo{min-width:110px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}
@media print{.rnote,#stepBar,.region.area .atog{display:none!important}.region.answer>.mrender{outline:none}}

/* variables panel */
#vars{background:var(--chrome);border-left:1px solid var(--line);overflow:auto;padding-block:14px;padding-inline:16px;min-width:0}
#vars h2{font-family:var(--f-label);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 8px;font-weight:600}
#varlist{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:1px}
#varlist li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:10px;align-items:baseline;padding:4px 6px;border-radius:4px;cursor:pointer;font-variant-numeric:tabular-nums}
#varlist li:hover{background:var(--chrome-2)}
#varlist .vn{font-family:var(--f-mono);font-size:12.5px;color:var(--accent);white-space:nowrap}
#varlist .vv{text-align:right;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#varlist .empty{color:var(--muted);cursor:default;display:block;line-height:1.45}
.vars-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:move;user-select:none;touch-action:none}
.vars-head h2{flex:1}
.vgrip{width:14px;height:14px;background-image:radial-gradient(circle,var(--muted) 1px,transparent 1.4px);background-size:4px 4px;opacity:.6;flex:none}
.vx{width:22px;height:22px;border:0;background:transparent;color:var(--muted);border-radius:4px;cursor:pointer;font-size:17px;line-height:1;padding:0}
.vx:hover{background:var(--chrome-2);color:var(--bad)}
#vars.vleft{border-left:0;border-right:1px solid var(--line)}
#vars.vfloat{position:fixed;z-index:56;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.25);resize:both;min-width:200px;min-height:160px;max-width:90vw;max-height:85vh}
#vsDrop{position:fixed;z-index:57;background:var(--accent-soft);border:2px dashed var(--accent);pointer-events:none;border-radius:4px}
.panel-note{font-size:12.5px;color:var(--muted);line-height:1.5}

/* status bar */
.status{display:flex;align-items:center;gap:16px;padding:4px 16px calc(4px + env(safe-area-inset-bottom,0px));background:var(--chrome);border-top:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
.status .grow{flex:1}
.status .hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);opacity:.85}
.status button{border:0;background:transparent;padding:0;font:inherit;cursor:pointer;color:inherit}
.status .errs{color:var(--bad)}
.status .okc{color:var(--ok)}
.zoomctl{display:inline-flex;align-items:center;gap:3px}
.zoomctl button{width:22px;height:20px;border:1px solid transparent!important;border-radius:4px;font-size:15px!important;line-height:1}
.zoomctl button:hover{background:var(--chrome-2)}
.zoomctl #stZoom{width:auto;min-width:44px;font-size:12px!important;font-variant-numeric:tabular-nums}
.zoomctl input[type=range]{width:120px;accent-color:var(--accent);margin:0 2px;height:16px}
@media (max-width:700px){.zoomctl input[type=range]{width:70px}}
.combo{display:inline-flex;align-items:center}
.combo .tin{width:44px;border-top-right-radius:0;border-bottom-right-radius:0;text-align:right;font-family:var(--f-ui)}
.combo .tbtn{height:28px;min-width:18px;width:18px;padding:0;border:1px solid var(--line);border-left:0;border-radius:0 5px 5px 0;font-size:10px;color:var(--muted)}
.share-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}
.share-grid .sbtn{height:auto;padding:10px 12px;text-align:left;line-height:1.3}
.share-grid .sbtn b{display:block}
.share-grid .sbtn span{font-size:12px;color:var(--muted)}
.fmt-pick{display:flex;gap:16px;flex-wrap:wrap}
.fmt-pick label{display:flex;gap:6px;align-items:center;cursor:pointer}
@media (max-width:700px){.status .opt{display:none}}

/* dialogs */
.dlg-back{position:fixed;inset:0;background:rgba(8,14,22,.48);display:grid;place-items:center;padding:16px;z-index:80}
.dlg{width:min(540px,100%);max-height:calc(100% - 32px);display:flex;flex-direction:column;background:var(--chrome);color:var(--ink);border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.dlg.wide{width:min(820px,100%)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);cursor:move;user-select:none;touch-action:none}
.dlg-h h2{margin:0;font-size:16px;font-weight:600}
.dlg-x{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);width:30px;height:30px;border-radius:5px}
.dlg-x:hover{background:var(--chrome-2)}
.dlg-b{overflow:auto;padding:16px 18px;line-height:1.5}
.dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 14px}
.form .full{grid-column:1/-1}
.form label{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.form input[type=text],.form input[type=number],.form select{height:32px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);padding:0 8px;color:var(--ink)}
.form label.chk{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:13.5px}
.form input[type=color]{height:32px;width:100%;padding:2px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg)}
.form h3{grid-column:1/-1;margin:6px 0 -4px;font-family:var(--f-label);font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.dlg table.list{width:100%;border-collapse:collapse;font-size:13px}
.dlg table.list th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--chrome)}
.dlg table.list td{padding:5px 8px;border-bottom:1px solid var(--chrome-2);vertical-align:top}
.dlg table.list tr.pick{cursor:pointer}
.dlg table.list tr.pick:hover td{background:var(--accent-soft)}
.dlg td.mono,.dlg code{font-family:var(--f-mono);font-size:12.5px}
.ulist{max-height:min(50vh,420px);overflow:auto;border:1px solid var(--line);border-radius:6px}
.ufilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ufilter input{flex:1 1 200px;height:32px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);padding:0 8px}
.ufilter select{height:32px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);padding:0 6px}
.guide dt{font-family:var(--f-mono);font-size:12.5px;margin-top:10px}
.guide dd{margin:2px 0 0;color:var(--muted)}

/* autocomplete */
.ac{position:fixed;z-index:70;list-style:none;margin:0;background:var(--chrome);border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.2);min-width:240px;max-width:min(380px,calc(100vw - 16px));padding:3px;font-size:13px}
.ac li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:4px 8px;border-radius:4px;cursor:pointer}
.ac li.on{background:var(--accent-soft)}
.ac .an{font-family:var(--f-mono);font-size:12.5px;white-space:nowrap}
.ac .ak{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac .foot-hint{display:block;color:var(--muted);font-size:11px;padding:3px 8px 1px;cursor:default}

#toast{position:fixed;left:50%;bottom:calc(36px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--chrome);padding:8px 14px;border-radius:6px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:90;max-width:calc(100% - 32px)}
#toast.show{opacity:1}

/* lock screen */
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.palcard{display:grid;gap:6px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--chrome);cursor:pointer;text-align:left;font-size:12.5px}
.palcard:hover{border-color:var(--accent)}
.palcard.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.palcard .pv{display:grid;grid-template-rows:12px 1fr;height:62px;border-radius:5px;overflow:hidden}
.palcard .pvt{display:block}
.palcard .pvc{display:flex;gap:4px;align-items:flex-end;margin:6px 8px 0;border-radius:4px 4px 0 0;padding:6px}
.palcard .pvc i{display:block;width:18px;height:8px;border-radius:2px}
.palcard b{font-weight:500}
.lockscreen{position:fixed;inset:0;display:grid;place-items:center;background:var(--title-bg);color:var(--title-fg);padding:24px;text-align:center}
.lockscreen h1{font-family:var(--f-label);font-size:34px;margin:0 0 12px}
.lockscreen p{max-width:42ch;margin:0 auto 10px;color:var(--title-muted);line-height:1.5}
.lockscreen a{color:#fff;font-weight:600}
/* drawings on the sheet */
.region.cad .cadview{background:#fff;cursor:pointer}
.region.cad .cadview img{display:block;width:100%;height:auto}
.cadempty{display:grid;place-items:center;height:150px;border:1px dashed var(--paper-rule);color:#6a7682;font-size:13px}
.myunits{margin-bottom:14px;border:1px solid var(--line);border-radius:6px;padding:8px 12px}
.myunits summary{cursor:pointer;font-weight:600}
/* drawing editor: a dark model space in every theme */
.cad-ed{position:fixed;inset:0;z-index:85;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;background:#161b21;color:#dfe5eb;font-family:var(--f-ui);font-size:13px;color-scheme:dark}
.cad-top{display:flex;align-items:center;gap:6px;padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top,0px));background:#0f1418;border-bottom:1px solid #2b343e;flex-wrap:wrap}
.cad-top .ttl{font-family:var(--f-label);font-weight:600;font-size:16px;margin-right:6px}
.cad-top .seg,.cad-top .v3{display:inline-flex;gap:2px}
.cad-top .sp{flex:1}
.cad-top .lay{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#aab6c2}
.cad-top select{height:28px;border:1px solid #33404c;border-radius:5px;background:#1d252d;color:#dfe5eb;padding:0 6px}
.cbtn{height:28px;padding:0 9px;border:1px solid #33404c;border-radius:5px;background:#1d252d;color:#dfe5eb;cursor:pointer;white-space:nowrap;font:inherit}
.cbtn:hover{border-color:#5d8fd0}
.cbtn.on{background:#24466f;border-color:#5d8fd0}
.cbtn.primary{background:#2f6fc0;border-color:#2f6fc0;color:#fff}
.cbtn.xs{height:22px;padding:0 6px;font-size:11px}
.cad-mid{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;min-height:0;position:relative}
.cad-tools{display:flex;flex-direction:column;gap:2px;padding:6px;background:#11161b;border-right:1px solid #2b343e;overflow:auto;width:92px}
.ctg{font-family:var(--f-label);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#7f91a3;margin:6px 2px 2px}
.ctgrid{display:grid;grid-template-columns:repeat(2,38px);gap:3px}
.ctool{display:grid;place-items:center;width:38px;height:34px;padding:0;border:1px solid transparent;border-radius:5px;background:transparent;color:#cfd7df;cursor:pointer}
.ctool svg{width:20px;height:20px}
.ctool:hover{background:#1f2831}
.ctool.on{background:#24466f;border-color:#5d8fd0}
.cad-view{position:relative;min-width:0;min-height:0;overflow:hidden;touch-action:none;cursor:none}
.cad-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cad-view canvas.cad3{cursor:grab}
.cad-loading{position:absolute;inset:0;display:grid;place-items:center;color:#8ea0b2;background:#1b2128}
.cad-panel{background:#11161b;overflow:auto;padding:4px 12px 12px}
.cad-panel h3{font-family:var(--f-label);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#8ea0b2;margin:10px 0 6px;font-weight:600}
.cad-panel label{display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px;align-items:center;margin-bottom:5px;font-size:12px;color:#aab6c2}
.cad-panel input,.cad-panel select{height:26px;border:1px solid #33404c;border-radius:4px;background:#0c1014;color:#e6eaee;padding:0 6px;font-family:var(--f-mono);font-size:12px;min-width:0}
.cad-panel input[type=checkbox]{height:16px;width:16px;justify-self:start}
.cad-panel .ro{font-family:var(--f-mono);font-size:12px;color:#e6eaee}
.cad-panel .hint{font-size:12px;line-height:1.5;color:#9fb0c0}
.cad-panel .ltab{display:grid;gap:3px;margin-bottom:8px}
.cad-panel .lrow{display:grid;grid-template-columns:22px minmax(0,1fr) 34px 38px 62px 74px 20px;gap:3px;align-items:center;font-size:12px}
.cad-panel .lrow.cur .lname{color:#ffd166}
.cad-panel .lrow select{height:22px;font-size:11px;padding:0 2px}
.cad-panel .lname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-panel .lbtn{height:22px;border:1px solid #33404c;border-radius:4px;background:#1d252d;color:#dfe5eb;font-size:11px;cursor:pointer;padding:0 3px}
.cad-panel .lbtn.off{color:#ff9f6b;border-color:#6b4a35}
.cad-panel .snaps{display:grid;gap:2px}
.cad-panel label.chk{display:flex;gap:6px;grid-template-columns:none}
.cad-panel label.chk input{height:14px;width:14px}
.cad-top #cadVs{height:28px}
.cad-bot{background:#0f1418;border-top:1px solid #2b343e;padding:4px 10px calc(6px + env(safe-area-inset-bottom,0px))}
.cad-hist{font-family:var(--f-mono);font-size:11.5px;color:#8ea0b2;white-space:pre-wrap;height:64px;overflow-y:auto;line-height:16px;resize:vertical;min-height:34px;max-height:40vh;scrollbar-width:thin;scrollbar-color:#3a4754 transparent;padding-right:4px}
.cad-cmd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cad-cmd .pr{font-family:var(--f-mono);font-size:12.5px;color:#ffd166;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.cad-cmd input{flex:1;min-width:120px;height:30px;border:1px solid #33404c;border-radius:4px;background:#0a0d10;color:#fff;padding:0 8px;font-family:var(--f-mono);font-size:13px;outline:none}
.cad-cmd input:focus{border-color:#5d8fd0}
.cad-cmd .xy{font-family:var(--f-mono);font-size:12px;color:#8ea0b2;white-space:nowrap}
@media (max-width:820px){.cad-side{width:0!important;border:0!important}.cad-ed.panel .cad-side[data-side=right]{width:min(300px,88vw)!important;position:absolute;right:0;top:0;bottom:0;z-index:4}.cad-menubar{overflow-x:auto}}
/* drawing editor toolbars: dockable on four sides or floating */
.cad-dock{display:flex;gap:3px;background:#12181e;min-width:0;min-height:0}
.cad-dock.h{flex-wrap:wrap;align-items:flex-start;padding:3px 6px;border-bottom:1px solid #2b343e}
.cad-dock.h[data-dock="bottom"]{border-bottom:0;border-top:1px solid #2b343e}
.cad-dock.v{flex-direction:column;flex-wrap:wrap;align-content:flex-start;padding:4px 3px;overflow:hidden}
.cad-dock.v[data-dock="left"]{border-right:1px solid #2b343e}
.cad-dock.v[data-dock="right"]{border-left:1px solid #2b343e}
.cad-dock.empty{padding:0;border:0}
.cad-dock.h.empty{min-height:4px}.cad-dock.v.empty{min-width:4px}
.cad-dock.drop{outline:2px dashed #5d8fd0;outline-offset:-3px;background:#16263a;min-height:38px;min-width:42px}
.cad-tb{display:flex;align-items:center;gap:1px;background:linear-gradient(#222b34,#1b232b);border:1px solid #33404c;border-radius:5px;padding:2px 3px 2px 2px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset;user-select:none}
.cad-tb.vert{flex-direction:column;padding:2px 2px 3px}
.cad-tb-grip{width:7px;align-self:stretch;margin:2px 3px 2px 1px;cursor:grab;background-image:radial-gradient(circle,#6c7b8a 1px,transparent 1.3px);background-size:4px 4px;touch-action:none}
.cad-tb.vert .cad-tb-grip{width:auto;height:7px;margin:1px 2px 3px;align-self:stretch}
.cad-tb-name{display:none;font-family:var(--f-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c0;padding:0 6px 0 0;cursor:grab;white-space:nowrap}
.cad-tb-body{display:flex;align-items:center;gap:1px}
.cad-tb.vert .cad-tb-body{flex-direction:column}
.cad-tb.vert.two .cad-tb-body,.cad-tb.float.vert .cad-tb-body{display:grid;grid-template-columns:repeat(2,32px);gap:1px}
.cad-tb.vert.three .cad-tb-body{display:grid;grid-template-columns:repeat(3,32px);gap:1px}
.cad-tb .ctool{width:32px;height:30px;border-radius:4px}
.cad-tb .ctool svg{width:19px;height:19px}
.cad-tb .ctool:hover{background:#2a3642;border-color:#3f5163}
.cad-tb .ctool.on{background:#24466f;border-color:#5d8fd0;color:#fff}
.cad-tb .ctool.tg.on{background:#1f4d33;border-color:#3fae6a;color:#d9ffe6}
.cad-tb-x{display:none;width:18px;height:18px;margin-left:2px;border:0;border-radius:3px;background:transparent;color:#9fb0c0;cursor:pointer;font-size:14px;line-height:1;padding:0}
.cad-tb-x:hover{background:#3a2328;color:#ff9f9f}
.cad-tb select{height:26px;border:1px solid #33404c;border-radius:4px;background:#0f1418;color:#dfe5eb;padding:0 4px;max-width:150px}
.cad-tb .ctl-l{display:none}
.cad-tb.vert select{max-width:30px}
.cad-floats{position:absolute;inset:0;pointer-events:none;z-index:5}
.cad-tb.float{position:absolute;pointer-events:auto;box-shadow:0 6px 22px rgba(0,0,0,.45);flex-wrap:wrap;max-width:min(560px,80vw)}
.cad-tb.float .cad-tb-name,.cad-tb.float .cad-tb-x{display:inline-block}
.cad-tb.float.vert .cad-tb-name{writing-mode:horizontal-tb}
.cad-tb.dragging{opacity:.85;cursor:grabbing}
.cad-tbmenu{position:absolute;z-index:20;min-width:210px;background:#1b232b;border:1px solid #33404c;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);padding:4px}
.cad-tbmenu .mh{font-family:var(--f-label);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#7f91a3;padding:4px 8px}
.cad-tbmenu button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;height:28px;border:0;border-radius:4px;background:transparent;color:#dfe5eb;cursor:pointer;padding:0 8px}
.cad-tbmenu button:hover{background:#24466f}
.cad-tbmenu .ck{width:16px;color:#6fdc8c}
.cad-tbmenu .sep{height:1px;background:#2b343e;margin:4px 0}
@media (min-width:821px){#cadPanelBtn{display:none}}
@media (max-width:900px){
  #vars{position:fixed;right:0;top:0;bottom:0;width:min(320px,88vw);z-index:40;box-shadow:-8px 0 24px rgba(0,0,0,.25);padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .vars-close{display:inline-flex}
  .tb-right .note{display:none}
}
#vars{width:280px;flex:none}
@media (min-width:901px){body.vars-off #vars{display:none}}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}
/* ---------- moving regions by their body, double-click to edit ---------- */
.math .mrender{cursor:default}
.region.sel,.region.sel .mrender,.region.sel .prender,.region.sel .cadview,.region.sel img{cursor:move}
.region.prog .prender{cursor:default}
.text .tedit:not(:focus){cursor:default}
.region.text.sel .tedit:not(:focus){cursor:move}
body.painting .page,body.painting .region,body.painting .region *{cursor:copy!important}
body.painting .region:hover{outline:2px dashed var(--accent)}
.region.matched{animation:epMatched .7s ease-out}
@keyframes epMatched{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){.region.matched{animation:none}}
/* ---------- drawing board region ---------- */
.region.sketch img.skimg{display:block;width:100%;height:auto}
.region.sketch.skwhite img.skimg{background:#fff}
.region.sketch:not(.skwhite) img.skimg{background:transparent}
.region.sketch:hover img.skimg{outline:1px dashed var(--paper-faint)}
/* ---------- drawing board editor ---------- */
.sk-ed{position:fixed;inset:0;z-index:85;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--desk);color:var(--ink);font-family:var(--f-ui);font-size:13px}
.sk-top{display:flex;align-items:center;gap:6px;padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top,0px));background:var(--title-bg);background-image:var(--title-img,none);color:var(--title-fg);border-bottom:3px solid var(--title-line,transparent);flex-wrap:wrap}
.sk-top .ttl{font-family:var(--f-label);font-weight:600;font-size:16px;margin-right:8px;letter-spacing:.02em}
.sk-top .sp{flex:1}
.sk-top .sk-sep{width:1px;height:22px;background:rgba(255,255,255,.3);margin:0 4px}
.sk-top .sk-l{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--title-muted)}
.sk-top input[type=number]{width:64px;height:26px;border:1px solid rgba(255,255,255,.35);border-radius:4px;background:rgba(0,0,0,.18);color:#fff;padding:0 5px;font-family:var(--f-mono);font-size:12px}
.sk-top select{height:26px;border:1px solid rgba(255,255,255,.35);border-radius:4px;background:rgba(0,0,0,.18);color:#fff;padding:0 4px}
.sk-top select option{color:#111}
.sk-ed .cbtn,.xs-ed .cbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.sk-ed .cbtn:hover,.xs-ed .cbtn:hover{background:rgba(255,255,255,.22);border-color:#fff}
.sk-ed .cbtn.primary,.xs-ed .cbtn.primary{background:var(--brand-green);border-color:var(--brand-green)}
.sk-mid{display:grid;grid-template-columns:auto minmax(0,1fr) 220px;min-height:0}
.sk-tools{display:grid;grid-template-columns:repeat(2,40px);grid-auto-rows:38px;gap:4px;align-content:start;padding:8px;background:var(--chrome);border-right:1px solid var(--line)}
.sk-tools .ctool{width:40px;height:38px;color:var(--ink);border:1px solid transparent}
.sk-tools .ctool:hover{background:var(--chrome-2)}
.sk-tools .ctool.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.sk-view{position:relative;display:grid;place-items:center;overflow:auto;min-width:0;min-height:0;padding:16px}
.sk-board{position:relative;box-shadow:0 2px 14px rgba(10,30,50,.25);background:#fff}
.sk-board.transp{background-color:#fff;background-image:linear-gradient(45deg,#e4e8ec 25%,transparent 25%,transparent 75%,#e4e8ec 75%),linear-gradient(45deg,#e4e8ec 25%,transparent 25%,transparent 75%,#e4e8ec 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.sk-board canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk-board #skOv{touch-action:none}
.sk-board #skTx{position:absolute;min-width:120px;border:1px dashed var(--accent);background:rgba(255,255,255,.85);padding:0 4px;outline:none;line-height:1.1}
.sk-panel{background:var(--chrome);border-left:1px solid var(--line);overflow:auto;padding:8px 12px 16px}
.sk-panel h3{font-family:var(--f-label);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px;font-weight:600}
.sk-sw{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.sk-c{aspect-ratio:1;border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:0;cursor:pointer}
.sk-c.on{outline:2px solid var(--accent);outline-offset:1px}
.sk-row{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12.5px;color:var(--muted)}
.sk-row input[type=range]{flex:1;min-width:0}
.sk-row b{font-family:var(--f-mono);font-weight:500;font-size:12px;color:var(--ink);min-width:44px;text-align:right}
.sk-row select{flex:1;height:26px;border:1px solid var(--line);border-radius:4px;background:var(--field-bg);color:var(--ink)}
.sk-row input[type=color]{width:44px;height:26px;border:1px solid var(--line);border-radius:4px;padding:0;background:none}
.sk-chk{display:flex;align-items:center;gap:6px;font-size:12.5px}
.sk-dot{margin:4px auto 0;border-radius:50%;min-width:2px;min-height:2px}
.sk-hint{font-size:12px;line-height:1.5;color:var(--muted);margin-top:16px}
.sk-bot{background:var(--chrome);border-top:1px solid var(--line);padding:5px 12px calc(6px + env(safe-area-inset-bottom,0px));font-size:12.5px;color:var(--muted);min-height:28px}
@media (max-width:820px){.sk-mid{grid-template-columns:auto minmax(0,1fr)}.sk-panel{display:none}.sk-tools{grid-template-columns:40px}.sk-top .sk-l{display:none}}
@media print{
  html,body{height:auto;overflow:visible;background:#fff}
  #app,.work{display:block}
  #desk{display:block}
  .cad-ed,.sk-ed,.titlebar,.menubar,.dock,#floatRoot,.findbar,.status,#vars,#toast,.grip,.del,.rsz,.rsz-x,.cursor,.gut,.marquee,.logo-ph{display:none!important}
  body.nogrid .grid,body.noprintgrid .grid{display:none!important}
  .tblock .fld:empty::before{content:none!important}
  .table .cell.picked{box-shadow:none;background:transparent}
  .break .pbreak{visibility:hidden}
  #desk{overflow:visible;padding:0;background:#fff}
  .pagewrap{width:calc(var(--pw)*1)!important;height:calc(var(--ph)*1)!important;margin:0!important;break-after:page}
  .page{transform:none!important;box-shadow:none}
  .region:hover,.region.sel{outline:none;background:none}
}

/* a new row of docked toolbars */
.dock-h .tb-break{flex-basis:100%;height:0}
.dock-v .tb-break{flex-basis:100%;width:0}

/* beta watermark down the right margin: hidden while working, shown on paper, in PDF, web page and .docx */
.page .wm{position:absolute;display:none;writing-mode:vertical-rl;text-align:center;white-space:nowrap;overflow:hidden;font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:600;color:#97a3af;opacity:.7;line-height:1;pointer-events:none;user-select:none}
.page .wm.show{display:flex;align-items:center;justify-content:center}
@media print{.page .wm{display:flex;align-items:center;justify-content:center}}

/* drawing editor: Layer Properties and Hatch */
.cad-modal-bg{position:absolute;inset:0;z-index:30;background:rgba(5,9,13,.45);display:grid;place-items:center}
.cad-modal{width:min(560px,94vw);max-height:86vh;display:flex;flex-direction:column;background:#1b232b;border:1px solid #3a4754;border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.55);color:#dfe5eb}
.cad-modal.wide{width:min(860px,96vw)}
.cad-modal .cm-head{display:flex;align-items:center;padding:8px 10px 8px 14px;border-bottom:1px solid #2b343e;font-family:var(--f-label);font-size:16px;letter-spacing:.02em}
.cad-modal .cm-head b{flex:1;font-weight:600}
.cad-modal .cm-x{width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:#9fb0c0;font-size:20px;cursor:pointer}
.cad-modal .cm-x:hover{background:#3a2328;color:#ff9f9f}
.cad-modal .cm-body{padding:10px 14px 14px;overflow:auto;position:relative}
.lm-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.lm-tools .cbtn{display:inline-flex;align-items:center;gap:5px}
.lm-tools .cbtn svg,.cad-panel .cbtn svg,.hp-bnd svg{width:16px;height:16px}
.lm-tools .sp{flex:1}
.lm-cur{font-size:12px;color:#9fb0c0}.lm-cur b{color:#ffd166}
.lm-wrap{border:1px solid #2b343e;border-radius:6px;overflow:auto;max-height:52vh}
table.lm{width:100%;border-collapse:collapse;font-size:13px}
table.lm th{position:sticky;top:0;background:#222b34;text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#9fb0c0;padding:6px 8px;border-bottom:1px solid #2b343e}
table.lm td{padding:3px 8px;border-bottom:1px solid #222a32;white-space:nowrap}
table.lm td.c{text-align:center;width:52px}
table.lm td.c>svg{width:18px;height:18px;vertical-align:middle}
table.lm td.n{color:#9fb0c0;font-family:var(--f-mono);font-size:12px}
table.lm tr{cursor:default}
table.lm tr:hover td{background:#202a33}
table.lm tr.pick td{background:#24466f}
table.lm tr.cur td.nm{color:#ffd166;font-weight:600}
table.lm td.nm input{width:100%;height:24px;border:1px solid #5d8fd0;border-radius:3px;background:#0c1014;color:#fff;padding:0 5px;font:inherit}
.lm-ic{width:30px;height:26px;border:1px solid transparent;border-radius:4px;background:transparent;color:#7f91a3;cursor:pointer;display:inline-grid;place-items:center}
.lm-ic svg{width:18px;height:18px}
.lm-ic:hover{border-color:#3f5163;background:#2a3642}
.lm-col,.lm-lt{display:inline-flex;align-items:center;gap:7px;height:26px;border:1px solid transparent;border-radius:4px;background:transparent;color:#dfe5eb;cursor:pointer;padding:0 6px;font:inherit;font-size:12.5px}
.lm-col:hover,.lm-lt:hover{border-color:#3f5163;background:#2a3642}
.lsw{display:inline-block;width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.35)}
.lt-sample{width:60px;height:8px;color:#dfe5eb}
.lm-pop{position:absolute;z-index:3;min-width:180px;background:#111820;border:1px solid #3a4754;border-radius:6px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lm-pop button{display:flex;align-items:center;gap:8px;width:100%;height:28px;border:0;border-radius:4px;background:transparent;color:#dfe5eb;cursor:pointer;padding:0 8px;font:inherit;font-size:12.5px}
.lm-pop button:hover{background:#24466f}
.lm-pop button.on{outline:1px solid #5d8fd0}
.lm-hint{font-size:12px;color:#8ea0b2;margin:8px 0 0;line-height:1.45}
.hatch-panel{position:absolute;top:10px;right:10px;z-index:6;width:min(330px,calc(100% - 20px));max-height:calc(100% - 20px);overflow:auto;background:#1b232b;border:1px solid #3a4754;border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.5);color:#dfe5eb;padding:0 12px 12px;cursor:default}
.hatch-panel .hp-head{display:flex;align-items:center;margin:0 -12px;padding:8px 8px 8px 12px;border-bottom:1px solid #2b343e;font-family:var(--f-label);font-size:16px}
.hatch-panel .hp-head b{flex:1;font-weight:600}
.hatch-panel .hp-close{width:26px;height:26px;border:0;border-radius:4px;background:transparent;color:#9fb0c0;font-size:19px;cursor:pointer}
.hatch-panel .hp-sec{font-family:var(--f-label);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#8ea0b2;margin:10px 0 6px}
.hp-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.hp-pat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px 3px;border:1px solid #33404c;border-radius:5px;background:#12181e;color:#cfd7df;cursor:pointer;font:inherit;font-size:10.5px}
.hp-pat svg{width:100%;height:auto;aspect-ratio:3/2;background:#0c1116;border-radius:3px;display:block}
.hp-pat:hover{border-color:#5d8fd0}
.hp-pat.on{border-color:#6fdc8c;box-shadow:0 0 0 1px #6fdc8c;color:#fff}
.hp-desc{font-size:12px;color:#9fb0c0;margin:6px 0 2px}
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin-top:6px}
.hp-grid label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:#9fb0c0}
.hp-grid input,.hp-grid select{width:100%;box-sizing:border-box;height:26px;border:1px solid #33404c;border-radius:4px;background:#0c1014;color:#e6eaee;padding:0 6px;font-size:12.5px;min-width:0}
.hp-bnd{display:flex;flex-direction:column;gap:5px}
.hp-bnd .cbtn{display:flex;align-items:center;gap:6px;justify-content:flex-start;width:100%}
.hp-hint{font-size:11.5px;color:#8ea0b2;margin:8px 0 0;line-height:1.4}

/* the logo in the title bar opens the home page in a new tab */
.titlebar .brandlink{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;border-radius:6px}
.titlebar .brandlink{padding:4px 6px;margin-left:-6px}.titlebar .brandlink:hover{background:rgba(255,255,255,.14)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* phones and small tablets: the menu bar only, no toolbars */
@media (max-width:900px){.dock,#floatRoot>.tbar{display:none!important}}

/* two pages side by side */
#pages.spread{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:24px}
#pages.spread .pagewrap{margin:0 0 24px}
#stSpread{display:inline-grid;place-items:center;width:28px;height:22px;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;cursor:pointer;padding:0}
#stSpread svg{width:16px;height:16px}
#stSpread.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
@media (max-width:900px){#stSpread{display:none}#pages.spread{display:block}}
@media print{#pages.spread{display:block}}
/* ---------- spreadsheet editor ---------- */
.xs-ed{position:fixed;inset:0;z-index:85;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;background:var(--chrome);color:var(--ink);font-family:var(--f-ui);font-size:13px}
.xs-top .xs-name{height:26px;width:150px;border:1px solid rgba(255,255,255,.35);border-radius:4px;background:rgba(0,0,0,.18);color:#fff;padding:0 7px;font-family:var(--f-mono);font-size:12.5px}
.xs-top .xs-name::placeholder{color:rgba(255,255,255,.6)}
.xs-tools{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:5px 8px;border-bottom:1px solid var(--line);background:var(--chrome)}
.xs-b{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:30px;padding:0 6px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;font:inherit;font-size:13px}
.xs-b svg{width:17px;height:17px}.xs-b:hover{background:var(--chrome-2);border-color:var(--line)}.xs-b.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.xs-b.ch{font-size:12.5px}
.xs-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.xs-col{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;border-radius:6px;cursor:pointer}
.xs-col:hover{background:var(--chrome-2)}.xs-col svg{width:17px;height:17px}
.xs-col input{position:absolute;left:4px;right:4px;bottom:2px;height:5px;padding:0;border:0;opacity:1;cursor:pointer;inline-size:24px;block-size:5px}
.xs-tools select{height:28px;border:1px solid var(--line);border-radius:6px;background:var(--field-bg);color:var(--ink);font-size:12.5px;padding:0 4px;max-width:150px}
.xs-fbar{position:relative;display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);background:var(--chrome)}
.xs-addr{width:96px;height:28px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);color:var(--ink);font-family:var(--f-mono);font-size:12.5px;padding:0 6px;text-align:center}
.xs-fx{font-style:italic;font-weight:600;color:var(--muted);font-family:Georgia,serif}
.xs-f{flex:1;height:28px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);color:var(--ink);font-family:var(--f-mono);font-size:13px;padding:0 8px;min-width:0}
.xs-ac{position:absolute;left:150px;top:36px;z-index:5;min-width:280px;max-width:480px;background:var(--chrome);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(10,30,50,.2);padding:4px}
.xs-ac button{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;border:0;background:transparent;padding:5px 8px;border-radius:5px;font:600 12.5px var(--f-mono);color:var(--ink);cursor:pointer}
.xs-ac button small{font:400 12px var(--f-ui);color:var(--muted)}.xs-ac button.on,.xs-ac button:hover{background:var(--accent-soft)}
.xs-wrap{position:relative;overflow:auto;background:#fff;outline:none}
.xs-grid{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;font-size:13.5px;color:#13212C;font-variant-numeric:tabular-nums}
.xs-grid td{height:24px;padding:2px 6px;border-right:1px solid #e3e8ed;border-bottom:1px solid #e3e8ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff;cursor:cell;user-select:none}
.xs-grid td.num{text-align:right}.xs-grid td.bool{text-align:center}.xs-grid td.err{color:#c92a2a}
.xs-grid tr.hd td{font-weight:600;background:#f4f7fa}
.xs-grid td.in{background-image:linear-gradient(rgba(23,120,180,.12),rgba(23,120,180,.12))}
.xs-grid thead th{position:sticky;top:0;z-index:3}
.xs-grid th{background:#eef2f6;color:#4e6272;font-weight:500;font-size:12px;border-right:1px solid #d6dee6;border-bottom:1px solid #d6dee6;height:24px;user-select:none}
.xs-grid th.xs-ch{position:sticky;top:0;cursor:s-resize}
.xs-grid th.xs-rh{position:sticky;left:0;z-index:2;cursor:e-resize;text-align:center}
.xs-grid th.xs-corner{position:sticky;left:0;top:0;z-index:5;cursor:pointer}
.xs-grid th.hl{background:#d9e8f5;color:#1778B4}
.xs-grid tr.fz td,.xs-grid tr.fz th.xs-rh{position:sticky;top:25px;z-index:2;box-shadow:0 2px 0 #9fb4c4}
.xs-grid td.fz{position:sticky;left:46px;z-index:1;box-shadow:2px 0 0 #9fb4c4}
.xs-grid tr.fz td.fz{z-index:3}
.xs-cw{position:absolute;right:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:4}
.xs-grid th.xs-ch{position:sticky}
.xs-flt{position:absolute;right:6px;top:3px;width:18px;height:18px;padding:0;border:1px solid #c5d0dc;border-radius:3px;background:#fff;font-size:10px;line-height:1;cursor:pointer;color:#4e6272}
.xs-flt.on{background:#1778B4;color:#fff;border-color:#1778B4}
.xs-box{position:absolute;pointer-events:none;border:2px solid #1778B4;z-index:2;box-sizing:border-box}
.xs-box.filling{border-style:dashed}
.xs-handle{position:absolute;right:-5px;bottom:-5px;width:8px;height:8px;background:#1778B4;border:1.5px solid #fff;pointer-events:auto;cursor:crosshair}
.xs-in{position:absolute;z-index:4;border:2px solid #1778B4;background:#fff;color:#13212C;font-family:var(--f-mono);font-size:13px;padding:0 5px;outline:none;box-shadow:0 4px 14px rgba(10,30,50,.18)}
.xs-bot{display:flex;align-items:center;gap:4px;padding:4px 8px;border-top:1px solid var(--line);background:var(--chrome);padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
.xs-bot .sp{flex:1}.xs-stat{font-size:12.5px;color:var(--muted)}
.xs-tabs{display:flex;gap:2px;overflow-x:auto;max-width:70vw}
.xs-tab{border:1px solid var(--line);border-top:0;border-radius:0 0 7px 7px;background:var(--chrome-2);color:var(--ink);padding:5px 14px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.xs-tab.on{background:#fff;color:var(--accent);font-weight:600;box-shadow:inset 0 3px 0 var(--accent)}
.xs-tab small{color:var(--brand-green);font-size:9px;vertical-align:2px}
.xs-pop{position:fixed;z-index:90;background:var(--chrome);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px rgba(10,30,50,.25);padding:10px;min-width:220px;max-width:300px;font-size:13px}
.xs-pop .xs-pl{max-height:240px;overflow:auto;margin:6px 0;display:flex;flex-direction:column;gap:3px}
.xs-pop .chk{display:flex;gap:6px;align-items:center}.xs-pb{display:flex;justify-content:flex-end;gap:6px}
.xs-menu{padding:4px;min-width:200px}.xs-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:5px;font:inherit;color:var(--ink);cursor:pointer}
.xs-menu button:hover{background:var(--accent-soft)}.xs-menu hr{border:0;border-top:1px solid var(--line);margin:3px 0}
.xs-help{position:fixed;right:12px;top:110px;bottom:52px;width:min(420px,calc(100vw - 24px));z-index:88;background:var(--chrome);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 44px rgba(10,30,50,.28);display:flex;flex-direction:column;overflow:hidden}
.xs-hh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.xs-hh input{flex:1;height:28px;border:1px solid var(--line);border-radius:5px;padding:0 8px;background:var(--field-bg);color:var(--ink)}
.xs-note{margin:8px 12px;font-size:12.5px;color:var(--muted);line-height:1.45}
.xs-hl{overflow:auto;padding:0 8px 10px}.xs-hc{font:600 11.5px var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 4px 4px}
.xs-hl button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 8px;border-radius:6px;cursor:pointer;color:var(--ink)}
.xs-hl button:hover{background:var(--accent-soft)}.xs-hl code{display:block;font:600 12px var(--f-mono)}.xs-hl span{font-size:12.5px;color:var(--muted)}
.table .topen{display:none;margin-left:2px;border:0;background:transparent;color:var(--accent);cursor:pointer;font-size:13px;padding:0 2px}
.region.table.sel .topen,.region.table:focus-within .topen{display:inline}
.ttabs{font-size:11.5px;color:var(--paper-label,#5a6672);padding:3px 2px 0;font-family:var(--f-label);letter-spacing:.02em}
@media print{.ttabs{display:none}}
@media (max-width:700px){.xs-tools{overflow-x:auto;flex-wrap:nowrap}.xs-ac{left:8px}}

/* drawing editor: menu bar and tool windows */
.cad-menubar{display:flex;gap:2px;padding:2px 8px;background:#11171c;border-bottom:1px solid #2b343e}
.cm-btn{height:26px;padding:0 10px;border:0;border-radius:4px;background:transparent;color:#dfe5eb;font:inherit;font-size:13px;cursor:pointer}
.cm-btn:hover,.cm-btn.open{background:#24466f}
.cad-menu{z-index:30;max-height:calc(100% - 20px);overflow:auto;min-width:240px}
.cad-menu button{height:28px}.cad-menu .ck{display:inline-flex;align-items:center;justify-content:center;width:18px}.cad-menu .ck svg{width:15px;height:15px}
.cad-menu .lb{flex:1}.cad-menu kbd{font:11px var(--f-mono);color:#8ea0b2;margin-left:16px}
.cad-menu button:disabled{opacity:.45;cursor:default;background:transparent}
.cad-side{display:flex;flex-direction:column;width:300px;min-height:0;background:#11161b;overflow:hidden}
.cad-side[data-side=left]{border-right:1px solid #2b343e}.cad-side[data-side=right]{border-left:1px solid #2b343e}
.cad-side.empty{width:0;border:0!important}
.cad-win{display:flex;flex-direction:column;min-height:0;background:#11161b;border-bottom:1px solid #2b343e}
.cad-side .cad-win[data-w=props]{flex:1 1 240px}
.cad-side .cad-win:not([data-w=props]){flex:0 1 auto;max-height:46%}
.cad-side .cad-win:only-child{flex:1 1 auto;max-height:none}
.cad-win.float{position:absolute;pointer-events:auto;max-height:70%;border:1px solid #3a4754;border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.5);overflow:hidden;z-index:6}
.cad-win.dragging{opacity:.85}
.cw-h{display:flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 4px;background:#161e25;border-bottom:1px solid #2b343e;cursor:grab;user-select:none;flex:none}
.cw-h b{flex:1;font:600 12px/1 var(--f-label);letter-spacing:.09em;text-transform:uppercase;color:#a9b8c6}
.cw-grip{width:8px;height:14px;background-image:radial-gradient(#5d6d7c 1px,transparent 1.2px);background-size:4px 4px}
.cw-x{width:22px;height:22px;border:0;border-radius:4px;background:transparent;color:#8ea0b2;font-size:16px;cursor:pointer}.cw-x:hover{background:#2b343e;color:#fff}
.cw-b{overflow:auto;min-height:0;flex:1 1 auto}
.cad-win:not([data-w=props]) .cw-b{padding:8px 10px}
.cw-drop{position:absolute;background:rgba(46,169,97,.22);border:2px dashed #2EA961;border-radius:6px;pointer-events:none}
.cw-tgs{display:grid;gap:4px;margin-bottom:8px}
.cw-tg{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border:1px solid #33404c;border-radius:5px;background:#1d252d;color:#cfd8e1;font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.cw-tg svg{width:16px;height:16px}.cw-tg span{flex:1}.cw-tg kbd{font:11px var(--f-mono);color:#8ea0b2}
.cw-tg.on{background:#173f2a;border-color:#2EA961;color:#eafff1}
.cw-row{display:grid;grid-template-columns:1fr 90px;gap:8px;align-items:center;font-size:12px;color:#aab6c2;margin-bottom:8px}
.cw-row input{height:26px;border:1px solid #33404c;border-radius:4px;background:#0c1014;color:#e6eaee;padding:0 6px;font-family:var(--f-mono);font-size:12px;min-width:0}
.cw-sec{display:flex;justify-content:space-between;align-items:center;font:600 11px/1 var(--f-label);letter-spacing:.09em;text-transform:uppercase;color:#8ea0b2;margin:6px 0}
.cw-lnk{border:0;background:none;color:#7fb7e6;font-size:11px;cursor:pointer;padding:0;text-transform:none;letter-spacing:0}
.cw-snaps{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}
.cw-chk{display:flex;align-items:center;gap:6px;font-size:12px;color:#cfd8e1;cursor:pointer}.cw-chk input{width:14px;height:14px;margin:0}
.cw-lays{display:grid;gap:2px;margin-bottom:8px}
.cw-lay{display:grid;grid-template-columns:14px 16px minmax(0,1fr) 24px 24px;gap:6px;align-items:center;padding:3px 4px;border-radius:4px;cursor:pointer;font-size:12.5px}
.cw-lay:hover{background:#1d252d}.cw-lay.cur{background:#1b2c3c}.cw-lay.cur .cw-ln{color:#ffd166}
.cw-cur{color:#6fdc8c;font-size:10px}.cw-ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-ic{width:24px;height:22px;border:0;border-radius:4px;background:transparent;cursor:pointer;color:#9fb0c0;display:inline-flex;align-items:center;justify-content:center}.cw-ic:hover{background:#2b343e}.cw-ic svg{width:15px;height:15px}
.cw-btns{display:flex;gap:6px;flex-wrap:wrap}.cw-btns .cbtn{display:inline-flex;align-items:center;gap:5px}.cw-btns svg{width:15px;height:15px}
.hatch-panel.in-win{position:static;width:auto;max-height:none;box-shadow:none;border:0;background:transparent;padding:0}
.hatch-panel.in-win:not(.edit) .hp-head{display:none}
/* autocomplete ghost text in text blocks */
.ac-ghost{position:absolute;z-index:3;white-space:pre;color:var(--muted,#8a99a8);opacity:.75;pointer-events:none;user-select:none}
@media print{.ac-ghost{display:none}}
.tbtn.tcase{display:inline-flex;align-items:center;gap:1px;padding-right:3px}.tbtn.tcase .dd{font-size:9px;opacity:.7}

/* 1.3.0: dragging on the sheet (selecting regions, moving a picture) never selects the letters of other regions;
   text can still be selected while a line, text block, cell or field is being edited */
.page,.page .region{-webkit-user-select:none;user-select:none}
.page input,.page textarea,.page [contenteditable="true"],.page [contenteditable=""],.page .tedit,.page .medit{-webkit-user-select:text;user-select:text}

/* 1.3.0: formatting on maths lines (bold, italic, underline, strikethrough, colour, highlight) */
.region.math.mf-b .mrender svg path,.region.math.mf-b .mrender svg use,.region.math.mf-b .mrender svg rect{stroke:currentColor;stroke-width:32}
.region.math.mf-i .mrender mjx-container svg{transform:skewX(-11deg)}
.region.math.mf-u .mrender{text-decoration:underline;box-shadow:inset 0 -1.5px 0 currentColor;padding-bottom:1px}
.region.math.mf-s .mrender{background-image:linear-gradient(currentColor,currentColor);background-size:100% 1.4px;background-position:0 54%;background-repeat:no-repeat}
.region.math .mrender{border-radius:2px}

/* 1.3.0: matrix grid editor */
#mxGrid{position:fixed;z-index:70;background:var(--panel,#fff);color:var(--ink,#13212c);border:1px solid var(--line,#d6e3ec);border-radius:10px;box-shadow:0 10px 30px rgba(10,30,50,.22);padding:10px 12px;min-width:300px;max-width:min(92vw,900px);font:13px/1.4 var(--f-ui,system-ui)}
#mxGrid .mxg-h,#mxGrid .mxg-f{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#mxGrid .mxg-h b{font-size:14px}#mxGrid .mxg-size{color:var(--muted,#4e6272);font-variant-numeric:tabular-nums}#mxGrid .sp{flex:1}
#mxGrid .sbtn{padding:3px 9px;font-size:12px}
#mxGrid .mxg-wrap{display:flex;align-items:stretch;justify-content:center;margin:10px 0;max-height:60vh;overflow:auto;padding:4px 0}
#mxGrid .mxg-br{width:9px;border:2px solid currentColor;flex:none}
#mxGrid .mxg-br.l{border-right:0;border-radius:3px 0 0 3px}#mxGrid .mxg-br.r{border-left:0;border-radius:0 3px 3px 0}
#mxGrid .mxg-cells{display:grid;gap:5px 8px;padding:6px 8px}
#mxGrid .mxg-cells input{font:15px/1.3 'STIX Two Math','Cambria Math','Times New Roman',serif;text-align:center;min-width:52px;padding:4px 6px;border:1px dashed var(--line,#c9d6e0);border-radius:4px;background:transparent;color:inherit}
#mxGrid .mxg-cells input:focus{outline:2px solid var(--accent,#1778b4);outline-offset:0;border-style:solid;background:var(--wash,#f3f8fb)}
#mxGrid .mxg-hint{color:var(--muted,#4e6272);font-size:11.5px}

/* 1.3.0: cells picked while a formula is typed: a moving dotted border, as in other spreadsheets */
.xs-pick{position:absolute;pointer-events:none;z-index:4;box-sizing:border-box;
  background:linear-gradient(90deg,#1778b4 50%,transparent 0) repeat-x 0 0/8px 2px,linear-gradient(90deg,#1778b4 50%,transparent 0) repeat-x 0 100%/8px 2px,
  linear-gradient(0deg,#1778b4 50%,transparent 0) repeat-y 0 0/2px 8px,linear-gradient(0deg,#1778b4 50%,transparent 0) repeat-y 100% 0/2px 8px,rgba(23,120,180,.08);
  animation:xsAnts .6s linear infinite}
@keyframes xsAnts{to{background-position:8px 0,-8px 100%,0 -8px,100% 8px,0 0}}
@media (prefers-reduced-motion:reduce){.xs-pick{animation:none}}

/* 1.3.0: bright themes keep the title text readable on light parts of the gradient */
:root[data-bright] .titlebar,:root[data-bright] .sk-top{text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* 1.3.0: animated pictures in the context tips (51-tip-animations) */
.tip-anim{margin:6px 0 8px;border-radius:6px;background:var(--field-bg,#fff);border:1px solid var(--line);overflow:hidden}
.ta-svg{display:block;width:100%;height:auto}
.ta-svg .ta-ax{stroke:var(--muted);stroke-width:1;fill:none;opacity:.6}
.ta-svg .ta-ln{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ta-svg .ta-ln2{stroke:#e07a1f;stroke-width:2.2;fill:none;stroke-linecap:round}
.ta-svg .ta-tan{stroke:#e07a1f;stroke-width:2.2;stroke-linecap:round}
.ta-svg .ta-fill{fill:var(--accent);fill-opacity:.28}
.ta-svg .ta-fill2{fill:#2ea961;fill-opacity:.6}
.ta-svg .ta-bar{fill:var(--accent);fill-opacity:.85}
.ta-svg .ta-dot{fill:#e5383b;stroke:#fff;stroke-width:1.2}
.ta-svg .ta-pt{fill:#e07a1f}
.ta-svg .ta-dash{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3;fill:none}
.ta-svg .ta-brk{stroke:#2ea961;stroke-width:2;stroke-dasharray:5 3}
.ta-svg .ta-fld{stroke:var(--muted);stroke-width:1.2;opacity:.55}
.ta-svg .ta-br{stroke:var(--ink);stroke-width:1.6;fill:none}
.ta-svg text{fill:var(--ink);font-family:var(--f-ui,system-ui)}
.ta-svg .ta-tx{font-size:12px;font-weight:600}
.ta-svg .ta-sm{font-size:10.5px;fill:var(--muted)}
.ta-svg .ta-mx{font:15px 'STIX Two Math','Cambria Math','Times New Roman',serif;fill:var(--ink)}
.ta-svg .ta-acc,.ta-svg .ta-acc text{fill:var(--accent)}
.ta-svg [style*="offset-path"]{offset-distance:0%}
.ta-svg .ta-reveal{animation:taReveal 4s ease-in-out infinite}
.ta-svg .ta-pop{opacity:0;animation:taPop 5s linear infinite}
.ta-svg .ta-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:taDraw 4s ease-in-out infinite}
.ta-svg .ta-move{animation:taMove 4.5s ease-in-out infinite}
.ta-svg .ta-late{opacity:0;animation:taLate 4.5s linear infinite}
.ta-svg circle.ta-late{transform-box:fill-box;transform-origin:center}
.ta-svg .ta-steps{animation:taSteps 4.5s ease-in-out infinite}
.ta-svg .ta-shear{transform-origin:60px 100px;animation:taShear 4.5s ease-in-out infinite}
.ta-svg .ta-stretch{vector-effect:non-scaling-stroke;transform-origin:40px 100px;animation:taStretch 4.5s ease-in-out infinite}
.ta-svg .ta-fadeout{animation:taFadeOut 4.5s ease-in-out infinite}
.ta-svg .ta-seq{opacity:0}
@keyframes taReveal{0%{transform:scaleX(0)}60%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes taSlide{from{offset-distance:4%}to{offset-distance:96%}}
@keyframes taOnce{0%{offset-distance:0%}60%,90%{offset-distance:100%}100%{offset-distance:0%}}
@keyframes taPop{0%{opacity:0}6%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes taDraw{0%{stroke-dashoffset:100}55%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes taMove{0%,20%{transform:translate(0,0)}55%,88%{transform:translate(var(--dx,0),var(--dy,0))}100%{transform:translate(0,0)}}
@keyframes taLate{0%,72%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1.5)}88%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes taSteps{0%,4%{transform:translateX(0)}14%,18%{transform:translateX(var(--s1))}28%,32%{transform:translateX(var(--s2))}42%,46%{transform:translateX(var(--s3))}56%,60%{transform:translateX(var(--s4))}70%,92%{transform:translateX(var(--s6))}100%{transform:translateX(0)}}
@keyframes taShear{0%,15%{transform:none}55%,88%{transform:matrix(1.4,-0.16,-0.64,1.04,0,0)}100%{transform:none}}
@keyframes taStretch{0%,15%{transform:scale(1)}55%,88%{transform:scale(2.3)}100%{transform:scale(1)}}
@keyframes taFadeOut{0%,20%{opacity:1}45%,90%{opacity:0}100%{opacity:1}}
@keyframes taSeg2{0%{opacity:0}5%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes taSeg3{0%{opacity:0}4%,30%{opacity:1}33.3%,100%{opacity:0}}
@keyframes taSeg4{0%{opacity:0}3%,22%{opacity:1}25%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ta-svg *{animation:none!important}.ta-svg .ta-pop,.ta-svg .ta-late{opacity:1}.ta-svg .ta-draw{stroke-dashoffset:0}.ta-svg .ta-seq:first-of-type{opacity:1}}

/* 1.3.0: animated welcome tour (52-welcome-tour) */
#tourHint .th-off{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-top:6px}
#tourPlay{position:fixed;inset:0;z-index:90;background:rgba(10,24,36,.45);display:flex;align-items:center;justify-content:center;padding:16px}
#tourPlay .tp-card{width:min(760px,100%);background:var(--chrome,#fff);color:var(--ink);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column}
#tourPlay .tp-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--title-bg);background-image:var(--title-img,none);color:var(--title-fg);border-bottom:3px solid var(--title-line,transparent)}
#tourPlay .tp-top .sp,#tourPlay .tp-foot .sp{flex:1}
#tourPlay .tp-x{background:none;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
#tourPlay .tp-stage{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;padding:18px;align-items:center}
#tourPlay .tp-sheet{position:relative;height:190px;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.15);background-image:linear-gradient(#e8eef3 1px,transparent 1px),linear-gradient(90deg,#e8eef3 1px,transparent 1px);background-size:16px 16px;overflow:hidden;color:#13212c}
#tourPlay .tp-line{position:absolute;left:24px;right:12px;display:flex;align-items:center;gap:8px;min-height:30px}
#tourPlay .tp-cross{width:14px;height:14px;position:relative;opacity:0;transition:opacity .2s}
#tourPlay .tp-cross.on{opacity:1}
#tourPlay .tp-cross::before,#tourPlay .tp-cross::after{content:'';position:absolute;background:#d62828;left:6px;top:0;width:2px;height:14px}
#tourPlay .tp-cross::after{transform:rotate(90deg)}
#tourPlay .tp-edit{font:15px 'JetBrains Mono',ui-monospace,monospace;padding:3px 6px;border-bottom:2px solid transparent;min-width:2ch;white-space:pre}
#tourPlay .tp-edit.on{border-color:#d62828;background:#fff8e6}
#tourPlay .tp-edit.on::after{content:'';display:inline-block;width:1.5px;height:1.1em;background:#13212c;vertical-align:-2px;margin-left:1px;animation:tpBlink 1s steps(1) infinite}
#tourPlay .tp-edit.tp-totext{font:15px var(--f-ui,system-ui);border-color:#1778b4;background:#eef6fc;border-style:dashed}
#tourPlay .tp-text{font:16px var(--f-ui,system-ui);animation:tpIn .35s ease-out}
#tourPlay .tp-math{font-size:17px;animation:tpIn .35s ease-out}
#tourPlay .tp-math svg{vertical-align:middle}
#tourPlay .tp-key{font:600 12px var(--f-ui,system-ui);background:#13212c;color:#fff;border-radius:5px;padding:3px 7px;animation:tpIn .2s ease-out}
#tourPlay .tp-pic{width:100%;height:auto}
#tourPlay .tp-ib{fill:#f3f8fb;stroke:#d6e3ec}
#tourPlay .tp-cap h3{margin:0 0 6px;font-size:18px}
#tourPlay .tp-cap p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
#tourPlay .tp-foot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
#tourPlay .tp-off{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
#tourPlay .tp-dots{display:flex;gap:5px}
#tourPlay .tp-dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);padding:0;cursor:pointer}
#tourPlay .tp-dots button.on{background:var(--accent)}
@keyframes tpIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes tpBlink{50%{opacity:0}}
@media (max-width:640px){#tourPlay .tp-stage{grid-template-columns:1fr}#tourPlay .tp-sheet{height:170px}}
#tourPlay .tp-pic .ta-mx{font-size:24px}#tourPlay .tp-pic .ta-tx{font-size:15px}#tourPlay .tp-pic .ta-ln{stroke-width:3}

/* ---------- "How do I…?" help assistant and About dialog (30-help-assistant.js) ---------- */
#bHelp{display:inline-flex;align-items:center;gap:6px}
#bHelp svg{width:16px;height:16px}
#helpPanel{position:fixed;right:18px;bottom:44px;width:min(380px,calc(100vw - 24px));height:min(540px,calc(100vh - 120px));z-index:60;
  display:flex;flex-direction:column;background:var(--chrome);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 50px rgba(10,30,50,.28),0 2px 6px rgba(10,30,50,.12);overflow:hidden}
#helpPanel .hp-h{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;background:var(--title-bg);background-image:var(--title-img,none);color:var(--title-fg);cursor:move;border-bottom:3px solid var(--title-line,transparent);user-select:none}
#helpPanel .hp-h h2{margin:0;font:600 15px/1 var(--f-label);letter-spacing:.03em;flex:1}
#helpPanel .hp-ic svg{width:18px;height:18px;display:block}
#helpPanel .hp-x{background:none;border:0;color:inherit;font-size:20px;line-height:1;width:28px;height:28px;border-radius:5px;cursor:pointer}
#helpPanel .hp-x:hover{background:rgba(255,255,255,.16)}
#helpPanel .hp-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--chrome-3)}
.hp-msg{max-width:92%;padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.5}
.hp-msg.bot{align-self:flex-start;background:var(--chrome);border:1px solid var(--line);border-top-left-radius:3px}
.hp-msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-top-right-radius:3px}
.hp-msg h3{margin:0 0 4px;font:600 14px/1.3 var(--f-ui);color:var(--accent)}
.hp-msg p{margin:0 0 6px}.hp-msg p:last-child{margin-bottom:0}
.hp-msg ol,.hp-msg ul{margin:4px 0 6px;padding-left:20px}
.hp-msg code{font-family:var(--f-mono);font-size:12px;background:var(--accent-soft);padding:1px 4px;border-radius:3px;white-space:nowrap}
.hp-msg .hp-small{font-size:12px;color:var(--muted)}
.hp-act{margin-top:8px}
.hp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hp-chip{border:1px solid var(--line);background:var(--chrome-3);color:var(--accent);border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.hp-chip:hover{border-color:var(--accent);background:var(--accent-soft)}
#helpPanel .hp-f{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);background:var(--chrome)}
#helpPanel .hp-f input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--field-bg)}
#helpPanel .hp-f input:focus{outline:2px solid var(--accent);outline-offset:-1px}
#helpPanel .hp-send{width:38px;border:0;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center}
#helpPanel .hp-send svg{width:17px;height:17px}
@media print{#helpPanel{display:none!important}}
.about-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.about-head svg{width:64px;height:32px;flex:none}
.about-head b{display:block;font:600 20px/1.1 var(--f-label);letter-spacing:.02em}
.about-stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 10px;padding:8px 12px;border-radius:8px;background:var(--accent-soft);font-size:13px;color:var(--muted)}
.about-stats b{color:var(--ink);font-weight:600}
.about-stats.ready span{color:var(--ink)}
.about-head span{font-size:12.5px;color:var(--muted)}
/* ---------- File ▸ Cloud: list of worksheets in Google Drive / OneDrive (31-cloud-drives.js) ---------- */
#clFind{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:5px;background:var(--field-bg);margin-bottom:8px}
.cl-list{max-height:min(360px,55vh);overflow-y:auto;border:1px solid var(--line);border-radius:6px}
.cl-row{display:flex;width:100%;gap:12px;align-items:baseline;justify-content:space-between;padding:8px 10px;border:0;border-bottom:1px solid var(--line);background:var(--field-bg);text-align:left;cursor:pointer}
.cl-row:last-child{border-bottom:0}
.cl-row:hover,.cl-row:focus-visible{background:var(--accent-soft)}
.cl-n{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-w{font-size:12px;color:var(--muted);white-space:nowrap}

/* feedback card */
#fbCard{position:fixed;right:20px;bottom:56px;z-index:95;width:min(400px,calc(100vw - 32px));background:var(--chrome);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--brand-green);border-radius:10px;box-shadow:0 14px 40px rgba(10,30,50,.28);padding:16px 18px 12px}
#fbCard h2{font-family:var(--f-label);font-size:19px;font-weight:600;margin:0 26px 4px 0;line-height:1.2}
#fbCard .fb-sub{margin:0 0 10px;color:var(--muted);font-size:13px}
#fbCard .fb-x{position:absolute;right:8px;top:8px;width:28px;height:28px;border:0;border-radius:6px;background:transparent;font-size:20px;color:var(--muted);cursor:pointer}
#fbCard .fb-x:hover{background:var(--chrome-2)}
#fbCard .fb-rate{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
#fbCard .fb-rate button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;border:1px solid var(--line);border-radius:8px;background:var(--field-bg);cursor:pointer;color:var(--ink)}
#fbCard .fb-rate button span{font-size:22px;line-height:1}
#fbCard .fb-rate button b{font-size:12px;font-weight:600;color:var(--muted)}
#fbCard .fb-rate button:hover{border-color:var(--accent)}
#fbCard .fb-rate button.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
#fbCard textarea,#fbCard input[type=email],#fbCard input#fbName{display:block;width:100%;border:1px solid var(--line);border-radius:6px;background:var(--field-bg);color:var(--ink);font:inherit;font-size:13.5px;padding:7px 9px;margin-bottom:8px;resize:vertical}
#fbCard .fb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#fbCard .fb-row .sp{flex:1}
#fbCard #fbLong{font-size:13px;color:var(--accent)}
#fbCard .fb-note{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
#fbCard .fb-wl{margin:4px 0 10px;padding:10px 12px 8px;border-radius:8px;background:var(--accent-soft);border:1px solid var(--line)}
#fbCard .fb-wl h3{margin:0 0 3px;font-family:var(--f-label);font-size:16px;font-weight:600}
#fbCard .fb-wl p{margin:0 0 8px;font-size:13px;line-height:1.4}
#fbCard .fb-wl .fb-note{margin:0}
#fbCard .fb-wl-f{display:grid;grid-template-columns:1fr 1.3fr;gap:6px}
#fbCard .fb-wl-f input{margin-bottom:6px!important}
@media (max-width:480px){#fbCard{right:8px;bottom:8px;max-height:calc(100vh - 16px);overflow:auto}#fbCard .fb-wl-f{grid-template-columns:1fr}}
#tourHint{position:fixed;left:50%;top:120px;transform:translateX(-50%);z-index:70;width:min(420px,calc(100vw - 32px));background:var(--chrome);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--brand-blue,#1778B4);border-radius:10px;box-shadow:0 14px 40px rgba(10,30,50,.25);padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px}
#tourHint b{font:600 18px/1.2 var(--f-label)}
#tourHint span{font-size:13.5px;color:var(--muted)}
#tourHint div{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}

/* Format ▸ Styles */
.sty-wrap{display:grid;grid-template-columns:150px 1fr;gap:16px}
.sty-list{display:flex;flex-direction:column;gap:4px}
.sty-item{text-align:left;border:1px solid var(--line);background:var(--field-bg);color:var(--ink);border-radius:6px;padding:7px 10px;font:inherit;font-size:13.5px;cursor:pointer}
.sty-item.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.sty-col{display:flex;gap:10px;align-items:center}.sty-col input[type=color]{width:48px;height:30px;padding:0;border:1px solid var(--line);border-radius:4px}
.sty-checks{grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap}
.sty-prev{margin:14px 0 10px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#13212C;min-height:64px;font-family:var(--f-ui);font-size:11pt}
.sty-prev>*{margin:0!important}
@media (max-width:560px){.sty-wrap{grid-template-columns:1fr}.sty-list{flex-direction:row;flex-wrap:wrap}}

/* context tip at the top of the variable store */
#tipBox{margin:8px 10px 10px;padding:10px 12px;border-radius:8px;background:var(--accent-soft);border:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ink)}
#tipBox .tip-h{font:600 12px/1 var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
#tipBox .tip-s{display:block;font:500 12.5px/1.4 var(--f-mono);background:var(--field-bg);border:1px solid var(--line);border-radius:5px;padding:5px 7px;margin-bottom:6px;white-space:pre-wrap;word-break:break-word}
#tipBox p{margin:0 0 6px}
#tipBox .tip-ex{display:block;width:100%;text-align:left;font:500 12px/1.4 var(--f-mono);border:1px dashed var(--accent);background:transparent;color:var(--accent);border-radius:5px;padding:5px 7px;cursor:pointer}
#tipBox .tip-ex:hover{background:var(--field-bg)}
/* Graph settings */
.g-wrap{display:grid;grid-template-columns:minmax(300px,1.15fr) 1fr;gap:18px;align-items:start}
.g-prev{position:sticky;top:0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;overflow:hidden}
.g-prev svg{width:100%;height:auto;display:block}
.g-set{display:flex;flex-direction:column;gap:6px;min-width:0}
.g-h{font:600 12px/1 var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 2px}
.g-f input{width:100%;font-family:var(--f-mono);font-size:13px}
.g-f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.g-types{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.g-type{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:1px solid var(--line);border-radius:7px;background:var(--field-bg);color:var(--ink);cursor:pointer;font:inherit;font-size:11px;line-height:1.15;text-align:center}
.g-type.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent);color:var(--accent)}
.g-checks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.g-scale{display:grid;grid-template-columns:1fr 1fr auto;gap:6px 10px;align-items:end;font-size:12.5px;color:var(--muted)}
.g-scale label{display:flex;flex-direction:column;gap:3px}.g-scale label.chk{flex-direction:row;align-items:center;color:var(--ink);padding-bottom:6px}
.g-scale input[type=number],.g-scale input[type=text]{width:100%}
.g-scale .g-wide{grid-column:1/-1}
.g-sers{display:flex;flex-direction:column;gap:6px}
.g-ser{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.g-ser b{flex:1 0 100%}.g-ser input[type=range]{width:80px}
.g-ser b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-mono);font-size:12px}
.g-ser input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--line);border-radius:4px}
.g-ser select,.g-ser input[type=number]{font-size:12.5px;padding:4px 5px}
@media (max-width:820px){.g-wrap{grid-template-columns:1fr}.g-prev{position:static}}
.dlg.wide.graph{width:min(960px,100%)}
/* keyboard: menu letters, command search, shortcut editor */
.keytips .mbtn,.keytips .mi{position:relative}
.kt{position:absolute;right:3px;top:2px;min-width:15px;height:15px;padding:0 3px;border-radius:4px;background:var(--brand-green,#2EA961);color:#fff;font:700 10px/15px var(--f-mono,monospace);text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.25);pointer-events:none}
.mi .kt{right:auto;left:7px;top:50%;transform:translateY(-50%)}
.keytips .mi .ck{visibility:hidden}
.cp-q{display:block;width:100%;border:1px solid var(--line);border-radius:6px;background:var(--field-bg);color:var(--ink);font:inherit;font-size:15px;padding:8px 10px;margin-bottom:8px}
.cp-list{max-height:min(52vh,420px);overflow:auto;border:1px solid var(--line);border-radius:6px}
.cp-i{display:flex;align-items:center;gap:10px;padding:7px 10px;cursor:pointer;font-size:14px}
.cp-i span{flex:1}.cp-i kbd,.sc-k{font:12px var(--f-mono,monospace);color:var(--muted)}
.cp-i.on,.cp-i:hover{background:var(--accent-soft)}
.cp-none{padding:10px;color:var(--muted)}
.sc-wrap{max-height:min(46vh,420px);overflow:auto;border:1px solid var(--line);border-radius:6px}
.sc-tab td{padding:4px 8px;font-size:13px}.sc-tab th{position:sticky;top:0;background:var(--chrome);text-align:left;padding:6px 8px;font-size:12px}
.sc-a{white-space:nowrap;text-align:right}.sc-a .sbtn{padding:2px 8px;font-size:12px;margin-left:4px}
.sc-k .bad{color:var(--bad,#c0392b)}.sc-k .muted{color:var(--muted)}
/* View ▸ Show key presses */
#keyFlash{position:fixed;left:16px;bottom:40px;z-index:400;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
#keyFlash .kf{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:9px;background:var(--chrome);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--accent);box-shadow:0 8px 24px rgba(10,30,50,.22);font:600 15px/1.2 var(--f-label,var(--f-ui));letter-spacing:.02em;opacity:0;transform:translateY(6px);transition:opacity .14s ease,transform .14s ease}
#keyFlash .kf.in{opacity:.96;transform:none}
#keyFlash .kf.out{opacity:0;transform:translateY(-4px);transition:opacity .42s ease,transform .42s ease}
#keyFlash .kf i{font-style:normal;font-size:12px;color:var(--muted)}
@media print{#keyFlash{display:none}}
#keyFlash[data-size=s] .kf{font-size:12px;padding:5px 10px}
#keyFlash[data-size=l] .kf{font-size:20px;padding:9px 16px}
#keyFlash[data-size=xl] .kf{font-size:27px;padding:12px 20px;border-radius:12px}
#keyFlash .kf.typing span{font-family:var(--f-mono,monospace);font-weight:500;white-space:pre}