:root{--paper:#f1ece0;--ink:#1c1c1a;--mute:#6f6a5e;--line:#d9d2c0;--w:1280px}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font:16px/1.45 Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
main{flex:1;width:100%;max-width:var(--w);margin:0 auto;padding:0 16px 40px}
footer{padding:24px 16px;color:var(--mute);text-align:center;font-size:14px;border-top:1px solid var(--line)}
.sr{position:absolute;left:-9999px}
.front-h1{font-size:18px;font-weight:600;text-align:center;margin:8px 16px 16px;letter-spacing:.01em}
/* front */
.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 10rem);padding:2rem 16px;gap:5rem}
.logo img,.logo svg{width:min(360px,70vw);height:auto;display:block}
.ask{position:relative;width:min(720px,100%)}
.ask textarea{display:block;width:100%;font:inherit;font-size:19px;padding:14px 140px 14px 16px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);resize:none;border-radius:3px}
.ask button{position:absolute;right:8px;top:8px;bottom:8px;font:inherit;font-size:17px;letter-spacing:.06em;text-transform:uppercase;padding:0 22px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);border-radius:2px;cursor:pointer}
.ask button:hover{background:#000}
.ask-row{position:relative}
.ask-logo{display:block;margin-top:8px;font-size:14px;color:var(--ink)}
.ask-logo input{font:inherit;font-size:13px;max-width:100%}
.ask-err{margin:6px 0 0;font-size:14px;color:#8a1c1c}
.ask.small textarea{font-size:16px;padding:9px 120px 9px 12px}
.ask.small button{font-size:14px;padding:0 14px;top:5px;bottom:5px;right:5px}
/* the Pinterest-like grid: a cell is 1.5x its badge, no frame, no text */
.grid{columns:4 220px;column-gap:2rem}
.grid[data-cols]{columns:auto;display:flex;gap:2rem;align-items:flex-start}
.grid .col{flex:1 1 0;min-width:0}
.cell{display:block;break-inside:avoid;margin:0 0 2rem;padding:20%;background:var(--bg,var(--paper));border-radius:6px;text-decoration:none;
  opacity:0;transition:opacity .35s ease-out}
/* the reveal is the badge's own motion (app.js REVEAL): a cell playing it shows at once, a still fades in */
.cell.in{opacity:1}
.cell.in.m{transition:none}
.cell img{display:block;width:100%;height:auto}
.cell:hover{filter:brightness(.97)}
.cell.on{outline:2px solid var(--ink);outline-offset:2px}
.more{height:1px}
.row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:8px 0 4px}
.row .cell{margin:0;opacity:1;transform:none;padding:12%}
.row figure.cell{position:relative;cursor:pointer}
.row figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
/* bar */
.bar{display:flex;align-items:center;gap:20px;padding:12px 16px;max-width:var(--w);margin:0 auto;width:100%}
.bar .home{display:block;flex:0 0 auto;text-decoration:none;font-weight:bold;letter-spacing:.12em;text-transform:uppercase;font-size:17px}
.bar .home span{display:block;line-height:1.1}.bar .home .wm-top{font-weight:300;font-size:.72em}.bar .home .wm-main{font-weight:bold}
.bar .home img{display:block;height:44px;width:auto}
.bar .ask{flex:1}
/* result */
.state{color:var(--mute);margin:10px 0 0;font-size:14px}
.reframe:empty,.error:empty,.state:empty{display:none}
.reframe{font-style:italic}
.error{color:#8a1c1c}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:12px}
.tiles .tile{position:relative;margin:0;padding:10px;border-radius:6px;background:var(--paper);animation:in .4s ease-out}
.tiles .tile img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.tiles .tile.pending img{opacity:.35}
.tiles .dl{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:center;gap:6px;opacity:0;transition:opacity .2s}
.tiles .tile:hover .dl{opacity:1}
.dl a{font-size:12px;letter-spacing:.05em;text-decoration:none;padding:4px 9px;border:1px solid var(--ink);border-radius:20px;background:var(--paper)}
.dl a:hover{background:var(--ink);color:var(--paper)}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* badge page */
article{max-width:1000px;margin:0 auto}
article h1{font-size:34px;margin:12px 0 4px;letter-spacing:.01em}
.lede{color:var(--mute);margin:0 0 16px}
.stage{padding:6%;background:var(--bg,var(--paper));border-radius:14px;width:fit-content;max-width:100%;margin:0 auto;box-sizing:border-box}
.stage svg{display:block;width:auto;height:60vh;max-width:100%}
.formats{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.btn{font:inherit;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:12px 22px;background:var(--ink);color:var(--paper);border-radius:2px;text-decoration:none}
.btn:hover{background:#000}
.why{color:var(--mute);font-size:14px}
h2{font-size:20px;margin:34px 0 10px}
@media (max-width:600px){.hero{gap:3rem;min-height:calc(100vh - 6rem)}.bar{flex-wrap:wrap}.grid{columns:2 140px}.grid[data-cols]{gap:1rem}.cell{margin-bottom:1rem}}

.morep{text-align:center;margin:8px 0 24px}
.morep .btn{border:0;cursor:pointer}
.cell.pending img{opacity:.35}

/* result page: three across so a badge reads at a size you can judge. His 2026-09-29: the grid starts 3rem under the
 * header, each badge sits in 12% of its tile; a tile reveals (fades up and settles) as it comes into view */
body.result main{padding-top:3rem}
body.result .reframe{margin:0 0 1.5rem}
.result-grid .cell{padding:12%;margin-bottom:1.5rem;transform:translateY(16px) scale(.94);transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.3,1.15)}
.result-grid .cell.in{transform:none}
/* the loader: our own round badge with its ray ring (loader.svg, scripts/shape/loader.run.ts), large while nothing is
 * on the page yet, small at the grid's end while more are coming */
.loading{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:5rem 0 3rem}
.loading[hidden],.coming[hidden]{display:none}
.loading img{width:132px;height:132px}
.loading .state{margin:0}
.loading.stopped img{display:none}
.coming{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.5rem 0 1.5rem;color:var(--mute);font-size:14px}
.coming img{width:40px;height:40px}
@media (prefers-reduced-motion:reduce){.result-grid .cell{transition:none;transform:none}}
/* two rows fit a desktop screen: a tall badge (stacked type) is held to a third of the screen height */
.result-grid .cell img{max-height:32vh;width:auto;max-width:100%;margin:0 auto}
/* badge page: centred copy, the download row under the stage */
article h1,.lede,article h2,.why{text-align:center}
.lede,.why{max-width:720px;margin-left:auto;margin-right:auto}
.stage .play{display:block;width:auto;height:60vh;max-width:100%;object-fit:contain}
.stage [hidden]{display:none!important}
.formats{justify-content:center;margin:18px 0 8px}
.formats .btn{border:0;cursor:pointer;opacity:.8;border-radius:.2rem}
button.cell{font:inherit;border:0;width:100%;cursor:pointer;position:relative;color:inherit}
.row .cell.on{outline:2px solid var(--ink);outline-offset:2px}
.row .cap{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.row[hidden],h2[hidden]{display:none}
/* tooltips: the format and what it is for, after a 2 s hover */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:260px;padding:10px 12px;
  background:var(--ink);color:var(--paper);font-size:13px;line-height:1.4;letter-spacing:0;text-transform:none;text-align:left;border-radius:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);pointer-events:none;z-index:5;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
.tip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink);border-bottom:0;
  pointer-events:none;z-index:5;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
.tip:hover::after,.tip:hover::before,.tip:focus-visible::after,.tip:focus-visible::before{opacity:1;visibility:visible;transition:opacity .15s 2s,visibility 0s 2s}
/* the badge page's other styles: 8 tiles at 60% of the old column width (226 px -> 136 px), four to a row, centred */
.grid.variants{columns:auto;display:grid;grid-template-columns:repeat(4,min(136px,22%));justify-content:center;align-items:center;gap:1.2rem}
.grid.variants .cell{margin:0;padding:12%}
@media (max-width:600px){.grid.variants{gap:.6rem}}
/* debug mode (?debug=1): the template's name on each badge and a flag to report it */
.debug .cell,.debug .stage{position:relative}
.dbg-bar{position:sticky;top:0;z-index:20;margin:0;padding:6px 12px;background:#ffe9a8;color:#1c1c1a;font-size:13px;text-align:center}
.dbg-name{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px/1.3 ui-monospace,monospace;background:rgba(255,255,255,.85);color:#1c1c1a;padding:1px 4px;border-radius:2px;pointer-events:none}
.flag{position:absolute;right:4px;top:4px;z-index:3;width:30px;height:30px;border:0;border-radius:50%;background:#c0392b;color:#fff;font-size:16px;line-height:30px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.flag.done{background:#2e7d32}
.dislike{position:absolute;right:72px;top:4px;z-index:3;width:30px;height:30px;border:0;border-radius:50%;background:#fff;font-size:15px;line-height:30px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25);padding:0}
.dislike.done{background:#c0392b}
.peek-btn{position:absolute;right:38px;top:4px;z-index:3;width:30px;height:30px;border:0;border-radius:50%;background:#1c1c1a;color:#fff;font:italic 700 15px/30px Georgia,serif;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.peek{position:absolute;left:4px;right:4px;top:38px;z-index:4;max-height:70vh;overflow:auto;padding:8px 10px;background:rgba(255,255,255,.97);color:#1c1c1a;font:12px/1.35 ui-sans-serif,system-ui,sans-serif;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.25);text-align:left}
.peek p{margin:0 0 3px;overflow-wrap:anywhere}.peek .dr{font-family:ui-monospace,monospace;font-size:11px;opacity:.8}
.reports .report{display:grid;grid-template-columns:minmax(120px,260px) 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.reports .report .pic svg{width:100%;height:auto;display:block}
.reports .report .note{font-size:18px;margin:0 0 6px}
.reports .report p{margin:4px 0;overflow-wrap:anywhere}
.reports .small{font-size:12px;opacity:.6}

/* accounts (2026-09-28): the small account link in the bar, top right on the front page */
.who{display:flex;align-items:center;gap:14px;flex:0 0 auto;font-size:14px}
.who a{text-decoration:none;border-bottom:1px solid var(--line)}
.who a:hover{border-color:var(--ink)}
.who form{margin:0}
.who.top{position:absolute;top:14px;right:16px;z-index:10}
.who.me:not(.top){position:relative}
.who .avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--ink);color:var(--paper,#fff);display:grid;place-items:center;padding:0;cursor:pointer}
.who .avatar:hover{opacity:.85}
.who .menu{position:absolute;top:42px;right:0;z-index:20;min-width:200px;display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--paper,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.who .menu[hidden]{display:none}
.who .menu .name{font-weight:600}
.who .menu .email{font-size:12px;opacity:.65;margin-top:-8px;word-break:break-all}
.who .menu a,.who .menu .linkish{align-self:flex-start}
.linkish{font:inherit;font-size:14px;background:none;border:0;padding:0;color:inherit;cursor:pointer;border-bottom:1px solid var(--line)}
.linkish:hover{border-color:var(--ink)}
.acct main{max-width:440px}
.acct h1{font-size:30px;margin:24px 0 12px}
.acct-form{display:flex;flex-direction:column;gap:14px;margin:10px 0}
.acct-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--mute)}
.acct-form input{font:inherit;font-size:17px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;color:var(--ink)}
.acct-form .btn,.acct-actions .btn{border:0;cursor:pointer;align-self:flex-start}
.acct-actions{display:flex;gap:12px;align-items:center}
.acct-actions form{margin:0}
.alt{color:var(--mute);font-size:14px}
[hidden]{display:none!important}
/* admin: plain tables in the site's paper and ink */
.admin main{max-width:var(--w)}
.admin h1{font-size:28px;margin:12px 0 8px}
.admin-nav{display:flex;gap:18px;flex:1;font-size:15px}
.admin-nav a{text-decoration:none}
.admin-nav a.on,.days a.on{font-weight:bold;border-bottom:2px solid var(--ink)}
.filter{display:flex;gap:8px;margin:8px 0}
.filter input{font:inherit;padding:6px 10px;border:1px solid var(--ink);border-radius:3px;min-width:260px;background:#fff}
.filter button,.tbl button{font:inherit;font-size:13px;padding:4px 10px;border:1px solid var(--ink);border-radius:3px;background:var(--paper);cursor:pointer}
.tbl button.danger{border-color:#8a1c1c;color:#8a1c1c}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}
.tbl th,.tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:normal;color:var(--mute);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tbl form{display:inline-block;margin:0 4px 4px 0}
.tbl tr.hid td{opacity:.55}
.tbl .thumb{width:84px}.tbl .thumb img{display:block;width:76px;height:56px;object-fit:contain}
.tbl details summary{cursor:pointer;color:var(--mute);font-size:13px}
.tbl details p{margin:3px 0;max-width:560px;overflow-wrap:anywhere}
.tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);border-radius:10px;padding:0 6px}
.nw{white-space:nowrap}.num{text-align:right;font-variant-numeric:tabular-nums}.mute{color:var(--mute)}.small{font-size:12px}
.pager{display:flex;gap:14px;justify-content:center}
.links{font-size:20px;line-height:2}
.days{display:flex;gap:16px;font-size:14px}.days a{text-decoration:none}
.kpis{display:flex;gap:40px;margin:16px 0}
.kpis b{display:block;font-size:34px;font-weight:normal}.kpis span{color:var(--mute);font-size:13px}
.chart{margin:10px 0 24px}.chart svg{display:block;width:100%;height:140px}.chart rect{fill:var(--ink)}.chart rect:hover{fill:#8a1c1c}
.chart figcaption{display:flex;justify-content:space-between;color:var(--mute);font-size:12px;margin-top:4px}
.tiles-a{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.tile h3{font-size:15px;margin:0 0 6px}
.tile table{width:100%;border-collapse:collapse;font-size:13px}
.tile td{padding:3px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.tile td.num{width:60px}
.ret td,.ret th{text-align:right}.ret td:first-child,.ret th:first-child{text-align:left}
@media (max-width:600px){.tbl{display:block;overflow-x:auto}.kpis{gap:20px}.admin-nav{gap:10px}}
.admin .lede{text-align:left;margin:8px 0;max-width:none}
.signup{border:1px solid var(--line);border-radius:12px;padding:28px 30px 24px;max-width:420px;background:var(--paper);color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.2)}
.signup::backdrop{background:rgba(28,28,26,.45)}
.signup h2{margin:0 0 10px;font-size:22px;font-weight:600}
.signup p{margin:0 0 16px}
.signup .acts{display:flex;gap:18px;align-items:center;margin:0}
.signup .x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:24px;cursor:pointer;color:var(--mute)}
.morenote{text-align:center;color:var(--mute)}
table.styles td{font-variant-numeric:tabular-nums}
table.styles tr.zero td{color:#a33}
.hbar{display:inline-block;height:10px;background:var(--ink);vertical-align:middle}
.chips .btn.on{outline:2px solid #c85d31}
table.styles th,table.styles td{padding:4px 18px 4px 0;text-align:left}
.admin-nav a.errs.hot{background:#c0392b;color:#fff;padding:2px 10px;border-radius:12px;font-weight:600;border:0}
table.errors{width:100%;border-collapse:collapse}
table.errors th,table.errors td{padding:6px 10px;text-align:left;vertical-align:top}
table.errors tr.new td{background:#c0392b;color:#fff}
table.errors tr.new a{color:#fff}
table.errors tr.old td{background:#f6dcd8}
table.errors td:last-child{font-family:ui-monospace,monospace;font-size:13px;word-break:break-word}
.ackbar{display:flex;gap:16px;align-items:center;background:#c0392b;color:#fff;padding:10px 14px;border-radius:4px;margin:8px 0}
.ackbar .btn{background:#fff;color:#c0392b;border:0;cursor:pointer}
.chips .btn.hot{background:#c0392b}
/* the result page while it renders (his 2026-09-29): one loader in the middle, the status under it */
/* the loader: 40 rays round an empty centre; a half-circle of light runs clockwise, a quick rise then a slow fade */
.loader{height:auto;color:var(--ink);overflow:visible}
.loading .loader{width:150px}
.coming .loader{width:40px}
.loading.stopped .loader{display:none}
.loader .ray{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:butt;transform-box:fill-box;transform-origin:50% 100%;
  opacity:.1;animation:ray 1.8s linear infinite;animation-delay:calc(var(--k) * 1.8s / 40 - 1.8s)}
@keyframes ray{0%{opacity:.1;transform:scaleY(.92)}7%{opacity:.95;transform:scaleY(1.14)}20%{opacity:.62;transform:scaleY(1.07)}
  35%{opacity:.3;transform:scaleY(.98)}50%,100%{opacity:.1;transform:scaleY(.92)}}
.loader .label{fill:currentColor;opacity:.6}
@media (prefers-reduced-motion:reduce){.loader .ray{animation-duration:3.6s;animation-delay:calc(var(--k) * 3.6s / 40 - 3.6s)}}
/* badge page (his 2026-09-29): the title and the styles heading lead back to the request; the styles at grid size */
a.back{text-decoration:none}
a.back:hover{text-decoration:underline;text-underline-offset:4px}
/* the account page's list of the user's own badges (his 2026-09-30) */
.account main{max-width:var(--w)}
.mine{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;margin:8px 0 24px}
.mine-card{display:flex;flex-direction:column;gap:6px;text-decoration:none}
/* (a preview is the badge on the ground of its first colour, R2302, with 15% of the tile round it, his 2026-09-30) */
.mine-tile{display:block;padding:15%;background:var(--bg,var(--paper));border-radius:6px}
.mine-card img,.mine-wait{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:6px}
.mine-wait{display:grid;place-items:center;color:var(--mute);font-size:13px;background:#ebe5d6}
.mine-card:hover .mine-tile{filter:brightness(.97)}
.mine-text{font-size:14px;line-height:1.35}
.mine-day{font-size:12px;color:var(--mute)}
/* the account page's header: the email, then Change password and Log out (his 2026-09-30) */
.acct-nav{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:14px;flex-wrap:wrap;justify-content:flex-end}
.acct-nav form{margin:0}
.btn.small{font-size:13px;padding:8px 14px;border:0;cursor:pointer}
/* admin analytics (tradmap's dashboard, 2026-09-30): the segment bar and the chart's returning share and visits line */
.seg{font-size:14px;margin:6px 0}.seg .chip{display:inline-block;border:1px solid var(--ink);border-radius:12px;padding:0 8px;text-decoration:none;margin-right:6px}
.kpis{flex-wrap:wrap}
.chart rect.ret{fill:#8a5a2b}.chart polyline.visits{fill:none;stroke:#2e7d32;stroke-width:1.5;vector-effect:non-scaling-stroke}
.chart .lg{display:inline-block;width:9px;height:9px;margin:0 4px 0 10px;background:var(--ink)}.chart .lg.ret{background:#8a5a2b}.chart .lg.vis{background:#2e7d32;border-radius:50%}
.tiles-a .tile h3 .small{font-weight:normal}
.tiles-a .tile td a{text-decoration:none;border-bottom:1px solid var(--line)}