/* Layout: one narrow column like the rulebook page on blueprint paper: white linework, pale-blue notes, drafting-pencil yellow for the timer and the Best Invention. Single committed look in both app themes. */
:root{
  --paper:#1E4F8F; --grid:rgba(255,255,255,.07); --grid-major:rgba(255,255,255,.14); --card:#18447D; --deep:#123663;
  --ink:#F3F7FC; --graphite:#AFC8E6; --line:#5A82B8;
  --chip:#2B5C9A; --accent:#F5C84A; --accent-soft:#2D5F99; --on-accent:#122C4F; --blue:#F5C84A; --good:#93E6AE; --bad:#FFA392;
  --f-display:"League Spartan","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --f-body:"Crimson Pro",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
input::placeholder{color:var(--graphite);opacity:.8}

*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.45;
  background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:110px 110px,110px 110px,22px 22px,22px 22px;}
.shell{max-width:620px;margin:0 auto;padding-inline:16px;padding-block:12px 40px;display:flex;flex-direction:column;gap:18px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
input{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.05}
p{margin:0}
.label{font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}

/* Top */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mark{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mark h1{font-size:34px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase}
.mark span{font-style:italic;color:var(--graphite);font-size:16px}
.nav{display:flex;gap:6px}
.nav button{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-family:var(--f-display);font-weight:600;font-size:14px}
.nav button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Generic blocks */
.panel{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--graphite)}
.small{font-size:15px}
.btn{border:none;border-radius:12px;padding:12px 18px;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.02em;background:var(--ink);color:var(--paper)}
.btn.big{width:100%;padding:16px 18px;font-size:18px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.amber{background:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.icon-btn{border:1.5px solid var(--line);background:var(--card);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;flex:none}
.icon-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Flow strip */
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
.flow div{display:flex;flex-direction:column;gap:2px;padding:8px 1px;border-top:3px solid var(--line);min-width:0}
.flow b{font-family:var(--f-display);font-size:clamp(9px,2.65vw,13px);font-weight:700;letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.flow small{font-family:var(--f-mono);font-size:clamp(8.5px,2.5vw,11px);color:var(--graphite);white-space:nowrap}
.flow div.on{border-top-color:var(--accent)}
.flow div.done{border-top-color:var(--ink)}
.flow div.done b,.flow div.on b{color:var(--ink)}
.flow div b{color:var(--graphite)}

/* Seats */
.seat{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line)}
.seat:last-child{border-bottom:none}
.seat .n{font-family:var(--f-mono);font-size:13px;color:var(--graphite);width:22px;flex:none}
.seat .nm{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.seat .nm em{font-weight:400;color:var(--graphite);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px dashed var(--line);background:transparent;border-radius:999px;padding:5px 12px;font-size:16px}

/* Parts */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.part{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.part svg{width:40px;height:40px}
.part b{font-family:var(--f-display);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.part small{font-size:13px;color:var(--graphite);line-height:1.2}
.part:disabled{opacity:.38;cursor:not-allowed}
.part .who{font-family:var(--f-display);font-size:11px;font-weight:700;color:var(--graphite);text-transform:uppercase;letter-spacing:.06em}
.partline{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.partline:last-child{border-bottom:none}
.partline svg{width:26px;height:26px;flex:none}
.partline .nm{flex:1;min-width:0;font-weight:600}
.partline .pt{font-family:var(--f-display);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--graphite)}

/* Prompt */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tab{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--f-display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.tab svg{width:26px;height:26px}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plist{display:flex;flex-direction:column;max-height:340px;overflow-y:auto;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.plist button{background:none;border:none;border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;font-size:17px}
.plist button:last-child{border-bottom:none}
.plist button[aria-pressed="true"]{background:var(--accent-soft);font-weight:600}
.promptcard{border-radius:18px;padding:18px;background:var(--deep);color:var(--ink);border:2px solid var(--ink);box-shadow:inset 0 0 0 4px var(--deep),inset 0 0 0 5px var(--line);display:flex;flex-direction:column;gap:8px}
.promptcard .label{color:var(--accent)}
.promptcard h2{font-size:28px;font-weight:700;line-height:1.1}
.kq{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:17px}

/* Timer */
.timer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.dial{position:relative;width:170px;height:170px;flex:none}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial .face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.dial .face b{font-family:var(--f-mono);font-size:40px;font-weight:700;font-variant-numeric:tabular-nums}
.dial .face small{font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.dial.done .face b{color:var(--bad)}
.tctl{display:flex;flex-direction:column;gap:8px;min-width:140px}
@keyframes flash{0%,100%{opacity:1}50%{opacity:.35}}
.dial.done .face b{animation:flash 1s ease-in-out 3}

/* Big name */
.bigname{font-family:var(--f-display);font-size:40px;font-weight:800;line-height:1;overflow-wrap:anywhere}
.handoff{text-align:center;align-items:center;padding-block:34px}

/* Inventions */
.inv{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);text-align:left;width:100%}
.inv svg{width:30px;height:30px;flex:none}
.inv .t{flex:1;min-width:0;display:flex;flex-direction:column}
.inv .t b{font-family:var(--f-display);font-size:18px;overflow-wrap:anywhere}
.inv .t span{font-size:15px;color:var(--graphite)}
.inv.dq{opacity:.5}
.inv.dq .t b{text-decoration:line-through}
.toggle{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:5px 10px;font-family:var(--f-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;flex:none}
.toggle[aria-pressed="true"]{border-color:var(--bad);color:var(--bad)}

/* Results */
.best{background:var(--accent);color:var(--on-accent);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px}
.best .label{color:var(--on-accent);opacity:.75}
.best h2{font-size:30px;overflow-wrap:anywhere}
.badge{display:inline-block;font-family:var(--f-display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--on-accent);color:var(--accent)}
.tablewrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:14px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
tr:last-child td{border-bottom:none}
th{font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:15px}
td.cq{font-family:var(--f-mono);font-weight:700;font-variant-numeric:tabular-nums}
.pt1{color:var(--good);font-weight:700}

details{border-top:1px dashed var(--line);padding-top:10px}
summary{cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.04em}
.tips{margin:8px 0 0;padding-left:20px;font-size:16px;display:flex;flex-direction:column;gap:4px}
.note{font-style:italic;color:var(--graphite);font-size:16px}
.err{color:var(--bad);font-size:15px}
.foot{text-align:center;font-family:var(--f-display);font-size:12px;letter-spacing:.06em;color:var(--graphite)}
.prof{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px dashed var(--line)}
.prof:last-child{border-bottom:none}
.prof .row{justify-content:space-between}
.carry{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.carry label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--graphite)}
.log{margin:0;padding:0;list-style:none;font-size:15px;display:flex;flex-direction:column;gap:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:420px){.bigname{font-size:32px}.promptcard h2{font-size:24px}.dial{width:150px;height:150px}.dial .face b{font-size:34px}}


/* Online additions: presence dots, turn banner, status toast, call link. */
.dot{width:10px;height:10px;border-radius:50%;flex:none;border:1.5px solid var(--graphite);background:transparent}
.dot.on{background:var(--good);border-color:var(--good)}
.you{font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:2px}
.turn{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px dashed var(--line);border-radius:14px;color:var(--graphite);font-size:17px}
.turn.mine{border:2px solid var(--accent);color:var(--ink);background:var(--deep)}
.turn .pulse{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:min(560px,calc(100% - 32px));background:var(--deep);border:1.5px solid var(--bad);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:16px;display:flex;gap:10px;align-items:center;z-index:5}
.toast button{background:none;border:none;color:var(--graphite);font-family:var(--f-display);font-weight:700}
.calllink{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--deep);border:1.5px solid var(--line);text-decoration:none;color:var(--ink)}
.calllink b{font-family:var(--f-display);font-size:15px;letter-spacing:.04em}
.calllink span{font-size:14px;color:var(--graphite);overflow-wrap:anywhere;min-width:0}
textarea{font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-width:0;resize:vertical;min-height:84px;font-size:17px}
textarea::placeholder{color:var(--graphite);opacity:.8}
textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.mypart{display:flex;align-items:center;gap:12px}
.mypart svg{width:48px;height:48px;flex:none}
.mypart b{font-family:var(--f-display);font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.pitchtext{white-space:pre-wrap;font-size:18px;border-left:3px solid var(--accent);padding-left:12px}
.inv.mine{border-color:var(--accent);border-width:2px;background:var(--deep)}
.statuschips{display:flex;flex-wrap:wrap;gap:6px}
.sc{font-family:var(--f-display);font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;border:1.5px solid var(--line);color:var(--graphite)}
.sc.in{border-color:var(--good);color:var(--good)}
.center{text-align:center;align-items:center}


/* Home and Profiles additions */
.modes{display:grid;grid-template-columns:1fr;gap:12px}
.mode{display:flex;flex-direction:column;gap:10px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px;color:var(--ink);width:100%}
.mode:hover{border-color:var(--ink)}
.mode .head{display:flex;align-items:center;gap:12px}
.mode .head svg{width:40px;height:40px;flex:none;color:var(--accent)}
.mode h2{font-size:26px}
.mode p{font-size:17px;color:var(--graphite)}
.mode .status{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.mode .status.hot{color:var(--accent)}
.mode .go{align-self:flex-start;margin-top:2px}
.hero{display:flex;flex-direction:column;gap:6px;padding-block:6px}
.hero p{font-size:19px;max-width:34em}
select{font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;max-width:100%}
select:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.split{font-size:14px;color:var(--graphite)}
.linkrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--graphite)}
.modebar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}


/* Shared additions for editions */
.chal{font-size:16px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
svg.tile{border-radius:24%;padding:6px;color:#1E1645}
.part svg.tile,.mypart svg.tile,.mode .head svg.tile{padding:8px}
.partline svg.tile{padding:4px}
a.mode{text-decoration:none;color:var(--ink)}
a.mode[aria-current="page"]{border-color:var(--accent)}

/* ===== Make a Difference: playful sky-blue and pink, with a purple dark mode =====
   Layout: same single column; flat sky ground, white cards, indigo ink, pink actions, yellow flags. */
:root[data-edition="difference"]{
  --paper:#EAF3FF; --grid:transparent; --grid-major:transparent; --card:#FFFFFF; --deep:#DDE8FF;
  --ink:#1E1645; --graphite:#5E5886; --line:#CFD9F0; --chip:#DDE8FF;
  --accent:#E23E79; --accent-soft:#FDE3EC; --on-accent:#FFFFFF; --blue:#E23E79; --good:#1E8E5A; --bad:#D6334A;
  --flag:#FFC93C; --promo:#2A1F66; --promo-ink:#FFFFFF;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root[data-edition="difference"]{
    --paper:#150F33; --card:#211A4A; --deep:#2B2259; --ink:#F3F0FF; --graphite:#A9A2D6; --line:#352C66; --chip:#2B2259;
    --accent:#FF77A8; --accent-soft:#3A2C6A; --on-accent:#1E0B1C; --blue:#FFD35C; --good:#6CC08E; --bad:#FF7B86;
    --flag:#FFD35C; --promo:#3A2C8A; --promo-ink:#FFFFFF; color-scheme:dark;
  }
}
[data-edition="difference"] body{font-size:17px}
[data-edition="difference"] .mark h1{text-transform:none;font-size:30px;letter-spacing:-.015em}
[data-edition="difference"] .mark span{font-style:normal;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
[data-edition="difference"] .promptcard{background:var(--promo);color:var(--promo-ink);border:none;box-shadow:none}
[data-edition="difference"] .promptcard .label{color:var(--flag)}
[data-edition="difference"] .promptcard .chal{border-top-color:rgba(255,255,255,.25)}
[data-edition="difference"] .best{background:var(--flag);color:#1B1405}
[data-edition="difference"] .best .label{color:#1B1405}
[data-edition="difference"] .best .badge{background:#1B1405;color:var(--flag)}
[data-edition="difference"] .btn{background:var(--ink);color:var(--paper)}
[data-edition="difference"] .btn.amber{background:var(--accent);color:var(--on-accent)}
[data-edition="difference"] .btn.ghost{background:transparent;color:var(--ink)}
[data-edition="difference"] .turn.mine{border-color:var(--accent);background:var(--accent-soft)}
[data-edition="difference"] .turn .pulse{background:var(--accent)}
[data-edition="difference"] .dial [data-t="ring"]{stroke:var(--accent)}
[data-edition="difference"] .flow div.on{border-top-color:var(--accent)}
[data-edition="difference"] .mode .head svg:not(.tile){color:var(--accent)}
[data-edition="difference"] .part small{color:var(--graphite)}
[data-edition="difference"] .you{background:var(--flag);color:#1B1405}
[data-edition="difference"] .calllink{background:var(--deep)}
.dial [data-t="ring"]{stroke:var(--accent)}
.dial circle:first-child{stroke:var(--line)}
[data-edition="difference"] .flow b{font-size:clamp(10px,2.9vw,12px);letter-spacing:0;text-transform:none}

/* Sketch photos and the share sheet */
.sketch{display:block;width:100%;max-height:380px;object-fit:contain;border-radius:12px;background:var(--deep)}
img.thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.best .sketch{background:rgba(0,0,0,.12);max-height:300px}
#sheet{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px}
.sheet-bg{position:absolute;inset:0;background:rgba(10,14,30,.6)}
.sheet{position:relative;background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto}
.sheet > *{flex:none}
.sheet img{width:100%;max-height:58vh;object-fit:contain;border-radius:10px}

/* Mode cards on the Modes page: each one wears its own mode's look, whatever mode you're in */
.mc{gap:12px;overflow:hidden}
.mc .mc-icons{display:flex;gap:10px}
.mc .mc-icons svg{width:34px;height:34px}
.mc .sc{border-color:currentColor;opacity:.85}
.mc .btn.ghost{background:transparent}
a.mode.mc-standard{background:#1E4F8F;color:#F3F7FC;border-color:#5A82B8;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:110px 110px,110px 110px,22px 22px,22px 22px}
.mc-standard h2{font-family:"League Spartan","Avenir Next",sans-serif;font-weight:800;text-transform:uppercase;color:#F3F7FC;letter-spacing:-.01em}
.mc-standard p{font-family:"Crimson Pro",Georgia,serif;font-size:18px;color:#AFC8E6}
.mc-standard .mc-icons{color:#F5C84A}
.mc-standard .sc{color:#F3F7FC}
.mc-standard .small{color:#AFC8E6!important}
.mc-standard .btn.amber{background:#F5C84A;color:#122C4F}
.mc-standard .btn.ghost{color:#F3F7FC;border-color:#5A82B8}
a.mode.mc-standard[aria-current="page"]{border-color:#F5C84A}
a.mode.mc-difference{background:#EAF3FF;color:#1E1645;border-color:#CFD9F0;background-image:none}
.mc-difference h2{font-family:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;font-weight:800;text-transform:none;color:#1E1645;letter-spacing:-.015em}
.mc-difference p{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:17px;color:#5E5886}
.mc-difference .sc{color:#1E1645}
.mc-difference .small{color:#5E5886!important}
.mc-difference .btn{font-family:"Bricolage Grotesque",system-ui,sans-serif}
.mc-difference .btn.amber{background:#E23E79;color:#FFFFFF}
.mc-difference .btn.ghost{color:#1E1645;border-color:#CFD9F0}
a.mode.mc-difference[aria-current="page"]{border-color:#E23E79}

/* Make It bulb logo in the header (Make It mode only) */
.mark{align-items:center}
.logo{display:block;flex:none;width:68px;color:var(--ink);margin:-4px 2px -4px -4px}
.logo svg{display:block;width:100%;height:auto}
[data-edition="difference"] .logo{display:none}
@media (max-width:380px){.logo{width:58px}}
/* Drawing pad, nudge row, turn banner */
.drawsheet{width:min(720px,100%)}
#pad{width:100%;height:auto;aspect-ratio:4/3;background:#fff;border-radius:10px;border:1.5px solid var(--line);touch-action:none;cursor:crosshair;display:block}
.padtools{gap:8px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;background:var(--c);border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--line);padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent)}
.padtools .btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.nudge{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1.5px dashed var(--line);border-radius:12px}
.turnbanner{gap:10px}
.toast.turnbanner{border-color:var(--accent)}
.drawsheet .btn{padding:8px 12px;font-size:14px}
.drawsheet .row{flex-wrap:nowrap;gap:8px}
.drawsheet .padtools{flex-wrap:wrap}
.toast.turnbanner{width:calc(100% - 32px);justify-content:space-between}
.toast.turnbanner span{flex:1}