@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Space+Grotesk:opsz,wght@12..40,400;12..40,500;12..40,600;12..40,700&display=swap');
:root { --ink:#f1efe8; --muted:#98958f; --line:#343436; --panel:#1a1a1c; --night:#101011; --acid:#e32636; } * { box-sizing:border-box; } html { background:var(--night); } body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 88% 13%,#26262a 0,transparent 29rem),var(--night); font-family:"Space Grotesk",Arial,sans-serif; } button,a { font:inherit; } button { cursor:pointer; }
.app { width:min(100%,860px); min-height:100vh; margin:auto; padding:20px clamp(16px,4vw,36px) 22px; } .topbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:23px; border-bottom:1px solid var(--line); } .brand { color:var(--ink); text-decoration:none; font-size:13px; font-weight:700; letter-spacing:-.03em; } .brand-mark { margin-right:8px; color:var(--acid); font-size:17px; vertical-align:-1px; } .reset { padding:7px 0; border:0; color:var(--muted); background:transparent; font-size:12px; } .reset:hover { color:var(--acid); }
.studio { max-width:650px; margin:0 auto; } .intro { padding:42px 0 27px; } .kicker { margin:0 0 9px; color:var(--acid); font:10px/1.2 "DM Mono",monospace; letter-spacing:.12em; } h1 { margin:0; font-size:clamp(39px,9vw,68px); font-weight:700; letter-spacing:-.085em; line-height:.88; } h1 em { color:var(--acid); font-style:normal; } .intro > p:last-child { max-width:380px; margin:20px 0 0; color:var(--muted); font-size:14px; line-height:1.45; }
.category-picker { margin-bottom:11px; } .category-picker-label { display:flex; justify-content:space-between; padding:0 2px 8px; color:var(--muted); font:9px/1 "DM Mono",monospace; letter-spacing:.08em; } .category-picker-label span:last-child { color:var(--acid); font-size:14px; line-height:7px; } .category-picker-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:0 2px 14px; } .category-picker-heading .kicker { margin-bottom:4px; } .category-picker-heading h2 { margin:0; font-size:25px; letter-spacing:-.07em; line-height:.95; } #category-help { max-width:160px; margin:0; color:var(--muted); text-align:right; font-size:11px; line-height:1.25; } .category-tabs { display:flex; border:1px solid var(--line); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; touch-action:pan-x; } .category-tabs::-webkit-scrollbar { display:none; } .category-tab { display:flex; flex:0 0 88px; min-height:62px; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 4px; border:0; border-right:1px solid var(--line); color:var(--muted); background:#151517; font-size:10px; font-weight:600; letter-spacing:.01em; text-transform:uppercase; scroll-snap-align:start; } .category-tab:last-child { border-right:0; } .category-tab small { color:inherit; font:9px/1 "DM Mono",monospace; } .category-dot { height:8px; color:transparent; font-size:9px; line-height:8px; } .category-dot.is-visible { color:var(--acid); } .category-tab[aria-current="true"] { color:#fff; background:var(--acid); } .category-tab[aria-current="true"] .category-dot.is-visible { color:#fff; }
.preview-shell { border:1px solid var(--line); background:#e8e7e1; } .preview-label,.preview-footer { display:flex; justify-content:space-between; padding:10px 12px; color:#464641; background:#d5d4ce; font:9px/1 "DM Mono",monospace; letter-spacing:.08em; } .artboard { position:relative; aspect-ratio:1/.62; overflow:hidden; background:#f5f4ef; isolation:isolate; } .artboard::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,transparent 24%,rgba(0,0,0,.025) 72%); pointer-events:none; z-index:5; } .layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .preview-footer { align-items:center; background:#e7e6df; } .drag-icon { font-size:16px; line-height:8px; } .proceed { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:17px 18px; color:#fff; background:var(--acid); font-weight:700; text-decoration:none; } .proceed span { font-size:22px; line-height:12px; }
.picker { padding:27px 0 4px; overflow:hidden; } .variant-label { display:none; } .option-track { display:flex; gap:10px; padding:1px max(1px,calc((100% - 164px)/2)) 12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; touch-action:pan-x; } .option-track::-webkit-scrollbar { display:none; } .option { position:relative; flex:0 0 164px; height:127px; scroll-snap-align:center; overflow:hidden; border:1px solid var(--line); color:var(--ink); background:var(--panel); text-align:left; } .option:hover { border-color:#898987; } .option[aria-pressed="true"] { border-color:var(--acid); box-shadow:0 0 0 1px var(--acid); } .option-visual { height:89px; background:#edede8; } .option-visual img { width:100%; height:100%; object-fit:contain; } .option-copy { display:flex; align-items:center; justify-content:space-between; height:37px; padding:0 10px; font-size:12px; } .option-copy span:last-child { color:var(--acid); opacity:0; } .option[aria-pressed="true"] .option-copy span:last-child { opacity:1; } .option.none .option-visual { display:grid; place-items:center; color:#5a5a5c; font:10px "DM Mono",monospace; } .swipe-hint { display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; } .swipe-hint span { width:30px; height:1px; background:var(--line); } .swipe-hint span:last-child { width:auto; height:auto; background:transparent; color:var(--acid); font-size:15px; line-height:9px; }
.footer { display:flex; justify-content:space-between; gap:14px; padding-top:40px; color:#686865; font:9px/1.2 "DM Mono",monospace; letter-spacing:.05em; }
@media (min-width:720px) {
  .app { width:min(100%,1320px); padding:28px clamp(28px,4vw,60px) 34px; }
  .studio { display:grid; grid-template-columns:minmax(165px,.62fr) minmax(190px,.8fr) minmax(380px,1.55fr); column-gap:clamp(16px,2.5vw,38px); align-items:start; max-width:none; }
  .intro { grid-column:1 / -1; padding:54px 0 38px; }
  .category-picker { grid-column:1; grid-row:2; margin:0; }
  .picker { grid-column:2; grid-row:2; padding:0; }
  .preview-shell { grid-column:3; grid-row:2; position:sticky; top:24px; }
  .artboard { aspect-ratio:1 / .78; }
  .category-tabs { display:flex; max-height:460px; flex-direction:column; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; }
  .category-tab { flex:0 0 58px; min-height:58px; font-size:10px; scroll-snap-align:start; }
  .variant-label { display:block; margin:0 0 10px; color:var(--muted); font:9px/1 "DM Mono",monospace; letter-spacing:.08em; }
  .option-track { display:flex; max-height:460px; flex-direction:column; gap:8px; padding:0 8px 0 0; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; touch-action:pan-y; }
  .option { width:100%; height:112px; flex:0 0 112px; scroll-snap-align:start; }
  .option-visual { height:76px; }
  .swipe-hint { display:flex; justify-content:flex-start; padding-top:10px; }
  .swipe-hint span { width:22px; }
  .category-picker-heading { padding-bottom:14px; }
}
@media (max-width:719px) { .variant-label { display:none; } }
@media (max-width:390px) { .footer { flex-direction:column; } .option { flex-basis:156px; } }
/* Primary action below the complete configurator. */
.studio > .proceed { grid-column:1 / -1; justify-content:center; gap:24px; width:100%; text-align:center; text-transform:uppercase; margin-top:24px; }

.background-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}.background-picker>span{font:10px "DM Mono",monospace;letter-spacing:.06em}.background-picker>div{display:flex;gap:8px}.background-picker button{display:flex;align-items:center;gap:7px;min-height:38px;padding:8px 12px;border:1px solid var(--line);background:var(--night);color:var(--ink);font-size:12px}.background-picker button[aria-pressed="true"]{border-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid)}.background-picker button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.swatch{display:block;width:15px;height:15px;border:1px solid #999;border-radius:50%}.swatch.white{background:#fff}.swatch.black{background:#000}