:root{
    color-scheme: light;
    --paper: #faf6e8;
    --paper-dot: rgba(60,50,20,0.05);
    --ink: #33301f;
    --ink-soft: #625d49;
    --line: #e4dbb9;
    --panel: #fffdf5;
    --accent: #c98a2e;
    --accent-strong: #9a5d12;     /* accent for TEXT and button fills that carry text: white on it is 5.3:1 */
    --on-accent: #ffffff;
    --edge: #8f896e;              /* boundary of text fields / switches (3.5:1 against the field), WCAG 1.4.11 */
    --focus: #8f5710;             /* keyboard focus ring (5.8:1 against the panel) */
    --accent-soft: #f1dfb3;
    --danger: #b5482f;
    --shadow: rgba(60, 45, 10, 0.22);
    --field: #ffffff;
    --field-line: #e4dbb9;
    --scrim: rgba(30,24,10,0.55);
    --sel-ring: rgba(201,138,46,0.7);
  }
  body.dark{
    --field: #29233f;
    --field-line: #3d3558;
    --scrim: rgba(5,3,12,0.7);
    --sel-ring: rgba(255,180,84,0.7);
    color-scheme: dark;
    --paper: #14111f;
    --paper-dot: rgba(255,255,255,0.05);
    --ink: #ede9f7;
    --ink-soft: #9c93b8;
    --line: #322c48;
    --panel: #1e1a30;
    --accent: #ffb454;
    --accent-strong: #ffb454;
    --on-accent: #1e1a30;         /* dark text on the light amber: 9.6:1 (white would be 1.8:1) */
    --edge: #8379a3;
    --focus: #ffb454;
    --accent-soft: #3a2f52;
    --danger: #ff5c72;
    --shadow: rgba(0,0,0,0.6);
  }
  /* dark board: the same coloured paper seen in dim lighting. The hue of each note is kept, the lightness is pulled down by mixing
     with a warm dark neutral (so colour families stay recognisable), the ink turns warm cream, and there is no glow or bloom:
     only an ordinary soft contact shadow. */
  body.dark{ --dim-base:#0f0c16; --dim-amt:36%; --note-ink-dark:#f2eadb; }
  body.dark .note{
    --paper-dim: color-mix(in oklab, var(--note-bg, #fff3a8) var(--dim-amt), var(--dim-base));
    background: var(--paper-dim);
    color: var(--note-ink-dark);
    filter:none;
    box-shadow: 2px 5px 12px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.07) inset;
  }
  body.dark .note:hover, body.dark .note:focus-within{
    box-shadow: 4px 11px 20px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.08) inset;
  }
  body.dark .note .paperFx{ opacity:0.45; }
  body.dark .note .del{ background:rgba(255,255,255,0.1); }
  body.dark .note .del:hover{ background:rgba(255,255,255,0.2); }
  body.dark .note .badge{ background:rgba(0,0,0,0.35); color:var(--note-ink-dark); }
  body.dark .note .moreBtn{ background:rgba(20,16,30,0.7); color:var(--note-ink-dark); }
  body.dark .note .moreBtn:hover{ background:rgba(20,16,30,0.95); }
  body.dark .note .tab{ filter:brightness(0.82); }
  body.dark .topbar{
    background:linear-gradient(to bottom, rgba(30,26,48,0.97), rgba(30,26,48,0.85));
  }
  *{box-sizing:border-box;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Sora', system-ui, sans-serif;
    overflow:hidden;
    height:100%;
  }
  html{height:100%;}
  button, input, textarea, select{ font-family:inherit; }
  .muted{ color:var(--ink-soft); font-size:0.85rem; }

  .topbar{
    position:fixed;
    top:env(safe-area-inset-top,0px);
    left:0; right:0;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    padding:8px 18px;
    background:linear-gradient(to bottom, rgba(250,246,232,0.97), rgba(250,246,232,0.85));
    border-bottom:1px solid var(--line);
    z-index:10000;
    backdrop-filter:blur(3px);
  }
  .brand{
    font-family:'Sora', system-ui, sans-serif;
    font-weight:600;
    font-size:1.25rem;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:8px;
    letter-spacing:0.2px;
    flex:none;
  }
  .logoMark{ width:22px; height:22px; display:inline-flex; flex:none; }
  .logoMark svg{ width:100%; height:100%; display:block; transition:opacity .25s ease; }

  .searchWrap{ position:relative; flex:1 1 180px; max-width:350px; min-width:120px; }
  .searchWrap input{
    width:100%;
    padding:8px 12px 8px 30px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--ink);
    font-size:0.88rem;
    outline:none;
  }
  .searchWrap input:focus{ border-color:var(--accent); }
  .searchWrap svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ink-soft); pointer-events:none; }

  .rightButtons{ display:flex; align-items:center; gap:10px; flex:none; }
  .gearBtn{
    width:38px;height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--panel);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    color:var(--ink-soft);
    font-family:'Sora', sans-serif;
    font-size:1rem;
    font-weight:600;
    transition:transform .35s ease, color .2s ease, border-color .2s ease;
  }
  .gearBtn:hover{ color:var(--ink); border-color:var(--accent); }
  #accountBtn{ padding:0; overflow:visible; flex:none; position:relative; }
  #accountBtn .acctAv{ border-radius:50%; overflow:hidden; width:100%; height:100%; }
  #accountBtn .crown{ position:absolute; top:-7px; left:50%; width:20px; height:13px; transform:translateX(-50%) rotate(-8deg); pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
  #accountBtn .crown svg{ width:100%; height:100%; display:block; }
  #accountBtn img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
  .gearBtn.spin svg{ animation: spin .5s ease; }
  @keyframes spin{ to{ transform:rotate(90deg); } }
  .gearBtn svg{ width:20px;height:20px; display:block; }

  /* settings + share panels */
  .panel{
    position:fixed;
    top:64px; right:18px;
    width:260px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px;
    box-shadow:0 10px 28px var(--shadow);
    z-index:10001;
    font-size:0.92rem;
    animation: panelIn .18s ease both;
    max-height:80vh;
    overflow-y:auto;
  }
  @keyframes panelIn{ from{ opacity:0; transform:translateY(-6px) scale(.98);} to{opacity:1; transform:none;} }
  .panel h3{ margin:0 0 12px; font-family:'Sora',sans-serif; font-size:1rem; font-weight:600; }
  .panel h4{ margin:14px 0 8px; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); }
  .row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
  .row label{ flex:1; color:var(--ink); cursor:pointer; }
  select, textarea, .linkBox{
    width:100%;
    padding:7px 8px;
    border-radius:7px;
    border:1px solid var(--field-line);
    background:var(--field);
    color:var(--ink);
    font-size:0.85rem;
    font-family:inherit;
  }
  textarea{ min-height:70px; resize:vertical; }
  select:disabled{ opacity:0.5; }
  .switch{
    position:relative; width:38px; height:22px; flex:none;
    background:var(--line); border-radius:999px; cursor:pointer; border:none;
    transition:background .2s ease;
  }
  .switch.on{ background:var(--accent-strong); }
  .switch::after{
    content:''; position:absolute; top:2px; left:2px;
    width:18px;height:18px; border-radius:50%; background:#fff;
    transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,0.3);
  }
  .switch.on::after{ transform:translateX(16px); }
  .btn{
    width:100%;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid var(--field-line);
    background:var(--field);
    color:var(--ink);
    font-size:0.85rem;
    cursor:pointer;
    margin-top:6px;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
    text-align:center;
  }
  .btn:hover{ border-color:var(--accent); }
  .btn.danger{ border-color:var(--danger); color:var(--danger); }
  .btn.danger.confirm{ background:var(--danger); color:#fff; }
  .btn.primary{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent); }
  .count{ color:var(--ink-soft); font-size:0.8rem; margin-top:10px; text-align:center; }
  .copyRow{ display:flex; gap:6px; margin-top:8px; }
  .copyRow input{ flex:1; min-width:0; padding:6px 8px; border-radius:7px; border:1px solid var(--field-line); font-size:0.78rem; background:var(--field); color:var(--ink); }
  .copyRow button{ flex:none; }
  #shareResult img{ width:100%; border-radius:8px; margin-top:8px; display:block; }

  /* board */
  .board{
    position:fixed;
    inset:0;
    top:56px;
    overflow-x:auto;
    overflow-y:hidden;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
  }
  .board::-webkit-scrollbar{ height:10px; }
  .board::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
  .board::-webkit-scrollbar-track{ background:transparent; }

  .boardInner{
    position:relative;
    height:100%;
    min-width:100%;
    background-image: radial-gradient(circle, var(--paper-dot) 1.6px, transparent 1.6px);
    background-size: 26px 26px;
    background-position: 6px 6px;
    cursor: crosshair;
    transition: transform .25s ease;
  }
  body.read-only .boardInner{ cursor:default; }

  @property --wob{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  @keyframes wobble{ 0%,100%{ --wob:-3.5deg; } 50%{ --wob:3.5deg; } }

  .note{
    position:absolute;
    width:250px;
    min-height:196px;
    padding:26px 14px 14px 14px;
    background: var(--note-bg, #fff3a8);
    color: var(--note-text, #33301f);
    border-radius:3px;
    box-shadow: 3px 6px 14px var(--shadow), 0 1px 0 rgba(255,255,255,0.4) inset;
    transform: rotate(var(--rot, 0deg));
    transition: transform .18s ease, box-shadow .18s ease;
    cursor: text;
    user-select:text;
  }
  body:not(.hasSel) .note:hover, .note:focus-within{
    transform: rotate(var(--rot, 0deg)) translateY(-4px) scale(1.02);
    box-shadow: 5px 12px 22px var(--shadow), 0 1px 0 rgba(255,255,255,0.4) inset;
    z-index: 9998 !important;
  }
  /* A note never grows past the board's height: the paper stops, the writing scrolls. */
  .note{ display:flex; flex-direction:column; max-height:var(--note-max-h, none); }
  .note > .text{
    flex:1 1 auto; min-height:40px; overflow:hidden; padding-bottom:2px; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:rgba(0,0,0,0.2) transparent;
  }
  .note > .text::-webkit-scrollbar{ width:6px; }
  .note > .text::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.18); border-radius:6px; }
  .note > .text::-webkit-scrollbar-track{ background:transparent; }
  .note > .text.moreBelow{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
  .note > .noteImgWrap{ flex:none; }
  .note.capped > .text{ overflow-y:auto; }

  /* ---------- standalone photos: printed, cut out, or mounted on card ---------- */
  .photoObj{
    position:absolute; transform:rotate(var(--rot, 0deg)); transform-origin:50% 50%;
    cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none;
    transition:transform .18s ease;
  }
  body:not(.hasSel) .photoObj:hover{ transform:rotate(var(--rot, 0deg)) translateY(-3px); z-index:9998 !important; }
  /* a photo print is stiffer than a paper note: it barely sways while carried */
  @keyframes wobbleSoft{ 0%,100%{ --wob:-1deg; } 50%{ --wob:1deg; } }
  .photoObj.dragging{ cursor:grabbing; transition:none; z-index:9999 !important; transform:rotate(calc(var(--rot, 0deg) + var(--wob, 0deg))) !important; animation:wobbleSoft .8s ease-in-out infinite; }
  .photoObj.new{ animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
  .photoObj.removing{ animation:popOut .26s ease-in forwards; pointer-events:none; }
  .photoObj.selected{ outline:1.5px solid var(--sel-ring); outline-offset:6px; }
  .photoObj .pBody{ position:relative; }
  .photoObj .pFrame{ position:relative; }
  .photoObj img{ display:block; width:var(--pw, 220px); height:auto; pointer-events:none; -webkit-user-drag:none; }
  .photoObj .pCaption{ color:#3a3528; overflow-wrap:anywhere; outline:none; cursor:default; }
  .photoObj .pCaption.editing{ cursor:text; background:rgba(255,255,255,0.35); user-select:text; -webkit-user-select:text; touch-action:auto; }
  .photoObj .pCaption.empty:not(.editing){ color:transparent; }
  /* polaroid: off-white instant print with the deep bottom margin */
  .ps-polaroid .pFrame{
    background:linear-gradient(172deg, #fcfaf5, #f1ede3);
    padding:calc(var(--pw, 220px) * 0.055) calc(var(--pw, 220px) * 0.055) calc(var(--pw, 220px) * 0.26);
    border-radius:1.5px;
    box-shadow:0 1px 1.5px rgba(0,0,0,0.16), 3px 8px 16px var(--shadow);
  }
  .ps-polaroid img{ outline:1px solid rgba(0,0,0,0.06); }
  .ps-polaroid .pCaption{
    position:absolute; left:calc(var(--pw, 220px) * 0.055); right:calc(var(--pw, 220px) * 0.055); bottom:0;
    height:calc(var(--pw, 220px) * 0.26); display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:clamp(13px, calc(var(--pw, 220px) * 0.078), 28px); line-height:1.15; overflow:hidden; padding:0 4px;
  }
  /* cut-out: a white, slightly irregular scissor border (clip-path from the photo's seed) */
  .ps-cutout .pBody, .ps-mounted .pBody{ filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,0.24)) drop-shadow(2px 6px 7px rgba(40,30,10,0.22)); }
  .ps-cutout .pFrame, .ps-mounted .pFrame{ background:#fdfcf8; padding:calc(var(--pw, 220px) * 0.03 + 2px); }
  .ps-cutout .pFrame.isolated, .ps-mounted .pFrame.isolated{ background:none; padding:0; clip-path:none !important; }
  .ps-cutout .pFrame.isolated img, .ps-mounted .pFrame.isolated img{
    filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff);
  }
  /* mounted: the cut-out glued onto a scrap of light card */
  .ps-mounted{ padding:calc(var(--pw, 220px) * 0.085); }
  .ps-mounted .pBack{
    position:absolute; inset:0; z-index:0;
    transform:translate(var(--bx, 3px), var(--by, 4px)) rotate(var(--br, 1deg));
    background-color:#d8c29a;
    background-image:
      repeating-linear-gradient(97deg, rgba(110,80,30,0.05) 0 1px, transparent 1px 4px),
      linear-gradient(160deg, rgba(255,255,255,0.18), rgba(0,0,0,0.07));
    border-radius:3px 7px 2px 6px / 6px 2px 7px 3px;
    box-shadow:0 1px 2px rgba(0,0,0,0.2), 3px 7px 14px var(--shadow);
  }
  .ps-mounted .pBody, .ps-mounted .pCaption{ position:relative; z-index:1; }
  /* caption as a small paper label under cut-outs */
  .ps-cutout .pCaption, .ps-mounted .pCaption{
    display:table; margin:8px auto 0; max-width:var(--pw, 220px);
    background:#fbf8ef; padding:2px 10px 3px; transform:rotate(var(--lr, -2deg));
    font-size:clamp(13px, calc(var(--pw, 220px) * 0.066), 24px); line-height:1.2; text-align:center; color:#2b2518;
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
  }
  .ps-cutout .pCaption.empty:not(.editing), .ps-mounted .pCaption.empty:not(.editing){ display:none; }
  .ps-cutout .pCaption.editing, .ps-mounted .pCaption.editing{ display:block; width:fit-content; min-width:5em; min-height:1.3em; }
  .ps-polaroid .pCaption.editing{ min-height:1.3em; }
  body.dark .ps-polaroid .pFrame{ background:linear-gradient(172deg, #efebe1, #e4dfd3); }
  body.dark .ps-mounted .pBack{ filter:brightness(0.88); }
  body.dark .ps-cutout .pBody, body.dark .ps-mounted .pBody{ filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,0.5)) drop-shadow(2px 6px 8px rgba(0,0,0,0.45)); }
  /* controls on a selected photo */
  .pCtl{
    position:absolute; z-index:3; display:none; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; padding:0; cursor:pointer;
    border:1px solid var(--line); background:var(--panel); color:var(--ink); box-shadow:0 3px 10px var(--shadow);
  }
  .pCtl svg{ width:13px; height:13px; }
  .photoObj.selected .pCtl{ display:flex; }
  body.multi-sel .pCtl, body.read-only .pCtl, .photoObj.static .pCtl{ display:none !important; }
  .pCtl.pMore{ top:-13px; right:-13px; }
  .pCtl.pStyle{ bottom:-13px; left:-13px; }
  .pCtl.pHandle{ bottom:-9px; right:-9px; width:18px; height:18px; cursor:nwse-resize; border:1.5px solid var(--accent); touch-action:none; }
  @media (pointer: coarse){ .pCtl{ width:34px; height:34px; } .pCtl.pHandle{ width:26px; height:26px; } }
  .photoObj.static{ cursor:default; }
  .photoObj.static:hover{ transform:rotate(var(--rot, 0deg)); }
  #snapStage .pFrame, #snapStage .pBack{ box-shadow:none !important; }
  #snapStage .ps-polaroid .pFrame{ border:1px solid rgba(0,0,0,0.08); }
  #snapStage .pBack{ transform:translate(var(--bx, 3px), var(--by, 4px)); }
  #snapStage .pCaption{ box-shadow:none !important; }

  /* ---------- mobile quick capture ---------- */
  .captureMenu{
    position:fixed; z-index:10040; display:grid; grid-template-columns:repeat(4, 64px); gap:4px; padding:6px;
    background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 12px 30px var(--shadow), 0 1px 0 rgba(255,255,255,0.5) inset;
    animation:capIn .16s cubic-bezier(.3,1.4,.6,1) both;
  }
  @keyframes capIn{ from{ opacity:0; transform:scale(.9) translateY(6px); } to{ opacity:1; transform:none; } }
  .captureMenu button{
    all:unset; box-sizing:border-box; height:62px; border-radius:12px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    font:600 0.72rem 'Sora', sans-serif; color:var(--ink); -webkit-tap-highlight-color:transparent;
  }
  .captureMenu button:active, .captureMenu button:hover{ background:var(--accent-soft); }
  .captureMenu button svg{ width:22px; height:22px; color:var(--accent); }
  .captureDot{ position:fixed; z-index:10039; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--accent); opacity:0.5; pointer-events:none; }
  /* recording sheet */
  .recSheet{
    position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
    z-index:10041; display:flex; align-items:center; gap:10px; padding:10px 10px 10px 16px;
    background:var(--panel); border:1px solid var(--line); border-radius:999px; box-shadow:0 12px 30px var(--shadow);
    font:600 0.86rem 'Sora', sans-serif; color:var(--ink); white-space:nowrap; max-width:calc(100vw - 24px);
  }
  .recDot{ width:10px; height:10px; border-radius:50%; background:#d64236; animation:recPulse 1.2s ease-in-out infinite; flex:none; }
  @keyframes recPulse{ 50%{ opacity:0.3; } }
  .recTime{ font-variant-numeric:tabular-nums; min-width:3.2em; }
  /* board media objects: a paper voice-memo strip and a film still */
  .boardObj{
    position:absolute; transform:rotate(var(--rot, 0deg)); cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none;
    transition:transform .18s ease;
  }
  body:not(.hasSel) .boardObj:hover{ transform:rotate(var(--rot, 0deg)) translateY(-3px); z-index:9998 !important; }
  /* while something is selected, the rest of the board stays still: no lift, no sway, no big controls; the selected object stays on top */
  body.hasSel .note:not(.selected):not(:focus-within):hover, body.hasSel .photoObj:not(.selected):hover, body.hasSel .boardObj:not(.selected):hover{ cursor:default; }
  body.hasSel .note:not(.selected):hover .del, body.hasSel .note:not(.selected):hover .moreBtn, body.hasSel .note:not(.selected):hover .taskDock{ opacity:0; pointer-events:none; }
  /* A selected object keeps its place in the stack (its z-index is its layer, nothing else). Its controls are reachable by pointing at it or tabbing to it: only then does it
     rise, and only for as long as you are on it. (It used to be forced to 9996 while selected, which made "Send to back" look like it did nothing.) */
  .note.selected:hover, .photoObj.selected:hover, .boardObj.selected:hover, .note.selected:has(:focus-visible), .photoObj.selected:has(:focus-visible), .boardObj.selected:has(:focus-visible){ z-index:9996 !important; }
  .note.focused{ z-index:10004 !important; }
  .boardObj.dragging{ cursor:grabbing; transition:none; z-index:9999 !important; transform:rotate(calc(var(--rot, 0deg) + var(--wob, 0deg))) !important; animation:wobbleSoft .8s ease-in-out infinite; }
  .boardObj.new{ animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
  .boardObj.removing{ animation:popOut .26s ease-in forwards; pointer-events:none; }
  .boardObj.selected{ outline:1.5px solid var(--sel-ring); outline-offset:6px; }
  .boardObj.selected .pCtl{ display:flex; }
  .boardObj.static{ cursor:default; }
  .boardObj.static:hover{ transform:rotate(var(--rot, 0deg)); }
  .memoObj{
    width:var(--pw, 236px); padding:10px 14px 10px 10px; display:flex; align-items:center; gap:10px; --prog:0%;
    background-color:#f5eedb;
    background-image:repeating-linear-gradient(180deg, transparent 0 17px, rgba(90,120,160,0.12) 17px 18px);
    border-radius:2px 3px 2px 4px; box-shadow:0 1px 1.5px rgba(0,0,0,0.16), 3px 7px 14px var(--shadow); color:#3a3528;
  }
  .memoObj .mTape{ position:absolute; top:-8px; left:18px; width:44px; height:16px; background:rgba(255,255,255,0.55); transform:rotate(-4deg); box-shadow:0 1px 2px rgba(0,0,0,0.1); }
  .mPlay, .fPlay{
    all:unset; box-sizing:border-box; flex:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
    width:38px; height:38px; border:2px solid #3a3528; border-radius:48% 52% 50% 46% / 52% 46% 54% 48%; color:#3a3528;
    -webkit-tap-highlight-color:transparent;
  }
  .mPlay svg, .fPlay svg{ width:15px; height:15px; }
  .mPlay:active, .fPlay:active{ transform:scale(0.92); }
  .memoObj .mBody{ flex:1; min-width:0; }
  .memoObj .mHead{ display:flex; align-items:baseline; gap:8px; }
  .memoObj .mHead .pCaption{ flex:1; min-width:0; }
  .memoObj .pCaption{ font-size:1.05rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .memoObj .pCaption.editing{ white-space:normal; }
  .memoObj .mWaveBox{ position:relative; height:16px; margin-top:3px; cursor:default; }
  .memoObj .mWave{ position:absolute; inset:0; display:block; width:100%; height:100%; color:#3a3528; opacity:0.38; }
  .memoObj .mWave.mWaveOn{ opacity:0.95; clip-path:inset(0 calc(100% - var(--prog, 0%)) 0 0); }
  .memoObj.playing .mWaveBox{ cursor:pointer; }
  .memoObj .mTime{ flex:none; font:600 0.72rem 'Sora', sans-serif; opacity:0.82; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .boardObj.missing .mPlay, .boardObj.missing .fPlay{ opacity:0.35; cursor:default; }
  .boardObj .mNote{ font:500 0.62rem 'Sora', sans-serif; opacity:0.7; margin-top:2px; }
  .filmObj{ width:calc(var(--pw, 200px) + 16px); }
  .filmObj .fStrip{
    padding:15px 8px; border-radius:2px;
    background:
      repeating-linear-gradient(90deg, #e8e1cf 0 7px, transparent 7px 15px) 6px 4px / calc(100% - 12px) 6px no-repeat,
      repeating-linear-gradient(90deg, #e8e1cf 0 7px, transparent 7px 15px) 6px calc(100% - 4px) / calc(100% - 12px) 6px no-repeat,
      #1f1c1a;
    box-shadow:0 1px 2px rgba(0,0,0,0.25), 3px 8px 16px var(--shadow);
  }
  .filmObj .fFrame{ position:relative; width:var(--pw, 200px); aspect-ratio:var(--ar, 16 / 9); background:#35302b; overflow:hidden; }
  .filmObj .fFrame img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .filmObj .fPlay{ position:absolute; left:50%; top:50%; margin:-19px 0 0 -19px; border-color:#f3eee2; color:#f3eee2; background:rgba(0,0,0,0.25); }
  .filmObj .fTime{ position:absolute; right:6px; bottom:7px; font:600 0.66rem 'Sora', sans-serif; color:#f3eee2; background:rgba(0,0,0,0.55); padding:1px 5px; border-radius:4px; font-variant-numeric:tabular-nums; white-space:nowrap; z-index:2; }
  .filmObj .fTime:empty{ display:none; }
  .filmObj .fVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; display:block; }
  .filmObj .fProg{ position:absolute; left:0; bottom:0; height:3px; width:var(--prog, 0%); background:#f3eee2; opacity:0; z-index:2; transition:opacity .2s ease; pointer-events:none; }
  .filmObj.playing .fProg{ opacity:0.9; }
  .filmObj .fOpen{ all:unset; position:absolute; top:5px; right:5px; z-index:3; width:24px; height:24px; border-radius:6px; background:rgba(0,0,0,0.5); color:#f3eee2; display:none; align-items:center; justify-content:center; cursor:pointer; font-size:0.9rem; }
  .filmObj .fOpen svg{ width:13px; height:13px; }
  .filmObj.selected .fOpen, .filmObj:focus-within .fOpen, .filmObj .fFrame:hover .fOpen{ display:flex; }
  .filmObj .fOpen:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
  .filmObj.playing .fPlay{ opacity:0; transition:opacity .2s ease; }
  .filmObj.playing:hover .fPlay, .filmObj.playing.selected .fPlay, .filmObj.playing .fPlay:focus-visible{ opacity:1; }
  .filmObj .fFrame{ cursor:default; }
  .filmObj.playing .fFrame{ cursor:pointer; }
  .filmObj .pCaption{
    display:table; margin:7px auto 0; max-width:var(--pw, 200px); background:#fbf8ef; color:#3a3528; padding:2px 10px 3px;
    font-size:1rem; transform:rotate(-2deg); box-shadow:0 1px 3px rgba(0,0,0,0.2);
  }
  .filmObj .pCaption.empty:not(.editing){ display:none; }
  .filmObj .pCaption.editing{ display:block; width:fit-content; min-width:5em; min-height:1.3em; }
  .boardObj .pCaption{ outline:none; }
  .boardObj .pCaption.editing{ cursor:text; background:rgba(255,255,255,0.4); user-select:text; -webkit-user-select:text; touch-action:auto; }
  #snapStage .memoObj, #snapStage .fStrip{ box-shadow:none !important; }
  .videoModal video{ width:100%; max-height:70vh; border-radius:10px; background:#000; display:block; }

  /* focus mode: the note is picked up and brought close; the board dims behind it */
  .focusScrim{ position:fixed; inset:0; z-index:10003; background:rgba(40,32,12,0.32); animation:acctFade .18s ease both; }
  body.dark .focusScrim{ background:rgba(3,2,10,0.55); }
  .note.focused, .note.focused:hover, .note.focused:focus-within{
    position:fixed !important; left:50% !important; top:50% !important;
    width:min(560px, calc(100vw - 32px)) !important;
    min-height:min(420px, 70vh); max-height:min(84vh, 900px);
    transform:translate(-50%, -50%) rotate(calc(var(--rot, 0deg) * 0.35)) !important;
    z-index:10004 !important; cursor:text;
    box-shadow:6px 18px 40px rgba(20,15,5,0.35), 0 1px 0 rgba(255,255,255,0.4) inset;
    animation:focusIn .22s cubic-bezier(.3,1.3,.6,1) both;
  }
  @keyframes focusIn{ from{ opacity:0.4; } to{ opacity:1; } }
  .note.focused > .text{ font-size:1.36rem; padding-bottom:18px; }
  .note.focused .tab{ cursor:default; }
  .note.focused .del, .note.focused .fontCycle, .note.focused .listHint{ display:none !important; }
  .focusClose{
    position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none;
    background:rgba(0,0,0,0.1); color:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  }
  .focusClose:hover{ background:rgba(0,0,0,0.2); }
  .focusClose svg{ width:12px; height:12px; }
  .note.dragging{
    transition:none;
    cursor:grabbing;
    box-shadow: 8px 18px 30px var(--shadow);
    z-index:9999 !important;
    transform: rotate(calc(var(--rot, 0deg) + var(--wob, 0deg))) !important;
    animation: wobble .5s ease-in-out infinite;
  }
  .note.new{ animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
  .note.removing{ animation: popOut .26s ease-in forwards; pointer-events:none; }
  @keyframes popIn{
    0%{ transform: rotate(var(--rot,0deg)) scale(.35) translateY(16px); opacity:0; }
    65%{ transform: rotate(var(--rot,0deg)) scale(1.08) translateY(-4px); opacity:1; }
    100%{ transform: rotate(var(--rot,0deg)) scale(1) translateY(0); opacity:1; }
  }
  @keyframes popOut{
    to{ transform: rotate(calc(var(--rot,0deg) + 22deg)) scale(.3) translateY(24px); opacity:0; }
  }

  /* The tab is both the drag handle and the "tape". Per-note variation comes from
     --tape-* custom properties written from the note's persisted `phys` values. */
  .tab{
    position:absolute;
    top:-11px; left:50%;
    transform:translateX(calc(-50% + var(--tape-x, 0px))) rotate(var(--tape-rot, -2deg));
    width:var(--tape-w, 56px); height:22px;
    background:rgba(255,255,255,var(--tape-op, 0.55));
    border:1px solid rgba(0,0,0,0.06);
    border-radius:2px;
    cursor:grab;
    box-shadow:0 2px 4px rgba(0,0,0,0.12);
    z-index:2;
  }
  .tab:active{ cursor:grabbing; }
  body.read-only .tab{ cursor:default; }
  /* masking tape: warmer, faint paper fibre */
  .note.tape-1 .tab{
    background:
      repeating-linear-gradient(90deg, rgba(120,100,50,0.035) 0 1px, transparent 1px 4px),
      rgba(238,226,190,calc(var(--tape-op, 0.55) + 0.2));
    border-color:rgba(120,100,50,0.08);
  }
  /* torn ends */
  .note.tape-2 .tab{
    border:none; border-radius:0;
    clip-path:polygon(0 8%, 5% 0, 95% 4%, 100% 0, 97% 22%, 100% 44%, 96% 63%, 100% 84%, 95% 100%, 4% 96%, 0 100%, 3% 76%, 0 55%, 4% 34%);
  }
  /* matte frosted, slimmer */
  .note.tape-3 .tab{
    height:19px; top:-9px;
    background:rgba(250,250,247,calc(var(--tape-op, 0.55) - 0.12));
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
  }
  /* faint washi stripes */
  .note.tape-4 .tab{
    background:repeating-linear-gradient(-45deg, rgba(255,255,255,calc(var(--tape-op, 0.55) + 0.05)) 0 5px, rgba(255,255,255,calc(var(--tape-op, 0.55) - 0.12)) 5px 10px);
    clip-path:polygon(0 0, 100% 3%, 98% 50%, 100% 100%, 0 97%, 2% 50%);
    border:none;
  }
  /* long narrow strip */
  .note.tape-5 .tab{ height:17px; top:-8px; border-radius:1px; }

  /* dark mode: some notes are pinned instead of taped. The handle keeps its size
     so dragging stays easy; only the visible part changes. */
  body.dark .note.att-pin .tab{
    background:none; border:none; box-shadow:none; clip-path:none;
  }
  body.dark .note.att-pin .tab::before{
    content:''; position:absolute; left:50%; top:6px; width:14px; height:14px; margin-left:-7px;
    border-radius:50%;
    background:radial-gradient(circle at 34% 30%, rgba(255,255,255,0.7) 0 12%, var(--pin, #cf3f36) 34%, color-mix(in srgb, var(--pin, #cf3f36) 70%, #000) 100%);
    box-shadow:1px 3px 3px rgba(0,0,0,0.55);
  }
  body.dark .note.att-pin .tab::after{
    content:''; position:absolute; left:50%; top:16px; width:6px; height:3px; margin-left:-1px;
    border-radius:50%; background:rgba(0,0,0,0.35); filter:blur(1px);
  }

  /* paper character: painted between the note's background and its content */
  .paperFx{
    position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; overflow:hidden;
    background:linear-gradient(172deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 38%, rgba(0,0,0,0.018) 100%);
  }
  .note.wr-1 .paperFx{
    background:
      linear-gradient(var(--wr-a, 120deg), transparent calc(var(--wr-p, 50%) - 1%), rgba(255,255,255,0.15) var(--wr-p, 50%), rgba(0,0,0,0.035) calc(var(--wr-p, 50%) + 0.35%), transparent calc(var(--wr-p, 50%) + 1.6%)),
      linear-gradient(172deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 38%, rgba(0,0,0,0.018) 100%);
  }
  .note.wr-2 .paperFx{
    background:
      radial-gradient(90px 60px at var(--wr-x, 80%) 100%, rgba(0,0,0,0.05), transparent 70%),
      linear-gradient(calc(var(--wr-a, 120deg) + 40deg), transparent 78%, rgba(255,255,255,0.14) 80%, rgba(0,0,0,0.03) 80.6%, transparent 82%),
      linear-gradient(172deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 38%, rgba(0,0,0,0.018) 100%);
  }
  .note.wr-3 .paperFx{
    background:
      linear-gradient(calc(90deg + var(--wr-t, 2deg)), rgba(0,0,0,0.028), transparent 45%),
      linear-gradient(calc(0deg + var(--wr-t, 2deg)), transparent calc(var(--wr-p, 50%) - 0.8%), rgba(255,255,255,0.14) var(--wr-p, 50%), rgba(0,0,0,0.032) calc(var(--wr-p, 50%) + 0.3%), transparent calc(var(--wr-p, 50%) + 1.2%)),
      linear-gradient(172deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 38%, rgba(0,0,0,0.018) 100%);
  }
  /* a rare, harmless pinhole near the top corner */
  .note.has-hole .paperFx::after{
    content:''; position:absolute; top:9px; left:var(--hole-x, 18px); width:7px; height:7px; border-radius:50%;
    background:radial-gradient(circle, rgba(40,30,10,0.42) 0 1.3px, rgba(0,0,0,0.1) 1.7px, rgba(255,255,255,0.4) 2.6px, transparent 3.4px);
  }
  .note.has-hole.hole-r .paperFx::after{ left:auto; right:var(--hole-x, 18px); }

  .del{
    position:absolute;
    top:6px; right:6px;
    width:22px;height:22px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.1);
    color:inherit;
    font-size:14px;
    line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    opacity:0;
    transition:opacity .15s ease, background .15s ease, transform .15s ease;
  }
  .note:hover .del, .note.selected .del{ opacity:0.85; }
  .del:hover{ background:rgba(0,0,0,0.22); transform:scale(1.1); opacity:1; }
  body.read-only .del, body.read-only .quickDone{ display:none; }
  .del svg{ width:11px; height:11px; }
  /* quick done: a little hand-drawn tick on a paper dot, beside the x. Green only when it is hovered or focused. */
  .quickDone{
    position:absolute; top:6px; right:32px; width:22px; height:22px; border-radius:50%; border:none; padding:0;
    background:rgba(0,0,0,0.1); color:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0;
    transition:opacity .15s ease, background .15s ease, color .15s ease, transform .15s ease;
  }
  .quickDone svg{ width:13px; height:13px; }
  .note:hover .quickDone, .note.selected .quickDone, .quickDone:focus-visible{ opacity:0.85; }
  .quickDone:hover, .quickDone:focus-visible{ background:rgba(76,140,86,0.28); color:#245a2e; opacity:1; transform:scale(1.1); }
  .quickDone:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
  body.dark .note .quickDone{ background:rgba(255,255,255,0.1); }
  body.dark .note .quickDone:hover{ background:rgba(120,200,130,0.3); color:#c9f0cd; }
  .note.soup .quickDone, .note.focused .quickDone{ display:none; }
  body.hasSel .note:not(.selected):hover .quickDone{ opacity:0; pointer-events:none; }

  .badge{
    position:absolute; top:6px; left:6px;
    font-size:0.66rem;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(255,255,255,0.6);
    max-width:62%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .badge.done{ text-decoration:line-through; opacity:0.6; }

  .text{
    font-size:1.24rem;
    line-height:1.42;
    outline:none;
    min-height:104px;
    overflow-wrap:anywhere;
    white-space:pre-wrap;
  }
  .text:empty:before{
    content: attr(data-placeholder);
    opacity:0.45;
  }
  .text.done{ text-decoration:line-through; opacity:0.55; }
  .text h1{ font-size:1.5em; line-height:1.2; margin:0.15em 0; }
  .text h2{ font-size:1.28em; line-height:1.2; margin:0.15em 0; }
  .text h3{ font-size:1.12em; line-height:1.2; margin:0.15em 0; }
  .text ul, .text ol{ margin:0.2em 0; padding-left:1.1em; }
  .text li{ margin:0.15em 0; }

  .toolbar{
    display:flex; flex-direction:column; align-items:center; gap:3px;
  }
  .floatPop.moreMenu{ padding:6px; }
  .moreBtn{
    position:absolute; bottom:6px; right:6px;
    width:24px; height:24px; border-radius:50%;
    background:rgba(255,255,255,0.7);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); cursor:pointer; border:none; padding:0;
    opacity:0; transition:opacity .15s ease, background .15s ease;
  }
  .note:hover .moreBtn, .note:focus-within .moreBtn{ opacity:0.85; }
  .moreBtn:hover{ opacity:1; background:#fff; }
  body.read-only .moreBtn{ display:none; }
  .moreBtn svg{ width:14px; height:14px; }
  .toolbar button{
    all:unset; box-sizing:border-box;
    width:22px; height:22px;
    display:flex; align-items:center; justify-content:center;
    border-radius:7px;
    font-size:0.62rem; font-weight:700; letter-spacing:0.2px;
    cursor:pointer; color:var(--ink); font-family:'Sora',sans-serif;
    flex:none;
    transition:background .12s ease, color .12s ease, transform .12s ease;
  }
  .toolbar button svg{ width:13px; height:13px; display:block; }
  .toolbar button:hover{ background:rgba(0,0,0,0.08); }
  .toolbar button:active{ transform:scale(0.92); }
  .toolbar button.active{ background:var(--ink); color:var(--panel); }
  .toolbar .divider{ width:16px; height:1px; background:rgba(0,0,0,0.14); margin:2px 0; flex:none; }

  /* task detail row: docked flush along the note's bottom edge, separate from the side rail */
  .taskDock{
    position:absolute; left:14px; right:34px; bottom:8px;
    opacity:0; transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease;
  }
  .note:hover .taskDock, .note:focus-within .taskDock{ opacity:1; transform:translateY(0); }
  body.read-only .taskDock{ display:none; }

  .swatchTrigger{ position:relative; flex:none; }
  .colorDot{
    width:22px; height:22px; border-radius:50%; padding:0;
    border:2px solid rgba(255,255,255,0.9); box-shadow:0 0 0 1px rgba(0,0,0,0.12);
  }
  /* Floating popovers are appended to document.body (fixed position) rather than
     nested inside .toolbar, which has its own backdrop-filter blur. */
  .floatPop{
    position:fixed; z-index:10020;
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 10px 26px var(--shadow);
    animation:panelIn .15s ease both;
    overflow-y:auto;
  }
  .floatPop.swatchRow{ display:flex; gap:5px; padding:6px; border-radius:999px; }
  .floatPop.swatchRow button{
    all:unset; width:20px; height:20px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; box-sizing:border-box;
  }
  .floatPop.swatchRow button:hover{ transform:scale(1.15); }
  .floatPop.swatchRow button.active{ border-color:var(--ink); }
  .floatPop.colorPicker{ padding:14px; width:200px; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .hueWheel{
    position:relative; width:150px; height:150px; border-radius:50%;
    background:conic-gradient(from 0deg,
      hsl(0,62%,82%), hsl(30,62%,82%), hsl(60,62%,82%), hsl(90,62%,82%),
      hsl(120,62%,82%), hsl(150,62%,82%), hsl(180,62%,82%), hsl(210,62%,82%),
      hsl(240,62%,82%), hsl(270,62%,82%), hsl(300,62%,82%), hsl(330,62%,82%), hsl(360,62%,82%));
    box-shadow:0 0 0 3px #fff, 0 2px 10px rgba(0,0,0,0.15);
    cursor:crosshair; flex:none;
  }
  .hueWheel .hueDot{
    position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
    border-radius:50%; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.4);
    pointer-events:none;
  }
  .colorPicker .quickRow{ display:flex; gap:5px; }
  .colorPicker .quickRow button{
    all:unset; width:18px; height:18px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; box-sizing:border-box;
  }
  .colorPicker .quickRow button:hover{ transform:scale(1.15); }
  .colorPicker .quickRow button.active{ border-color:var(--ink); }
  .floatPop.notePop{
    padding:10px; display:flex; flex-direction:column; align-items:stretch; gap:6px; width:230px;
  }
  .floatPop.kbdPop{ padding:12px 14px; width:270px; max-height:80vh; overflow-y:auto; }
  .kbdPop h4{ margin:0 0 10px; font-size:0.86rem; font-weight:700; color:var(--ink); }
  .kbdPop dl{ margin:0; display:flex; flex-direction:column; gap:9px; }
  .kbdPop dt{
    font-family:ui-monospace,'SF Mono',Consolas,monospace; font-size:0.72rem;
    background:var(--accent-soft); color:var(--ink); padding:2px 6px; border-radius:5px;
    white-space:nowrap; display:inline-block; margin:0 0 3px;
  }
  .kbdPop dd{ margin:0; font-size:0.78rem; color:var(--ink-soft); line-height:1.35; }
  .kbdGroupTitle{
    font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--accent-strong); margin:0 0 8px;
  }
  .kbdSep{ height:1px; background:var(--line); margin:12px 0; }
  .floatPop.calPop{ padding:12px; width:250px; display:flex; flex-direction:column; gap:8px; }
  .calPop label{ font-size:0.7rem; color:var(--ink-soft); font-weight:600; display:block; margin-bottom:2px; }
  .calPop input, .calPop select{
    width:100%; padding:6px 8px; border-radius:7px; border:1px solid var(--line);
    font-size:0.8rem; font-family:'Sora',sans-serif; color:var(--ink); background:var(--field); border-color:var(--field-line); box-sizing:border-box;
  }
  .floatPop.dateCal{ padding:10px; width:216px; }
  .dateCalHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .dateCalHead button{
    all:unset; width:22px; height:22px; border-radius:6px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  }
  .dateCalHead button:hover{ background:var(--accent-soft); color:var(--ink); }
  .dateCalHead button svg{ width:14px; height:14px; }
  .dateCalHead span{ font-size:0.82rem; font-weight:700; color:var(--ink); }
  .dateCalGrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
  .dateCalGrid .dow{ font-size:0.62rem; color:var(--ink-soft); font-weight:700; padding-bottom:3px; }
  .dateCalGrid button{
    all:unset; box-sizing:border-box; width:100%; aspect-ratio:1; border-radius:7px;
    font-size:0.74rem; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .dateCalGrid button:hover{ background:var(--accent-soft); }
  .dateCalGrid button.today{ box-shadow:inset 0 0 0 1.5px var(--accent); }
  .dateCalGrid button.selected{ background:var(--ink); color:var(--panel); }
  .dateCalGrid button.otherMonth{ color:var(--ink-soft); opacity:0.4; }
  .dateCalFoot{ display:flex; justify-content:space-between; margin-top:8px; }
  .dateCalFoot button{
    all:unset; font-size:0.72rem; color:var(--accent-strong); cursor:pointer; font-weight:600;
  }
  .dateCalFoot button:hover{ text-decoration:underline; }
  .dateTrigger{
    height:24px; border-radius:7px; border:1px solid rgba(0,0,0,0.12);
    background:rgba(255,255,255,0.75); padding:0 8px; flex:1; min-width:0; color:var(--ink);
    font-size:0.72rem; font-family:'Sora',sans-serif; cursor:pointer;
    display:flex; align-items:center; white-space:nowrap; overflow:hidden;
  }
  .dateTrigger:hover{ background:#fff; }

  .taskRow{
    display:flex; gap:5px; width:100%; align-items:center;
    background:rgba(255,255,255,0.65);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.7);
    border-radius:10px; padding:4px;
    box-shadow:0 4px 14px rgba(30,24,10,0.16);
  }
  .checkToggle{
    all:unset; box-sizing:border-box;
    width:20px; height:20px; border-radius:6px; flex:none;
    border:1.5px solid rgba(0,0,0,0.3); background:rgba(255,255,255,0.6);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .12s ease, border-color .12s ease;
  }
  .checkToggle svg{ width:13px; height:13px; opacity:0; transition:opacity .12s ease; }
  .checkToggle.checked{ background:var(--ink); border-color:var(--ink); }
  .checkToggle.checked svg{ opacity:1; stroke:#fff; }
  .calBtn{
    all:unset; box-sizing:border-box; width:24px; height:24px; border-radius:7px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
    background:var(--accent-soft);
  }
  .calBtn:hover{ background:var(--accent-strong) !important; color:var(--on-accent); }
  .calBtn svg{ width:14px; height:14px; }
  .taskRow input[type=time]{
    all:revert;
    height:24px; font-size:0.68rem; border-radius:7px; border:1px solid rgba(0,0,0,0.12);
    background:rgba(255,255,255,0.75); padding:0 4px; flex:none; width:76px; color:var(--ink);
    font-family:'Sora',sans-serif; box-sizing:border-box;
  }
  .taskRow input[type=time]:focus{ outline:2px solid var(--accent); outline-offset:1px; }

  .note.selected{ outline:1.5px solid var(--sel-ring); outline-offset:4px; }
  .note.dragOver{ outline:2px dashed var(--accent); outline-offset:3px; border-radius:5px; }

  /* Images keep their natural ratio: a width (saved per note) + height:auto, never both */
  .noteImgWrap{ position:relative; margin:0 0 8px; width:fit-content; max-width:100%; }
  .noteImgWrap img{ display:block; max-width:100%; height:auto; border-radius:6px; -webkit-user-drag:none; user-select:none; }
  .noteImgWrap.rtl{ margin-left:auto; }
  .noteImgWrap.imgSel img{ outline:1.5px solid var(--sel-ring); outline-offset:2px; }
  .imgHandle{
    position:absolute; right:-7px; bottom:-7px; width:16px; height:16px; border-radius:50%;
    background:var(--panel); border:1.5px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,0.25);
    cursor:nwse-resize; display:none; touch-action:none; z-index:2;
  }
  .noteImgWrap.imgSel .imgHandle{ display:block; }
  body.read-only .imgHandle{ display:none !important; }
  @media (pointer: coarse){ .imgHandle{ width:24px; height:24px; right:-11px; bottom:-11px; } }
  .noteImgWrap .rmImg{
    all:unset; position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%;
    background:rgba(0,0,0,0.5); color:#fff; cursor:pointer; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
  }
  .noteImgWrap .rmImg svg{ width:10px; height:10px; }

  .toastAction{
    background:var(--accent-strong); color:var(--on-accent); border:none; border-radius:999px;
    padding:4px 12px; font-size:0.78rem; font-weight:600; cursor:pointer; flex:none;
  }

  .brand{ cursor:pointer; }
  .brand:hover{ opacity:0.85; }
  .boardName{
    font-family:'Sora',sans-serif; font-weight:600; font-size:0.76rem;
    color:var(--ink-soft); background:var(--accent-soft); padding:3px 10px;
    border-radius:999px; margin-left:2px;
  }
  .brand .chev{ width:14px; height:14px; color:var(--ink-soft); flex:none; }
  .boardRow{
    display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px;
    cursor:pointer; margin-bottom:4px;
  }
  .boardRow .thumb{
    width:64px; height:40px; flex:none; border-radius:6px; display:block;
    border:1px solid var(--line); background:var(--paper); object-fit:cover;
  }
  .boardRow .info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .boardRow .info .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .boardRow .info .sub{ font-size:0.72rem; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .coverPreview{ width:100%; aspect-ratio:16 / 10; border-radius:10px; border:1px solid var(--line); background:var(--paper); display:block; object-fit:cover; margin-bottom:12px; }
  .coverModes{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-bottom:6px; }
  .coverModes .pillBtn{ padding:8px 6px; white-space:normal; line-height:1.2; }
  .coverModes .pillBtn.on{ border-color:var(--accent); background:var(--accent-soft); }
  .coverHint{ font-size:0.72rem; color:var(--ink-soft); min-height:1.2em; margin:0 0 12px; }
  .boardRow .info .meta{ font-size:0.68rem; color:var(--ink-soft); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .boardRow:hover{ background:var(--accent-soft); }
  .boardRow.active{ background:var(--accent-soft); font-weight:700; }
  .boardRow span.name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .boardRow button{
    all:unset; width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--ink-soft); flex:none; box-sizing:border-box;
  }
  .boardRow button svg{ width:11px; height:11px; }
  .boardRow button:hover{ background:rgba(0,0,0,0.1); color:var(--ink); }
  .boardRow input{ flex:1; min-width:0; padding:3px 6px; border-radius:6px; border:1px solid var(--field-line); background:var(--field); color:var(--ink); font-size:0.85rem; }
  .addBoardRow{
    display:flex; align-items:center; gap:6px; margin-top:10px;
    background:var(--field); border:1px solid var(--field-line); border-radius:999px; padding:4px 4px 4px 14px;
  }
  .addBoardRow input{ flex:1; border:none; outline:none; background:transparent; font-size:0.85rem; padding:7px 0; font-family:inherit; color:var(--ink); }
  .addBoardRow button{
    all:unset; width:28px; height:28px; border-radius:50%; background:var(--accent-strong); color:var(--on-accent);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
    font-size:1.15rem; font-weight:700; line-height:1; transition:background .15s ease;
  }
  .addBoardRow button:hover{ background:#b47a24; }

  /* onboarding cue: faint handwriting on the board, never a banner */
  .hint{
    position:fixed;
    left:50%; bottom:calc(66px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%) rotate(-1.5deg);
    font-family:'Caveat', cursive; font-size:1.45rem; font-weight:500;
    color:var(--ink-soft);
    opacity:0.8;
    z-index:5;
    transition:opacity .8s ease;
    pointer-events:none;
    white-space:nowrap;
  }
  .hint.hidden{ opacity:0; }

  .toast{
    position:fixed; left:50%; bottom:56px; transform:translateX(-50%);
    padding:9px 16px; background:var(--ink); color:var(--paper);
    border-radius:999px; font-size:0.82rem; z-index:10005;
    opacity:0; transition:opacity .3s ease; pointer-events:none;
    max-width:88vw; text-align:center;
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .toast.show{ opacity:0.96; pointer-events:auto; }

  /* minimap */
  .minimap{
    position:fixed; left:50%;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);
    width:min(680px, calc(100% - 32px));
    height:30px;
    background:rgba(255,253,245,0.78);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(228,219,185,0.9);
    border-radius:999px;
    box-shadow:0 10px 26px var(--shadow), 0 1px 0 rgba(255,255,255,0.6) inset;
    z-index:9500;
  }
  @media (max-width: 600px){
    .minimap{ display:none; }
  }
  .minimapTrack{ position:relative; height:100%; cursor:pointer; padding:0 4px; touch-action:none; user-select:none; -webkit-user-select:none; }
  .minimapTrack.dragging{ cursor:grabbing; }
  .miniNote{
    position:absolute; top:8px; bottom:8px; border-radius:999px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.7);
    transition:transform .12s ease;
  }
  .miniNote:hover{ transform:scaleY(1.25); }
  .minimapTrack.dragging .miniNote:hover{ transform:none; }
  .miniView{
    position:absolute; top:3px; bottom:3px;
    border:1.5px solid var(--accent);
    background:rgba(201,138,46,0.16);
    pointer-events:none; border-radius:999px; transition:background .12s ease;
  }
  .minimapTrack:hover .miniView{ background:rgba(201,138,46,0.26); }
  .minimapTrack.dragging .miniView{ background:rgba(201,138,46,0.34); border-width:2px; }

  /* shared-view banner */
  .shareBanner{
    position:fixed; top:calc(56px + env(safe-area-inset-top,0px)); left:0; right:0;
    padding:10px 18px; background:var(--accent-soft); border-bottom:1px solid var(--accent);
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    z-index:9600; font-size:0.88rem;
  }
  .shareBanner[hidden]{ display:none; }
  .shareBanner button{ flex:none; }

  /* tour */
  .tourBlock{
    position:fixed; inset:0; z-index:10009;
    cursor:default;
  }
  .spotlight{
    position:fixed; z-index:10010;
    border-radius:10px;
    box-shadow:0 0 0 9999px rgba(30,24,10,0.6);
    transition:all .35s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
  }
  .tourCard{
    position:fixed; z-index:10011;
    width:min(300px, calc(100vw - 24px)); max-width:none;
    background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:16px;
    box-shadow:0 16px 40px var(--shadow);
    transition:top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1);
  }
  .tourCard h4{ margin:0 0 8px; font-family:'Sora',sans-serif; font-size:1.02rem; }
  .tourCard p{ margin:0 0 12px; font-size:0.88rem; line-height:1.45; color:var(--ink); }
  .tourFoot{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:8px; }
  .tourFoot.tight{ grid-template-columns:minmax(0, 1fr) auto; }
  .tourFoot.tight .tourSkip{ grid-column:1 / -1; justify-self:start; }
  .tourDots{ display:flex; gap:5px; justify-content:center; min-width:0; overflow:hidden; }
  .tourDots span{ flex:none; }
  .tourCount{ font-size:0.74rem; color:var(--ink-soft); text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .tourDots span{ width:6px; height:6px; border-radius:50%; background:var(--line); }
  .tourDots span.active{ background:var(--accent); }
  .tourBtns{ display:flex; gap:6px; flex:none; }
  .tourBtns button{ white-space:nowrap; }
  .tourBtns button{ padding:6px 14px; border-radius:7px; border:1px solid var(--field-line); background:var(--field); color:var(--ink); cursor:pointer; font-size:0.82rem; font-weight:600; transition:background .15s ease, border-color .15s ease; }
  .tourBtns button:hover{ background:var(--accent-soft); border-color:var(--accent); }
  .tourBtns button.primary{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent); }
  .tourBtns button.primary:hover{ background:#b47a24; }
  .tourSkip{ background:none; border:none; color:var(--ink-soft); font-size:0.78rem; cursor:pointer; text-decoration:underline; padding:0; }

  /* account modal */
  .acctBackdrop{
    position:fixed; inset:0; z-index:var(--z-modal);
    background:var(--scrim);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    animation:acctFade .15s ease both;
  }
  @keyframes acctFade{ from{ opacity:0; } to{ opacity:1; } }
  .acctCard{
    width:360px; max-width:100%;
    background:var(--panel);
    border-radius:18px;
    padding:28px;
    box-shadow:0 24px 60px rgba(20,15,5,0.35);
    animation:acctPop .22s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes acctPop{ from{ opacity:0; transform:scale(.92) translateY(10px); } to{ opacity:1; transform:none; } }
  .acctCard h3{ margin:0 0 6px; font-size:1.15rem; font-weight:700; text-align:center; }
  .acctCard .acctSub{ margin:0 0 20px; font-size:0.84rem; color:var(--ink-soft); text-align:center; line-height:1.4; }
  .acctClose{
    all:unset; position:absolute; top:14px; right:14px; width:28px; height:28px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--ink-soft);
  }
  .acctClose:hover{ background:rgba(0,0,0,0.06); color:var(--ink); }
  .acctClose svg{ width:14px; height:14px; }
  .acctCard{ position:relative; }
  .acctBackdrop[hidden]{ display:none; }
  .staticNote .tab{ cursor:default; }
  .googleBtn{
    all:unset; box-sizing:border-box; width:100%; height:48px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:#fff; border:1px solid #dadce0; border-radius:10px;
    font-size:0.92rem; font-weight:600; color:#3c4043; cursor:pointer;
    transition:box-shadow .15s ease, background .15s ease;
  }
  .googleBtn:hover{ box-shadow:0 2px 8px rgba(0,0,0,0.15); background:#f8f9fa; }
  .googleBtn svg{ width:20px; height:20px; flex:none; }
  .guestBtn{
    all:unset; box-sizing:border-box; width:100%; height:46px; margin-top:10px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--line); border-radius:10px;
    font-size:0.88rem; font-weight:600; color:var(--ink); cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  .guestBtn:hover{ background:var(--accent-soft); border-color:var(--accent); }
  .acctWhy{ margin:18px 0 0; padding:12px 14px; background:var(--accent-soft); border-radius:10px; }
  .acctWhy p{ margin:0; font-size:0.76rem; color:var(--ink); line-height:1.5; }
  .acctWhy p + p{ margin-top:6px; }
  .acctCompare{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
  .acctCompare > div{ background:var(--field); border:1px solid var(--field-line); border-radius:10px; padding:10px; font-size:0.74rem; }
  .acctCompare strong{ display:block; margin-bottom:6px; font-size:0.78rem; }
  .acctCompare ul{ margin:0; padding-left:15px; }
  .acctCompare li{ margin-bottom:3px; }
  .acctBack{ all:unset; color:var(--ink-soft); font-size:0.8rem; cursor:pointer; text-decoration:underline; display:inline-block; margin-bottom:14px; }
  .acctBack:hover{ color:var(--ink); }
  .acctFoot{ margin-top:8px; text-align:center; font-size:0.78rem; color:var(--ink-soft); }
  .acctFoot button{ all:unset; color:var(--accent-strong); cursor:pointer; font-weight:600; text-decoration:underline; }

  /* ---------- editor content ---------- */
  .text b, .text strong{ font-weight:700; }
  .text a{
    color:inherit; text-decoration:underline; text-decoration-thickness:1.5px;
    text-decoration-color:rgba(40,80,170,0.55); text-underline-offset:2px; cursor:text;
  }
  body.mod-held .text a, body.read-only .text a, .staticNote .text a{ cursor:pointer; }
  /* marker highlight: slanted ends, uneven top edge, readable */
  .text mark.hl{
    color:inherit; background:none; padding:0 0.08em; margin:0 -0.02em;
    background-image:
      linear-gradient(103deg, transparent 0.08em, var(--hl, rgba(255,222,40,0.58)) 0.22em, var(--hl, rgba(255,222,40,0.58)) calc(100% - 0.24em), transparent calc(100% - 0.06em)),
      linear-gradient(97deg, transparent 0.3em, var(--hl2, rgba(255,222,40,0.26)) 0.45em, var(--hl2, rgba(255,222,40,0.26)) 68%, transparent 96%);
    background-size:100% 70%, 100% 38%;
    background-position:0 72%, 0 38%;
    background-repeat:no-repeat;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
    border-radius:0.15em 0.4em 0.2em 0.35em;
  }
  .note.on-yellow{ --hl: rgba(255,128,150,0.45); --hl2: rgba(255,128,150,0.2); }
  /* checklists: hand-drawn boxes, a scribbled tick, a wobbly strike */
  .text ul.checklist{ list-style:none; padding-inline-start:0; }
  .text ul.checklist > li{
    position:relative; padding-inline-start:1.4em; width:fit-content; max-width:100%; min-width:3em;
  }
  .text ul.checklist > li::before{
    content:''; position:absolute; inset-inline-start:0.02em; top:0.22em; width:1em; height:1em;
    background:currentColor; opacity:0.78; cursor:pointer;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 5.1c4.9-.6 10.1-.9 15.3-.4.4 4.8.5 9.6.1 14.6-5 .5-10.1.6-15.1.2-.6-4.7-.7-9.5-.3-14.4z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 5.1c4.9-.6 10.1-.9 15.3-.4.4 4.8.5 9.6.1 14.6-5 .5-10.1.6-15.1.2-.6-4.7-.7-9.5-.3-14.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .text ul.checklist > li[data-checked="true"]::before{
    width:1.2em; height:1.2em; top:0.08em;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.6' d='M5.2 7.1c4.9-.6 10.1-.9 15.3-.4.4 4.8.5 9.6.1 14.6-5 .5-10.1.6-15.1.2-.6-4.7-.7-9.5-.3-14.4z'/%3E%3Cpath stroke-width='2.6' d='M8.4 14.6c1.4 1.2 2.6 2.7 3.6 4.4 2.9-5.6 6.6-10.4 11.6-14.6'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.6' d='M5.2 7.1c4.9-.6 10.1-.9 15.3-.4.4 4.8.5 9.6.1 14.6-5 .5-10.1.6-15.1.2-.6-4.7-.7-9.5-.3-14.4z'/%3E%3Cpath stroke-width='2.6' d='M8.4 14.6c1.4 1.2 2.6 2.7 3.6 4.4 2.9-5.6 6.6-10.4 11.6-14.6'/%3E%3C/svg%3E");
  }
  .text ul.checklist > li[data-checked="true"]{ opacity:0.62; }
  .text ul.checklist > li[data-checked="true"]::after{
    content:''; position:absolute; top:0; bottom:0; inset-inline-start:1.3em; inset-inline-end:-0.1em;
    background:currentColor; opacity:0.8; pointer-events:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1 11.6C18 10.2 34 12.4 52 10.9S84 10.3 99 9.9' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 1.42em repeat-y;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1 11.6C18 10.2 34 12.4 52 10.9S84 10.3 99 9.9' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 1.42em repeat-y;
  }
  ::highlight(stickit-search){ background-color:rgba(255,166,0,0.42); color:inherit; }
  ::highlight(stickit-date){ text-decoration:underline dotted rgba(60,50,30,0.7); }

  /* ---------- note chrome ---------- */
  .fontCycle{
    position:absolute; left:-13px; bottom:-13px; z-index:3;
    width:28px; height:28px; border-radius:50%; padding:0;
    border:1px solid var(--line); background:var(--panel); color:var(--ink);
    box-shadow:0 3px 10px var(--shadow);
    display:none; align-items:center; justify-content:center; gap:0;
    font:600 0.62rem/1 'Sora',sans-serif; cursor:pointer;
    transition:transform .15s ease, border-color .15s ease;
  }
  .fontCycle svg{ width:9px; height:9px; margin-left:1px; }
  .fontCycle:hover{ border-color:var(--accent); transform:scale(1.08); }
  .fontCycle:active{ transform:scale(0.94) rotate(-20deg); }
  .note.selected .fontCycle{ display:flex; }
  body.multi-sel .fontCycle, body.read-only .fontCycle{ display:none !important; }

  .floatPop.noteMenu{ width:216px; padding:8px; }
  .fmtGrid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:3px; }
  .fmtGrid button{
    all:unset; box-sizing:border-box; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--ink); font:700 0.7rem 'Sora',sans-serif;
  }
  .fmtGrid button svg{ width:15px; height:15px; }
  .fmtGrid button:hover{ background:var(--accent-soft); }
  .fmtGrid button:active{ transform:scale(0.92); }
  .fmtGrid .fB{ font-weight:800; font-size:0.84rem; }
  .fmtGrid .fI{ font-style:italic; font-family:Georgia, serif; font-size:0.9rem; font-weight:600; }
  .menuSep{ height:1px; background:var(--line); margin:7px 2px; }
  .menuItem{
    all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:9px;
    padding:7px 8px; border-radius:8px; cursor:pointer; font-size:0.8rem; color:var(--ink);
  }
  .menuItem svg{ width:15px; height:15px; flex:none; color:var(--ink-soft); }
  .menuItem:hover{ background:var(--accent-soft); }
  .menuItem .kbd{ margin-left:auto; font-size:0.66rem; color:var(--ink-soft); }
  .menuItem.on .kbd{ color:var(--accent); font-weight:700; }
  .menuItem.disabled{ opacity:0.45; cursor:default; }
  .menuItem.disabled:hover{ background:none; }
  .menuItem.danger{ color:var(--danger); }
  .menuItem.danger svg{ color:var(--danger); }
  .menuHint{ font-size:0.7rem; color:var(--ink-soft); padding:0 8px 6px; line-height:1.35; }
  .swatchLine{ display:flex; flex-wrap:wrap; gap:3px; padding:4px 3px 6px; justify-content:space-between; }
  .swatchLine button{
    all:unset; box-sizing:border-box; width:18px; height:18px; border-radius:50%; cursor:pointer;
    box-shadow:0 0 0 1px rgba(0,0,0,0.14) inset; transition:transform .12s ease;
  }
  .swatchLine button:hover{ transform:scale(1.15); }
  .swatchLine button.active{ box-shadow:0 0 0 2px var(--panel), 0 0 0 3.5px var(--ink); }
  .swatchLine button.shuffle{ display:flex; align-items:center; justify-content:center; background:var(--field); color:var(--ink-soft); }
  .swatchLine button.shuffle svg{ width:12px; height:12px; }
  .boardPick{ display:flex; flex-direction:column; gap:1px; padding:0 0 2px 22px; }
  .boardPick .menuItem{ padding:6px 8px; }

  .floatPop.linkPop{ width:260px; padding:10px; display:flex; flex-direction:column; gap:8px; }
  .linkPop input{
    width:100%; padding:7px 9px; border-radius:8px; border:1px solid var(--field-line);
    background:var(--field); color:var(--ink); font-size:0.82rem; outline:none;
  }
  .linkPop input:focus{ border-color:var(--accent); }
  .linkPop .rowBtns{ display:flex; gap:6px; justify-content:flex-end; }
  .pillBtn{
    all:unset; box-sizing:border-box; padding:6px 12px; border-radius:8px; cursor:pointer;
    font-size:0.78rem; font-weight:600; border:1px solid var(--field-line); background:var(--field); color:var(--ink);
    text-align:center; white-space:nowrap;
  }
  .pillBtn:hover{ border-color:var(--accent); }
  .pillBtn.primary{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent); }
  .pillBtn.danger{ color:var(--danger); border-color:var(--danger); }
  .pillBtn.dangerFill{ background:var(--danger); border-color:var(--danger); color:#fff; }
  .pillBtn:disabled, .pillBtn[aria-disabled="true"]{ opacity:0.45; cursor:default; }

  .linkCard{
    position:fixed; z-index:10025; max-width:300px; min-width:180px;
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 10px 26px var(--shadow); padding:10px 12px;
    display:flex; gap:10px; align-items:flex-start; pointer-events:auto;
    animation:panelIn .12s ease both;
  }
  .linkCard .fav{ width:28px; height:28px; border-radius:7px; background:var(--accent-soft); flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .linkCard .fav img{ width:18px; height:18px; }
  .linkCard .fav svg{ width:15px; height:15px; color:var(--ink-soft); }
  .linkCard .meta{ min-width:0; }
  .linkCard .dom{ font-size:0.82rem; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .linkCard .url{ font-size:0.72rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
  .linkCard .how{ font-size:0.68rem; color:var(--accent-strong); margin-top:5px; font-weight:600; }

  .floatPop.datePop{ width:250px; padding:12px; display:flex; flex-direction:column; gap:6px; }
  .datePop .when{ font-size:0.92rem; font-weight:700; color:var(--ink); }
  .datePop .tz{ font-size:0.68rem; color:var(--ink-soft); margin-bottom:4px; }
  .datePop .pillBtn{ width:100%; display:flex; align-items:center; gap:8px; text-align:left; }
  .datePop .pillBtn svg{ width:14px; height:14px; flex:none; }

  /* "looks like a list" suggestion, tucked under the selected note */
  .listHint{
    position:absolute; left:0; top:calc(100% + 10px); z-index:4;
    display:none; align-items:center; gap:6px; white-space:nowrap;
    padding:5px 5px 5px 12px; border-radius:999px;
    background:var(--panel); border:1px solid var(--line); box-shadow:0 6px 18px var(--shadow);
    font:500 0.74rem 'Sora', sans-serif; color:var(--ink);
    transform:rotate(calc(-1 * var(--rot, 0deg)));
    transform-origin:left top;
  }
  .listHint.above{ top:auto; bottom:calc(100% + 16px); transform-origin:left bottom; }
  .note.selected .listHint, .note:focus-within .listHint{ display:flex; }
  body.multi-sel .listHint, body.read-only .listHint{ display:none !important; }
  .listHint button{
    all:unset; cursor:pointer; padding:4px 10px; border-radius:999px; font-weight:600;
  }
  .listHint .go{ background:var(--accent-strong); color:var(--on-accent); }
  .listHint .no{ color:var(--ink-soft); padding:4px 7px; }
  .listHint .no:hover{ background:var(--accent-soft); color:var(--ink); }

  /* ---------- selection ---------- */
  .marquee{
    position:absolute; z-index:9997; pointer-events:none;
    border:1px dashed var(--accent); background:color-mix(in srgb, var(--accent) 9%, transparent); border-radius:3px;
  }
  .selBar{
    position:fixed; left:50%; bottom:calc(58px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
    z-index:9800; display:flex; align-items:center; gap:2px; padding:5px 6px 5px 14px;
    background:var(--panel); border:1px solid var(--line); border-radius:999px;
    box-shadow:0 10px 26px var(--shadow); font-size:0.8rem; white-space:nowrap;
    animation:selIn .18s ease both; max-width:calc(100vw - 24px); overflow-x:auto;
  }
  @keyframes selIn{ from{ opacity:0; transform:translate(-50%, 8px); } to{ opacity:1; transform:translate(-50%, 0); } }
  .selBar[hidden]{ display:none; }
  .selBar .selCount{ font-weight:700; margin-right:8px; color:var(--ink); }
  .selBar button{
    all:unset; box-sizing:border-box; padding:6px 10px; border-radius:999px; cursor:pointer; color:var(--ink);
    display:flex; align-items:center; gap:6px;
  }
  .selBar button svg{ width:14px; height:14px; }
  .selBar button:hover{ background:var(--accent-soft); }
  .selBar button.danger{ color:var(--danger); }
  .selBar .x{ color:var(--ink-soft); padding:6px 8px; }

  /* ---------- modals ---------- */
  .modalCard{ width:420px; max-width:100%; max-height:calc(100vh - 40px); overflow-y:auto; overflow-x:hidden; text-align:left; }
  .modalCard h3{ text-align:left; margin-bottom:4px; }
  .modalCard .acctSub{ text-align:left; margin-bottom:16px; }
  /* a review slip: the same modal, dressed as a small piece of paper with a strip of tape */
  .modalCard.slipCard{ background:#fffbe8; color:#3a3528; border:1px solid rgba(90,74,28,0.3); border-radius:4px 14px 14px 14px; position:relative; overflow:visible; }
  .modalCard.slipCard::before{ content:""; position:absolute; top:-9px; left:50%; width:74px; height:18px; transform:translateX(-50%) rotate(-2deg); background:rgba(255,246,196,0.8); border:1px solid rgba(90,74,28,0.15); box-shadow:0 1px 2px rgba(0,0,0,0.12); }
  .slipCard h3{ font:700 0.86rem 'Sora',sans-serif; letter-spacing:0.06em; text-transform:uppercase; margin-top:6px; }
  .slipBody{ display:flex; flex-direction:column; gap:6px; }
  .slipLabel{ font:600 0.78rem 'Sora',sans-serif; opacity:0.85; }
  .slipText{ box-sizing:border-box; width:100%; resize:vertical; min-height:84px; padding:9px 10px; border:1px solid rgba(90,74,28,0.35); border-radius:8px; background:repeating-linear-gradient(#fffdf3 0 25px, rgba(90,74,28,0.14) 25px 26px); color:#3a3528; font:inherit; font-size:0.95rem; line-height:26px; }
  .slipText:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
  .slipCount{ align-self:flex-end; font-size:0.68rem; opacity:0.6; }
  body.dark .modalCard.slipCard{ background:#322d1f; color:#f2eadb; border-color:rgba(242,234,219,0.25); }
  body.dark .modalCard.slipCard::before{ background:rgba(242,234,219,0.18); }
  body.dark .slipText{ background:repeating-linear-gradient(#241f14 0 25px, rgba(242,234,219,0.12) 25px 26px); color:#f2eadb; }
  .modalActions{ display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
  .setSec{ padding:14px 0; border-top:1px solid var(--line); }
  .setSec:first-of-type{ border-top:none; padding-top:6px; }
  .setSec h4{
    margin:0 0 10px; font-size:0.68rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft);
  }
  .setSec.danger h4{ color:var(--danger); }
  .setRow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 0; }
  .setRow > .lbl{ min-width:0; font-size:0.86rem; color:var(--ink); cursor:pointer; }
  .setRow > .lbl small{ display:block; font-size:0.72rem; color:var(--ink-soft); margin-top:2px; line-height:1.35; }
  .setSub{ padding:2px 0 6px; }
  .setSub[hidden]{ display:none; }
  .setLabel{ display:block; font-size:0.78rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
  .setInput{
    display:block; width:100%; min-width:0; padding:9px 11px; border-radius:9px;
    border:1px solid var(--field-line); background:var(--field); color:var(--ink); font-size:0.86rem; outline:none;
  }
  .setInput:focus{ border-color:var(--accent); }
  .setHelp{ margin:6px 0 0; font-size:0.72rem; color:var(--ink-soft); line-height:1.4; }
  .setBtns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .setBtns .pillBtn{ padding:9px 10px; }
  .noteBox{
    background:var(--accent-soft); border-radius:10px; padding:10px 12px; font-size:0.78rem; line-height:1.45; color:var(--ink);
  }
  .noteBox.warn{ background:color-mix(in srgb, var(--danger) 12%, var(--panel)); }
  .importArea{
    width:100%; min-height:130px; resize:vertical; margin:10px 0 6px; font-family:ui-monospace,Consolas,monospace; font-size:0.74rem;
  }
  .importStatus{ font-size:0.74rem; color:var(--ink-soft); min-height:1.2em; }
  .importStatus.bad{ color:var(--danger); }
  .importStatus.good{ color:#4b8a4b; }
  .shareMsg{
    background:var(--field); border:1px solid var(--field-line); border-radius:10px; padding:12px 14px;
    font-size:0.82rem; line-height:1.5; color:var(--ink); margin-bottom:14px; max-height:140px; overflow-y:auto; overflow-wrap:anywhere;
  }
  .sharePreview{ display:flex; justify-content:center; align-items:center; margin:0 0 16px; min-height:120px; position:relative; }
  .shareFine{ margin:12px 0 0; font-size:0.72rem; color:var(--ink-soft); line-height:1.45; }

  /* copy button: fills, ticks, then settles back */
  .copyBtn{ position:relative; overflow:hidden; isolation:isolate; }
  .copyBtn::before{
    content:''; position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,0.16);
    transform:scaleX(0); transform-origin:left;
  }
  .copyBtn.copied::before{ animation:copyFill .45s cubic-bezier(.4,0,.2,1) forwards; }
  .copyBtn .ok{ display:inline-flex; align-items:center; gap:6px; }
  .copyBtn .ok svg{ width:15px; height:15px; stroke-dasharray:24; stroke-dashoffset:24; animation:tickDraw .35s .15s ease forwards; }
  @keyframes copyFill{ to{ transform:scaleX(1); } }
  @keyframes tickDraw{ to{ stroke-dashoffset:0; } }

  /* snapshot stage: board content only, rendered offscreen from note data.
     html2canvas can't do CSS masks, color-mix() or calc() gradient stops, so
     this scope swaps in plain equivalents that look the same. */
  #snapStage{ position:fixed; left:0; top:0; z-index:-5; opacity:0; pointer-events:none; overflow:hidden; background:var(--paper); }
  #snapStage .note{ box-shadow:none !important; filter:none; border-bottom:1px solid rgba(0,0,0,0.07); }
  #snapStage .note.wr-2 .paperFx{
    background:
      linear-gradient(calc(var(--wr-a, 120deg) + 40deg), transparent 78%, rgba(255,255,255,0.14) 80%, rgba(0,0,0,0.03) 80.6%, transparent 82%),
      linear-gradient(172deg, rgba(255,255,255,0.2), rgba(255,255,255,0) 38%, rgba(0,0,0,0.018) 100%);
  }
  body.dark #snapStage .note.att-pin .tab::before{
    background:var(--pin, #cf3f36);
    box-shadow:inset -2px -3px 3px rgba(0,0,0,0.3), inset 2px 2px 2px rgba(255,255,255,0.35);
  }
  body.dark #snapStage .note.att-pin .tab::after{ display:none; }
  #snapStage .note.has-hole .paperFx::after{ background:rgba(40,30,10,0.35); width:3px; height:3px; margin:2px; }
  #snapStage .text mark.hl{ background-image:none; background-color:var(--hl, rgba(255,222,40,0.5)); }
  #snapStage .text ul.checklist > li::before, #snapStage .text ul.checklist > li::after{ display:none; }
  #snapStage .snapMark{ position:absolute; pointer-events:none; }

  /* static notes (share previews, public views) */
  .staticNote{ position:absolute; cursor:default; text-align:start; }
  .staticNote:hover{ transform:rotate(var(--rot, 0deg)); }
  .publicStage{ position:relative; margin:0 auto; }

  body.dark .minimap{ background:rgba(30,26,48,0.8); border-color:rgba(61,53,88,0.9); box-shadow:0 10px 26px var(--shadow); }
  body.dark ::highlight(stickit-date){ text-decoration:underline dotted rgba(40,30,20,0.75); }

  /* ---------- cloud: sync status, overlay, media states ---------- */
  .syncPill{
    display:inline-flex; align-items:center; gap:6px; margin-left:4px; padding:2px 9px 2px 8px; border-radius:999px;
    font:500 0.68rem 'Sora',sans-serif; color:var(--ink-soft); background:transparent; border:1px solid transparent;
    cursor:default; white-space:nowrap; transition:color .2s ease, border-color .2s ease, opacity .3s ease;
  }
  .syncPill[hidden]{ display:none; }
  .syncPill::before{ content:''; width:6px; height:6px; border-radius:50%; background:#5f9e5f; flex:none; }
  .syncPill.saving::before{ background:var(--accent); animation:recPulse 1.1s ease-in-out infinite; }
  .syncPill.offline::before{ background:#9a8f7a; }
  .syncPill.problem{ color:var(--danger); border-color:var(--danger); cursor:pointer; }
  .syncPill.problem::before{ background:var(--danger); }
  .syncPill.offline, .syncPill.problem{ cursor:pointer; }
  .syncPill.saved{ opacity:0.7; }
  @media (max-width:600px){ .syncPill{ margin-left:0; } }
  /* the Stick-It loader: a red sticky note that wobbles, then turns into a green one that sticks (transform/opacity only) */
  .cloudOverlay{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10050;
    display:flex; flex-direction:column; align-items:center; gap:10px; max-width:min(86vw, 340px);
    padding:18px 26px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 14px 36px rgba(20,15,5,0.26); font:500 0.92rem 'Sora',sans-serif; text-align:center;
    transition:opacity .22s ease;
  }
  .cloudOverlay.cover{ inset:0; left:0; top:0; transform:none; max-width:none; border:0; border-radius:0; box-shadow:none; background:var(--paper); justify-content:center; padding:24px; }
  .slNote{ position:relative; width:46px; height:46px; transform-origin:50% 62%; animation:slWobble 1.1s ease-in-out infinite; }
  .slNote span{ position:absolute; inset:0; }
  .slNote svg{ width:100%; height:100%; display:block; }
  .slGreen{ opacity:0; }
  @keyframes slWobble{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg) scale(1.04); } }
  .stickLoader.ok .slNote{ animation:slStick .46s cubic-bezier(.34,1.56,.64,1) both; }
  .stickLoader.ok .slRed{ opacity:0; transition:opacity .18s ease; }
  .stickLoader.ok .slGreen{ opacity:1; transition:opacity .18s ease; }
  @keyframes slStick{ 0%{ transform:rotate(-6deg) scale(1); } 45%{ transform:rotate(0deg) scale(1.2) translateY(-3px); } 100%{ transform:rotate(0deg) scale(1) translateY(0); } }
  .stickLoader.fail .slNote{ animation:slShake .42s ease both; }
  @keyframes slShake{ 0%{ transform:rotate(-4deg); } 20%{ transform:translateX(-4px) rotate(-5deg); } 40%{ transform:translateX(4px) rotate(3deg); } 60%{ transform:translateX(-3px) rotate(-3deg); } 80%{ transform:translateX(2px) rotate(1deg); } 100%{ transform:rotate(-4deg); } }
  .stickLoader.out{ opacity:0; }
  .stickLoader .msg{ min-height:1.2em; }
  .stickLoader .slRetry[hidden]{ display:none; }
  .stickLoader.fail .msg{ max-width:300px; line-height:1.4; }
  .slMini{ display:inline-block; width:18px; height:18px; vertical-align:-4px; margin-right:6px; animation:slWobble 1.1s ease-in-out infinite; }
  .slMini svg{ width:100%; height:100%; display:block; }
  @media (prefers-reduced-motion: reduce){
    .slNote, .slMini, .stickLoader.ok .slNote, .stickLoader.fail .slNote{ animation:none !important; transform:none !important; }
    .stickLoader.ok .slRed, .stickLoader.ok .slGreen{ transition:opacity .2s linear; }
  }

  /* sign-in dialog: three equal choices, then guest, one short line of fine print */
  .authLead{ margin:0 0 18px !important; }
  .authBtns{ display:flex; flex-direction:column; gap:10px; }
  .authOr{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; color:var(--ink-soft); font-size:0.78rem; }
  .authOr::before, .authOr::after{ content:''; flex:1; height:1px; background:var(--line); }
  .authGuest{ margin-top:6px; }
  .authLabel{ display:block; margin:14px 0 6px; font-size:0.8rem; font-weight:600; color:var(--ink); }
  .authInput{ box-sizing:border-box; width:100%; height:46px; padding:0 14px; border:1px solid var(--edge); border-radius:10px; background:var(--field); color:var(--ink); font:inherit; font-size:1rem; }
  .otpInput{ text-align:center; letter-spacing:0.35em; font-size:1.3rem; font-weight:600; }
  .authMsg{ min-height:1.3em; margin:8px 0 6px; text-align:left; }
  .authMsg.ok{ color:var(--ink-soft); }
  .authPrimary{ width:100%; height:46px; display:flex; align-items:center; justify-content:center; }
  .authPrimary[aria-busy="true"]{ opacity:0.85; }
  .authLinks{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; }
  .linkBtn{ all:unset; cursor:pointer; font-size:0.82rem; color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }
  .linkBtn:disabled{ cursor:default; color:var(--ink-soft); text-decoration:none; }
  .authAddr{ word-break:break-all; color:var(--ink); }
  .legalAck{ margin:16px 2px 0; }
  .pFrame.pending img, .noteImgWrap img.pending{ background:linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.11)); min-height:60px; }
  .planBadge{ display:inline-block; font:600 0.66rem 'Sora',sans-serif; letter-spacing:0.05em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--ink); margin-top:4px; }
  .migList{ display:flex; flex-direction:column; gap:6px; margin:10px 0 4px; }
  .migRow{ display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--field-line); border-radius:10px; background:var(--field); cursor:pointer; }
  .migRow input{ flex:none; width:16px; height:16px; }
  .migRow .t{ min-width:0; flex:1; font-size:0.86rem; }
  .migRow .t small{ display:block; color:var(--ink-soft); font-size:0.72rem; margin-top:1px; }
  .migProgress{ height:8px; border-radius:999px; background:var(--line); overflow:hidden; margin:14px 0 8px; }
  .migProgress > i{ display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; }
  /* account settings: a personal profile first, then quiet paper cards */
  /* keyboard: every control shows where focus is (the buttons that reset their own style would otherwise lose it) */
  a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
    outline:2px solid var(--focus); outline-offset:2px;
  }
  .note [contenteditable]:focus-visible{ outline:none; }
  .skipLink{ position:fixed; left:12px; top:-60px; z-index:100000; padding:9px 14px; border-radius:10px; background:var(--panel); color:var(--ink); border:2px solid var(--focus); font-weight:600; text-decoration:none; }
  .skipLink:focus{ top:12px; }
  /* motion: the paper wobble, pops and fades are decoration; people who ask for less motion get none of it (state changes still show) */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:0.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
    .note.dragging, .photoObj.dragging, .boardObj.dragging, .note:hover, .note:focus-within{ animation:none !important; }
  }
  /* legal links and acknowledgements */
  .legalAck{ margin:12px 2px 0; font-size:0.74rem; line-height:1.45; color:var(--ink-soft); text-align:center; }
  .legalAck a, .legalLinks a{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }
  .legalLinks{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:0.78rem; color:var(--ink-soft); }
  /* .legalFoot (the compact Legal chip) lives in css/legal-reader.css */
  .ageRow{ display:flex; gap:10px; margin-top:12px; }
  .ageRow label{ flex:1; font-size:0.76rem; font-weight:600; color:var(--ink-soft); }
  .ageRow select{ display:block; width:100%; margin-top:5px; padding:10px 10px; border-radius:10px; border:1px solid var(--edge); background:var(--field); color:var(--ink); font:inherit; font-size:0.92rem; }
  .shareFine strong{ color:var(--ink); }
  .shareFine.big{ font-size:0.82rem; }
  /* avatar circles (top bar, profile, share previews) */
  .acctAv{ display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; flex:none; font-weight:700; color:#fff; user-select:none; width:100%; height:100%; line-height:1; }
  .acctAv img{ width:100%; height:100%; object-fit:cover; display:block; }
  .acctAv.emoji{ font-size:1.5em; }
  .acctCard.acctWide{ width:min(660px, 94vw); max-height:min(90vh, 920px); padding:0; display:flex; flex-direction:column; overflow:hidden; }
  .acctWide .acctClose{ z-index:4; top:12px; right:12px; background:var(--panel); box-shadow:0 1px 5px var(--shadow); }
  .acctScroll{ overflow-y:auto; overscroll-behavior:contain; padding:26px 28px 24px; flex:1; min-height:0; display:flex; flex-direction:column; gap:16px; scrollbar-width:thin; }
  .asFoot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 22px; border-top:1px solid var(--line); background:var(--panel); }
  .asFoot .asErr{ flex:1; margin:0; text-align:left; font-size:0.8rem; min-width:0; }
  .asFoot .pillBtn{ min-width:88px; padding:9px 18px; }
  .asFoot .pillBtn.primary{ box-shadow:0 2px 0 color-mix(in srgb, var(--accent) 70%, #000); }
  /* hero */
  .asHero{ position:relative; display:flex; gap:22px; align-items:center; padding:24px 22px 22px; margin-top:6px; border-radius:18px;
    background:linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 35%, var(--panel)));
    box-shadow:0 1px 0 rgba(255,255,255,0.45) inset, 0 8px 18px -12px var(--shadow); }
  .asHero::before{ content:""; position:absolute; top:-9px; left:50%; width:70px; height:19px; margin-left:-35px; transform:rotate(-2.5deg);
    background:rgba(255,255,255,0.5); box-shadow:0 1px 2px rgba(0,0,0,0.12); border-radius:2px; }
  body.dark .asHero::before{ background:rgba(255,255,255,0.22); }
  .asHero .pic{ width:96px; height:96px; font-size:2.1rem; box-shadow:0 0 0 4px var(--panel), 0 6px 14px -6px var(--shadow); flex:none; }
  .asHeroText{ min-width:0; flex:1; }
  .acctWide h3.asHeroName{ margin:0; text-align:start; font:700 1.4rem/1.15 'Sora',sans-serif; color:var(--ink); overflow-wrap:anywhere; unicode-bidi:plaintext; text-align:start; }
  .asHeroHandle{ margin:3px 0 0; font-size:0.86rem; color:var(--ink-soft); overflow-wrap:anywhere; }
  .asHeroBio{ margin:9px 0 0; font-size:0.92rem; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; unicode-bidi:plaintext; text-align:start; }
  .asHeroActions{ margin-top:12px; }
  .asMenuWrap{ position:relative; display:inline-block; }
  .asPhotoBtn{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; font-size:0.82rem; font-weight:600; color:var(--ink);
    background:color-mix(in srgb, var(--panel) 80%, transparent); border:1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
  .asPhotoBtn:hover{ background:var(--panel); }
  .asPhotoBtn:focus-visible, .asAction:focus-visible, .asSelect:focus-visible, .asMenu button:focus-visible, .asSwatches button:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:2px; }
  .asPhotoBtn svg{ width:15px; height:15px; }
  .asMenu{ position:absolute; z-index:6; top:calc(100% + 6px); left:0; min-width:220px; max-width:min(300px, 86vw); padding:5px; border-radius:12px;
    background:var(--panel); border:1px solid var(--line); box-shadow:0 14px 30px -10px var(--shadow); animation:acctPop .14s ease both; }
  .asMenu.right{ left:auto; right:0; }
  .asMenu > button{ all:unset; box-sizing:border-box; display:block; width:100%; padding:9px 12px; border-radius:8px; cursor:pointer; font-size:0.86rem; color:var(--ink); }
  .asMenu > button:hover, .asMenu > button:focus-visible{ background:var(--accent-soft); }
  .asMenu > button.danger{ color:var(--danger); }
  .asMenu .asSwatches{ padding:8px 8px 6px; margin:0; max-width:230px; }
  /* cards */
  .asCard{ background:var(--field); border:1px solid var(--line); border-radius:16px; padding:2px 18px 4px; box-shadow:0 1px 2px rgba(60,45,10,0.05); }
  .asCard h4{ margin:16px 0 2px; font:700 0.68rem 'Sora',sans-serif; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft); }
  .asCard h5{ margin:14px 0 0; font:600 0.72rem 'Sora',sans-serif; color:var(--ink-soft); }
  .asItem{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid color-mix(in srgb, var(--line) 75%, transparent); }
  .asCard > h4 + .asItem, .asCard > h5 + .asItem{ border-top:0; }
  .asItem .lbl{ flex:1 1 0; min-width:0; font-size:0.9rem; color:var(--ink); }
  .asItem .lbl small{ display:block; margin-top:2px; font-size:0.74rem; line-height:1.35; color:var(--ink-soft); font-weight:400; }
  .asItem .val{ flex:none; max-width:55%; text-align:right; font-size:0.86rem; color:var(--ink-soft); overflow-wrap:anywhere; }
  .asItem .val b{ color:var(--ink); font-weight:600; }
  .asHint{ margin:2px 0 12px; font-size:0.74rem; line-height:1.4; color:var(--ink-soft); }
  /* fields */
  .asField{ display:block; margin:12px 0 0; }
  .asField > .l{ display:flex; justify-content:space-between; margin-bottom:5px; font-size:0.76rem; font-weight:600; color:var(--ink-soft); }
  .asField > .l .cnt{ font-weight:400; }
  .asIn, .asPfx{ box-sizing:border-box; width:100%; border:1px solid var(--edge); border-radius:10px; background:var(--field); color:var(--ink); font:inherit; font-size:0.92rem; }
  .asIn{ padding:10px 12px; }
  textarea.asIn{ resize:none; min-height:64px; line-height:1.4; }
  .asPfx{ display:flex; align-items:center; padding:0 12px; }
  .asPfx span{ color:var(--ink-soft); margin-right:2px; user-select:none; }
  .asPfx input{ all:unset; flex:1; min-width:0; padding:10px 0; font-size:0.92rem; color:var(--ink); }
  .asIn:focus, .asPfx:focus-within{ outline:2px solid var(--sel-ring); outline-offset:1px; }
  .asField.err .asIn, .asField.err .asPfx{ border-color:var(--danger); }
  .asField .help{ margin:5px 0 0; font-size:0.72rem; line-height:1.35; color:var(--ink-soft); min-height:1em; }
  .asField .help.bad{ color:var(--danger); } .asField .help.good{ color:#3b7a4d; } body.dark .asField .help.good{ color:#7fcf94; }
  .acctWide input[dir=auto], .acctWide textarea{ unicode-bidi:plaintext; }
  .asEdit{ padding-bottom:14px; }
  .asEdit h4{ margin-bottom:0; }
  /* compact controls */
  .asSel{ position:relative; display:inline-flex; align-items:center; flex:none; max-width:58%; min-width:0; }
  .asSel::after{ content:""; position:absolute; right:9px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft); transform:rotate(45deg); pointer-events:none; }
  .asSelect{ appearance:none; -webkit-appearance:none; max-width:100%; border:0; background:transparent; color:var(--ink); font:inherit; font-size:0.88rem; padding:7px 26px 7px 10px; border-radius:8px; cursor:pointer; text-align:right; text-overflow:ellipsis; }
  .asSel:hover .asSelect{ background:color-mix(in srgb, var(--accent-soft) 50%, transparent); }          /* the control itself, not its row or its label (a hovered label also hovers the control it belongs to) */
  .asSelect option, .asSelect optgroup{ background:var(--panel); color:var(--ink); }
  input.asSw{ appearance:none; -webkit-appearance:none; flex:none; position:relative; width:36px; height:21px; margin:0; border-radius:999px; background:color-mix(in srgb, var(--ink-soft) 35%, var(--field)); box-shadow:inset 0 0 0 1px var(--edge); cursor:pointer; transition:background .15s; }
  input.asSw::after{ content:""; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.3); transition:transform .15s; }
  input.asSw:checked{ background:var(--accent-strong); } input.asSw:checked::after{ transform:translateX(15px); }
  input.asSw:disabled{ opacity:0.4; cursor:default; }
  input.asSw:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:2px; }
  .asItem.off .lbl{ opacity:0.5; }
  .asAction{ all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; cursor:pointer; border-top:1px solid color-mix(in srgb, var(--line) 75%, transparent); }
  .asCard > h4 + .asAction{ border-top:0; }
  .asAction .lbl{ min-width:0; font-size:0.9rem; color:var(--ink); }
  .asAction .lbl small{ display:block; margin-top:2px; font-size:0.74rem; line-height:1.35; color:var(--ink-soft); }
  .asAction .go{ flex:none; color:var(--ink-soft); font-size:0.86rem; display:inline-flex; align-items:center; gap:8px; }
  .asAction:hover .lbl{ text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset:3px; }
  .asAction[disabled]{ opacity:0.5; cursor:default; }
  .asAction[hidden]{ display:none; }
  .asLink{ all:unset; cursor:pointer; color:var(--accent-strong); font-size:0.82rem; font-weight:600; padding:4px 2px; }
  .asLink:hover{ text-decoration:underline; } .asLink:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:2px; }
  .asChip{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.68rem; font-weight:600; background:var(--accent-soft); color:var(--ink); margin-left:6px; }
  /* fallback avatar (secondary) */
  .asFallRow[aria-expanded="true"] .go .chev{ transform:rotate(90deg); }
  .asFallRow .chev{ display:inline-block; transition:transform .15s; }
  .asFall{ padding:2px 0 14px; }
  .asSeg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .asSeg button{ all:unset; cursor:pointer; padding:6px 14px; font-size:0.8rem; color:var(--ink-soft); }
  .asSeg button.on{ background:var(--accent-soft); color:var(--ink); font-weight:600; }
  .asSeg button:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:-2px; }
  .asSwatches{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
  .asSwatches button{ all:unset; box-sizing:border-box; cursor:pointer; width:26px; height:26px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18); }
  .asSwatches button.on{ outline:2px solid var(--accent); outline-offset:2px; }
  .asSwatches button.auto{ width:auto; padding:0 11px; border-radius:999px; font-size:0.72rem; display:flex; align-items:center; color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--line); }
  .asEmojis{ display:flex; gap:2px; flex-wrap:wrap; margin-top:8px; }
  .asEmojis button{ all:unset; cursor:pointer; font-size:1.2rem; padding:3px 6px; border-radius:8px; }
  .asEmojis button:hover, .asEmojis button:focus-visible{ background:var(--accent-soft); }
  .dot{ display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-1px; margin-right:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2); }
  /* what a recipient sees */
  .asPreview{ display:flex; gap:10px; align-items:center; margin:2px 0 12px; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, var(--accent-soft) 40%, transparent); font-size:0.8rem; }
  .asPreview .pv{ width:32px; height:32px; font-size:0.8rem; flex:none; }
  .asPreview .t{ min-width:0; } .asPreview .t small{ display:block; color:var(--ink-soft); font-size:0.7rem; }
  .asPreview .t b{ font-weight:600; unicode-bidi:plaintext; overflow-wrap:anywhere; }
  .asPreview .t i{ display:block; font-style:normal; color:var(--ink-soft); unicode-bidi:plaintext; overflow-wrap:anywhere; }
  /* account facts */
  .asStats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px 14px; padding:12px 0 6px; border-top:1px solid color-mix(in srgb, var(--line) 75%, transparent); }
  .asStat{ min-width:0; font-size:0.92rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
  .asStat small{ display:block; margin-bottom:2px; font-size:0.68rem; font-weight:500; color:var(--ink-soft); }
  .asStat.wide{ grid-column:1 / -1; }
  .asBar{ height:5px; border-radius:5px; background:color-mix(in srgb, var(--ink-soft) 25%, transparent); overflow:hidden; margin-top:5px; }
  .asBar i{ display:block; height:100%; background:var(--accent); }
  .asSkel{ display:block; height:1.05em; width:60%; border-radius:6px; background:linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 40%, var(--field)), var(--line)); background-size:200% 100%; animation:asShimmer 1.3s linear infinite; }
  @keyframes asShimmer{ to{ background-position:-200% 0; } }
  .asProv .lbl small{ overflow-wrap:anywhere; }
  /* danger */
  .asDanger{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-radius:16px;
    border:1px solid color-mix(in srgb, var(--danger) 32%, var(--line)); background:color-mix(in srgb, var(--danger) 4%, var(--field)); }
  .asDanger .lbl{ min-width:0; font-size:0.9rem; color:var(--ink); } .asDanger .lbl small{ display:block; margin-top:2px; font-size:0.74rem; line-height:1.4; color:var(--ink-soft); }
  .asDanger .lbl .k{ display:block; margin-bottom:3px; font:700 0.68rem 'Sora',sans-serif; letter-spacing:0.09em; text-transform:uppercase; color:var(--danger); }
  .asErr{ font-size:0.8rem; color:var(--danger); }
  .asField.err + .asErr{ display:block; }
  .pillBtn.dangerFill[disabled]{ opacity:0.4; }
  @media (max-width:560px){
    .acctCard.acctWide{ width:calc(100vw - 14px); max-height:calc(100vh - 14px); max-height:calc(100dvh - 14px); border-radius:16px; }
    .acctScroll{ padding:22px 14px 18px; gap:14px; }
    .asHero{ flex-direction:column; text-align:center; gap:14px; padding:24px 16px 18px; }
    .asHeroText{ width:100%; } .acctWide h3.asHeroName, .asHeroBio{ text-align:center; }
    .asHero .pic{ width:88px; height:88px; }
    .asMenu{ left:50%; transform:translateX(-50%); animation:none; } .asMenu.right{ left:auto; right:0; transform:none; }
    .asCard{ padding:2px 14px 4px; }
    .asStats{ grid-template-columns:1fr 1fr; }
    .asDanger{ flex-direction:column; align-items:stretch; text-align:left; }
    .asFoot{ padding:10px 14px; } .asFoot .pillBtn{ flex:1; }
    .asItem .val{ max-width:60%; }
  }
  .shareLinks{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
  .shareLinks .row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:0.78rem; margin-bottom:6px; }

  /* touch devices: bigger, thumb-friendly targets */
  @media (pointer: coarse){
    .moreBtn{ width:34px; height:34px; }
    .moreBtn svg{ width:17px; height:17px; }
    .del{ width:30px; height:30px; }
    .del svg{ width:14px; height:14px; }
    .quickDone{ width:30px; height:30px; right:40px; }
    .quickDone svg{ width:17px; height:17px; }
    .toolbar button{ width:32px; height:32px; }
    .toolbar button svg{ width:16px; height:16px; }
    .colorDot{ width:28px; height:28px; }
    .checkToggle{ width:26px; height:26px; }
    .checkToggle svg{ width:15px; height:15px; }
    .calBtn{ width:30px; height:30px; }
    .gearBtn{ width:42px; height:42px; }
    .tab{ width:calc(var(--tape-w, 56px) + 8px); height:26px; }
    .fontCycle{ width:36px; height:36px; left:-16px; bottom:-16px; }
    .fmtGrid button{ height:36px; }
    .menuItem{ padding:10px 8px; }
  }

  /* ---------- Cutout Maker ---------- */
  .stickLoader:not(.fail):not(.cover){ pointer-events:none; }
  /* ---------- Cutout Maker: one big working canvas and a shelf of small paper panels ---------- */
  .cmkBackdrop{ position:fixed; inset:0; z-index:10030; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:16px; animation:acctFade .15s ease both; }
  .cmkCard{ position:relative; display:flex; flex-direction:column; gap:10px; width:min(1040px, 100%); height:min(780px, 100%); background:var(--panel); color:var(--ink); border-radius:16px; padding:14px 16px 12px; box-shadow:0 24px 60px rgba(20,15,5,0.35); border:1px solid var(--line); }
  .cmkCard::before{ content:""; position:absolute; top:-9px; left:50%; width:84px; height:18px; transform:translateX(-50%) rotate(-1.5deg); background:rgba(255,246,196,0.8); border:1px solid rgba(90,74,28,0.15); box-shadow:0 1px 2px rgba(0,0,0,0.12); pointer-events:none; }
  body.dark .cmkCard::before{ background:rgba(242,234,219,0.18); }
  .cmkHead{ display:flex; align-items:center; gap:12px; position:relative; padding-right:34px; }
  .cmkHead h3{ margin:0; font:700 1.05rem 'Sora',sans-serif; letter-spacing:0.01em; }
  .cmkViewSeg{ margin-left:auto; }
  .cmkClose{ top:-4px; right:-6px; }
  .cmkHint{ margin:0; padding:7px 12px; border-radius:10px; background:var(--accent-soft); color:var(--ink); font-size:0.78rem; line-height:1.4; }
  .cmkMain{ position:relative; flex:1; min-height:0; display:flex; gap:12px; }
  .cmkStageWrap{ position:relative; flex:1; min-width:0; display:flex; }
  .cmkStage{ position:relative; flex:1; min-width:0; overflow:hidden; border-radius:12px; touch-action:none; outline-offset:2px; border:1px solid var(--line);
    background-color:#e9e5d8; background-image:linear-gradient(45deg,#d8d3c3 25%,transparent 25%,transparent 75%,#d8d3c3 75%),linear-gradient(45deg,#d8d3c3 25%,transparent 25%,transparent 75%,#d8d3c3 75%); background-size:20px 20px; background-position:0 0,10px 10px; }
  body.dark .cmkStage{ background-color:#2a2538; background-image:linear-gradient(45deg,#352f46 25%,transparent 25%,transparent 75%,#352f46 75%),linear-gradient(45deg,#352f46 25%,transparent 25%,transparent 75%,#352f46 75%); }
  .cmkStage.dim{ opacity:0.3; pointer-events:none; }
  .cmkStage:focus-visible{ outline:2px solid var(--focus); }
  .cmkView{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
  .cmkCanvas{ display:block; width:100%; height:100%; user-select:none; -webkit-user-select:none; }
  .cmkRing{ position:absolute; pointer-events:none; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.35); z-index:2; }
  .cmkRing[hidden], .cmkFail[hidden], .cmkShelf[hidden], .cmkFoot[hidden], .cmkHint[hidden], .cmkGroup[hidden]{ display:none; }
  .cmkStatus{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); margin:0; max-width:calc(100% - 24px); padding:5px 12px; border-radius:999px; background:rgba(40,32,12,0.82); color:#fff8e3; font:500 0.76rem 'Sora',sans-serif; opacity:0; transition:opacity .18s ease; pointer-events:none; text-align:center; }
  .cmkStatus.on{ opacity:1; }
  .cmkShelf{ width:216px; flex:none; display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding:2px 2px 2px 0; scrollbar-width:thin; }
  .cmkShelf input[type=range]{ accent-color:var(--accent-strong); }
  .cmkGroup{ margin:0; padding:9px 10px 10px; border-radius:12px; background:var(--field); border:1px solid var(--line); }
  .cmkGroupLabel{ margin:0 0 7px; font:700 0.64rem 'Sora',sans-serif; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft); }
  .cmkToolGrid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .cmkToolBtn{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px 7px; min-height:54px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; font:600 0.74rem 'Sora',sans-serif; text-align:center; transition:background .12s ease, border-color .12s ease; }
  .cmkToolBtn:hover:not(:disabled){ border-color:var(--accent); }
  .cmkToolBtn:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
  .cmkToolBtn:disabled{ opacity:0.45; cursor:default; }
  .cmkToolBtn.on, .cmkToolBtn[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent-strong); }
  .cmkIc svg{ width:20px; height:20px; display:block; }
  .cmkRow{ display:flex; gap:6px; margin-top:6px; }
  .cmkRow:first-of-type{ margin-top:0; }
  .cmkRow > *{ flex:1; min-width:0; }
  .cmkWide{ min-height:48px; padding:6px 2px; font-size:0.68rem; }
  .cmkSizeRow{ display:flex; align-items:center; gap:10px; }
  .cmkSizeRow input{ flex:1; min-width:0; }
  .cmkDot{ flex:none; display:block; border-radius:50%; background:var(--ink); opacity:0.75; }
  .cmkSlide{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; font:600 0.74rem 'Sora',sans-serif; color:var(--ink-soft); }
  .cmkSlide small{ font-weight:500; opacity:0.75; }
  .cmkRefineBtns{ display:flex; gap:6px; justify-content:flex-end; }
  .cmkSmall{ padding:6px 12px; font-size:0.78rem; }
  .cmkSq{ min-width:0; font-size:1.05rem; line-height:1; }
  .cmkSeg{ display:inline-flex; border:1px solid var(--line); border-radius:999px; background:var(--panel); padding:2px; gap:2px; }
  .cmkGroup .cmkSeg{ display:flex; }
  .cmkSegBtn{ all:unset; box-sizing:border-box; flex:1; text-align:center; padding:5px 12px; border-radius:999px; cursor:pointer; font:600 0.74rem 'Sora',sans-serif; color:var(--ink-soft); }
  .cmkSegBtn.on, .cmkSegBtn[aria-pressed="true"]{ background:var(--accent-soft); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent); }
  .cmkSegBtn:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
  .cmkSegBtn:disabled{ opacity:0.45; cursor:default; }
  .cmkFoot{ display:flex; gap:8px; align-items:center; }
  .cmkSpacer{ flex:1; }
  .cmkFail{ position:absolute; inset:0; margin:auto; width:min(380px, calc(100% - 24px)); height:fit-content; text-align:center; padding:18px 16px; border:1px solid var(--edge); border-radius:14px; background:var(--panel); box-shadow:0 10px 30px rgba(20,15,5,0.25); z-index:3; }
  .cmkFail h4{ margin:0 0 6px; font:700 1rem 'Sora',sans-serif; }
  .cmkFail p{ margin:0 0 12px; color:var(--ink-soft); font-size:0.86rem; line-height:1.4; }
  .cmkFailBtns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .cmkCard.busy .cmkStage{ cursor:progress; }
  @media (max-width:720px){
    .cmkBackdrop{ padding:0; }
    .cmkCard{ width:100%; height:100%; border-radius:0; padding:12px 12px calc(10px + env(safe-area-inset-bottom)); border:0; }
    .cmkCard::before{ display:none; }
    .cmkHead{ flex-wrap:wrap; gap:6px 10px; }
    .cmkMain{ flex-direction:column; gap:8px; }
    .cmkShelf{ width:auto; flex:none; max-height:36vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; align-content:start; overflow-x:hidden; }
    .cmkShelf .cmkGroup{ min-width:0; }
    .cmkStatus{ bottom:auto; top:8px; }
    .cmkWide{ font-size:0.62rem; }
    .cmkShelf .cmkGroup:nth-child(1), .cmkShelf .cmkGroup:nth-child(2), .cmkShelf .cmkGroup:nth-child(3), .cmkShelf .cmkGroup:nth-child(6){ grid-column:1 / -1; }
    .cmkSegBtn{ padding:5px 4px; }
    .cmkGroup .cmkSeg{ max-width:100%; }
    .cmkToolGrid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
    .cmkToolBtn{ min-width:0; }
    .cmkToolBtn{ min-height:46px; }
    .cmkFoot .pillBtn{ flex:1 1 auto; }
    .cmkSpacer{ display:none; }
    .cmkStage{ min-height:200px; }
  }
  @media (prefers-reduced-motion: reduce){ .cmkBackdrop, .cmkStatus{ animation:none; transition:none; } }

  /* a finished cutout (white scissor line, or glued on card) is already drawn into the picture */
  .ps-cutout .pFrame.finished img, .ps-mounted .pFrame.finished img{ filter:none; }
  .ps-mounted.finished{ padding:0; }

  /* ---------- physical scraps: receipt, ticket, postcard, photo strip ---------- */
  .paperObj{ position:absolute; width:var(--pw, 230px); outline:none; }
  .paperObj:focus-visible{ outline:2px solid var(--focus); outline-offset:7px; }
  .paperObj .poSheet{ position:relative; }
  .paperObj .poF{ outline:none; overflow-wrap:anywhere; cursor:inherit; border-radius:2px; transition:background .12s ease; }
  .paperObj.selected .poF{ cursor:text; }
  .paperObj.selected .poF:not(.editing):hover{ background:rgba(255,255,255,0.42); box-shadow:0 1px 0 rgba(0,0,0,0.25); }
  .paperObj .poAddPic{ cursor:pointer; }
  .paperObj .poF.editing{ cursor:text; background:rgba(255,255,255,0.45); user-select:text; -webkit-user-select:text; touch-action:auto; border-radius:2px; }
  /* optional fields disappear while empty; they come back as a faint prompt when the object is selected or being edited */
  .paperObj .poF:empty:not(.editing){ display:none; }
  .paperObj.selected .poF:empty, .paperObj .poF.editing:empty{ display:block; min-height:1.2em; }
  .paperObj.selected .poF:empty::before, .paperObj .poF.editing:empty::before{ content:attr(data-ph); opacity:0.42; font-style:italic; }
  .paperObj .poTotal.empty:not(.editing){ display:none; }
  .paperObj.selected .poTotal.empty{ display:flex; }
  .paperObj.selected .poTotal.empty b::before{ content:attr(data-ph); }
  .paperObj .poTotal b:empty::before{ content:'0.00'; opacity:0.35; }
  .paperObj .pFlip{ top:-13px; left:-13px; font-size:14px; }
  .paperObj.selected .pFlip{ display:flex; }

  /* RECEIPT: narrow off-white thermal paper */
  .po-receipt .poSheet{
    background:linear-gradient(180deg,#fbf9f2,#f4f1e6); color:#3b382f; font-family:'Cutive Mono','Courier Prime','Courier New',monospace;
    padding:16px 14px 14px; box-shadow:0 1px 2px rgba(0,0,0,0.16), 2px 6px 12px rgba(40,30,10,0.18);
    background-image:repeating-linear-gradient(0deg, rgba(120,110,80,0.035) 0 1px, transparent 1px 3px), linear-gradient(180deg,#fbf9f2,#f4f1e6);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 7px), 96% 100%, 91% calc(100% - 6px), 86% 100%, 81% calc(100% - 6px), 76% 100%, 71% calc(100% - 6px), 66% 100%, 61% calc(100% - 6px), 56% 100%, 51% calc(100% - 6px), 46% 100%, 41% calc(100% - 6px), 36% 100%, 31% calc(100% - 6px), 26% 100%, 21% calc(100% - 6px), 16% 100%, 11% calc(100% - 6px), 6% 100%, 0 calc(100% - 6px));
    padding-bottom:20px;
  }
  .po-receipt{ filter:drop-shadow(1px 3px 3px rgba(40,30,10,0.18)); }
  .po-receipt .poSheet{ box-shadow:none; }
  .po-receipt .poTitle{ font-size:1.02rem; text-align:center; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:2px; }
  .po-receipt .poMeta{ font-size:0.74rem; text-align:center; opacity:0.75; }
  .po-receipt .poRule{ border-top:1px dashed rgba(59,56,47,0.5); margin:8px 0; }
  .po-receipt .poBody{ font-size:0.82rem; line-height:1.45; white-space:pre-wrap; }
  .po-receipt .poTotal{ display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:6px; border-top:1px solid rgba(59,56,47,0.55); font-size:0.95rem; font-weight:700; }
  .po-receipt .poTotalLab{ letter-spacing:0.12em; font-size:0.72rem; }
  .po-receipt .poBar{ margin-top:10px; text-align:center; font-size:0.62rem; letter-spacing:0.14em; opacity:0.45; border-top:1px dashed rgba(59,56,47,0.3); padding-top:6px; }
  .po-receipt.v-faded .poSheet{ color:#4e4a3f; background-image:linear-gradient(90deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%, rgba(255,255,255,0.28) 80%), linear-gradient(180deg,#f8f6ee,#efebde); }
  .po-receipt.v-faded .poBody, .po-receipt.v-faded .poTotal{ opacity:0.9; }
  .po-receipt.v-folded .poSheet{ background-image:linear-gradient(180deg, transparent 47%, rgba(0,0,0,0.07) 49.4%, rgba(255,255,255,0.45) 50.4%, transparent 53%), linear-gradient(180deg,#fbf9f2,#f4f1e6); }
  .po-receipt.v-clean .poSheet, .po-receipt.v-folded .poSheet, .po-receipt.v-faded .poSheet{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); padding-bottom:14px; }
  .po-receipt.v-torn .poSheet{ padding-bottom:22px; }

  /* TICKET: perforated stub, landscape or portrait */
  .po-ticket{ filter:drop-shadow(1px 3px 3px rgba(40,30,10,0.2)); }
  .po-ticket .poSheet{
    display:flex; background:linear-gradient(135deg,#f6ead0,#efdfba); color:#3a2f1c; font-family:'Special Elite','Courier Prime','Courier New',monospace;
    border-radius:6px; min-height:calc(var(--pw, 330px) * 0.42);
    -webkit-mask:radial-gradient(circle 8px at 0 50%, transparent 7.5px, #000 8px) left/51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 7.5px, #000 8px) right/51% 100% no-repeat;
    mask:radial-gradient(circle 8px at 0 50%, transparent 7.5px, #000 8px) left/51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 7.5px, #000 8px) right/51% 100% no-repeat;
  }
  .po-ticket .poMain{ flex:1; min-width:0; padding:14px 16px 14px 20px; display:flex; flex-direction:column; gap:3px; }
  .po-ticket .poStub{ width:22%; min-width:54px; border-left:2px dashed rgba(58,47,28,0.45); display:flex; align-items:center; justify-content:center; padding:6px; }
  .po-ticket .poSerial{ writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:0.22em; font-size:0.72rem; opacity:0.6; }
  .po-ticket .poTitle{ font-size:1.12rem; line-height:1.15; text-transform:uppercase; letter-spacing:0.04em; }
  .po-ticket .poMeta{ font-size:0.82rem; opacity:0.85; }
  .po-ticket .poPlace{ font-size:0.82rem; opacity:0.85; }
  .po-ticket .poDetails{ font-size:0.74rem; opacity:0.7; white-space:pre-wrap; margin-top:2px; }
  .po-ticket.v-rounded .poSheet{ border-radius:16px; background:linear-gradient(135deg,#f4ecd9,#ecdfc3); }
  .po-ticket.v-vintage .poSheet{ background:linear-gradient(135deg,#ecd9ad,#dfc690); color:#4a3418; box-shadow:inset 0 0 0 3px rgba(74,52,24,0.14), inset 0 0 22px rgba(120,80,20,0.18); }
  .po-ticket.v-stub .poSheet{ background:linear-gradient(135deg,#e8eef2,#dbe5ea); color:#243543; font-family:'Courier Prime','Courier New',monospace; border-radius:4px; }
  .po-ticket.o-portrait .poSheet{ flex-direction:column; min-height:0; -webkit-mask:radial-gradient(circle 8px at 50% 100%, #000 99%, transparent) no-repeat; mask:none; border-radius:6px; }
  .po-ticket.o-portrait .poStub{ width:auto; border-left:0; border-top:2px dashed rgba(58,47,28,0.45); padding:8px; }
  .po-ticket.o-portrait .poSerial{ writing-mode:horizontal-tb; transform:none; }
  .po-ticket.o-portrait .poMain{ padding:16px 14px 12px; }

  /* POSTCARD: a printed card with a picture on the front and a handwritten back (decorative address lines only) */
  .po-postcard .poSheet{ perspective:900px; }
  .po-postcard .poCard{ position:relative; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.1,.2,1); }
  .po-postcard.flipped .poCard{ transform:rotateY(180deg); }
  .po-postcard .poFace{ backface-visibility:hidden; -webkit-backface-visibility:hidden; background:#f8f3e5; padding:8px; box-shadow:0 1px 2px rgba(0,0,0,0.18), 2px 6px 12px rgba(40,30,10,0.2); border-radius:2px; }
  .po-postcard .poFront{ position:relative; }
  .po-postcard .poBack{ position:absolute; inset:0; transform:rotateY(180deg); display:flex; gap:10px; padding:12px; }
  .po-postcard .poPic{ position:relative; background:#e4dccb; overflow:hidden; width:100%; }
  .po-postcard .poPic img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .po-postcard .poAddPic{ all:unset; box-sizing:border-box; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer; font:600 0.8rem 'Sora',sans-serif; color:#6b624f; background:repeating-linear-gradient(45deg, rgba(120,110,80,0.08) 0 8px, transparent 8px 16px); }
  .po-postcard .poAddPic:focus-visible{ outline:2px solid var(--focus); outline-offset:-4px; }
  .po-postcard .poLocation{ font:600 0.78rem 'Sora',sans-serif; color:#4a4435; padding:6px 2px 0; letter-spacing:0.02em; }
  .po-postcard .poMsgCol{ flex:1.3; min-width:0; }
  .po-postcard .poMessage{ font-family:'Caveat','Patrick Hand','Varela Round','Neucha','Mada','Ma Shan Zheng','Klee One','Gamja Flower',cursive; font-size:clamp(13px, calc(var(--pw, 320px) * 0.062), 24px); line-height:1.25; color:#2f3a52; white-space:pre-wrap; }
  .po-postcard .poDivide{ width:1px; background:rgba(74,68,53,0.35); }
  .po-postcard .poAddrCol{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; position:relative; padding-top:34px; }
  .po-postcard .poStamp{ position:absolute; top:0; right:0; width:26px; height:32px; border:2px dashed rgba(74,68,53,0.45); border-radius:2px; background:repeating-linear-gradient(45deg, rgba(180,120,90,0.25) 0 4px, rgba(180,120,90,0.1) 4px 8px); }
  .po-postcard .poPostmark{ position:absolute; top:2px; right:34px; width:30px; height:30px; border:1.5px solid rgba(74,68,53,0.38); border-radius:50%; }
  .po-postcard .poRecipient{ font:600 0.76rem 'Sora',sans-serif; color:#4a4435; }
  .po-postcard .poAddrLine{ border-bottom:1px solid rgba(74,68,53,0.4); height:14px; }
  .po-postcard.v-airmail .poFace{ background:repeating-linear-gradient(135deg, #cf4b4b 0 10px, #fbf7ea 10px 20px, #3d63b8 20px 30px, #fbf7ea 30px 40px) top/100% 5px no-repeat, repeating-linear-gradient(135deg, #cf4b4b 0 10px, #fbf7ea 10px 20px, #3d63b8 20px 30px, #fbf7ea 30px 40px) bottom/100% 5px no-repeat, #f8f3e5; padding:12px 8px; }
  .po-postcard.v-modern .poFace{ background:#ffffff; box-shadow:0 1px 2px rgba(0,0,0,0.2), 2px 6px 12px rgba(40,30,10,0.18); }
  .po-postcard.v-modern .poLocation{ text-transform:uppercase; letter-spacing:0.12em; font-size:0.7rem; }

  /* PHOTO STRIP: instant-film / photo-booth print */
  .po-photo-strip{ filter:drop-shadow(1px 3px 3px rgba(40,30,10,0.22)); }
  .po-photo-strip .poSheet{ background:#fbfaf4; padding:10px 10px 12px; display:flex; flex-direction:column; gap:8px; }
  .po-photo-strip .poFrames{ display:flex; flex-direction:column; gap:7px; }
  .po-photo-strip .poFrame{ background:#d8d3c6; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); }
  .po-photo-strip .poFrame img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .po-photo-strip .poFrame.pending{ background:linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.12)); }
  .po-photo-strip .poCaption{ font-family:'Patrick Hand','Varela Round','Neucha','Mada','Ma Shan Zheng','Klee One','Gamja Flower',sans-serif; font-size:clamp(14px, calc(var(--pw, 140px) * 0.13), 26px); text-align:center; color:#3a3528; line-height:1.15; }
  .po-photo-strip.v-film .poSheet{ background:#1c1a19; padding:20px 10px 8px; background-image:radial-gradient(circle, #fbfaf4 0 2.6px, transparent 3px), radial-gradient(circle, #fbfaf4 0 2.6px, transparent 3px); background-size:14px 12px, 14px 12px; background-position:3px 3px, 3px calc(100% - 3px); background-repeat:repeat-x; background-color:#1c1a19; border-radius:2px; }
  .po-photo-strip.v-film .poSheet{ background-image:
    repeating-linear-gradient(90deg, #f2efe6 0 7px, transparent 7px 14px),
    repeating-linear-gradient(90deg, #f2efe6 0 7px, transparent 7px 14px);
    background-size:100% 6px, 100% 6px; background-position:0 7px, 0 calc(100% - 7px); background-repeat:no-repeat; }
  .po-photo-strip.v-film .poFrames{ flex-direction:row; gap:6px; }
  .po-photo-strip.v-film .poFrame{ flex:1; min-width:0; }
  .po-photo-strip.v-film .poCaption{ color:#f2efe6; }
  .paperObj.static{ cursor:default; }
  .paperObj.static:hover{ transform:rotate(var(--rot, 0deg)); }

  /* dark board: the paper stays paper. A receipt is still pale thermal paper, a film strip is naturally dark; only the glare is toned down. */
  body.dark .paperObj{ filter:drop-shadow(1px 3px 3px rgba(0,0,0,0.5)) brightness(0.93); }
  body.dark .po-photo-strip.v-film{ filter:drop-shadow(1px 3px 3px rgba(0,0,0,0.55)); }
  body.dark .paperObj .poF.editing{ background:rgba(0,0,0,0.12); }

  /* strip editor */
  .stripEd{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
  .stripRow{ display:flex; align-items:center; gap:8px; }
  .stripRow img{ width:54px; height:42px; object-fit:cover; border-radius:4px; border:1px solid var(--line); }
  .stripRow button{ all:unset; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); }
  .stripRow button:disabled{ opacity:0.35; cursor:default; }
  .stripRow button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
  .stripCap{ box-sizing:border-box; width:100%; margin-top:10px; padding:9px 12px; border:1px solid var(--edge); border-radius:10px; background:var(--field); color:var(--ink); font:inherit; }
  .insMenu .menuItem svg{ flex:none; }
  @media (prefers-reduced-motion: reduce){ .po-postcard .poCard{ transition:none; } }

  /* ---------- Alphabet Soup: a bowl of soup with pasta letters floating in it (the real words stay in .text and are read once) ---------- */
  .note.soup{ background:none !important; border:0; box-shadow:none !important; border-radius:0; min-height:0; max-height:none; filter:drop-shadow(0 6px 8px rgba(40,25,10,0.18)); }
  .note.soup .paperFx{ display:none; }
  .note.soup .tab{ display:none; }                                   /* a bowl has no washi tape (dragging still works through the bowl) */
  .soupBowl{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; transition:opacity .2s ease; }
  .note.soup > .text{ position:absolute; left:11%; right:11%; top:21%; bottom:24%; min-height:0; z-index:3; opacity:0; pointer-events:none; overflow:hidden; color:#3a2410; border-radius:12px; padding:6px 8px; font-size:1rem; line-height:1.3; }
  .note.soup.editing > .text{ opacity:1; pointer-events:auto; overflow:auto; background:rgba(255,249,232,0.96); box-shadow:0 2px 8px rgba(40,25,10,0.25), inset 0 0 0 1px rgba(110,70,25,0.18); }
  .note.soup.editing .soupBowl{ opacity:0.55; }
  .note.soup.editing .soupLayer{ opacity:0; }
  .soupLayer{ position:absolute; inset:0; pointer-events:none; z-index:2; transition:opacity .25s ease; }
  .soupTile{ position:absolute; display:flex; align-items:center; justify-content:center; width:1.3em; height:1.3em; margin:-0.65em 0 0 -0.65em; border-radius:36%;
    background:radial-gradient(circle at 32% 26%, #fff1c2 0%, #f3d27a 46%, #d9a93f 100%); color:#6b3d0e; font:700 1em 'Fredoka','Sora',sans-serif; line-height:1;
    text-shadow:0 1px 0 rgba(255,244,205,0.75); box-shadow:0 1px 0 #b98324, 0 2px 2px rgba(70,35,5,0.45), inset 0 0 0 1px rgba(255,236,170,0.65);
    transform:rotate(var(--r,0deg)); }
  .soupMore{ background:none; box-shadow:none; text-shadow:none; color:#fff3d0; }
  .soupLayer.live .soupTile.bob{ animation:soupBob 5.5s ease-in-out infinite; animation-delay:var(--d,0s); }
  @keyframes soupBob{ 0%,100%{ transform:translate(0,0) rotate(var(--r,0deg)); } 50%{ transform:translate(1px,-2px) rotate(calc(var(--r,0deg) + 6deg)); } }
  .soupLayer.settle .soupTile{ animation:soupSettle .75s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i,0) * 14ms); }
  @keyframes soupSettle{ from{ opacity:0; transform:translate(var(--sx,0px), var(--sy,0px)) rotate(calc(var(--r,0deg) + 80deg)) scale(.6); } to{ opacity:1; transform:translate(0,0) rotate(var(--r,0deg)) scale(1); } }
  body.hasSel .soupLayer.live .soupTile.bob{ animation-play-state:paused; }                /* the selected object owns attention */
  body.dark .note.soup{ filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
  body.dark .soupBowl{ filter:brightness(0.86); }
  body.dark .note.soup.editing > .text{ background:rgba(48,36,20,0.96); color:#f2eadb; }
  @media (prefers-reduced-motion: reduce){ .soupLayer.live .soupTile.bob, .soupLayer.settle .soupTile{ animation:none; } }

  /* ---------- collaboration: who is here, who is editing, comments ---------- */
  .presenceBar{ display:inline-flex; align-items:center; margin-left:8px; }
  .presenceBar[hidden]{ display:none; }
  .presAv{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:-5px; border-radius:50%; border:2px solid var(--panel);
    background:hsl(var(--h, 200) 45% 32%); color:#fff; font:700 0.68rem 'Sora',sans-serif; box-shadow:0 1px 2px rgba(0,0,0,0.25); }
  .presAv:first-child{ margin-left:0; }
  .presMore{ background:var(--accent-soft); color:var(--ink); }
  /* an object someone else is working on: a quiet outline and a small initial, no glow, nothing that keeps moving */
  .peerActive, .peerEditing{ outline:1.5px solid color-mix(in srgb, var(--accent-strong) 70%, transparent); outline-offset:5px; }
  .peerBadge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); z-index:4; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:hsl(var(--h, 200) 45% 32%); color:#fff; font:700 0.64rem 'Sora',sans-serif; border:2px solid var(--panel); pointer-events:none; }
  .peerEditing .peerBadge::after{ content:'\270E'; position:absolute; right:-9px; bottom:-6px; font-size:0.7rem; color:var(--ink); }
  /* the collapsed comment tab: a small paper tab hanging off the object's bottom edge */
  .cmtTab{ all:unset; box-sizing:border-box; position:absolute; left:18px; bottom:-17px; z-index:4; height:19px; padding:0 10px 1px; border-radius:0 0 7px 7px;
    display:none; align-items:center; cursor:pointer; background:linear-gradient(#fff9dc, #f6edc2); color:#5a4a1c; border:1px solid rgba(90,74,28,0.38); border-top:0;
    box-shadow:0 2px 3px rgba(0,0,0,0.22); font:700 0.64rem 'Sora',sans-serif; letter-spacing:0.03em; white-space:nowrap; transform:rotate(-1deg); transform-origin:50% 0; }
  .cmtTab.has, .selected > .cmtTab, :hover > .cmtTab, .cmtTab:focus-visible{ display:inline-flex; }
  body.hasSel :not(.selected):hover > .cmtTab:not(.has){ display:none; }
  .cmtTab:hover{ transform:rotate(-1deg) translateY(1px); }
  .cmtTab:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
  .cmtTab.rv-changes_requested{ background:linear-gradient(#ffe9cf, #ffd9ae); border-color:#b8741a; color:#6e3d00; }
  .cmtTab.rv-ready_for_review{ background:linear-gradient(#e8f6e6, #d2ecd0); border-color:#4b8a4b; color:#1f4a22; }
  body.dark .cmtTab{ background:linear-gradient(#4f4730, #453e2a); color:#f2eadb; border-color:rgba(242,234,219,0.35); }
  body.dark .cmtTab.rv-changes_requested{ background:#5a3a14; }
  body.dark .cmtTab.rv-ready_for_review{ background:#23402a; }
  body.read-only .cmtTab:not(.has){ display:none !important; }
  .floatPop.cmtPop{ width:312px; display:flex; flex-direction:column; overflow:visible; max-width:calc(100vw - 20px); padding:16px 12px 10px; background:linear-gradient(#fffbea, #fbf3d6); color:#3a3528; border:1px solid rgba(90,74,28,0.32); border-radius:3px 12px 12px 12px; box-shadow:0 12px 28px var(--shadow), 0 1px 0 rgba(255,255,255,0.6) inset; }
  body.dark .floatPop.cmtPop{ background:linear-gradient(#3a3424, #322d1f); color:#f2eadb; border-color:rgba(242,234,219,0.25); }
  .cmtClip{ position:absolute; top:-9px; left:20px; width:30px; height:20px; border-radius:6px 6px 3px 3px; border:2px solid #8a8f98; background:linear-gradient(#d5d9df, #aab0ba); box-shadow:0 1px 2px rgba(0,0,0,0.3); }
  .cmtClip::after{ content:""; position:absolute; left:4px; right:4px; top:7px; height:2px; background:rgba(0,0,0,0.25); border-radius:2px; }
  .cmtHead{ display:flex; align-items:center; gap:8px; font:700 0.7rem 'Sora',sans-serif; letter-spacing:0.09em; text-transform:uppercase; margin:0 0 4px 40px; min-height:16px; color:#6b5a2a; }
  body.dark .cmtHead{ color:#cdbf95; }
  .cmtCount{ font:700 0.68rem 'Sora',sans-serif; letter-spacing:0; padding:1px 7px; border-radius:999px; background:rgba(90,74,28,0.14); }
  .cmtCount:empty{ display:none; }
  .cmtReview{ margin-bottom:8px; }
  .cmtStamp{ display:inline-block; font:800 0.66rem 'Sora',sans-serif; letter-spacing:0.12em; text-transform:uppercase; padding:3px 9px; border:2px solid currentColor; border-radius:4px; transform:rotate(-2.5deg); }
  .cmtStamp.rv-changes_requested{ color:#b5531a; }
  .cmtStamp.rv-ready_for_review{ color:#2f7a3a; }
  body.dark .cmtStamp.rv-changes_requested{ color:#f0a06a; }
  body.dark .cmtStamp.rv-ready_for_review{ color:#7fd08a; }
  .cmtRvLine{ margin:6px 0 6px; font:500 0.82rem/1.35 'Sora',sans-serif; overflow-wrap:anywhere; }
  .cmtRvActs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
  .cmtSmall{ padding:5px 11px; font-size:0.74rem; }
  .cmtList{ flex:1 1 auto; min-height:48px; max-height:min(210px, 30vh); overflow-y:auto; display:flex; flex-direction:column; gap:0; margin-bottom:8px; background:repeating-linear-gradient(transparent 0 25px, rgba(90,74,28,0.1) 25px 26px); padding:0 2px; scrollbar-width:thin; }
  .cmtItem{ position:relative; padding:5px 0 6px; border-bottom:1px dashed rgba(90,74,28,0.22); }
  .cmtItem:last-child{ border-bottom:0; }
  .cmtTop{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; }
  .cmtAv{ flex:none; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:hsl(var(--h, 200) 45% 34%); color:#fff; font:700 0.58rem 'Sora',sans-serif; }
  .cmtItem b{ font:700 0.8rem 'Sora',sans-serif; }
  .cmtWho{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cmtWhen{ margin-left:auto; font:500 0.68rem 'Sora',sans-serif; opacity:0.62; white-space:nowrap; }
  .cmtAv.acctAv{ width:18px; height:18px; font-size:0.58rem; }
  .cmtBody{ margin:1px 0 0 24px; font:500 0.84rem/1.34 'Sora',sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
  .cmtDel{ all:unset; flex:none; width:16px; height:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; font:400 0.95rem/1 'Sora',sans-serif; opacity:0; transition:opacity .12s ease; }
  .cmtItem:hover .cmtDel, .cmtItem:focus-within .cmtDel, .cmtDel:focus-visible{ opacity:0.7; }
  .cmtDel:hover{ background:rgba(0,0,0,0.1); opacity:1; }
  @media (pointer: coarse){ .cmtDel{ opacity:0.45; width:26px; height:26px; } }
  .cmtDel:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }
  .cmtEmpty{ margin:4px 0 8px; font:500 0.8rem/1.4 'Sora',sans-serif; opacity:0.62; }
  .cmtForm{ display:flex; gap:6px; align-items:flex-end; margin-top:2px; }
  .cmtInput{ flex:1; min-width:0; box-sizing:border-box; resize:none; min-height:32px; max-height:96px; padding:6px 9px; overflow-y:auto; border:1px solid rgba(90,74,28,0.32); border-radius:8px; background:rgba(255,255,255,0.7); color:#3a3528; font:500 0.84rem/1.35 'Sora',sans-serif; }
  .cmtInput:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
  body.dark .cmtInput{ background:#241f14; color:#f2eadb; }
  .cmtAdd{ height:32px; padding:0 14px; font-size:0.78rem; flex:none; }
  .cmtMsg{ min-height:0; margin:4px 0 0; font:500 0.74rem 'Sora',sans-serif; opacity:0.75; }

  /* snapshot export (html2canvas): no 3D, so a postcard is drawn as its front; masks and animations are left out */
  #snapStage .po-postcard .poCard{ transform:none !important; transition:none; }
  #snapStage .po-postcard .poBack{ display:none; }
  #snapStage .paperObj{ filter:none; }
  #snapStage .soupLayer .soupTile{ animation:none !important; }
  /* a shared postcard can be turned over by tapping it */
  .paperObj.static.po-postcard{ cursor:pointer; }
  #snapStage .po-ticket .poSheet{ -webkit-mask:none; mask:none; }
  #snapStage .po-ticket, #snapStage .po-receipt, #snapStage .po-photo-strip{ filter:none; }
  #snapStage .ps-cutout .pBody, #snapStage .ps-mounted .pBody, body.dark #snapStage .ps-cutout .pBody, body.dark #snapStage .ps-mounted .pBody{ filter:none; }
  #snapStage .po-postcard .poSheet{ perspective:none; }
  #snapStage .po-postcard .poCard{ transform-style:flat; }
  #snapStage .po-postcard .poFace{ backface-visibility:visible; -webkit-backface-visibility:visible; box-shadow:none; border:1px solid rgba(0,0,0,0.12); }

#verTag{ position:fixed; right:10px; bottom:5px; z-index:var(--z-toast, 10029); font:600 0.72rem "Sora",sans-serif; letter-spacing:0.03em; color:var(--ink); background:color-mix(in srgb, var(--panel) 88%, transparent); padding:3px 9px; border-radius:999px; border:1px solid var(--line); opacity:.92; pointer-events:none; user-select:none; max-width:calc(100vw - 20px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#verTag.local{ background:#ffe9a8; color:#3a2d00; border-color:#d9a400; opacity:1; }
#verTag.stale{ background:#d9534f; color:#fff; border-color:#a52a27; pointer-events:auto; cursor:pointer; }
@media print{ #verTag{ display:none; } }

/* strip picker (inside the shared modal) */
.stripPickGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; max-height:260px; overflow-y:auto; padding:2px; }
.stripPickItem{ all:unset; box-sizing:border-box; position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; cursor:pointer; background:var(--panel); border:2px solid var(--line); }
.stripPickItem img{ width:100%; height:100%; object-fit:cover; display:block; }
.stripPickItem:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.stripPickItem[aria-pressed="true"]{ border-color:var(--accent-strong); }
.stripPickBlank{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.stripPickBlank svg{ width:26px; height:26px; }
.stripPickTick{ position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; background:var(--accent-strong); color:#fff; display:none; align-items:center; justify-content:center; }
.stripPickTick svg{ width:12px; height:12px; }
.stripPickItem[aria-pressed="true"] .stripPickTick{ display:flex; }
.stripPickMsg{ margin-top:8px; font-size:0.78rem; color:var(--ink-soft); }

/* ---------- Done pile: a small stack at the board's edge ---------- */
.donePile{ position:fixed; left:14px; bottom:calc(var(--done-bottom, 30px) + env(safe-area-inset-bottom, 0px)); z-index:9990; display:flex; align-items:center; gap:9px; padding:7px 14px 7px 10px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; box-shadow:0 2px 8px var(--shadow); font:600 0.78rem 'Sora',sans-serif; transition:transform .15s ease, border-color .15s ease; }
.donePile[hidden]{ display:none; }
.donePile:hover{ border-color:var(--accent); transform:translateY(-1px); }
.donePile:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.donePile.bump{ animation:donePileBump .5s ease; }
@keyframes donePileBump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
.dpStack{ position:relative; width:24px; height:20px; flex:none; }
.dpStack i{ position:absolute; left:0; right:0; height:14px; border-radius:2px; border:1px solid rgba(90,74,28,0.35); background:#f6e58a; box-shadow:0 1px 1px rgba(0,0,0,0.15); }
.dpStack i:nth-child(1){ top:6px; transform:rotate(-4deg); background:#bfe3c8; }
.dpStack i:nth-child(2){ top:3px; transform:rotate(3deg); background:#f6c9d6; }
.dpStack i:nth-child(3){ top:0; transform:rotate(-1deg); }
.note.toDone{ transition:transform .5s cubic-bezier(.5,0,.8,.45), opacity .5s ease !important; pointer-events:none; z-index:99999 !important; }
.doneList{ display:flex; flex-direction:column; gap:8px; max-height:min(52vh, 420px); overflow-y:auto; padding:2px; }
.doneRow{ display:flex; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--field); }
.doneChip{ flex:none; width:22px; height:28px; border-radius:2px; border:1px solid rgba(90,74,28,0.3); box-shadow:0 1px 2px rgba(0,0,0,0.18); transform:rotate(-3deg); margin-top:2px; }
.doneBody{ flex:1; min-width:0; }
.doneTitle{ font:600 0.88rem/1.3 'Sora',sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.doneMeta{ margin-top:2px; font:500 0.7rem 'Sora',sans-serif; color:var(--ink-soft); }
.doneFull{ margin-top:6px; padding:8px 10px; border-radius:8px; background:var(--panel); border:1px dashed var(--line); font-size:1rem; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow-y:auto; }
.doneFull[hidden]{ display:none; }
.doneActs{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
/* v0.8.2.1: the Done pile sits ~16px lower (was 46px; 60px on phones). Between 601 and 919px the minimap strip runs under it, so it keeps its old height there. */
@media (max-width:919px){ .donePile{ --done-bottom:46px; } }
@media (max-width:600px){ .donePile{ --done-bottom:44px; } }
@media (prefers-reduced-motion: reduce){ .donePile.bump{ animation:none; } .note.toDone{ transition:none !important; } }

/* ---------- Focus Mode formatting strip: a faint strip of sticky paper along the bottom edge of the note ---------- */
.note.focused > .text{ padding-bottom:54px; }
.focusBar{ position:absolute; left:10px; right:44px; bottom:8px; z-index:4; display:flex; align-items:center; gap:2px; padding:4px 6px; border-radius:10px; overflow-x:auto; scrollbar-width:none;
  background:rgba(255,255,255,0.5); border:1px solid rgba(60,45,15,0.16); box-shadow:0 1px 3px rgba(40,25,5,0.14); opacity:0.5; transition:opacity .25s ease; }
.focusBar::-webkit-scrollbar{ display:none; }
.focusBar:hover, .focusBar:focus-within, .focusBar.awake{ opacity:1; }
.fbBtn{ all:unset; box-sizing:border-box; flex:none; min-width:30px; height:30px; padding:0 6px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#2e2616; }
.fbBtn svg{ width:17px; height:17px; display:block; }
.fbText{ font:800 0.74rem 'Sora',sans-serif; }
.fbBtn:hover{ background:rgba(0,0,0,0.08); }
.fbBtn:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.fbBtn.on, .fbBtn[aria-pressed="true"]{ background:rgba(0,0,0,0.16); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3); }
.fbSep{ flex:none; width:1px; height:18px; margin:0 4px; background:rgba(0,0,0,0.2); }
body.dark .focusBar{ background:rgba(255,255,255,0.7); }
@media (prefers-reduced-motion: reduce){ .focusBar{ transition:none; } }

/* ---------- trimmed paper: the corner handle and the torn edge ---------- */
.note .noteHandle{ display:none; bottom:-9px; right:-9px; }
.note.selected .noteHandle{ display:flex; }
.note.focused .noteHandle, .note.soup .noteHandle{ display:none !important; }
.note.resizing{ transition:none; user-select:none; }
.note.ripped{ background:none !important; box-shadow:none !important; }
body.dark .note.ripped{ background:none !important; box-shadow:none !important; }
.ripShadow{ position:absolute; inset:0; pointer-events:none; filter:drop-shadow(2px 5px 5px var(--shadow)); z-index:0; }
.ripFill{ position:absolute; inset:0; background:var(--paper-dim, var(--note-bg, #fff3a8)); clip-path:var(--rip-clip); }
body:not(.dark) .ripFill{ background:var(--note-bg, #fff3a8); }
.note.ripped .paperFx{ clip-path:var(--rip-clip); }
.note.ripped > .text, .note.ripped > .noteImgWrap, .note.ripped > .taskRow{ position:relative; }
.ripChip{ position:absolute; pointer-events:none; transform-origin:50% 0; transform:rotate(var(--rot, 0deg)); border-radius:0 0 2px 2px; box-shadow:2px 4px 8px var(--shadow);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transition:transform .75s cubic-bezier(.4,.1,.7,.5), opacity .75s ease; background:var(--note-bg, #fff3a8); }
body.dark .ripChip{ background:color-mix(in oklab, var(--note-bg, #fff3a8) 36%, #0f0c16); }
.ripChip.go{ transform:translate(14px, 120px) rotate(calc(var(--rot, 0deg) + 16deg)); opacity:0; }
@media (prefers-reduced-motion: reduce){ .ripChip{ display:none; } }

/* ---------- Clean up ---------- */
body.read-only #cleanBtn{ display:none; }
body.tidying .note, body.tidying .photoObj, body.tidying .boardObj{ transition:left .6s cubic-bezier(.3,.8,.3,1), top .6s cubic-bezier(.3,.8,.3,1), transform .18s ease, box-shadow .18s ease; }
.cleanOpts{ display:flex; flex-direction:column; gap:8px; }
.cleanOpt{ all:unset; box-sizing:border-box; display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--field); cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.cleanOpt:hover:not(:disabled){ border-color:var(--accent); }
.cleanOpt:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.cleanOpt.on{ border-color:var(--accent-strong); background:var(--accent-soft); }
.cleanOpt:disabled{ opacity:0.5; cursor:default; }
.cleanIc{ flex:none; width:30px; height:30px; border-radius:8px; background:var(--panel); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.cleanIc svg{ width:18px; height:18px; }
.cleanTx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cleanTx b{ font:700 0.92rem 'Sora',sans-serif; }
.cleanDesc{ font-size:0.82rem; color:var(--ink-soft); line-height:1.35; }
.cleanCount{ font:600 0.72rem 'Sora',sans-serif; color:var(--ink); opacity:0.8; margin-top:2px; }
.cleanSum{ margin-top:12px; font:700 0.86rem 'Sora',sans-serif; }
.cleanNote{ margin-top:4px; font-size:0.76rem; color:var(--ink-soft); line-height:1.4; }
@media (prefers-reduced-motion: reduce){ body.tidying .note, body.tidying .photoObj, body.tidying .boardObj{ transition:none; } }

/* ---------- the status slip at the foot of the canvas, and the same loader inside a dialog ---------- */
.footSlip{ position:fixed; left:50%; bottom:calc(64px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:9985; display:flex; align-items:center; gap:9px; max-width:calc(100vw - 28px);
  padding:6px 14px 6px 10px; border-radius:999px; background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:0 3px 12px var(--shadow); font:600 0.78rem 'Sora',sans-serif; pointer-events:none; animation:fsIn .22s ease both; }
.footSlip[hidden]{ display:none; }
.footSlip .fsRetry{ pointer-events:auto; all:unset; cursor:pointer; font:700 0.76rem 'Sora',sans-serif; color:var(--accent-strong); text-decoration:underline; padding:2px 4px; }
.footSlip .fsRetry:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
.footSlip .fsRetry[hidden]{ display:none; }
.fsNote{ position:relative; width:20px; height:20px; flex:none; animation:slWobble 1.1s ease-in-out infinite; transform-origin:50% 62%; }
.fsNote span{ position:absolute; inset:0; }
.fsNote svg{ width:100%; height:100%; display:block; }
.fsGreen{ opacity:0; }
.footSlip.ok .fsRed{ opacity:0; }
.footSlip.ok .fsGreen{ opacity:1; }
.footSlip.ok .fsNote{ animation:slStick .46s cubic-bezier(.34,1.56,.64,1) both; }
.footSlip.fail .fsNote{ animation:slShake .42s ease both; }
@keyframes fsIn{ from{ opacity:0; transform:translateX(-50%) translateY(6px); } to{ opacity:1; transform:translateX(-50%); } }
.slLocal{ display:flex; align-items:center; gap:8px; padding:10px 2px; font:600 0.86rem 'Sora',sans-serif; color:var(--ink-soft); }
.slLocal[hidden]{ display:none; }
.slLocal .slMini{ margin:0; }
.slLocal.fail{ color:var(--ink); flex-wrap:wrap; }
@media (max-width:720px){ .footSlip{ bottom:calc(72px + env(safe-area-inset-bottom,0px)); } }
@media (prefers-reduced-motion: reduce){ .footSlip{ animation:none; } .fsNote, .footSlip.ok .fsNote, .footSlip.fail .fsNote{ animation:none !important; transform:none !important; } }

/* ---------- Control Center: one dialog for account, appearance, sharing, privacy & data, sounds, shortcuts, legal ---------- */
.acctCard.acctWide.ccCard{ width:min(900px, 96vw); height:min(680px, 92vh); max-height:92vh; padding:0; display:flex; flex-direction:column; overflow:hidden; text-align:start; }
.ccHead{ padding:18px 60px 6px 26px; flex:none; }
.ccHead h3{ margin:0; text-align:start; font:700 1.15rem 'Sora',sans-serif; }
.ccLayout{ flex:1; min-height:0; display:flex; }
.ccNav{ flex:none; width:196px; display:flex; flex-direction:column; gap:3px; padding:8px 10px 14px 16px; border-inline-end:1px solid var(--line); overflow-y:auto; scrollbar-width:thin; }
.ccTab{ all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px 4px 4px 10px; cursor:pointer; font:600 0.86rem 'Sora',sans-serif; color:var(--ink-soft); transition:background .12s ease, color .12s ease; }
.ccTab:hover{ background:color-mix(in srgb, var(--accent-soft) 55%, transparent); color:var(--ink); }
.ccTab:focus-visible{ outline:2px solid var(--focus); outline-offset:-2px; }
.ccTab[aria-selected="true"]{ background:var(--accent-soft); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent-strong); }
.ccTab .ccIc{ width:18px; height:18px; flex:none; }
.ccPanes{ flex:1; min-width:0; overflow-y:auto; overscroll-behavior:contain; padding:8px 26px 22px 22px; scrollbar-width:thin; }
.ccPane{ display:flex; flex-direction:column; gap:16px; outline:none; }
.ccPane[hidden]{ display:none; }
.ccFoot{ flex:none; display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 22px; border-top:1px solid var(--line); background:var(--panel); }
.ccFoot[hidden]{ display:none; }
.ccFoot .asErr{ flex:1; margin:0; text-align:start; font-size:0.8rem; min-width:0; }
.ccFoot .pillBtn{ min-width:88px; padding:9px 18px; }
.ccFoot .pillBtn.primary{ box-shadow:0 2px 0 color-mix(in srgb, var(--accent) 70%, #000); }
/* the older Settings sections, now living inside a pane: same card look as the account cards */
.ccPane .setSec{ border:1px solid var(--line); border-radius:14px; background:var(--field); padding:14px 16px; margin:0; }
.ccPane .setSec:first-of-type{ padding-top:14px; }
.ccPane .setSec h4{ margin:0 0 8px; }
.ccPane .setSec.danger{ border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ccPointer{ border:1px solid var(--line); border-radius:14px; background:var(--field); }
.ccRange{ width:min(220px, 100%); accent-color:var(--accent-strong); }
.asItem.off{ opacity:0.55; }
.ccLegalList{ display:flex; flex-direction:column; gap:2px; }
.ccLink{ text-decoration:none; color:var(--ink); }
.ccLink .t{ display:block; font-weight:600; }
.ccAbout{ margin:0; font-size:0.86rem; line-height:1.5; color:var(--ink-soft); }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* shortcuts: small paper key caps, searchable */
.kbdSearch{ display:flex; align-items:center; gap:12px; position:sticky; top:-8px; z-index:2; background:var(--panel); padding:8px 0 6px; }
.kbdSearch .asIn{ flex:1; }
.kbdCount{ margin:0; font-size:0.74rem; color:var(--ink-soft); white-space:nowrap; }
.kbdGroups{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; align-items:start; }
.kbdGroup{ margin:0; }
.kbdGroup[hidden], .kbdRow[hidden], .kbdNone[hidden]{ display:none; }
.kbdRow{ display:flex; align-items:center; gap:12px; padding:6px 0; border-top:1px dashed var(--line); }
.kbdRow:first-of-type{ border-top:0; }
.kbdKeys{ flex:none; width:50%; display:flex; flex-wrap:wrap; align-items:center; gap:3px; }
.kbdKeys kbd{ font:600 0.72rem 'Sora',sans-serif; color:var(--ink); background:linear-gradient(#fffdf3, #f3ecd2); border:1px solid rgba(90,74,28,0.35); border-bottom-width:2px; border-radius:6px; padding:2px 7px; box-shadow:0 1px 0 rgba(255,255,255,0.7) inset; white-space:nowrap; }
body.dark .kbdKeys kbd{ background:linear-gradient(#3a3424, #2f2a1c); border-color:rgba(242,234,219,0.3); }
.kbdPlus{ font-size:0.7rem; color:var(--ink-soft); }
.kbdDesc{ flex:1; min-width:0; font-size:0.8rem; line-height:1.35; color:var(--ink-soft); }
@media (max-width:720px){
  .acctCard.acctWide.ccCard{ width:100vw; height:100%; max-height:100%; border-radius:0; }
  .ccBackdrop{ padding:0; align-items:stretch; }
  .ccHead{ padding:14px 56px 4px 16px; }
  .ccLayout{ flex-direction:column; }
  .ccNav{ width:auto; flex-direction:row; border-inline-end:0; border-bottom:1px solid var(--line); padding:4px 10px; overflow-x:auto; overflow-y:hidden; gap:4px; }
  .ccTab{ flex:none; padding:8px 12px; border-radius:10px; box-shadow:none !important; }
  .ccTab[aria-selected="true"]{ box-shadow:inset 0 -3px 0 var(--accent-strong) !important; border-radius:10px 10px 4px 4px; }
  .ccTab .ccIc{ display:none; }
  .ccPanes{ padding:10px 14px 18px; }
  .ccFoot{ padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .ccFoot .pillBtn{ flex:1; min-width:0; }
  .ccFoot .asErr{ flex:1 1 100%; order:-1; }
  .ccFoot{ flex-wrap:wrap; }
  .kbdGroups{ grid-template-columns:1fr; }
  .kbdKeys{ width:44%; }
}
@media (prefers-reduced-motion: reduce){ .ccTab{ transition:none; } }
.asField .help.checking{ display:flex; align-items:center; gap:6px; }
.asField .help .slMini{ margin:0; width:14px; height:14px; }

/* the crown, wherever an avatar is big enough to carry one */
.avCrownWrap{ position:relative; flex:none; display:block; }
.avCrownWrap .crown{ position:absolute; top:-15px; left:50%; width:36px; height:23px; transform:translateX(-50%) rotate(-8deg); pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); z-index:2; }
.avCrownWrap .crown svg{ width:100%; height:100%; display:block; }

.cmtLoading{ display:flex; align-items:center; gap:7px; margin:4px 0 8px; font:500 0.8rem 'Sora',sans-serif; opacity:0.7; }
.cmtLoading .slMini{ margin:0; }

/* the Sounds preview button: a small press, two arcs that light once, and a thin sweep along the bottom. No looping. */
.sndPreview{ position:relative; display:inline-flex; align-items:center; gap:8px; overflow:hidden; }
.sndPreview .pvIc{ width:16px; height:16px; flex:none; }
.sndPreview .pvA1, .sndPreview .pvA2{ opacity:0.35; }
.sndPreview .pvBar{ position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--accent-strong); transform:scaleX(0); transform-origin:0 50%; }
.sndPreview.playing{ transform:translateY(1px); box-shadow:none; border-color:var(--accent); }
.sndPreview.playing .pvA1{ animation:pvArc .9s ease-out both; }
.sndPreview.playing .pvA2{ animation:pvArc .9s .12s ease-out both; }
.sndPreview.playing .pvBar{ animation:pvSweep .9s linear both; }
@keyframes pvArc{ 0%{ opacity:0.2; } 35%{ opacity:1; } 100%{ opacity:0.35; } }
@keyframes pvSweep{ from{ transform:scaleX(0); opacity:1; } to{ transform:scaleX(1); opacity:0.2; } }
@media (prefers-reduced-motion: reduce){ .sndPreview.playing .pvA1, .sndPreview.playing .pvA2{ animation:none; opacity:1; } .sndPreview.playing .pvBar{ animation:none; transform:scaleX(1); } }

.ccSaved{ margin:0; font:600 0.8rem 'Sora',sans-serif; color:#2f7a3a; white-space:nowrap; }
body.dark .ccSaved{ color:#7fd08a; }
.ccSaved:empty{ display:none; }

/* ---------- v0.8.2 look-and-feel controls ---------- */
body.sh-soft{ --shadow: rgba(60,45,10,0.11); }
body.sh-strong{ --shadow: rgba(60,45,10,0.38); }
body.dark.sh-soft{ --shadow: rgba(0,0,0,0.32); }
body.dark.sh-strong{ --shadow: rgba(0,0,0,0.85); }
body.px-off .paperFx{ display:none; }
body.px-light .paperFx{ opacity:0.5; }
body.no-dots .boardInner{ background-image:none; }
body.compact .gearBtn{ width:32px; height:32px; }
body.compact .gearBtn svg{ width:17px; height:17px; }
body.compact .topbar{ padding-top:6px; padding-bottom:6px; }
.segCtl{ display:inline-flex; border:1px solid var(--line); border-radius:999px; background:var(--panel); padding:2px; gap:2px; flex:none; }
.segCtl button{ all:unset; box-sizing:border-box; padding:5px 11px; border-radius:999px; cursor:pointer; font:600 0.76rem 'Sora',sans-serif; color:var(--ink-soft); }
.segCtl button:hover{ color:var(--ink); }
.segCtl button.on, .segCtl button[aria-checked="true"]{ background:var(--accent-soft); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent); }
.segCtl button:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
/* shared reading preferences (js/a11y.js) */
html[data-a11y-contrast="on"]{ --ink:#000; --ink-soft:#26220f; --line:#8d8660; --edge:#4a4527; --note-text:#000; }
html[data-a11y-contrast="on"] body.dark, html[data-a11y-contrast="on"] body.dark .acctCard{ --ink:#fff; --ink-soft:#e4def5; --line:#6b6190; --note-ink-dark:#fff; }
html[data-a11y-contrast="on"] .note, html[data-a11y-contrast="on"] .photoObj .pCaption{ outline:1px solid rgba(0,0,0,0.55); }
html[data-a11y-contrast="on"] .asItem .lbl small, html[data-a11y-contrast="on"] .setRow .lbl small{ color:var(--ink); }
html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:0.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
/* ---------- the plan chip and its popover ---------- */
.planWrap{ position:relative; display:inline-flex; justify-content:flex-end; }
.planChip{ all:unset; cursor:help; font:700 0.86rem 'Sora',sans-serif; color:var(--ink); padding:3px 10px; border-radius:999px; border:1px dashed var(--edge); background:color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.planChip:hover, .planChip[aria-expanded="true"]{ border-style:solid; background:var(--accent-soft); }
.planChip:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.planPop{ position:absolute; z-index:6; right:0; top:calc(100% + 8px); width:232px; padding:12px 14px 10px; text-align:left; background:color-mix(in srgb, #fffbe8 82%, transparent); color:#3a3528; border:1px solid rgba(90,74,28,0.3); border-radius:3px 12px 12px 12px;
  box-shadow:0 8px 22px var(--shadow); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); transform:rotate(-0.8deg); }
.planPop[hidden]{ display:none; }
.planPop::before{ content:""; position:absolute; top:-8px; left:18px; width:50px; height:15px; background:rgba(255,246,196,0.9); border:1px solid rgba(90,74,28,0.14); box-shadow:0 1px 2px rgba(0,0,0,0.1); transform:rotate(-3deg); }
.ppTitle{ display:block; font:700 0.9rem 'Sora',sans-serif; margin-bottom:6px; }
.ppList{ list-style:none; margin:0; padding:0; font:500 0.8rem/1.55 'Sora',sans-serif; }
.ppList li::before{ content:"✓"; display:inline-block; width:1.2em; color:#2f7a3a; font-weight:700; }
body.dark .planPop{ background:color-mix(in srgb, #3a3424 84%, transparent); color:#f2eadb; border-color:rgba(242,234,219,0.28); }
body.dark .ppList li::before{ color:#7fd08a; }
/* ---------- storage: used and remaining, in words and in the bar ---------- */
.asStore{ display:flex; flex-direction:column; gap:6px; }
.asStoreNums{ display:flex; flex-wrap:wrap; gap:4px 14px; font:500 0.8rem 'Sora',sans-serif; color:var(--ink-soft); }
.asStoreNums b{ color:var(--ink); font-weight:700; }
.asStoreNums .tot{ margin-inline-start:auto; }
.asBar2{ display:flex; height:12px; border-radius:6px; overflow:hidden; border:1.5px solid var(--edge); background:var(--panel); }
.asBar2 .u{ display:block; height:100%; min-width:2px; background:var(--accent-strong); }
.asBar2 .r{ display:block; flex:1; height:100%; background:repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--ink-soft) 38%, transparent) 4px 5px); }
.asStoreKey{ display:flex; gap:14px; font:500 0.7rem 'Sora',sans-serif; color:var(--ink-soft); }
.asStoreKey span{ display:inline-flex; align-items:center; gap:5px; }
.asStoreKey i{ display:inline-block; width:12px; height:8px; border:1.5px solid var(--edge); border-radius:2px; }
.asStoreKey .kU{ background:var(--accent-strong); }
.asStoreKey .kR{ background:repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ink-soft) 45%, transparent) 3px 4px); }
/* ---------- the crown stays sharp: vector, no blurry filter in the dark ---------- */
.crown svg{ shape-rendering:geometricPrecision; }
body.dark .crown{ filter:none; }
body.dark .crown svg path:first-child{ stroke:#2b1c00; }
body.dark .avCrownWrap .crown, body.dark #accountBtn .crown{ filter:drop-shadow(0 0 0.5px rgba(255,236,170,0.7)); }

/* ---------- pinned scraps ---------- */
.pinBadge{ position:absolute; top:-8px; left:-8px; z-index:5; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff7e0; color:#a63a2a; border:1px solid rgba(90,40,20,0.35); box-shadow:0 1px 3px rgba(0,0,0,0.3); pointer-events:none; }
.pinBadge svg{ width:12px; height:12px; display:block; }
body.dark .pinBadge{ background:#3a2f28; color:#ff9f8a; border-color:rgba(255,159,138,0.4); }
.pinned{ cursor:default; }
.pinned.pinTug{ animation:pinTug .3s ease; }
@keyframes pinTug{ 0%,100%{ translate:0 0; } 25%{ translate:-2px 0; } 60%{ translate:2px 0; } }

/* ---------- command palette, shortcut rebinder, bookmarks (v0.8.2) ---------- */
.kbdKeys kbd, .palKeys kbd{ color:var(--ink); }
body.dark .kbdKeys kbd, body.dark .palKeys kbd{ color:#f4eedf; background:linear-gradient(#4a4330, #3a3424); border-color:rgba(242,234,219,0.45); box-shadow:0 1px 0 rgba(255,255,255,0.12) inset; }
.palBackdrop{ position:fixed; inset:0; z-index:9500; background:rgba(30,24,10,0.38); display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 0; }
.palCard{ width:min(560px, 100%); max-height:70vh; display:flex; flex-direction:column; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,0.35); overflow:hidden; }
.palInput{ border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:500 1rem 'Sora',sans-serif; padding:14px 16px; outline:none; }
.palInput:focus-visible{ box-shadow:inset 0 -2px 0 var(--accent); }
.palList{ list-style:none; margin:0; padding:6px; overflow-y:auto; flex:1; }
.palItem{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:0.88rem; }
.palItem.sel{ background:var(--accent-soft); }
.palLabel{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.palGroup{ font-size:0.7rem; color:var(--ink-soft); }
.palKeys{ display:flex; gap:3px; }
.palKeys kbd{ font:600 0.7rem 'Sora',sans-serif; background:linear-gradient(#fffdf3, #f3ecd2); border:1px solid rgba(90,74,28,0.35); border-bottom-width:2px; border-radius:6px; padding:1px 6px; }
.palNone{ padding:16px; color:var(--ink-soft); font-size:0.85rem; text-align:center; }
.palFoot{ padding:7px 14px; border-top:1px solid var(--line); font-size:0.7rem; color:var(--ink-soft); }
.kbdRebind{ display:block; }
.kbdRebRow .kbdRebCtl{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:none; max-width:62%; }
.kbdRebRow .kbdKeys{ width:auto; }
.kbdRebRow .kbdDesc{ color:var(--ink); }
.kbdBtn{ padding:3px 10px; font-size:0.74rem; }
.kbdNone2{ font-size:0.74rem; color:var(--ink-soft); font-style:italic; }
.kbdCustomTag{ color:var(--accent); font-weight:600; }
.kbdPrompt{ font-size:0.78rem; font-weight:600; color:var(--accent); padding:3px 8px; border:1px dashed var(--accent); border-radius:6px; outline:none; animation:kbdPulse 1.4s ease-in-out infinite; }
@keyframes kbdPulse{ 50%{ opacity:0.55; } }
html[data-a11y-motion="reduce"] .kbdPrompt{ animation:none; }
@media (prefers-reduced-motion: reduce){ .kbdPrompt{ animation:none; } }
.kbdRebWrap .kbdRow.editing{ background:var(--accent-soft); border-radius:8px; padding-left:8px; padding-right:8px; }
.kbdMsg{ margin:2px 0 4px; font-size:0.76rem; color:var(--ink-soft); min-height:0; }
.kbdMsg:empty{ display:none; }
.kbdConfirm{ display:flex; gap:8px; margin:0 0 6px; }
.kbdConfirm:empty{ display:none; }
.kbdResetAll{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.bmList{ display:flex; flex-direction:column; gap:6px; }
.bmRow{ display:flex; align-items:center; gap:6px; }
.bmGo{ flex:1; text-align:left; background:transparent; border:1px solid var(--line); border-radius:8px; padding:7px 10px; color:var(--ink); font:inherit; cursor:pointer; }
.bmGo:hover{ border-color:var(--accent); }
.bmBtn{ padding:4px 10px; font-size:0.74rem; }
.nameDlg{ display:flex; flex-direction:column; gap:6px; }

/* ---------- board zones (v0.8.2) ---------- */
.zone{ position:absolute; box-sizing:border-box; border-radius:6px; pointer-events:none; background:color-mix(in srgb, var(--zone, #fff3a8) 55%, transparent); border:2px dashed color-mix(in srgb, var(--zone, #fff3a8) 55%, #5a4a1c 45%); box-shadow:0 1px 3px rgba(0,0,0,0.12); }
.zone.new{ animation:zoneIn .25s ease-out; }
@keyframes zoneIn{ from{ opacity:0; transform:scale(.97); } }
.zone.selected{ outline:3px solid var(--accent); outline-offset:2px; }
.zone:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.zone.mat-kraft{ background:color-mix(in srgb, #c8a373 70%, var(--zone, #fff3a8) 12%); border-style:solid; }
.zone.mat-cardboard{ background:repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0 2px, transparent 2px 6px), color-mix(in srgb, #b98f5f 60%, var(--zone, #fff3a8) 10%); border-style:solid; }
.zone.mat-grid{ background:linear-gradient(rgba(60,90,160,0.16) 1px, transparent 1px) 0 0/22px 22px, linear-gradient(90deg, rgba(60,90,160,0.16) 1px, transparent 1px) 0 0/22px 22px, color-mix(in srgb, var(--zone, #fff3a8) 35%, #fff 65%); border-style:solid; }
.zone.mat-felt{ background:color-mix(in srgb, var(--zone, #fff3a8) 70%, #234 30%); border-style:solid; border-color:rgba(0,0,0,0.25); }
.zoneBar{ pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:28px; padding:2px 6px 2px 10px; cursor:grab; border-bottom:1px dashed rgba(0,0,0,0.18); border-radius:4px 4px 0 0; }
.zoneBar:active{ cursor:grabbing; }
.zoneTitle{ flex:1; min-width:0; font:700 0.82rem 'Sora',sans-serif; color:#33301f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; outline:none; }
.zoneTitle:empty::before{ content:attr(data-ph); opacity:0.5; font-weight:500; }
.zoneTitle[contenteditable="true"]{ background:rgba(255,255,255,0.7); border-radius:4px; padding:1px 4px; cursor:text; text-overflow:clip; }
.zone.mat-felt .zoneTitle{ color:#f4eedf; }
.zoneMore{ pointer-events:auto; flex:none; width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:#33301f; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0.55; }
.zoneMore svg{ width:16px; height:16px; }
.zone:hover .zoneMore, .zone.selected .zoneMore, .zoneMore:focus-visible{ opacity:1; }
.zoneMore:hover{ background:rgba(0,0,0,0.1); }
.zone.mat-felt .zoneMore{ color:#f4eedf; }
.zoneHandle{ pointer-events:auto; position:absolute; right:2px; bottom:2px; width:18px; height:18px; cursor:nwse-resize; background:linear-gradient(135deg, transparent 0 50%, rgba(0,0,0,0.35) 50% 58%, transparent 58% 68%, rgba(0,0,0,0.35) 68% 76%, transparent 76%); border-radius:0 0 4px 0; opacity:0; }
.zone:hover .zoneHandle, .zone.selected .zoneHandle{ opacity:1; }
body.dark .zone{ box-shadow:0 1px 3px rgba(0,0,0,0.5); }
body.dark .zoneTitle{ color:#f4eedf; } body.dark .zoneMore{ color:#f4eedf; }
body.dark .zone:not(.mat-felt):not(.mat-kraft):not(.mat-cardboard):not(.mat-grid){ background:color-mix(in srgb, var(--zone, #fff3a8) 28%, #14111f); }
.zoneSwatches{ display:flex; gap:6px; padding:4px 10px 8px; flex-wrap:wrap; }
.zoneSw{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,0,0,0.25); cursor:pointer; padding:0; }
.zoneSw.on{ outline:2px solid var(--accent); outline-offset:2px; }
.menuGap{ display:inline-block; width:1em; }
@media (prefers-reduced-motion: reduce){ .zone.new{ animation:none; } }
html[data-a11y-motion="reduce"] .zone.new{ animation:none; }

/* ---------- What's New card and modal (v0.8.2) ---------- */
.ptCard{ position:fixed; left:16px; bottom:70px; z-index:9000; width:min(340px, calc(100vw - 32px)); background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:0 10px 30px rgba(0,0,0,0.28); animation:ptIn .25s ease-out; }
.ptCard h4{ margin:0 0 6px; font-size:0.92rem; }
.ptCard p{ margin:0 0 10px; font-size:0.8rem; line-height:1.4; color:var(--ink-soft); }
.ptBtns{ display:flex; gap:8px; flex-wrap:wrap; }
.ptLink{ display:inline-block; margin-top:10px; font-size:0.76rem; color:var(--accent); }
@keyframes ptIn{ from{ opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce){ .ptCard{ animation:none; } }
html[data-a11y-motion="reduce"] .ptCard{ animation:none; }
.wnList{ margin:8px 0 4px 18px; padding:0; font-size:0.84rem; line-height:1.45; }
.wnList li{ margin-bottom:5px; }
.ccLangList{ display:flex; flex-direction:column; gap:2px; padding-inline-start:18px; }
.ccLangList[hidden]{ display:none; }
.ccLangItem{ font-weight:600; }

/* ---------- one quiet hover / press language for buttons (v0.8.2) ---------- */
:where(.pillBtn, .gearBtn, .menuItem, .asAction, .zoneMore, .bmGo, .tourBtns button){ transition:background-color .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease; }
:where(.pillBtn, .gearBtn, .asAction, .bmGo, .tourBtns button):not(:disabled):hover{ background-color:color-mix(in srgb, var(--accent, #9a5d12) 9%, transparent); }
:where(.pillBtn.primary, .pillBtn.dangerFill):not(:disabled):hover{ filter:brightness(1.07); }
:where(.pillBtn, .gearBtn, .asAction, .bmGo, .menuItem, .tourBtns button):not(:disabled):active{ transform:translateY(1px) scale(0.985); }
:where(.pillBtn, .gearBtn, .asAction, .menuItem, .bmGo, .zoneMore):focus-visible{ outline:2px solid var(--accent, #9a5d12); outline-offset:2px; }
:where(.pillBtn, .gearBtn):disabled{ opacity:0.5; cursor:not-allowed; }
@media (hover:none){ :where(.pillBtn, .gearBtn, .asAction, .bmGo, .tourBtns button):not(:disabled):hover{ background-color:transparent; } }
@media (prefers-reduced-motion: reduce){ :where(.pillBtn, .gearBtn, .menuItem, .asAction, .zoneMore, .bmGo, .tourBtns button){ transition:none; } :where(.pillBtn, .gearBtn, .asAction, .bmGo, .menuItem, .tourBtns button):not(:disabled):active{ transform:none; } }
html[data-a11y-motion="reduce"] :where(.pillBtn, .gearBtn, .menuItem, .asAction, .zoneMore, .bmGo, .tourBtns button){ transition:none; }

/* ---------- Collaborate (Premium) ---------- */
.btn[hidden]{ display:none; }
.collabDlg{ display:flex; flex-direction:column; gap:6px; }
.collabDlg select, .collabDlg input{ width:100%; }
.collabOut{ display:flex; flex-direction:column; gap:8px; margin-top:6px; min-height:1.2em; font-size:0.84rem; }

/* ---------- underline, links, checklist titles, selection tip, pulling a note (v0.8.2) ---------- */
.text u{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:currentColor; }
.fmtGrid .fU, .fbBtn .fU, .stBtn .fU{ text-decoration:underline; font-weight:700; font-size:0.9rem; }
/* a link looks like a link and never like underlined text: its own colour, a dotted line, a small arrow */
.text a{ color:var(--link, #1d4fb8); text-decoration:none; border-bottom:1.5px dotted currentColor; padding-bottom:0.5px; cursor:text; }
.text a::after{ content:"\2197"; font-size:0.72em; margin-inline-start:0.18em; opacity:0.75; text-decoration:none; display:inline-block; }
.text a:hover{ background:color-mix(in srgb, currentColor 10%, transparent); border-radius:3px; }
body.dark .text a{ color:var(--link, #8fb4ff); }
.text u a, .text a u{ text-decoration:underline; }
/* a checklist title: no box, bold */
.text ul.checklist > li[data-title="true"]{ padding-inline-start:0; font-weight:700; opacity:1; }
.text ul.checklist > li[data-title="true"]::before, .text ul.checklist > li[data-title="true"]::after{ display:none; }
.fbBtn.on, .stBtn.on{ background:rgba(0,0,0,0.12); }
/* the selection toolbar is a small version of the note's ... menu: same panel, same buttons */
.floatPop.selTip{ z-index:10010; padding:5px; border-radius:12px; overflow:visible; }
.selTip .fmtGrid{ grid-template-columns:repeat(8, 30px); gap:2px; }
.selTip .fmtGrid button{ height:30px; }
.selTip .fmtGrid button.on{ background:var(--accent-soft); box-shadow:inset 0 0 0 1.5px var(--accent); }
.selTip .fmtGrid button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
@media (max-width:420px){ .selTip .fmtGrid{ grid-template-columns:repeat(8, 1fr); } .floatPop.selTip{ max-width:calc(100vw - 16px); } }
/* pull the edge of a note */
.note .noteEdge{ position:absolute; z-index:4; touch-action:none; }
.note .noteEdgeB{ left:14px; right:14px; bottom:-6px; height:12px; cursor:ns-resize; }
.note .noteEdgeR{ top:14px; bottom:14px; right:-6px; width:12px; cursor:ew-resize; }
.note.focused .noteEdge, .note.soup .noteEdge{ display:none; }
.note.selected .noteEdgeB::after{ content:""; position:absolute; left:50%; bottom:3px; width:34px; height:4px; border-radius:3px; background:rgba(0,0,0,0.28); transform:translateX(-50%); }
@media (pointer:coarse){
  /* on a touch screen the pull tab is a visible, finger-sized grab bar, shown on the selected note */
  .note .noteEdgeB{ left:0; right:0; bottom:-16px; height:32px; }
  .note .noteEdgeR{ right:-16px; width:32px; }
  .note:not(.selected) .noteEdge{ display:none; }
  .note.selected .noteEdgeB::after{ width:52px; height:6px; bottom:10px; background:rgba(0,0,0,0.38); }
}

/* ---------- top-bar buttons: a small, quiet movement on hover or keyboard focus (v0.8.2) ----------
   Each icon does one thing that fits it, in about a third of a second, then rests. Nothing loops, nothing bounces for long.
   Off for touch screens (no hover), for "reduce motion", and when the system asks for less movement. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html:not([data-a11y-motion="reduce"]) .rightButtons .gearBtn svg,
  html:not([data-a11y-motion="reduce"]) .rightButtons .gearBtn{ transition:transform .32s cubic-bezier(.3,1.4,.5,1), color .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .2s ease; }
  html:not([data-a11y-motion="reduce"]) .rightButtons .gearBtn:hover{ box-shadow:0 2px 7px rgba(60,45,10,0.16); }
  /* settings: the cog turns a little way, like a quarter-click */
  html:not([data-a11y-motion="reduce"]) #gearBtn:is(:hover,:focus-visible) svg{ transform:rotate(70deg); }
  /* sign out: the arrow slides toward the door */
  html:not([data-a11y-motion="reduce"]) #quickSignOut:is(:hover,:focus-visible) svg{ transform:translateX(3px); }
  /* clean up: the broom sweeps */
  html:not([data-a11y-motion="reduce"]) #cleanBtn:is(:hover,:focus-visible) svg{ animation:hbSweep .5s ease-in-out 1; transform-origin:80% 20%; }
  /* share: it tips and grows a touch, as if about to send */
  html:not([data-a11y-motion="reduce"]) #shareBtn:is(:hover,:focus-visible) svg{ transform:rotate(14deg) scale(1.1); }
  /* shortcuts: the keyboard dips like a pressed key */
  html:not([data-a11y-motion="reduce"]) #kbdBtn:is(:hover,:focus-visible) svg{ transform:translateY(1.5px) scale(0.96); }
  /* help: the question mark tilts, curious */
  html:not([data-a11y-motion="reduce"]) #helpBtn:is(:hover,:focus-visible){ animation:hbWonder .45s ease 1; }
  /* account: the picture lifts a little and the crown (if there is one) gives a tiny shake */
  html:not([data-a11y-motion="reduce"]) #accountBtn:is(:hover,:focus-visible) .acctAv{ transform:translateY(-1.5px) scale(1.04); }
  html:not([data-a11y-motion="reduce"]) #accountBtn .acctAv{ transition:transform .28s cubic-bezier(.3,1.4,.5,1); }
  html:not([data-a11y-motion="reduce"]) #accountBtn:is(:hover,:focus-visible) .crown{ animation:hbCrown .5s ease 1; }
  /* the pressed feel stays: it overrides the movement for a moment */
  html:not([data-a11y-motion="reduce"]) .rightButtons .gearBtn:active svg{ transition-duration:.08s; }
}
@keyframes hbSweep{ 0%{ transform:rotate(0); } 30%{ transform:rotate(-16deg); } 65%{ transform:rotate(12deg); } 100%{ transform:rotate(0); } }
@keyframes hbWonder{ 0%{ transform:rotate(0); } 35%{ transform:rotate(-12deg) scale(1.08); } 70%{ transform:rotate(8deg) scale(1.04); } 100%{ transform:rotate(0); } }
@keyframes hbCrown{ 0%,100%{ transform:translateX(-50%) rotate(-8deg); } 30%{ transform:translateX(-50%) rotate(-16deg) translateY(-1px); } 65%{ transform:translateX(-50%) rotate(0deg); } }

/* ---------- Shopping List (v0.8.2): the receipt is the surface, the cart is a small hand-drawn accent ----------
   Three looks are being compared (v-a, v-b, v-c); everything shared is written once, only the cart and the paper's edges differ. */
.shopObj{ --sInk:#3a3526; --sSoft:#6b6550; --sLine:rgba(58,53,38,0.3); --sPaper:#fffdf6; --sCartFill:#fbf6e6; --sTick:#2f7a45; --sPrice:#245f37; --sWarn:#b3402a;
  width:var(--pw, 340px); color:var(--sInk); font-family:'Caveat','Patrick Hand','Playpen Sans Hebrew','Gveret Levin','Alef',cursive; touch-action:pan-y; }          /* Latin: Caveat; Hebrew falls through to a hand-written Hebrew face (Playpen Sans Hebrew), not a newspaper serif */
.shopObj .shCart, .shopObj .shHead{ touch-action:none; }
.shopObj .shPaper{ position:relative; z-index:1; background:var(--sPaper); border-radius:2px; padding:11px 13px 13px; box-shadow:0 1px 2px rgba(60,45,10,0.2), 0 5px 12px rgba(60,45,10,0.12); }
/* one deliberate title: handwritten, with a hand-ruled line under the header block */
.shopObj .shHead{ margin-bottom:5px; padding-bottom:4px; border-bottom:1.5px solid var(--sLine); }
.shopObj .shTitle{ font-size:1.34rem; font-weight:700; line-height:1.1; min-height:1.1em; outline:none; user-select:text; -webkit-user-select:text; cursor:text; overflow-wrap:anywhere; touch-action:manipulation; }
.shopObj .shTitle:empty::before, .shopObj .shText:empty::before{ content:attr(data-ph); opacity:0.38; }
.shopObj .shTitle:focus-visible, .shopObj .shText:focus-visible{ outline:none; background:rgba(255,224,130,0.35); border-radius:3px; }
.shopObj .shSummary{ margin-top:1px; font:600 0.6rem 'Courier Prime','Courier New',monospace; letter-spacing:0.05em; text-transform:uppercase; color:var(--sSoft); }
.shopObj.allPicked .shSummary{ color:var(--sPrice); }
.shopObj .shList{ max-height:400px; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; padding-right:2px; }
.shopObj .shItems{ list-style:none; margin:0; padding:0; }
.shopObj .shRow{ display:flex; align-items:flex-start; gap:7px; padding:1px 0 2px; min-height:24px; position:relative; }
.shopObj .shBox{ flex:none; width:21px; height:21px; margin-top:2px; padding:0; border:0; background:transparent; color:var(--sInk); cursor:pointer; border-radius:5px; }
.shopObj .shBox svg{ width:100%; height:100%; display:block; }
.shopObj .shBox .shBoxLine, .shopObj .shBox .shTick{ stroke:currentColor; }
.shopObj .shBox .shTick{ opacity:0; stroke-dasharray:30; stroke-dashoffset:30; transition:opacity .1s ease, stroke-dashoffset .28s ease .05s; }
.shopObj .shRow.in .shBox .shTick{ opacity:1; stroke-dashoffset:0; color:var(--sTick); }
.shopObj .shBox:hover:not(:disabled){ background:rgba(0,0,0,0.06); }
.shopObj .shBox:focus-visible{ outline:2px solid var(--accent, #c9871f); outline-offset:1px; }
.shopObj .shBody{ flex:1; min-width:0; }
.shopObj .shLine{ display:flex; align-items:baseline; gap:4px; font-size:1.2rem; line-height:1.15; }
.shopObj .shText{ position:relative; display:inline-block; min-width:2ch; max-width:100%; outline:none; user-select:text; -webkit-user-select:text; cursor:text; overflow-wrap:anywhere; touch-action:manipulation; }
.shopObj .shRow.in .shText{ opacity:0.6; }
.shopObj .shRow.in .shText::after{ content:""; position:absolute; left:-3px; right:-3px; top:54%; height:0.32em; transform:translateY(-50%); background:currentColor; opacity:0.75; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1 11.6C18 10.2 34 12.4 52 10.9S84 10.3 99 9.9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1 11.6C18 10.2 34 12.4 52 10.9S84 10.3 99 9.9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
/* the details an item has, as tiny receipt annotations under its name:  ×2 · €3.40 · #health  /  note: lactose-free */
.shopObj .shMeta{ display:flex; flex-wrap:wrap; font:500 0.66rem/1.35 'Courier Prime','Courier New',monospace; color:var(--sSoft); margin-top:-1px; }
.shopObj .shMeta > * + *::before{ content:" \00b7 "; white-space:pre; opacity:0.7; text-decoration:none; }
.shopObj .shPrice{ color:var(--sPrice); font-weight:700; }
.shopObj .shTag::before{ content:"#"; opacity:0.7; }
.shopObj .shMeta > .shTag::before{ content:"#"; }
.shopObj .shMeta > * + .shTag::before{ content:" \00b7 #"; white-space:pre; }
.shopObj .shLink{ color:var(--link, #1d4fb8); text-decoration:none; cursor:pointer; }
.shopObj .shNote{ font:500 0.66rem/1.35 'Courier Prime','Courier New',monospace; color:var(--sSoft); overflow-wrap:anywhere; }
.shopObj .shNote::before{ content:"note: "; opacity:0.7; }
.shopObj .shMore, .shopObj .shDel{ border:0; background:transparent; color:var(--sSoft); cursor:pointer; border-radius:5px; font:600 0.74rem 'Sora',sans-serif; padding:0 4px; line-height:1.4; opacity:0; transition:opacity .12s ease; }
.shopObj .shRow:hover .shMore, .shopObj .shRow:hover .shDel, .shopObj .shRow:focus-within .shMore, .shopObj .shRow:focus-within .shDel, .shopObj.selected .shMore, .shopObj .shMore[aria-expanded="true"]{ opacity:1; }
.shopObj .shMore:hover, .shopObj .shDel:hover{ background:rgba(0,0,0,0.08); }
.shopObj .shDel:hover{ color:var(--sWarn); }
@media (hover:none){ .shopObj .shMore, .shopObj .shDel{ opacity:0.7; padding:2px 8px; } }
/* editing a row's details: a few inline fields, each a dotted line on the paper. No box. */
.shopObj .shEdit{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:2px 0 3px; padding:0 0 3px; border-bottom:1px dotted var(--sLine); }
.shopObj .shF{ display:inline-flex; align-items:baseline; gap:3px; font:500 0.64rem 'Courier Prime','Courier New',monospace; color:var(--sSoft); min-width:0; }
.shopObj .shF input{ font:600 0.72rem 'Courier Prime','Courier New',monospace; color:var(--sInk); background:transparent; border:0; border-bottom:1px dotted var(--sSoft); border-radius:0; padding:0 1px; min-width:0; outline:none; user-select:text; -webkit-user-select:text; }
.shopObj .shF input::placeholder{ color:var(--sSoft); opacity:0.45; }
.shopObj .shF input:focus{ border-bottom:1.5px solid var(--accent, #c9871f); }
.shopObj .shF.f-qty input{ width:5.5ch; } .shopObj .shF.f-price input{ width:8ch; } .shopObj .shF.f-tag input{ width:10ch; }
.shopObj .shF.f-note, .shopObj .shF.f-link{ flex:1 1 100%; } .shopObj .shF.f-note input, .shopObj .shF.f-link input{ flex:1; width:100%; }
.shopObj .shF input.bad{ border-bottom-color:var(--sWarn); animation:shShake .3s ease; }
@keyframes shShake{ 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } }
.shopObj .shAddRow{ display:flex; align-items:center; gap:7px; padding:1px 0; }
.shopObj .shPlus{ flex:none; width:21px; text-align:center; font:700 1rem 'Sora',sans-serif; color:var(--sSoft); }
.shopObj .shAddIn{ flex:1; min-width:0; border:0; border-bottom:1px dashed var(--sLine); background:transparent; font:inherit; font-size:1.2rem; color:inherit; padding:0; outline:none; user-select:text; -webkit-user-select:text; }
.shopObj .shAddIn::placeholder{ color:rgba(58,53,38,0.45); }
.shopObj .shAddIn:focus{ border-bottom:1.5px solid var(--accent, #c9871f); }
.shopObj.emptyList .shAddIn{ border-bottom:1.5px solid var(--accent, #c9871f); font-size:1.3rem; }
.shopObj.emptyList .shAddIn::placeholder{ color:var(--accent, #c9871f); opacity:0.85; }
.shopObj .shDivider{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 2px; padding-top:4px; border-top:1px dashed var(--sLine); font:700 0.58rem 'Courier Prime','Courier New',monospace; letter-spacing:0.08em; text-transform:uppercase; color:var(--sSoft); }
.shopObj .shClear{ border:0; background:transparent; color:var(--sSoft); font:600 0.6rem 'Courier Prime','Courier New',monospace; text-transform:none; letter-spacing:0; text-decoration:underline; cursor:pointer; padding:1px 3px; border-radius:4px; }
.shopObj .shClear:hover{ color:var(--sWarn); background:rgba(0,0,0,0.05); }
.shopObj .shTotal{ margin-top:5px; padding-top:4px; border-top:1px dashed var(--sLine); text-align:right; font:700 0.72rem 'Courier Prime','Courier New',monospace; color:var(--sInk); }
.shopObj .shStamp{ position:absolute; right:10px; top:12px; transform:rotate(-6deg); font:800 0.58rem 'Courier Prime','Courier New',monospace; letter-spacing:0.08em; text-transform:uppercase; color:var(--sWarn); border:1.5px solid currentColor; border-radius:4px; padding:0 6px; opacity:0.75; pointer-events:none; background:rgba(255,253,246,0.6); }

/* the cart: small, hand-drawn, slightly tilted, and never in the flow */
.shopObj .shCart{ position:absolute; z-index:2; width:78px; color:var(--sInk); filter:drop-shadow(0 1px 1.5px rgba(60,45,10,0.3)); }
.shopObj .shCart svg{ display:block; width:100%; height:auto; overflow:visible; }
.shopObj .shCart .cFill{ fill:var(--sCartFill); fill-opacity:0.95; }
.shopObj .shCart .cLine{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.shopObj .shCart .cWire{ fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; opacity:0.62; }
.shopObj .shCart .cWheel{ fill:var(--sCartFill); stroke:currentColor; stroke-width:2.1; }
.shopObj .shCart .cHub{ fill:currentColor; }

/* look A: the cart tucked into the paper's lower corner, the receipt just behind its front */
.shopObj.v-a{ padding-bottom:22px; }
.shopObj.v-a .shCart{ right:-9px; bottom:-8px; transform:rotate(-6deg); }
/* look B: the receipt narrows into a tail that goes into a small cart centred beneath */
.shopObj.v-b{ padding-bottom:30px; filter:drop-shadow(0 2px 3px rgba(60,45,10,0.26)); }
.shopObj.v-b .shPaper{ box-shadow:none; padding-bottom:30px; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(50% + 26px) calc(100% - 22px), calc(50% + 21px) 100%, calc(50% - 21px) 100%, calc(50% - 26px) calc(100% - 22px), 0 calc(100% - 22px)); }
.shopObj.v-b .shCart{ left:50%; bottom:-6px; width:74px; transform:translateX(-50%) rotate(-3deg); }
/* look C: the cart clipped on the paper's top corner like a sticker; the paper's lower edge is torn; the least height of all */
.shopObj.v-c{ padding-top:12px; }
.shopObj.v-c .shPaper{ padding-bottom:16px; -webkit-mask:linear-gradient(135deg, #000 66.7%, transparent 0) bottom/10px 7px repeat-x, linear-gradient(#000, #000) top/100% calc(100% - 6px) no-repeat; mask:linear-gradient(135deg, #000 66.7%, transparent 0) bottom/10px 7px repeat-x, linear-gradient(#000, #000) top/100% calc(100% - 6px) no-repeat; box-shadow:none; }
.shopObj.v-c{ filter:drop-shadow(0 2px 3px rgba(60,45,10,0.26)); }
.shopObj.v-c .shCart{ left:-14px; top:-4px; width:58px; transform:rotate(-9deg); }
.shopObj.v-c .shHead{ padding-left:36px; min-height:30px; }
.shopObj.v-c .shStamp{ top:10px; }

body.dark .shopObj{ --sInk:#f2eadb; --sSoft:#b9b19a; --sLine:rgba(242,234,219,0.28); --sPaper:#2b2724; --sCartFill:#3a3531; --sTick:#7ed39a; --sPrice:#7ed39a; --sWarn:#ff9f8a; }
body.dark .shopObj .shPaper{ box-shadow:0 1px 2px rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.4); }
body.dark .shopObj.v-b .shPaper, body.dark .shopObj.v-c .shPaper{ box-shadow:none; }
body.dark .shopObj .shAddIn::placeholder{ color:rgba(242,234,219,0.45); }
body.dark .shopObj .shStamp{ background:rgba(43,39,36,0.7); }
.shCurPick{ display:flex; flex-direction:column; padding:2px 6px 6px 22px; }
.shCurPick .menuItem{ font-size:0.78rem; padding:4px 8px; }
.shopObj.static{ position:relative; cursor:default; }
body.read-only .shopObj .shBox{ cursor:default; }
@media (pointer:coarse){
  .shopObj .shRow{ min-height:44px; align-items:center; }
  .shopObj .shBox{ width:40px; height:40px; margin:-8px -8px -8px -12px; }
  .shopObj .shLine{ font-size:1.3rem; }
  .shopObj .shMore, .shopObj .shDel{ min-width:36px; min-height:36px; font-size:1rem; }
}
@media (prefers-reduced-motion: reduce){ .shopObj .shBox .shTick{ transition:none; } .shopObj .shF input.bad{ animation:none; } }
html[data-a11y-motion="reduce"] .shopObj .shBox .shTick{ transition:none; }
html[data-a11y-motion="reduce"] .shopObj .shF input.bad{ animation:none; }
.shopObj.v-a .shTotal{ padding-right:62px; }
.shopObj.v-a .shStamp{ right:10px; }
body.dark .shopObj .shLink{ color:#8fb4ff; }

/* ---------- Shopping List: spacing rhythm (header > section break > item group > metadata) ---------- */
.shopObj{ --gHead:11px; --gSection:15px; --gItem:6px; --gMeta:3px; }
.shopObj .shPaper{ padding:13px 15px 16px; }
/* header block: the title and its count, then a clear step down to the first item */
.shopObj .shHead{ margin-bottom:var(--gHead); padding-bottom:7px; }
.shopObj .shSummary{ margin-top:3px; }
/* an item is a small group: its name, then what is printed about it; items are set apart from each other */
.shopObj .shRow{ padding:2px 0; margin-bottom:var(--gItem); min-height:26px; }
.shopObj .shItems > .shRow:last-child{ margin-bottom:0; }
.shopObj .shBox{ margin-top:3px; }
.shopObj .shMeta{ margin-top:var(--gMeta); padding-inline-start:7px; line-height:1.45; }
.shopObj .shNote{ margin-top:2px; padding-inline-start:7px; line-height:1.45; }
.shopObj .shMeta + .shNote{ margin-top:1px; }
.shopObj .shEdit{ margin:5px 0 4px 7px; padding-bottom:4px; gap:4px 14px; }
/* section breaks are the biggest steps inside the paper */
.shopObj .shAddRow{ margin-top:10px; padding:2px 0; }
.shopObj.emptyList .shAddRow{ margin-top:6px; }
.shopObj .shDivider{ margin:var(--gSection) 0 7px; padding-top:9px; gap:18px; flex-wrap:wrap; }
.shopObj .shDivider > span:first-child{ letter-spacing:0.1em; }
.shopObj .shClear{ margin-inline-start:auto; padding:2px 4px 2px 12px; }
.shopObj .shInCart{ margin-top:2px; }
.shopObj .shTotal{ margin-top:13px; padding-top:8px; }
/* the cart sits clear of the printed lines: blank paper below the total, then the drawing */
.shopObj.v-a{ padding-bottom:26px; }
.shopObj.v-a .shPaper{ padding-bottom:30px; }
.shopObj.v-a .shCart{ right:-9px; bottom:-10px; }
.shopObj.v-a .shTotal{ padding-right:0; }
.shopObj.v-b{ padding-bottom:34px; }
.shopObj.v-b .shPaper{ padding-bottom:42px; }
.shopObj.v-b .shCart{ bottom:-8px; }
.shopObj.v-c .shPaper{ padding-bottom:22px; }
.shopObj.v-c .shHead{ min-height:34px; margin-bottom:12px; }

/* ---- piles (a collapsed pile is a top paper, three decorative edges and a count: the same cost however many papers it holds) ---- */
.pileObj{ min-height:112px; }
.pileObj .pileEdge{ position:absolute; inset:0; background:#f4ecd6; border-radius:2px; box-shadow:0 1px 2px rgba(60,45,10,0.28); transform:translate(var(--ex, 0px), var(--ey, 4px)) rotate(var(--er, 0deg)); }
.pileObj .pileTop{ position:relative; min-height:112px; padding:14px 16px 16px; border-radius:2px; box-shadow:0 2px 5px rgba(60,45,10,0.3); overflow:hidden; color:#33301f; }
.pileObj .pileText{ font-size:17px; line-height:1.35; max-height:6.6em; overflow:hidden; word-break:break-word; }
.pileObj .pileCount{ position:absolute; right:-10px; bottom:-10px; min-width:28px; height:28px; padding:0 8px; border-radius:14px; background:#33301f; color:#fffdf5; font:700 14px/28px system-ui, sans-serif; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.35); }
.pileObj.pileHit{ outline:2px solid #e0a000; outline-offset:6px; }
.pileObj:focus-visible{ outline:2px solid var(--sel-ring); outline-offset:6px; }
body.dark .pileObj .pileEdge{ background:#3a3550; }
body.dark .pileObj .pileTop{ color:#f2eadb; }
.pileObj.static{ pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .pileObj{ transition:none; } }

/* ---------- v0.8.2.1: button states (one place) ----------
   The generic hover tint (a 9% accent wash) used to win over a primary button's fill and left white text on cream ("Save" on hover).
   Now: the tint applies only to buttons that have no fill of their own, and filled buttons have explicit, contrast-checked state tokens.
   Light: white on #9a5d12 (5.3:1), hover #865210 (~6.6:1). Dark: dark text on amber, hover a touch lighter (~11:1). */
body{ --btn-fill:var(--accent-strong); --btn-fg:var(--on-accent); }          /* on body (not :root) so the dark theme's accent and on-accent are the ones resolved */
:root{ --btn-fill-hover:#865210; --btn-fill-active:#734510; --danger-fill-hover:#9c3a24; --danger-fill-fg:#ffffff; }
body.dark{ --btn-fill-hover:#ffc47d; --btn-fill-active:#ffd29b; --danger-fill-hover:#ff7f90; --danger-fill-fg:#1e1a30; }
:where(.pillBtn:not(.primary):not(.dangerFill), .gearBtn, .asAction, .bmGo, .tourBtns button:not(.primary)):not(:disabled):hover{ background-color:color-mix(in srgb, var(--accent, #9a5d12) 9%, transparent); color:var(--ink); }
.pillBtn.primary, .btn.primary, .tourBtns button.primary, .addBoardRow button{ background:var(--btn-fill); border-color:var(--btn-fill); color:var(--btn-fg); }
.pillBtn.primary:not(:disabled):hover, .btn.primary:not(:disabled):hover, .tourBtns button.primary:hover, .addBoardRow button:hover{ background:var(--btn-fill-hover); border-color:var(--btn-fill-hover); color:var(--btn-fg); filter:none; }
.pillBtn.primary:not(:disabled):active, .btn.primary:not(:disabled):active, .tourBtns button.primary:active{ background:var(--btn-fill-active); border-color:var(--btn-fill-active); color:var(--btn-fg); }
.pillBtn.primary:focus-visible, .btn.primary:focus-visible, .tourBtns button.primary:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; background:var(--btn-fill); color:var(--btn-fg); }
.pillBtn.dangerFill{ background:var(--danger); border-color:var(--danger); color:var(--danger-fill-fg); }
.pillBtn.dangerFill:not(:disabled):hover{ background:var(--danger-fill-hover); border-color:var(--danger-fill-hover); color:var(--danger-fill-fg); filter:none; }
.btn.danger.confirm:hover{ background:var(--danger-fill-hover); color:var(--danger-fill-fg); }
.pillBtn:disabled, .pillBtn[aria-disabled="true"], .btn:disabled{ opacity:0.5; cursor:not-allowed; filter:none; }
.pillBtn.primary:disabled{ background:var(--btn-fill); color:var(--btn-fg); }
@media (hover:none){ .pillBtn.primary:not(:disabled):hover, .btn.primary:not(:disabled):hover{ background:var(--btn-fill); border-color:var(--btn-fill); } }

/* ---------- v0.8.2.1 Room to Breathe: the shell gives the board its space back ---------- */
/* desktop: a bigger, easier-to-find search (still well short of dominating the bar) */
.searchWrap{ flex:1 1 320px; max-width:560px; min-width:150px; }
.searchWrap input{ padding:10px 16px 10px 38px; font-size:0.95rem; border-width:1.5px; }
.searchWrap svg{ left:14px; width:16px; height:16px; }
.searchToggle, .searchCancel{ display:none; }

/* the view-only strip: one compact line (board, who shared it, view only) with the Report action beside it */
.shareBanner{ padding:4px 12px; gap:8px; flex-wrap:nowrap; font-size:0.8rem; min-height:34px; }
.shareBanner #shareBannerText{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shareBanner .pillBtn, .shareBanner .btn{ min-height:28px; padding:3px 10px; font-size:0.74rem; width:auto; flex:none; }
.shareBanner .acctAv{ flex:none; }
@media (pointer:coarse){ .shareBanner .pillBtn, .shareBanner .btn{ min-height:36px; padding:6px 12px; } .shareBanner{ min-height:42px; } }
/* a shared board is read-only: controls that do nothing there stay out of the way */
body.viewStrip #cleanBtn, body.viewStrip #shareBtn, body.viewStrip #kbdBtn, body.viewStrip #helpBtn, body.viewStrip #quickSignOut{ display:none; }

/* phones: header, search and strip are tight; the board gets the rest */
@media (max-width:600px){
  .topbar{ min-height:48px; padding:3px 8px; gap:6px; flex-wrap:nowrap; }
  .brand{ font-size:1.02rem; gap:6px; min-width:0; flex:1 1 auto; }
  .logoMark{ width:20px; height:20px; }
  .brand .boardName{ min-width:0; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rightButtons{ gap:4px; }
  .gearBtn{ width:40px; height:40px; }
  #kbdBtn, #helpBtn{ display:none; }                     /* keyboard shortcuts mean nothing on a phone; help stays in Settings */
  .searchWrap{ display:none; }
  .searchToggle{ display:flex; }
  /* search opens over the header: a full-width field and a cancel */
  body.searchOpen .brand, body.searchOpen .rightButtons{ display:none; }
  body.searchOpen .searchWrap{ display:block; flex:1 1 auto; max-width:none; }
  body.searchOpen .searchWrap input{ font-size:1rem; min-height:40px; }
  body.searchOpen .searchCancel{ display:flex; flex:none; min-height:40px; padding:0 10px; align-items:center; background:none; border:0; color:var(--ink); font-weight:600; font-size:0.9rem; cursor:pointer; }
  .shareBanner{ font-size:0.74rem; padding:3px 8px; min-height:32px; }
  .shareBanner #copyToMineBtn{ display:none; }
}
@media (max-width:600px){ .brand{ white-space:nowrap; } .brand .boardName{ max-width:22vw; } }
@media (max-width:430px){ .brand .boardName{ display:none; } }

/* ---------- piles: browsing (v0.8.2.1) ---------- */
.pileObj .pileNav{ position:absolute; top:50%; transform:translateY(-50%); width:30px; height:44px; padding:0; border:0; border-radius:10px; background:rgba(51,48,31,0.78); color:#fffdf5; font:700 24px/1 'Sora',sans-serif; cursor:pointer; opacity:0; z-index:2; display:flex; align-items:center; justify-content:center; transition:opacity .12s ease; }
.pileObj .pilePrev{ left:-14px; } .pileObj .pileNext{ right:-14px; }
.pileObj:hover .pileNav, .pileObj.selected .pileNav, .pileObj:focus-within .pileNav{ opacity:1; }
.pileObj .pileNav:hover, .pileObj .pileNav:focus-visible{ background:#33301f; }
body.dark .pileObj .pileNav{ background:rgba(237,233,247,0.85); color:#1e1a30; }
@media (hover:none){ .pileObj .pileNav{ display:none; } }              /* on touch a tap opens the browser instead (no hover needed) */
body.multi-sel .pileObj .pileNav, body.read-only .pileObj .pileNav, .pileObj.static .pileNav{ display:none; }
.pbBackdrop{ position:fixed; inset:0; z-index:10040; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.pbCard{ width:min(420px, 100%); max-height:100%; display:flex; flex-direction:column; gap:10px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:12px; box-shadow:0 20px 60px rgba(0,0,0,0.4); outline:none; }
.pbStage{ flex:1 1 auto; min-height:140px; max-height:min(60vh, 520px); overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:10px 6px; touch-action:pan-y; }
.pbPaper{ max-width:100%; pointer-events:none; }
.pbFallback{ padding:16px; font-size:1.1rem; overflow-wrap:anywhere; }
.pbBar{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pbIndex{ font:700 1rem 'Sora',sans-serif; min-width:5.5em; text-align:center; }
.pbNav{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:700 28px/1 'Sora',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pbNav:hover{ border-color:var(--accent); background:var(--accent-soft); }
.pbFoot{ display:flex; gap:8px; justify-content:space-between; flex-wrap:wrap; }
.pbBack, .pbTake{ min-height:44px; padding:8px 16px; border-radius:10px; border:1px solid var(--field-line); background:var(--field); color:var(--ink); font:600 0.9rem 'Sora',sans-serif; cursor:pointer; }
.pbBack{ background:var(--btn-fill); border-color:var(--btn-fill); color:var(--btn-fg); }
.pbBack:hover{ background:var(--btn-fill-hover); border-color:var(--btn-fill-hover); }
.pbTake:hover{ border-color:var(--accent); background:var(--accent-soft); }
.pbCard :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

/* ---------- embedded video links (v0.8.2.1) ---------- */
.embedObj{ min-width:200px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:6px; box-shadow:0 2px 6px var(--shadow), 0 10px 22px var(--shadow); padding:0 0 6px; }
.embedObj .embHead{ padding:6px 10px; font:600 0.72rem 'Sora',sans-serif; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); cursor:grab; }
.embedObj .embFrame{ position:relative; width:100%; aspect-ratio:16 / 9; background:#1d1a14; overflow:hidden; }
.embedObj .embFrame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.embedObj .embPlay{ all:unset; box-sizing:border-box; position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; color:#fff;
  background:repeating-linear-gradient(135deg, #2b2620 0 14px, #26221c 14px 28px); }
.embedObj .embPlay:hover svg circle{ fill:rgba(154,93,18,0.95); }
.embedObj .embPlay:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.embedObj .embWho{ font:600 0.78rem 'Sora',sans-serif; opacity:0.9; }
.embedObj .embFoot{ padding:6px 10px 0; font-size:0.74rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.embedObj .embSrc{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:2px; }
.embedObj .embSrc:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
body.dark .embedObj{ filter:none; }
@media (prefers-reduced-motion: reduce){ .embedObj{ transition:none; } }

/* v0.8.2.1 correction: the Report control keeps its small look but has an effective 44x44px tap area on phones / touch (an invisible extension of the button;
   the strip itself stays one compact line, and nothing else sits within reach of it) */
.shareBanner .pillBtn, .shareBanner .btn{ position:relative; }
@media (pointer:coarse), (max-width:600px){
  .shareBanner .pillBtn, .shareBanner .btn{ min-height:30px; padding:4px 12px; }
  .shareBanner .pillBtn::after, .shareBanner .btn::after{ content:""; position:absolute; left:-8px; right:-8px; top:50%; height:44px; transform:translateY(-50%); min-width:44px; }
  .shareBanner{ min-height:36px; padding-inline-end:14px; }
}

/* ======================================================================================================================
   v0.8.2.2 Touch the Paper
   ====================================================================================================================== */
/* ---- the tack (replaces the flat pin badge) ---- */
.pinTack{ position:absolute; top:-6px; left:calc(50% + var(--tx, 38px) - 13px); z-index:6; width:26px; height:26px; transform:rotate(var(--tr, 0deg)); pointer-events:none; filter:drop-shadow(0 1px 1px rgba(40,25,10,0.35)); }
.pinTack svg{ display:block; width:100%; height:100%; }
body.dark .pinTack{ filter:drop-shadow(0 1px 1px rgba(0,0,0,0.6)) brightness(0.92); }
.pinTack.drop{ animation:tackDrop .3s cubic-bezier(.3,.7,.4,1) both; }
@keyframes tackDrop{ 0%{ transform:translateY(-22px) rotate(calc(var(--tr, 0deg) - 25deg)) scale(1.22); opacity:0; } 55%{ transform:translateY(1px) rotate(var(--tr, 0deg)) scale(1); opacity:1; } 75%{ transform:translateY(-1.5px) rotate(var(--tr, 0deg)); } 100%{ transform:translateY(0) rotate(var(--tr, 0deg)); opacity:1; } }
.thud{ animation:paperThud .32s ease-out 1; }
@keyframes paperThud{ 0%,52%{ translate:0 0; } 62%{ translate:0 1.5px; } 100%{ translate:0 0; } }
.tackFall{ position:fixed; z-index:10020; pointer-events:none; transform:rotate(var(--tr, 0deg)); animation:tackFall .46s cubic-bezier(.5,0,.9,.6) forwards; filter:drop-shadow(0 2px 2px rgba(40,25,10,0.3)); }
.tackFall svg{ display:block; width:100%; height:100%; }
@keyframes tackFall{ 0%{ transform:translateY(0) rotate(var(--tr, 0deg)); opacity:1; } 100%{ transform:translateY(120px) rotate(calc(var(--tr, 0deg) + 70deg)); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pinTack.drop, .thud, .tackFall{ animation:none !important; } .tackFall{ display:none; } }
html[data-a11y-motion="reduce"] .pinTack.drop, html[data-a11y-motion="reduce"] .thud{ animation:none !important; }
html[data-a11y-motion="reduce"] .tackFall{ display:none; }
.pinBadge{ display:none; }

/* ---- the rotation handle (only on the one selected object) ---- */
.rotHandle{ position:absolute; left:-15px; top:-15px; z-index:7; width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:grab; box-shadow:0 1px 4px var(--shadow); touch-action:none; }
.rotHandle:hover, .rotHandle:focus-visible, .rotHandle.on{ color:var(--ink); border-color:var(--accent); }
.rotHandle:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.rotHandle.on{ cursor:grabbing; }
.rotHandle.on::after{ content:attr(data-deg); position:absolute; left:34px; top:50%; transform:translateY(-50%); padding:2px 7px; border-radius:999px; background:var(--ink); color:var(--paper); font:700 0.72rem 'Sora',sans-serif; white-space:nowrap; }
@media (pointer:coarse){ .rotHandle{ width:40px; height:40px; left:-18px; top:-18px; } .rotHandle svg{ width:20px; height:20px; } }
.rotating{ transition:none !important; }
body.multi-sel .rotHandle, body.read-only .rotHandle{ display:none; }
@media print{ .rotHandle{ display:none; } }

/* ---- grouped menus: one level of submenu, opening inline ---- */
.menuSub > .menuItem[aria-expanded="true"]{ background:var(--accent-soft); }
.menuSubBody{ position:fixed; z-index:10030; min-width:200px; padding:6px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 26px var(--shadow); }          /* a flyout beside its row, not an expanding list */
.menuSubBody[hidden]{ display:none; }
.menuItem.disabled, .menuItem:disabled{ opacity:0.5; cursor:default; }
.menuItem.disabled:hover, .menuItem:disabled:hover{ background:none; }

/* ---- Legal & policies rows: a small Stick-It icon, then the words, then the arrow ---- */
.asAction.hasIco{ justify-content:flex-start; gap:12px; }
.asAction.hasIco .lbl{ flex:1 1 auto; text-align:start; }
.asAction.hasIco .go{ margin-inline-start:auto; }
.ccIco{ flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent-strong); }
.ccIco svg{ width:24px; height:24px; display:block; }
body.dark .ccIco{ color:var(--accent); }

/* ---- links: actions on the link card ---- */
.linkCard{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:8px; align-items:center; }
.linkCard .lcActs{ grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; }
.lcBtn{ min-height:32px; padding:4px 12px; border-radius:8px; border:1px solid var(--field-line); background:var(--field); color:var(--ink); font:600 0.76rem 'Sora',sans-serif; cursor:pointer; }
.lcBtn:hover{ border-color:var(--accent); background:var(--accent-soft); }
.lcBtn.lcVideo{ background:var(--btn-fill); border-color:var(--btn-fill); color:var(--btn-fg); }
.lcBtn.lcVideo:hover{ background:var(--btn-fill-hover); border-color:var(--btn-fill-hover); }
.lcBtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
@media (pointer:coarse){ .lcBtn{ min-height:44px; padding:8px 16px; } }

/* ---- delete: one restrained destructive language (the whole note never turns red) ---- */
:root{ --destructive:#b3261e; --destructive-soft:rgba(179,38,30,0.13); --destructive-press:rgba(179,38,30,0.26); }
body.dark{ --destructive:#ff8a80; --destructive-soft:rgba(255,138,128,0.18); --destructive-press:rgba(255,138,128,0.32); }
.del:hover, .del:focus-visible{ background:var(--destructive-soft); color:var(--destructive); opacity:1; transform:scale(1.1); }
.del:active{ background:var(--destructive-press); color:var(--destructive); transform:scale(0.96); }
.del:focus-visible{ outline:2px solid var(--destructive); outline-offset:2px; }
body.dark .note .del:hover, body.dark .note .del:focus-visible{ background:var(--destructive-soft); color:var(--destructive); }
@media (hover:none){ .del:active{ background:var(--destructive-press); color:var(--destructive); opacity:1; } }
.menuItem.danger:hover, .menuItem.danger:focus-visible{ background:var(--destructive-soft); color:var(--destructive); }
.menuItem.danger:hover svg, .menuItem.danger:focus-visible svg{ color:var(--destructive); }
.menuItem.danger:active{ background:var(--destructive-press); }
.shopObj .shDel:hover, .shopObj .shDel:focus-visible{ background:var(--destructive-soft); color:var(--destructive); }

/* ---- embedded video: a physical card on the board ---- */
.embedObj{ border-radius:3px; border-color:color-mix(in srgb, var(--line) 80%, #000 10%); padding:8px 8px 6px; background:#fffdf5; box-shadow:0 1px 2px rgba(60,45,10,0.3), 0 8px 18px rgba(60,45,10,0.16); }
body.dark .embedObj{ background:#27232f; box-shadow:0 1px 2px rgba(0,0,0,0.6), 0 8px 18px rgba(0,0,0,0.45); }
.embedObj::before{ content:""; position:absolute; top:-9px; left:50%; width:64px; height:18px; transform:translateX(-50%) rotate(-2deg); background:rgba(255,246,196,0.8); border:1px solid rgba(120,100,40,0.2); pointer-events:none; }
body.dark .embedObj::before{ background:rgba(242,234,219,0.22); border-color:rgba(255,255,255,0.12); }
.embedObj .embHead{ padding:2px 2px 6px; font-size:0.66rem; opacity:0.8; }
.embedObj .embFrame{ border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,0.25); }
.embedObj .embFoot{ padding:6px 2px 0; font-size:0.68rem; opacity:0.75; }
.embedObj .embFoot:hover, .embedObj .embFoot:focus-within{ opacity:1; }
.embedObj .pCtl.pMore{ top:-14px; right:-14px; } .embedObj .pHandle{ right:-10px; bottom:-10px; }
/* v0.8.3.2: invite e-mails as pills */
.pillField{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 8px; border:1.5px solid var(--line, #d8cfa8); border-radius:10px; background:var(--card, #fffdf4); min-height:44px; cursor:text; }
.pillField:focus-within{ outline:2px solid var(--sel-ring, #8f5710); outline-offset:1px; }
.pillField.bad{ border-color:#b3261e; }
.collabDlg .pillField input.pillIn{ flex:1 1 140px; width:auto; min-width:120px; border:0; outline:0; background:transparent; font:inherit; padding:4px 2px; color:inherit; }
.pillField .pill{ display:inline-flex; align-items:center; gap:2px; max-width:100%; padding:2px 4px 2px 10px; border-radius:999px; background:color-mix(in srgb, var(--accent-soft, #f3e3b0) 80%, transparent); border:1px solid var(--line, #d8cfa8); font-size:0.82rem; }
.pillField .pill > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pillField .pillX{ width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer; font-size:1.1rem; line-height:1; }
.pillField .pillX:hover{ background:rgba(0,0,0,0.1); }
.collabDlg .inviteRow{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.collabDlg .asHint.err{ color:#b3261e; }

/* ===== Central layer scale (v0.8.3.3). Every full-screen surface takes its z-index from here, so a dialog can never again sit under a system space.
   canvas < zones < objects < object chrome < selection < floating board controls < toasts / status pills < system-space chrome (Done, Trash, pile browser, readers)
   < modal backdrop + modal (Settings, share, collaboration, confirmations) < tutorial < critical confirmation */
:root{ --z-menu:10095; --z-peer:9990; --z-toast:10029; --z-system:10045; --z-reader:10075; --z-modal:10070; --z-tutorial:10080; --z-critical:10090; }
.acctBackdrop.critical{ z-index:var(--z-critical); }