:root{
    --board:#241f1a; --hud:#e8e0d2; --hud-dim:#a89e8c; --line:rgba(232,224,210,.14);
  }
  html,body{margin:0;height:100%;overflow:hidden;background:var(--board);
            overscroll-behavior:none;-webkit-text-size-adjust:100%;}
  #stage{position:fixed;inset:0;display:block;cursor:grab;
         touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
  .hud{position:fixed;z-index:10;color:var(--hud);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
       pointer-events:none;user-select:none;
       text-shadow:0 1px 2px rgba(20,16,12,.85), 0 2px 10px rgba(20,16,12,.55);}
  .hud b{font-weight:600;}
  #brand{top:18px;left:22px;line-height:1.35;}
  #brand .word{font-size:15px;letter-spacing:.02em;}
  #brand .word i{font-style:normal;color:var(--hud-dim);}
  #brand .sub{font-size:11px;color:var(--hud-dim);letter-spacing:.14em;text-transform:uppercase;margin-top:2px;}
  #proof{top:18px;right:22px;text-align:right;font-variant-numeric:tabular-nums;line-height:1.5;}
  #proof .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hud-dim);}
  #proof .val{font-size:15px;}
  #proof .val em{font-style:normal;color:var(--hud-dim);font-size:12px;}
  #path{left:22px;bottom:66px;font-size:12px;color:var(--hud-dim);max-width:70vw;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;}
  #path .crumb{color:var(--hud-dim);cursor:pointer;}
  #path .crumb:hover{color:var(--hud);text-decoration:underline;}
  #path b{color:var(--hud);font-weight:500;}
  /* the one place that explains the controls has to be the most readable thing down here, not
     the least: dim text on the board was invisible against a pale sheet */
  #hints{left:22px;bottom:20px;font-size:11.5px;letter-spacing:.05em;color:var(--hud);
         display:flex;flex-wrap:wrap;gap:3px 15px;max-width:calc(100vw - 200px);
         background:rgba(18,15,11,.82);border:1px solid var(--line);border-radius:999px;
         padding:8px 15px;text-shadow:none;}
  #hints span{white-space:nowrap;color:var(--hud-dim);}
  #hints span b{font-weight:600;color:var(--hud);}
  #hints kbd{font-family:inherit;color:var(--hud);border:1px solid rgba(232,224,210,.4);border-radius:4px;
             padding:1px 5px;font-size:10px;}
  /* a phone is for using, not for instrumentation: the proof readout and the gesture
     cheatsheet are desktop-only, and the trail becomes the one bit of orientation */
  @media (max-width:640px){
    #proof, #hints, #brand{display:none}   /* the trail below is the orientation you need */
    #path{display:block;bottom:max(14px,env(safe-area-inset-bottom));font-size:12px;max-width:64vw}
  }
  /* finger-sized controls, and a toolbar the on-screen keyboard can't bury */
  .coarse .ed-tools{position:fixed;left:50%!important;transform:translateX(-50%);
                    top:max(8px,env(safe-area-inset-top))!important;padding:6px 8px;}
  .coarse .ed-tools button{min-width:40px;height:38px;font-size:16px;}
  .coarse .ed-swatches{padding:7px 10px;}
  .coarse .ed-swatches button{width:26px;height:26px;}
  .coarse #gear{width:44px;height:44px;font-size:19px;}
  .coarse #panel{width:min(74vw,260px);}
  .coarse #panel input[type=range]{height:30px;}
  #menu{right:22px;bottom:22px;pointer-events:auto;text-shadow:none;}
  .btnrow{display:flex;gap:8px;justify-content:flex-end;}
  .mbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(232,224,210,.38);
        background:rgba(46,39,31,.94);color:var(--hud);font-size:18px;cursor:pointer;line-height:1;
        box-shadow:0 2px 10px rgba(0,0,0,.45);}
  .mbtn:hover{background:rgba(70,59,46,.96);border-color:rgba(232,224,210,.7);}
  .mbtn.on{background:rgba(200,185,138,.9);color:#241f1a;}
  #panel,#treepanel,#findpanel,#worldpanel,#mailpanel,#timepanel{position:absolute;right:0;bottom:44px;width:250px;
         background:rgba(26,22,18,.95);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
  /* worlds: separate boards, one at a time */
  #worldpanel{width:296px;}
  .wlist{max-height:min(50vh,360px);overflow:auto;margin:-2px -4px 0;padding:0 4px;}
  .wrow{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:8px;
        border:1px solid transparent;cursor:pointer;}
  .wrow:hover{background:rgba(255,255,255,.08);}
  .wrow.on{background:rgba(255,255,255,.13);border-color:var(--line);}
  .wname{flex:1;min-width:0;font-size:13px;color:var(--hud);white-space:nowrap;
         overflow:hidden;text-overflow:ellipsis;}
  .wrow.on .wname{font-weight:600;}
  .wsub{font-size:10.5px;color:var(--hud-dim);white-space:nowrap;}
  .wact{opacity:0;display:flex;gap:3px;}
  .wrow:hover .wact,.wrow.on .wact{opacity:1;}
  .wact button{background:none;border:1px solid transparent;border-radius:6px;color:var(--hud-dim);
        font:inherit;font-size:12px;line-height:1;padding:3px 5px;cursor:pointer;}
  .wact button:hover{background:rgba(255,255,255,.16);color:var(--hud);border-color:var(--line);}
  .wact button.danger:hover{background:rgba(220,90,60,.3);color:#ffd9cd;}
  .wrename{flex:1;min-width:0;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:6px;
        color:var(--hud);font:inherit;font-size:13px;padding:3px 6px;}
  .wfoot{display:flex;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}
  .wfoot .abtn{flex:1;text-align:center;}
  /* the scheduled-emails panel: one row per email that will go out */
  #mailpanel{width:296px;}
  .msub{font-size:10.5px;color:var(--hud-dim);margin-bottom:6px;line-height:1.5;}
  .mrow{padding:7px 8px;border-radius:8px;border:1px solid transparent;cursor:pointer;}
  .mrow:hover{background:rgba(255,255,255,.08);}
  .mrow .mwhen{font-size:11px;color:#c8b98a;}
  .mrow .mtext{font-size:11.5px;color:var(--hud);line-height:1.45;overflow:hidden;display:-webkit-box;
               -webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
  .mrow .mact{display:none;gap:6px;margin-top:6px;}
  .mrow.open .mact{display:flex;}
  .mrow.open{background:rgba(255,255,255,.1);border-color:var(--line);cursor:default;}
  .mrow textarea{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid var(--line);
               border-radius:6px;color:var(--hud);padding:5px 6px;font:inherit;font-size:11.5px;
               line-height:1.45;margin-top:6px;resize:vertical;min-height:52px;}
  .mrow .mact .abtn{flex:1;text-align:center;}
  .wnote{font-size:10.5px;color:var(--hud-dim);margin-top:7px;line-height:1.45;}
  /* the account, above the worlds it holds */
  #account{border-bottom:1px solid var(--line);margin:-2px -4px 8px;padding:0 4px 9px;}
  .acct{display:flex;align-items:center;gap:6px;}
  .acct .who{flex:1;min-width:0;font-size:12px;color:var(--hud);white-space:nowrap;
             overflow:hidden;text-overflow:ellipsis;}
  .acct .tag{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-dim);
             border:1px solid var(--line);border-radius:999px;padding:1px 6px;}
  .acct .tag.warn{color:#f0dc82;border-color:rgba(240,220,130,.45);}
  .aform{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
  .aform input,.aform textarea{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:6px;
    color:var(--hud);font:inherit;font-size:12.5px;padding:5px 7px;width:100%;box-sizing:border-box;}
  .aform textarea{resize:vertical;min-height:38px;}
  .arow{display:flex;gap:6px;}
  .arow .abtn{flex:1;text-align:center;}
  .amsg{font-size:10.5px;line-height:1.45;color:var(--hud-dim);}
  .amsg.bad{color:#f0b3a0;}
  .amsg.good{color:#a9d6b4;}
  .wcloud{font-size:10px;color:var(--hud-dim);white-space:nowrap;}
  .wcloud.on{color:#a9d6b4;}
  /* the sync log: what every device did to every world, newest first, in the worlds panel */
  #worldpanel.logmode{width:min(92vw,580px);}
  #worldpanel.logmode .wlist,#worldpanel.logmode .wfoot{display:none;}
  .lhead{display:flex;gap:6px;align-items:center;margin-top:8px;}
  .lhead .abtn{padding:3px 8px;}
  .lhead .lsub{flex:1;min-width:0;font-size:10.5px;color:var(--hud-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .llist{max-height:min(52vh,400px);overflow:auto;margin:6px -4px 0;padding:0 4px;font-size:11px;}
  .lrow{display:grid;grid-template-columns:82px 92px 88px 1fr;gap:6px;padding:3px 4px;border-radius:5px;
        color:var(--hud-dim);line-height:1.35;align-items:baseline;}
  .lrow:hover{background:rgba(255,255,255,.06);}
  .lrow .lwhen{white-space:nowrap;font-variant-numeric:tabular-nums;}
  .lrow .ldev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lrow .ldev.me{color:#c8b98a;}
  .lrow .lev{color:var(--hud);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lrow.bad .lev{color:#f0b3a0;}
  .lrow.good .lev{color:#a9d6b4;}
  .lrow .ldet{word-break:break-word;}
  .lrow .ldet b{color:var(--hud);font-weight:500;}
  .vrow{display:flex;gap:6px;align-items:center;padding:3px 4px;font-size:11px;color:var(--hud-dim);}
  .vrow .vwhen{flex:1;min-width:0;}
  .vrow button{background:none;border:1px solid var(--line);border-radius:6px;color:var(--hud-dim);
        font:inherit;font-size:11px;padding:2px 7px;cursor:pointer;white-space:nowrap;}
  .vrow button:hover{background:rgba(255,255,255,.14);color:var(--hud);}
  /* The gate. Opaque on purpose: a see-through one shows a world you cannot touch, which reads
     as broken rather than as closed. Above every other layer, including the context menu. */
  #gate{position:fixed;inset:0;z-index:60;background:#151210;
        display:flex;align-items:center;justify-content:center;padding:24px;
        font-family:system-ui,-apple-system,"Segoe UI",sans-serif;}
  #gate[hidden]{display:none;}
  #gatebox{width:100%;max-width:320px;}
  #gatehead{margin-bottom:15px;}
  #gatehead b{font-size:19px;color:var(--hud);font-weight:600;}
  #gatehead i{font-style:normal;font-size:19px;color:var(--hud-dim);}
  #gatehead .sub{font-size:10px;color:var(--hud-dim);margin-top:4px;
                 letter-spacing:.15em;text-transform:uppercase;}
  #gate #account{border-bottom:0;margin:0;padding:0;}
  .qrow{border:1px solid var(--line);border-radius:8px;padding:7px 8px;margin-top:6px;}
  .qmail{font-size:12px;color:var(--hud);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .qwhen{font-size:10px;color:var(--hud-dim);margin-bottom:5px;}
  /* the time panel: what you're on right now, and the day it sits in */
  #timepanel{width:min(320px,86vw);}
  #timepanel input{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:6px;
    color:var(--hud);font:inherit;font-size:12.5px;padding:6px 8px;box-sizing:border-box;width:100%;}
  #timepanel input:focus{outline:none;border-color:rgba(232,224,210,.4);}
  #ttnow{font-size:12.5px;color:var(--hud);margin:0 0 8px;line-height:1.45;}
  #ttnow b{color:#c8b98a;font-weight:600;}
  .ttrow{display:flex;gap:6px;}
  .ttrow input{flex:1;min-width:0;}
  .ttsug .trow.on{background:rgba(255,255,255,.13);}
  #ttnote{margin-top:6px;}
  #ttdur{margin-top:6px;}
  /* time travel: the same input, aimed at the recent past */
  #ttbar{margin-top:6px;padding:7px 8px;border:1px solid rgba(200,185,138,.42);border-radius:8px;
        background:rgba(200,185,138,.07);}
  .ttmodes{display:flex;gap:5px;margin-top:6px;}
  .ttmodes .abtn{flex:1;text-align:center;padding:4px 2px;}
  .ttmodes .abtn.on{background:rgba(200,185,138,.9);color:#241f1a;border-color:rgba(200,185,138,.9);}
  #tttt.on{background:rgba(200,185,138,.9);color:#241f1a;border-color:rgba(200,185,138,.9);}
  .tthead{display:flex;gap:6px;align-items:center;margin:10px 0 4px;}
  .tthead #ttdate{flex:1;text-align:center;}
  #ttlist{max-height:min(38vh,300px);}
  .ttnl{display:flex;gap:6px;align-items:baseline;font-size:10.5px;color:var(--hud-dim);
        line-height:1.5;word-break:break-word;margin-top:2px;}
  .ttnl .ttw{color:rgba(200,185,138,.8);white-space:nowrap;}
  .ttnl .ttb{flex:1;}
  .ttnl button{opacity:0;background:none;border:0;color:var(--hud-dim);cursor:pointer;
        font:inherit;font-size:10px;padding:0 3px;}
  .ttnl:hover button{opacity:1;}
  .ttnl button:hover{color:#f0b3a0;}
  .ttedit{display:flex;flex-direction:column;gap:5px;margin-top:6px;}
  .ttspan{display:flex;gap:5px;}
  .ttspan input{flex:1;min-width:0;text-align:center;}
  .tttot{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--hud-dim);
        padding:2px 8px;}
  .tttot b{color:var(--hud);font-weight:600;font-variant-numeric:tabular-nums;}
  .tttot.all{border-top:1px solid var(--line);margin-top:4px;padding-top:5px;}
  /* the ✎ that says out loud "rows can be changed" — clicking the row always worked, but a
     handle nobody can see is a handle that isn't there */
  .ttpen{float:right;background:none;border:0;color:var(--hud-dim);cursor:pointer;
        font:inherit;font-size:11px;line-height:1;padding:1px 3px;border-radius:4px;}
  .mrow:hover .ttpen{color:var(--hud);}
  .ttpen:hover{background:rgba(255,255,255,.14);}
  /* THE WEEK, AS A CALENDAR: seven day columns against an hour axis, entries as blocks.
     Same overlay rules as the tree: [hidden] must beat display, and a window you can see
     must be a window you can touch. */
  #calpanel{position:fixed;left:5vw;right:5vw;top:6vh;bottom:8vh;
        background:rgba(22,19,15,.975);border:1px solid var(--line);border-radius:14px;
        padding:0;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto;}
  #calpanel[hidden]{display:none;}
  #calhead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);}
  #calhead b{font-weight:600;font-size:14px;}
  #calhead span{font-size:11px;color:var(--hud-dim);letter-spacing:.02em;}
  #calhead .grow{flex:1;}
  #calbody{flex:1;overflow:auto;overscroll-behavior:contain;}
  #calgrid{display:flex;min-width:760px;padding:8px 16px 18px 6px;}
  .calgut{width:46px;flex:none;position:relative;margin-top:37px;}
  .calgut div{position:absolute;right:8px;transform:translateY(-50%);
        font-size:9.5px;color:var(--hud-dim);white-space:nowrap;}
  .calcol{flex:1;min-width:88px;border-left:1px solid var(--line);}
  .calcol:last-child{border-right:1px solid var(--line);}
  .calday{height:37px;box-sizing:border-box;text-align:center;font-size:11.5px;color:var(--hud);
        padding-top:3px;cursor:pointer;border-bottom:1px solid var(--line);}
  .calday:hover{background:rgba(255,255,255,.07);}
  .calday .tot{display:block;font-size:9.5px;color:var(--hud-dim);font-variant-numeric:tabular-nums;}
  .calcol.today .calday{color:#c8b98a;font-weight:600;}
  .callane{position:relative;
        background:repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 46px);}
  .calblk{position:absolute;left:4%;right:4%;border-radius:5px;padding:2px 5px;box-sizing:border-box;
        font-size:10.5px;line-height:1.3;color:#332f28;cursor:pointer;overflow:hidden;
        box-shadow:0 1px 4px rgba(0,0,0,.35);}
  .calblk:hover{outline:1.5px solid rgba(255,255,255,.85);}
  .calblk .t{font-size:9px;opacity:.7;display:block;white-space:nowrap;}
  .calblk.run{border:1.5px dashed rgba(51,47,40,.55);}
  .calnote{position:absolute;left:4%;width:38%;border-top:2px dotted rgba(200,185,138,.85);cursor:default;}
  .calnowline{position:absolute;left:0;right:0;height:2px;background:rgba(226,84,58,.85);pointer-events:none;}
  #panel{width:220px;padding:12px 14px;}
  #treepanel,#findpanel{max-height:min(58vh,420px);overflow:auto;}
  #findq{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid var(--line);
         border-radius:6px;color:var(--hud);padding:6px 8px;font:inherit;font-size:13px;margin-bottom:6px;}
  #findq:focus{outline:none;border-color:rgba(232,224,210,.4);}
  .trow{display:block;width:100%;text-align:left;background:none;border:0;color:var(--hud);
        font:inherit;font-size:12px;padding:3px 5px;border-radius:5px;cursor:pointer;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .trow:hover{background:rgba(255,255,255,.13);}
  .trow .dim{color:var(--hud-dim);}
  .trow .hit{color:#f0dc82;}
  .tnone{font-size:11.5px;color:var(--hud-dim);font-style:italic;padding:4px 5px;}
  /* the big left-to-right tree */
  #treepanel{position:fixed;left:6vw;right:6vw;top:7vh;bottom:9vh;width:auto;max-height:none;
             background:rgba(22,19,15,.975);border:1px solid var(--line);border-radius:14px;
             padding:0;overflow:hidden;display:flex;flex-direction:column;}
  /* display:flex would otherwise beat the [hidden] attribute and leave the tree covering
     the whole app, permanently, empty */
  #treepanel[hidden]{display:none;}
  /* .hud is click-through by default; a window you scroll and click must opt back in */
  #treepanel{pointer-events:auto;}
  #treehead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);}
  #treehead b{font-weight:600;font-size:14px;}
  #treehead span{font-size:11px;color:var(--hud-dim);letter-spacing:.1em;text-transform:uppercase;}
  #treehead .grow{flex:1}
  .ttab{background:none;border:1px solid transparent;border-radius:7px;color:var(--hud-dim);
        font:inherit;font-size:13.5px;font-weight:600;padding:4px 11px;cursor:pointer;}
  .ttab:hover{color:var(--hud);background:rgba(255,255,255,.08);}
  .ttab.on{color:var(--hud);background:rgba(255,255,255,.13);border-color:var(--line);}
  .acard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px;
         background:rgba(255,255,255,.03);}
  .ahead{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
  .ahead .grow{flex:1}
  .awhen{font-size:11px;color:var(--hud-dim);}
  .abtn{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--hud);
        border-radius:7px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;}
  .abtn:hover{background:rgba(255,255,255,.16);}
  .abtn.danger{color:#f0b3a0;}
  .abtn.danger:hover{background:rgba(220,90,60,.24);border-color:rgba(240,150,120,.5);}
  /* the tree runs off the window in both directions, so you drag it around like the board */
  #treebody{flex:1;overflow:auto;padding:18px 20px;cursor:grab;overscroll-behavior:contain;}
  #treebody.grabbing, #treebody.grabbing *{cursor:grabbing;}
  .tw{display:flex;align-items:flex-start;}
  .tlab{display:inline-block;white-space:nowrap;font-size:12.5px;color:var(--hud);background:rgba(255,255,255,.05);
        border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer;margin:3px 0;}
  .tlab:hover{background:rgba(255,255,255,.16);border-color:rgba(232,224,210,.5);}
  .tlab.body{color:var(--hud-dim);font-style:italic;background:none;border-style:dashed;}
  .tlab.body:has(+*){font-style:italic;}
  .tlab.inert{cursor:default;opacity:.85;}
  .tlab.inert:hover{background:rgba(255,255,255,.05);border-color:var(--line);}
  .tlab .cnt{color:var(--hud-dim);font-size:10.5px;margin-left:6px;}
  .tkids{display:flex;flex-direction:column;margin-left:14px;padding-left:16px;position:relative;}
  .tkids::before{content:"";position:absolute;left:0;top:14px;bottom:14px;border-left:1px solid var(--line);}
  .tkids > .tw::before{content:"";width:16px;margin-top:16px;border-top:1px solid var(--line);margin-left:-16px;}
  /* the due-date pickers */
  .cal,.rem{position:fixed;z-index:40;background:rgba(26,22,18,.98);border:1px solid var(--line);
            border-radius:10px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.55);pointer-events:auto;
            color:var(--hud);font-size:12.5px;}
  .cal .ch{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
  .cal .ch b{flex:1;text-align:center;font-weight:600;}
  .cal .ch button,.rem button{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--hud);
            border-radius:6px;cursor:pointer;padding:3px 8px;font:inherit;}
  .cal .cg{display:grid;grid-template-columns:repeat(7,26px);gap:2px;}
  .cal .cg div{text-align:center;padding:4px 0;border-radius:5px;cursor:pointer;}
  .cal .cg div.dow{color:var(--hud-dim);font-size:10px;cursor:default;}
  .cal .cg div.day:hover{background:rgba(255,255,255,.18);}
  .cal .cg div.today{outline:1px solid rgba(232,224,210,.45);}
  .cal .cg div.gone{color:var(--hud-dim);opacity:.6;}      /* days that have already passed */
  .cal .hint,.rem .hint{margin-top:7px;font-size:10.5px;color:var(--hud-dim);}
  /* the time strip: which hour of the day the chosen date means */
  .cal .ct{display:flex;gap:4px;margin-top:8px;border-top:1px solid var(--line);padding-top:8px;}
  .cal .ct button{flex:1;padding:4px 2px;line-height:1.25;font-size:11px;}
  .cal .ct button b{display:block;font-weight:600;}
  .cal .ct button span{display:block;font-size:9.5px;color:var(--hud-dim);}
  .cal .ct button.on{background:rgba(200,185,138,.9);border-color:rgba(200,185,138,.9);color:#241f1a;}
  .cal .ct button.on span{color:rgba(36,31,26,.7);}
  .cal .ctype{display:flex;align-items:center;gap:6px;margin-top:6px;}
  .cal .ctype input{width:64px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:6px;
            color:var(--hud);padding:4px 6px;font:inherit;font-size:12px;text-align:center;}
  .cal .ctype input.bad{border-color:rgba(240,150,120,.7);}
  .cal .ctype .cnow{flex:1;font-size:10.5px;color:var(--hud-dim);}
  .cal .day.sel{background:rgba(200,185,138,.9);color:#241f1a;border-radius:7px;font-weight:600;}
  .cal .cdone{display:flex;margin-top:8px;}
  .cal .cdone button{flex:1;padding:6px 8px;font-size:12px;}
  .cal .cdone button:disabled{opacity:.45;cursor:default;}
  .cal .row{display:flex;gap:6px;margin-top:9px;}
  .cal .row button{flex:1;}
  .cal .ask{max-width:186px;line-height:1.45;}
  .rem .warn{margin-top:7px;font-size:10.5px;color:#f0dc82;}
  .rem{width:246px;}
  .rem label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--hud-dim);margin:8px 0 3px;}
  .rem select,.rem input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid var(--line);
            border-radius:6px;color:var(--hud);padding:5px 7px;font:inherit;font-size:12.5px;}
  .rem .prev{margin-top:8px;font-size:11px;color:var(--hud-dim);line-height:1.5;max-height:88px;overflow:auto;}
  .rem textarea{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid var(--line);
            border-radius:6px;color:var(--hud);padding:6px 7px;font:inherit;font-size:12.5px;
            line-height:1.45;margin-top:8px;resize:vertical;min-height:64px;}
  .rem .row{display:flex;gap:6px;margin-top:10px;}
  .rem .row button{flex:1;}
  /* while something is waiting to be moved, the app says so and stays out of the way */
  #movebar{left:50%;transform:translateX(-50%);top:18px;display:flex;align-items:center;gap:10px;
    background:rgba(240,220,130,.95);color:#241f1a;border-radius:999px;padding:8px 10px 8px 16px;
    font-size:12.5px;box-shadow:0 6px 22px rgba(0,0,0,.45);pointer-events:auto;text-shadow:none;
    max-width:min(88vw,620px);}
  #movebar[hidden]{display:none;}
  #movebar b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34vw;}
  #movebar .mb{background:rgba(36,31,26,.14);border:1px solid rgba(36,31,26,.28);color:#241f1a;
    border-radius:999px;font:inherit;font-size:12px;padding:4px 10px;cursor:pointer;white-space:nowrap;}
  #movebar .mb:hover{background:rgba(36,31,26,.24);}
  .duebadge{position:fixed;z-index:6;pointer-events:none;font-size:11px;color:#5a4a1c;
            background:rgba(240,220,130,.92);border-radius:999px;padding:1px 8px;white-space:nowrap;}
  #ctx{position:fixed;z-index:30;min-width:170px;background:rgba(26,22,18,.97);border:1px solid var(--line);
       border-radius:9px;padding:5px;box-shadow:0 8px 26px rgba(0,0,0,.5);pointer-events:auto;}
  #ctx .trow{font-size:12.5px;padding:6px 8px;}
  #ctx hr{border:0;border-top:1px solid var(--line);margin:4px 2px;}
  #ctx .cxc{display:flex;gap:5px;padding:4px 6px 2px;}
  #ctx .cxc button{width:19px;height:19px;border-radius:50%;border:1px solid rgba(0,0,0,.35);cursor:pointer;}
  #ctx .cxs{display:flex;align-items:center;gap:5px;padding:3px 10px 4px;}
  #ctx .cxs span{flex:1;font-size:12px;color:var(--hud-dim);}
  #ctx .cxs button{min-width:34px;height:22px;border:1px solid var(--line);border-radius:5px;
                   background:rgba(255,255,255,.05);color:#e8e0d2;font-size:11px;cursor:pointer;}
  #ctx .cxs button:hover{background:rgba(255,255,255,.16);}
  /* the mark it already wears wins a ring, so the menu shows the note's state, not just choices */
  #ctx .cxc button.on{box-shadow:0 0 0 2px var(--hud-bg,#1b1a17),0 0 0 3.5px #fff;}
  #ctx .cxc button.cxo{background:transparent;border-style:dashed;color:var(--hud-dim,#8d8676);
                       font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;}
  #panel label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
               color:var(--hud-dim);margin:10px 0 3px;}
  #panel label:first-child{margin-top:0;}
  #panel input[type=range]{width:100%;accent-color:#c8b98a;}
  #panel hr{border:0;border-top:1px solid var(--line);margin:13px 0 2px;}
  #edit-layer{position:fixed;inset:0;z-index:20;pointer-events:none;}
  #edit-layer *{pointer-events:auto;}
  .ed-title{position:fixed;border:none;outline:1.5px dashed rgba(0,0,0,.4);background:transparent;
            color:#332f28;padding:0;margin:0;}
  #text-layer{position:fixed;inset:0;z-index:5;pointer-events:none;}
  .tb{position:fixed;pointer-events:none;color:#332f28;opacity:.85;line-height:1.45;
      overflow:hidden;white-space:pre-wrap;word-break:break-word;outline:none;border:none;
      background:transparent;padding:0;margin:0;}
  .tb.clip::after{content:"⋯";position:absolute;right:3px;bottom:0;opacity:.6;}
  /* A TABLE is a text block whose words are arranged in cells — no new kind of thing, so it
     inherits editing, saving, searching and the auto-fit for nothing. table-layout:fixed keeps
     the columns even however much is typed into one of them. */
  .tb table.ntab{border-collapse:collapse;table-layout:fixed;width:100%;}
  .tb table.ntab td{border:1px solid rgba(51,47,40,.45);padding:.18em .34em;
                    vertical-align:top;word-break:break-word;}
  .tb table.ntab.plain td{border-color:transparent;}   /* the outline, switched off */
  .tb table.ntab tr:first-child td{background:rgba(51,47,40,.055);}
  .tb table.ntab.plain tr:first-child td{background:transparent;}
  .tb[contenteditable="true"]{pointer-events:auto;}   /* editing looks IDENTICAL — same element, just focused */
  .ed-swatches{position:fixed;display:flex;gap:6px;background:rgba(26,22,18,.92);
               border:1px solid var(--line);border-radius:999px;padding:5px 8px;}
  .ed-swatches button{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.35);cursor:pointer;}
  .ed-tools{position:fixed;display:flex;gap:4px;background:rgba(26,22,18,.92);
            border:1px solid var(--line);border-radius:8px;padding:4px 6px;}
  .ed-tools button{min-width:26px;height:24px;border:none;border-radius:5px;background:transparent;
                   color:#e8e0d2;font-size:13px;cursor:pointer;line-height:1;}
  .ed-tools button:hover{background:rgba(255,255,255,.12);}
  .ed-tools button.on{background:rgba(255,255,255,.22);}
  .ed-size{width:52px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:5px;
           color:#e8e0d2;font:inherit;font-size:12px;padding:2px 4px;text-align:center;}
  .ed-size:focus{outline:none;border-color:rgba(232,224,210,.55);}
  .coarse .ed-size{width:62px;height:38px;font-size:15px;}