:root{--ink:#14161a;--sub:#5b6270;--line:#e3e6eb;--soft:#f5f7fa;--pick:#2563eb;--pickbg:#e8f0ff}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit;cursor:pointer}
#intro{max-width:720px;margin:20px auto;padding:0 16px 60px;text-align:center}
#intro h1{font-size:23px;margin:0 0 8px}
#intro p{margin:0 0 16px}
#intro img{display:block;width:min(100%,460px);max-height:70vh;object-fit:contain;margin:0 auto 16px;border:1px solid var(--line)}
#begin,.next{border:0;background:var(--ink);color:#fff;font-weight:600;padding:10px 24px;border-radius:8px}
#begin:disabled,.next:disabled{opacity:.4;cursor:default}
#error{position:fixed;top:4px;right:10px;color:#b42323;background:#fff;z-index:10;margin:0}
.topline{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line)}
.topline h1{font-size:15px;margin:0}
.topline span{color:var(--sub);font-size:12px}
.sticky{position:sticky;top:0;z-index:3;background:#fff}
.context{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
.tag{font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.05em;text-transform:uppercase}
.crop{background-repeat:no-repeat;background-size:calc(640px * var(--s)) calc(1296px * var(--s));background-position:calc(-1px * var(--x) * var(--s)) calc(-1px * var(--y) * var(--s));width:calc(1px * var(--w) * var(--s));height:calc(1px * var(--h) * var(--s));border-radius:3px;flex:none}
.options{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 10px;justify-content:center;padding:6px 12px 76px}
.option{display:flex;align-items:center;gap:6px;padding:3px 7px 3px 3px;border:2px solid transparent;border-radius:8px;background:#fff;text-align:left}
.option:hover{border-color:#bdd0ff}
.option.selected{border-color:var(--pick);background:var(--pickbg)}
.num{width:24px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sub)}
.option.selected .num{color:var(--pick)}
.bottom{position:fixed;bottom:0;left:0;right:0;z-index:4;display:flex;justify-content:center;align-items:center;gap:15px;padding:9px 12px;background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
.bottom label{white-space:nowrap;cursor:pointer}
.picked{font-size:12px;color:var(--sub);min-width:85px}
.done{text-align:center;padding:100px 20px}
.done h1{font-size:23px}
.done strong{display:block;font-size:22px;margin:18px}
@media(max-width:620px){.topline{padding:6px 8px}.topline span{font-size:10px}.options{grid-template-columns:repeat(2,max-content);gap:2px;padding:4px 2px 80px}.option{gap:2px;padding:2px}.num{width:18px;font-size:11px}.bottom{gap:6px;font-size:11px;flex-wrap:wrap}.bottom .next{padding:7px 12px}.picked{min-width:0}}