:root{--bg:#f6f7fb;--card:#fff;--ink:#1c2230;--mute:#667085;--line:#e3e6ee;--brand:#2a5bd7;--good:#16794a;--bad:#b42318;--soft:#eef2ff}
@media (prefers-color-scheme:dark){:root{--bg:#10131b;--card:#181c27;--ink:#e8ebf3;--mute:#9aa3b5;--line:#2a3042;--brand:#6c8cff;--good:#5bd69a;--bad:#ff8a80;--soft:#202843}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand)}
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;max-width:860px;margin:0 auto}
.brand{font-weight:800;font-size:24px;text-decoration:none;color:var(--ink)}.brand img{display:block;height:40px;width:auto}
nav{display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:12px}
nav a{text-decoration:none;color:var(--mute);font-weight:600;padding:7px 14px;border-radius:9px;white-space:nowrap}
nav a:hover{color:var(--ink)}
nav a.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.top{margin-bottom:6px}
@media (max-width:560px){.top{flex-direction:column;align-items:stretch;gap:10px}.brand img{height:34px}nav{width:100%}.navrow{width:100%}nav a{flex:1 1 0;min-width:0;text-align:center;padding:9px 0;font-size:14px}}
@media (max-width:420px){nav{gap:2px;padding:3px}nav a{font-size:13px;border-radius:8px}}
main{max-width:860px;margin:0 auto;padding:0 16px 40px}
.hero{padding:18px 0 8px}@media (min-width:561px){.hero:has(.home-hero){padding:clamp(18px,5vw,64px) 0 clamp(8px,5vw,64px)}}.hero h1{font-size:clamp(26px,5vw,38px);margin:.2em 0;line-height:1.2}
.lede{color:var(--mute);margin:.2em 0 1em}
form{display:flex;gap:8px}
input[type=text]{flex:1;min-width:0;font:inherit;padding:14px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
input[type=text]:focus{outline:none;border-color:var(--brand)}
button,.btn{font:inherit;font-weight:700;padding:12px 18px;border-radius:10px;border:0;background:var(--brand);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
button.alt{background:var(--soft);color:var(--ink)}
.hint,.small{color:var(--mute);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0}
.card h2{margin:.1em 0 .4em;word-break:break-all}.card h3{margin:.1em 0 .5em}
.range{display:flex;gap:10px;justify-content:space-between;margin:10px 0}
.range div{flex:1;text-align:center;padding:10px;border-radius:10px;background:var(--soft)}
.range .mid{background:var(--brand);color:#fff}
.range b{display:block;font-size:clamp(20px,4.5vw,28px)}.lab{font-size:12px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}th{color:var(--mute);font-weight:600;font-size:13px}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.vote{display:flex;gap:8px;flex-wrap:wrap}.vote button{background:var(--soft);color:var(--ink)}.vote button.sel{background:var(--brand);color:#fff}
.tag{font-size:11px;background:var(--soft);padding:2px 8px;border-radius:99px;vertical-align:middle}
.cta{text-align:center;padding:16px 0}
.names{list-style:none;padding:0;margin:10px 0;display:grid;gap:10px}
.names li{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid var(--line);border-radius:12px;font-size:clamp(18px,4.5vw,24px);font-weight:700;cursor:pointer;background:var(--card);word-break:break-all;user-select:none}
.names li .rank{min-width:34px;height:34px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:16px}
.names li.picked{border-color:var(--brand);background:var(--soft)}.names li.picked .rank{background:var(--brand);color:#fff}
.row{display:flex;gap:8px;margin:8px 0}
.good{color:var(--good)}.bad{color:var(--bad)}
.prose h3{margin-top:1em}
footer{max-width:860px;margin:0 auto;padding:10px 16px 30px;color:var(--mute);font-size:13px}
[hidden]{display:none!important}

textarea{width:100%;font:inherit;padding:12px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);resize:vertical}
textarea:focus,select:focus{outline:none;border-color:var(--brand)}
select{font:inherit;padding:10px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
label{display:block;font-weight:600;margin:10px 0 4px}
.share{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
button.alt{background:var(--soft);color:var(--ink)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.steps div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.steps b{display:block;margin-bottom:4px}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--soft);font-size:13px;margin-right:6px}
.streak{font-weight:700}
table.sortable th{cursor:pointer}
.scroll{overflow-x:auto}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}
.range.loading b{animation:pulse 1.2s ease-in-out infinite}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.chips .pill{margin:0}
.bar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}.bar i{display:block;height:100%;background:var(--brand)}

/* ---- hero art (inline SVG on the home page; colours come from these variables, never from style="" attributes) ---- */
:root{--art-ink:#1c2230;--art-robot:#8fb0ff;--art-robot2:#d3dffe;--art-metal:#aab3c5;--art-skin:#f2b88c;--art-tag:#ffd23f;--art-paper:#fff;--art-red:#ff5a5f;--art-green:#2fb577;--art-bg:#e3e9ff;--art-shirt:#f08a5d;--art-hair:#3b2f2f;--art-drop:#8fd3ff;--art-screen:#18204a;--art-mint:#86e3c8;--art-purple:#b8a3ff;--art-peach:#ffc9a8;--art-stamp:#d92d3a}
@media (prefers-color-scheme:dark){:root{--art-ink:#0b0e15;--art-robot:#6c8cff;--art-robot2:#a9bcff;--art-metal:#8791a6;--art-skin:#e0a47a;--art-tag:#ffcf33;--art-paper:#e8ebf3;--art-red:#ff7a7f;--art-green:#4fd49a;--art-bg:#202843;--art-shirt:#e07a4f;--art-hair:#241c1c;--art-drop:#6fc3f0;--art-screen:#0b1030;--art-mint:#52c9a5;--art-purple:#9a84f6;--art-peach:#e6a47c;--art-stamp:#e0434f}}
.hero-art{display:block;width:100%;height:auto;overflow:visible}
.hero-art .s{stroke:var(--art-ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.hero-art .s2{stroke:var(--art-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hero-art .n{fill:none}
.hero-art .f-robot{fill:var(--art-robot)}.hero-art .f-robot2{fill:var(--art-robot2)}.hero-art .f-metal{fill:var(--art-metal)}.hero-art .f-skin{fill:var(--art-skin)}
.hero-art .f-tag{fill:var(--art-tag)}.hero-art .f-paper{fill:var(--art-paper)}.hero-art .f-red{fill:var(--art-red)}.hero-art .f-green{fill:var(--art-green)}
.hero-art .f-bg{fill:var(--art-bg)}.hero-art .f-shirt{fill:var(--art-shirt)}.hero-art .f-hair{fill:var(--art-hair)}.hero-art .f-ink{fill:var(--art-ink)}
.hero-art .f-mint{fill:var(--art-mint)}.hero-art .f-purple{fill:var(--art-purple)}.hero-art .f-peach{fill:var(--art-peach)}.hero-art .f-drop{fill:var(--art-drop)}.hero-art .f-screen{fill:var(--art-screen)}.hero-art .f-glow{fill:var(--art-tag)}
.hero-art .limb-o{fill:none;stroke:var(--art-ink);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.hero-art .limb-i{fill:none;stroke:var(--art-metal);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.hero-art .arm-o{fill:none;stroke:var(--art-ink);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.hero-art .arm-i{fill:none;stroke:var(--art-shirt);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.hero-art text{fill:var(--art-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;text-anchor:middle}
.hero-art text.glow{fill:var(--art-tag)}.hero-art text.stamp{fill:var(--art-stamp)}.hero-art .stamp-line{fill:none;stroke:var(--art-stamp);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.hero-art .f-grey{fill:var(--art-metal);opacity:.55}
.hero-art .soft{opacity:.14}
.hero-art .a-blink{animation:ablink 4.4s infinite;transform-box:fill-box;transform-origin:center}
.hero-art .a-wob{animation:awob 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
.hero-art .a-twk{animation:atwk 1.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.hero-art .a-twk2{animation-delay:.6s}.hero-art .a-twk3{animation-delay:1.2s}
.hero-art .a-bob{animation:abob 3.2s ease-in-out infinite}
.hero-art .a-sweat{animation:asweat 2.6s ease-in infinite;transform-box:fill-box;transform-origin:center}
.hero-art .a-spin{animation:aspin 6s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes ablink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes awob{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes atwk{0%,100%{opacity:.2;transform:scale(.55)}50%{opacity:1;transform:scale(1.15)}}
@keyframes abob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes asweat{0%,60%{opacity:0;transform:translateY(-4px)}70%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@keyframes aspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-art *{animation:none!important}}
.home-hero{display:grid;gap:4px 24px;align-items:center}
@media (min-width:760px){.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.home-hero .art{grid-column:2;grid-row:1/span 3;max-width:none}.home-hero .txt{grid-column:1}}

/* ---- sign-in dialog, account chip ---- */
.modal{position:fixed;inset:0;background:rgba(10,12,20,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal .card{max-width:420px;width:100%;margin:0}
.gbtn{min-height:44px;margin:10px 0;display:flex;justify-content:center}
.modal .card.signin{max-width:320px;text-align:center;padding:22px 20px 16px;border-radius:20px;box-shadow:0 18px 50px rgba(10,12,20,.4)}
.modal .card.signin h3{margin:10px 0 4px;font-size:1.15rem}
.modal .card.signin p{margin:4px 0}
.modal .card.signin .row{justify-content:center;margin-top:14px}
.si-mark{position:relative;width:56px;height:56px;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--soft)}
.si-mark svg{position:relative;z-index:1}
.si-spin{position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:var(--brand);animation:aspin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.si-spin{animation:none;border-color:var(--brand)}}
.linkish{background:none;border:0;padding:6px;margin-top:6px;color:var(--brand);text-decoration:underline;font:inherit;font-size:.85rem;cursor:pointer}
.navrow{display:flex;align-items:center;gap:10px}
.navrow nav{flex:1 1 auto}
.chip{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;font-size:14px;color:var(--ink);background:var(--soft);padding:6px 12px;border-radius:99px;white-space:nowrap}
.badge{background:var(--bad);color:#fff;border-radius:99px;font-size:12px;padding:0 7px;line-height:18px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:6px 0}.kv dt{color:var(--mute)}.kv dd{margin:0;word-break:break-word}
button.danger{background:var(--bad);color:#fff}
label.inline{display:flex;gap:8px;align-items:center;font-weight:500}
ul.plain{list-style:none;padding:0;margin:6px 0}ul.plain li{padding:6px 0;border-bottom:1px solid var(--line)}
/* humans card and range bar (phase 4) */
:root{--bar-robot:#8a94a8;--bar-human:#2a5bd7}
@media (prefers-color-scheme:dark){:root{--bar-robot:#7d879b;--bar-human:#6c8cff}}
.humans .gap{font-weight:700;margin:10px 0}
.humans .range .mid{background:var(--bar-human)}
.humans .msg{min-height:1.2em}
.humans label.inline{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:10px 0}
.rangebar{width:100%;height:auto;display:block}
.rangebar .bar-robot{fill:var(--bar-robot)}.rangebar .bar-human{fill:var(--bar-human)}
.rangebar .bar-mid{stroke:var(--ink);stroke-width:2}
.rangebar .bar-lab{fill:var(--ink);font-size:11px;font-family:inherit}
.barbox{margin:12px 0}

/* selling (phase 5) */
label>input[type=text]{display:block;width:100%;margin-top:4px}
label.inline>input[type=text]{width:auto}
.listing .row{margin-top:12px}
.msgtext{white-space:pre-wrap;display:block;margin:4px 0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--chip,rgba(127,127,127,.15));padding:1px 5px;border-radius:5px;word-break:break-all}
form.slim{display:flex;gap:8px;margin:0 0 16px}

/* guides */
.guide{max-width:700px;margin:0 auto;padding-top:14px}
.guide h1{font-size:clamp(28px,5.5vw,40px);line-height:1.15;margin:.2em 0 .25em}
.guide .dek{font-size:19px;color:var(--mute);margin:.2em 0 .6em;line-height:1.45}
.guide .byline{color:var(--mute);font-size:14px;margin:0 0 1.4em}
.guide .crumbs{background:none;padding:0;display:block}.guide .crumbs a{padding:0;font-size:14px;color:var(--brand)}
.guide h2{font-size:clamp(21px,4vw,26px);line-height:1.25;margin:1.7em 0 .5em}
.guide p,.guide li{font-size:17.5px;line-height:1.62}
.guide p{margin:.8em 0}
.guide .answer{background:var(--soft);border-radius:12px;padding:14px 16px;margin:1em 0}
.guide .answer p{margin:.3em 0}
.guide figure{margin:1.4em 0}.guide figcaption{color:var(--mute);font-size:14px;line-height:1.45;margin-top:6px}
.guide table{margin:1em 0}
.guide .related ul{padding-left:20px;margin:.4em 0 .8em}.guide .related li{font-size:16px}
.chart{width:100%;height:auto;display:block}
.chart .cl,.chart .cv{fill:var(--ink);font:15px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.chart .cl{fill:var(--mute)}
.chart .cb{fill:var(--brand)}.chart .cb2{fill:var(--bar-robot,#7d879b)}
.gcard{display:block;text-decoration:none;color:var(--ink)}.gcard h2{word-break:normal;font-size:20px}.gcard p{color:var(--mute);margin:.2em 0 0}
.gcard:hover{border-color:var(--brand)}

/* footer sits at the bottom of the window even when the page is short.
   Auto side margins on a column flex item shrink it to its content, so every centred block also gets width:100%. */
html{height:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>.top,body>main,body>footer{width:100%}
body>main{flex:1 0 auto}

/* more room for the hero art. The hero breaks out of the 860px column on wide screens and the art takes the bigger share. */
.home-hero .art{max-width:none;margin:0 -10px;width:calc(100% + 20px)}
@media (min-width:760px){
  .hero:has(.home-hero){width:min(1080px,100vw - 32px);margin-left:50%;transform:translateX(-50%)}
  .home-hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px 36px}
  .home-hero .art{margin:0;width:100%}
}

/* the 3D-illustrated drafts (E to H). Gradient stops take their colour from classes, so light and dark both work without style="" */
:root{
  --d-line:#2a2f45;--d-shadow:#1c2230;--d-floor:#dfe5fb;--d-floor2:#c9d2f5;--d-hi:#ffffff;
  --d-robot-hi:#c7d6ff;--d-robot:#7f9dfb;--d-robot-lo:#4b63c9;
  --d-metal-hi:#eef1f7;--d-metal:#b4bccb;--d-metal-lo:#7a8399;
  --d-gold-hi:#fff2a8;--d-gold:#ffc93c;--d-gold-lo:#d9901a;
  --d-red-hi:#ffb3b5;--d-red:#ff5a5f;--d-red-lo:#b8262c;
  --d-skin-hi:#ffd9bd;--d-skin:#f0b088;--d-skin-lo:#c97d55;
  --d-shirt-hi:#ffb08a;--d-shirt:#f07d4f;--d-shirt-lo:#b84f28;
  --d-hair-hi:#6b5250;--d-hair:#3b2f2f;--d-hair-lo:#1e1616;
  --d-paper-hi:#ffffff;--d-paper:#f3f5fb;--d-paper-lo:#c8cee0;
  --d-mint-hi:#c9f7e8;--d-mint:#6fdcbc;--d-mint-lo:#2f9e7f;
  --d-purple-hi:#ddd2ff;--d-purple:#a58cff;--d-purple-lo:#6a4fd1;
  --d-wood-hi:#e7b98a;--d-wood:#b97f4e;--d-wood-lo:#7b4c2a;
  --d-screen:#141a3a;--d-screen-lo:#070a1c;--d-glow:#ffd23f;--d-ink:#1c2230;--d-cyan:#7fe3ff
}
@media (prefers-color-scheme:dark){:root{
  --d-line:#05070d;--d-shadow:#000;--d-floor:#1e2540;--d-floor2:#161b30;--d-hi:#ffffff;
  --d-robot-hi:#a9bdff;--d-robot:#5d7ef0;--d-robot-lo:#30449c;
  --d-metal-hi:#d5dae6;--d-metal:#8c95a9;--d-metal-lo:#525b70;
  --d-paper-hi:#f4f6fb;--d-paper:#dde2ee;--d-paper-lo:#a3abc0;
  --d-screen:#0b1030;--d-screen-lo:#03050f
}}
.hero-art .d-line{stroke:var(--d-line);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-art .d-line-b{stroke:var(--d-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hero-art .d-none{fill:none}
.hero-art .d-shadow{fill:var(--d-shadow)}
.hero-art .d-hi{fill:var(--d-hi)}
.hero-art .d-ink{fill:var(--d-ink)}
.hero-art .d-screen{fill:var(--d-screen)}
.hero-art .d-glowtext{fill:var(--d-glow)}
.hero-art text.d-glowtext{fill:var(--d-glow)}
.hero-art text.d-cyan{fill:var(--d-cyan)}
.hero-art .d-cyanf{fill:var(--d-cyan)}
.hero-art .d-goldf{fill:var(--d-gold)}
.hero-art .d-redf{fill:var(--d-red)}
.hero-art .d-greenf{fill:var(--art-green)}
.hero-art .d-tube-o{fill:none;stroke:var(--d-line);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.hero-art .d-tube-m{fill:none;stroke:var(--d-metal);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.hero-art .d-tube-h{fill:none;stroke:var(--d-metal-hi);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.hero-art .d-skin-o{fill:none;stroke:var(--d-line);stroke-width:15;stroke-linecap:round}
.hero-art .d-skin-m{fill:none;stroke:var(--d-skin);stroke-width:10;stroke-linecap:round}
.hero-art .d-shirt-m{fill:none;stroke:var(--d-shirt);stroke-width:10;stroke-linecap:round}
.hero-art .d-glowstroke{stroke:var(--d-glow);stroke-width:6;stroke-linejoin:round;opacity:.3}
.hero-art .d-cyan-s{fill:none;stroke:var(--d-cyan);stroke-width:4;stroke-linecap:round}
.hero-art .d-purple-m{fill:none;stroke:var(--d-purple);stroke-width:10;stroke-linecap:round}
.hero-art .st-hi{stop-color:var(--d-hi)}
.hero-art .st-shadow{stop-color:var(--d-shadow)}
.hero-art .st-floor{stop-color:var(--d-floor)}.hero-art .st-floor2{stop-color:var(--d-floor2)}
.hero-art .st-robot-hi{stop-color:var(--d-robot-hi)}.hero-art .st-robot{stop-color:var(--d-robot)}.hero-art .st-robot-lo{stop-color:var(--d-robot-lo)}
.hero-art .st-metal-hi{stop-color:var(--d-metal-hi)}.hero-art .st-metal{stop-color:var(--d-metal)}.hero-art .st-metal-lo{stop-color:var(--d-metal-lo)}
.hero-art .st-gold-hi{stop-color:var(--d-gold-hi)}.hero-art .st-gold{stop-color:var(--d-gold)}.hero-art .st-gold-lo{stop-color:var(--d-gold-lo)}
.hero-art .st-red-hi{stop-color:var(--d-red-hi)}.hero-art .st-red{stop-color:var(--d-red)}.hero-art .st-red-lo{stop-color:var(--d-red-lo)}
.hero-art .st-skin-hi{stop-color:var(--d-skin-hi)}.hero-art .st-skin{stop-color:var(--d-skin)}.hero-art .st-skin-lo{stop-color:var(--d-skin-lo)}
.hero-art .st-shirt-hi{stop-color:var(--d-shirt-hi)}.hero-art .st-shirt{stop-color:var(--d-shirt)}.hero-art .st-shirt-lo{stop-color:var(--d-shirt-lo)}
.hero-art .st-hair-hi{stop-color:var(--d-hair-hi)}.hero-art .st-hair{stop-color:var(--d-hair)}.hero-art .st-hair-lo{stop-color:var(--d-hair-lo)}
.hero-art .st-paper-hi{stop-color:var(--d-paper-hi)}.hero-art .st-paper{stop-color:var(--d-paper)}.hero-art .st-paper-lo{stop-color:var(--d-paper-lo)}
.hero-art .st-mint-hi{stop-color:var(--d-mint-hi)}.hero-art .st-mint{stop-color:var(--d-mint)}.hero-art .st-mint-lo{stop-color:var(--d-mint-lo)}
.hero-art .st-purple-hi{stop-color:var(--d-purple-hi)}.hero-art .st-purple{stop-color:var(--d-purple)}.hero-art .st-purple-lo{stop-color:var(--d-purple-lo)}
.hero-art .st-wood-hi{stop-color:var(--d-wood-hi)}.hero-art .st-wood{stop-color:var(--d-wood)}.hero-art .st-wood-lo{stop-color:var(--d-wood-lo)}
.hero-art .st-screen{stop-color:var(--d-screen)}.hero-art .st-screen-lo{stop-color:var(--d-screen-lo)}
.hero-art .st-glow{stop-color:var(--d-glow)}
.hero-art .st-clear{stop-color:var(--d-hi);stop-opacity:0}
.hero-art .st-glow-clear{stop-color:var(--d-glow);stop-opacity:0}
.hero-art .st-shadow-clear{stop-color:var(--d-shadow);stop-opacity:0}
.hero-art .a-pulse{animation:apulse 1.6s ease-in-out infinite}
.hero-art .a-pulse2{animation-delay:.8s}
@keyframes apulse{0%,100%{opacity:.35}50%{opacity:1}}
.hero-art .a-float{animation:afloat 3.6s ease-in-out infinite}
@keyframes afloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Phones (B, 2026-10-24, "phone overlap 1"): the headline starts 74% down the art in a 58% wide column, on the page background at 85% opacity,
   its top edge just under the yellow price tag. Row 1 is the part of the art above the headline (the art is 65% of its width tall and bleeds 10px each
   side), the art spans rows 1-2, the H1 sits in row 2 column 1, so the lede starts below whichever ends lower. .txt{display:contents} makes the H1 and
   lede grid items; .art{align-self:start} stops the base rule centring the art, which would move the overlap at every width. */
@media (max-width:759px){
  .home-hero{container-type:inline-size;grid-template-columns:58% 1fr;grid-template-rows:calc(.67 * (65cqw + 13px)) auto;gap:0}
  .home-hero .art{grid-column:1/-1;grid-row:1/3;align-self:start}
  .home-hero .txt{display:contents}
  .home-hero h1{grid-column:1;grid-row:2;align-self:start;position:relative;z-index:1;margin:0 0 0 -16px;padding:10px 14px 12px 16px;background:color-mix(in srgb,var(--bg) 85%,transparent);border-top-right-radius:18px}
  .home-hero .lede,.home-hero form,.home-hero .hint{grid-column:1/-1}
  .home-hero .lede{margin-top:12px}
}

/* forms made of labelled fields stack (the global form{display:flex} is for the one-line appraise box) */
form:has(>label){flex-direction:column;align-items:stretch}
form:has(>label) :is(input,select,textarea){flex:none;width:100%;font:inherit;padding:10px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
form:has(>label) label{font-weight:600}
form:has(>label) label>:is(input,textarea){display:block;margin-top:4px;font-weight:400}
details.delete-acct{margin-top:18px}details.delete-acct>summary{cursor:pointer;color:var(--mute);font-size:.85rem;text-decoration:underline;list-style:none}details.delete-acct>summary::-webkit-details-marker{display:none}details.delete-acct[open]>summary{margin-bottom:10px}
.dnsfound{overflow-x:auto;margin:.6rem 0}
.dnsfound code{word-break:break-all}
.dnsfound td,.dnsfound th{vertical-align:top}
/* ---- avatar menu in the header ---- */
.acct{position:relative}
.acct summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;position:relative;border-radius:99px}
.acct summary::-webkit-details-marker{display:none}
.acct summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.avatar img{width:36px;height:36px;display:block;object-fit:cover}
.avatar.anon{background:var(--soft);color:var(--mute);border:1px solid var(--line)}
.avatar.anon svg{fill:currentColor}
.acct summary .badge{position:absolute;top:-4px;right:-6px}
.acct .menu{position:absolute;right:0;top:44px;z-index:40;min-width:240px;max-width:min(320px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 8px 28px rgba(10,12,20,.22)}
.acct .menu .who{display:flex;flex-direction:column;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;word-break:break-word}
.acct .menu a,.acct .menu button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;text-align:left;text-decoration:none;color:var(--ink);background:none;border:0;font:inherit;font-size:15px;padding:9px 10px;border-radius:8px;cursor:pointer}
.acct .menu a:hover,.acct .menu button:hover{background:var(--soft)}
.acct .menu button.btn{background:var(--brand);color:#fff;justify-content:center;font-weight:600;margin:6px 0}
.acct .menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.tag.good{background:var(--good-bg,#e3f3e6);color:var(--good-fg,#14602a)}
.tag.warn{background:var(--warn-bg,#fdf0d5);color:var(--warn-fg,#7a4a00)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.good{background:#1e3a28;color:#9fdcb0}:root:not([data-theme="light"]) .tag.warn{background:#473713;color:#f1cf8a}}
:root[data-theme="dark"] .tag.good{background:#1e3a28;color:#9fdcb0}:root[data-theme="dark"] .tag.warn{background:#473713;color:#f1cf8a}
.proofs{margin:8px 0 12px}.proofs details.proof{border:1px solid var(--line,#ddd);border-radius:8px;padding:8px 12px;margin:8px 0}
.proofs details.proof>summary{cursor:pointer}
.reqbox{margin:8px 0}
details.sold-box{margin-top:14px}details.sold-box>summary{cursor:pointer;color:var(--mute)}
#portfolio{margin-top:12px}#portfolio>summary{cursor:pointer}
.stack>*{margin-top:8px}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:12px}
.filters label{display:flex;flex-direction:column;font-size:.85rem;color:var(--mute);gap:3px}
.filters input[type=text],.filters select{font-size:1rem}
.filters .checks,.filters .row{grid-column:1/-1}
.filters .checks{display:flex;flex-wrap:wrap;gap:6px 16px}
@media (min-width:720px){.filters{grid-template-columns:2fr 1fr 1fr 1fr 1.4fr}}
.cats a{white-space:nowrap}
.lrows{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.lhead{display:none}
.lrow{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px}
.lrow .lname{grid-column:1/-1;display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.lrow .dn{font-weight:700;font-size:1.05rem}
.lnum{display:flex;flex-direction:column}.lnum .lab{font-size:.72rem;color:var(--mute);text-transform:uppercase;letter-spacing:.03em}
@media (min-width:720px){
  .lhead{display:grid;grid-template-columns:1fr 130px 130px 150px;gap:10px;padding:0 14px;color:var(--mute);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
  .lhead div:not(:first-child){text-align:right}
  .lrows{gap:0}.lrow{border:0;border-bottom:1px solid var(--line);border-radius:0;grid-template-columns:1fr 130px 130px 150px;align-items:start}
  .lrow .lname{grid-column:auto}.lrow .lnum{text-align:right}.lrow .lnum .lab{display:none}
}
.pager{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.pager a,.pager b{padding:6px 10px;border-radius:8px}.pager b{background:var(--soft)}
.filters label.inline{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:.9rem}
.filters input[type=checkbox]{width:auto;flex:none;margin:0}

/* v2.19.0: home featured strip, nudges */
.featured h3{margin-top:0}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0}
.ftile{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;padding:10px;text-decoration:none;color:inherit;min-width:0;overflow-wrap:break-word}
.ftile:hover{border-color:var(--accent,currentColor)}
.ftile .fn{font-size:.9rem}
@media (min-width:720px){.ftile .fn{font-size:1rem}}
.ftile .fask{font-weight:700}
.ftile.t5,.ftile.t6{display:none}
@media (min-width:720px){.fgrid{grid-template-columns:repeat(3,1fr)}.ftile.t5,.ftile.t6{display:flex}}
.nudge{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.nudge button{padding:2px 10px;font-size:.85rem}

/* v2.20.0: /offers conversation cards */
.thread{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0}
.thread header .dn{font-weight:700;font-size:1.05rem}
.tmsgs{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tmsgs li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);max-width:92%;overflow-wrap:anywhere}
.tmsgs li.mine{align-self:flex-end;background:var(--chip,rgba(80,100,255,.08))}
.tmsgs li.theirs{align-self:flex-start}
.tmsgs .msgtext{white-space:pre-wrap}
.thread .agreed{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.treply textarea{width:100%;box-sizing:border-box}
.treply .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.thread+.sect,.sect{font-size:1.2rem;margin:22px 0 0}
.tmsgs .linkish{align-self:flex-start}

/* logos (v2.25) */
.lname .ltext{display:flex;flex-direction:column;gap:3px;min-width:0}
.lthumbbox{display:block;flex:none}
.lthumb{display:block;width:100%;max-width:150px;height:auto;aspect-ratio:5/3;object-fit:contain;border:1px solid var(--line);border-radius:8px}
@media (min-width:720px){.lrow.haslogo .lname{flex-direction:row;gap:12px;align-items:flex-start}.lthumb{width:96px}}
.flogo{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:8px;margin-bottom:4px;background:var(--line)}
.lpage{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:5/3;object-fit:contain;border:1px solid var(--line);border-radius:10px;margin:0 0 10px}
.logobox{margin:10px 0;padding:10px;border:1px dashed var(--line);border-radius:10px}
.lpreview{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:5/3;object-fit:contain;border:1px solid var(--line);border-radius:8px;margin:6px 0}
.lpreview.none{display:flex;align-items:center;padding:10px;border-style:dashed;max-width:420px;aspect-ratio:auto}
.filebtn{cursor:pointer;display:inline-block;text-align:center}
.btn.alt{background:var(--soft);color:var(--ink)}
.logobox .row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.logobox .row>*{margin:0;flex:1 1 140px;align-self:stretch;display:flex;align-items:center;justify-content:center;text-align:center}
.mdlogo{width:60px;height:36px;object-fit:cover;border-radius:6px;vertical-align:middle;margin-right:8px;border:1px solid var(--line)}