:root{
  /* Nagent "Film" palette (spec §2); the retailer's accent replaces --accent (store.brandAccent, set by kiosk.js) */
  --g:#0C0C0B; --p:#16150F; --p2:#1F1D18; --fg:#F3F1EC; --mu:#9A968C; --ln:rgba(243,241,236,.12);
  --accent:#FF6B3D; --live:#5B8DEF; --ok:#3FA36B;
  /* older names, kept so every rule follows the palette: --ink is dark text on light or accent surfaces */
  --ink:#0C0C0B; --paper:var(--fg); --paper2:#E6E3DC; --muted:var(--mu); --gold:var(--accent); --gold2:var(--accent);
  --maroon:#7A1F33; --dark:var(--g); --dark2:var(--p2); --line:var(--ln);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--dark);color:var(--paper);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.serif{font-family:'Source Serif 4',Georgia,serif;font-weight:400}
.mono{font-family:'JetBrains Mono',monospace}

.kiosk{position:fixed;inset:0;display:grid}
.kiosk.mirror{grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr)}
.kiosk.counter{grid-template-columns:58% 42%}

.stage{position:relative;overflow:hidden;background:#000}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.brand{position:absolute;left:28px;top:22px;z-index:2}
.brand .name{font-family:'Source Serif 4',serif;font-size:34px;letter-spacing:.01em}
.brand .sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);margin-top:2px}
.privacy{position:absolute;left:28px;bottom:18px;z-index:2;font-size:12px;color:rgba(243,241,236,.7);display:flex;gap:8px;align-items:center;background:rgba(12,12,11,.55);padding:6px 12px;border-radius:99px;backdrop-filter:blur(6px)}
.privacy i{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80}
.hint{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:2;background:rgba(12,12,11,.7);padding:8px 16px;border-radius:99px;font-size:15px}
.wearing{position:absolute;left:28px;top:96px;z-index:2;display:flex;flex-direction:column;gap:6px}
.wearing span{background:rgba(12,12,11,.62);backdrop-filter:blur(6px);padding:6px 12px;border-radius:10px;font-size:13px;display:flex;gap:8px;align-items:center}
.wearing b{font-weight:600}
.wearing button{opacity:.6;font-size:15px}

/* influencer */
.stylist{position:absolute;right:24px;top:22px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:12px;max-width:min(440px,46%)}
.orb{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#FFD2BF,var(--accent) 55%,#5a2412);display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:'Source Serif 4',serif;font-size:40px;box-shadow:0 0 0 8px rgba(255,107,61,.14);transition:box-shadow .2s}
.orb.talking{animation:pulse 1s ease-in-out infinite}
.orb.thinking{animation:spin 1.6s linear infinite;background:conic-gradient(from 0deg,#FFD2BF,var(--accent),#5a2412,#FFD2BF)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 8px rgba(255,107,61,.14)}50%{box-shadow:0 0 0 22px rgba(255,107,61,.06)}}
@keyframes spin{to{transform:rotate(360deg)}}
.bubble{background:rgba(22,21,15,.92);color:var(--paper);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--ln),0 20px 40px -20px rgba(0,0,0,.6);padding:14px 18px;border-radius:18px 4px 18px 18px;font-size:18px;line-height:1.35;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.you{background:rgba(12,12,11,.7);color:var(--paper);padding:8px 14px;border-radius:14px 14px 4px 14px;font-size:14px;max-width:100%}

/* side / bottom panel */
.panel{background:var(--dark);display:flex;flex-direction:column;gap:14px;padding:18px 22px;min-height:0;min-width:0}
.counter .panel{padding:26px 28px;overflow:hidden}
.row{display:flex;gap:12px;align-items:center}
.who{display:flex;align-items:center;gap:14px;justify-content:space-between}
.who .hi{font-size:20px}
.who .meta{font-size:13px;color:rgba(243,241,236,.6)}
.meter{height:8px;border-radius:99px;background:rgba(243,241,236,.1);overflow:hidden;margin-top:6px;width:220px}
.meter i{display:block;height:100%;background:var(--gold);border-radius:99px}

.label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,236,.5)}
.rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.counter .rail{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:max-content;overflow-y:auto;flex:1;min-height:0;align-content:start}
.card{flex:0 0 150px;background:var(--dark2);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);text-align:left;transition:transform .15s,box-shadow .15s;position:relative}
.card:active{transform:scale(.97)}
.card.on{box-shadow:0 0 0 2px var(--gold)}
.card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#F3EDE3}
.mirror .card img{aspect-ratio:3/4}
.card .t{padding:8px 10px 10px;font-size:12.5px;line-height:1.25}
.card .p{font-weight:600;font-size:13px;margin-top:3px}
.card .oos{position:absolute;top:8px;left:8px;background:rgba(12,12,11,.8);font-size:10px;padding:3px 7px;border-radius:6px}

.look{display:flex;align-items:center;gap:12px;background:var(--dark2);border-radius:14px;padding:10px 12px;box-shadow:0 0 0 1px var(--line)}
.look .thumbs{display:flex;gap:6px;flex:1;overflow:hidden}
.look .thumbs img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#F3EDE3}
.look .total{font-size:18px;font-weight:600}
.btn{padding:12px 18px;border-radius:12px;background:rgba(243,241,236,.08);font-size:15px;font-weight:500;white-space:nowrap}
.btn.gold{background:var(--gold);color:var(--ink);font-weight:600}
.btn.ghost{box-shadow:inset 0 0 0 1px var(--line)}
.btn:disabled{opacity:.4}

.ask{display:flex;gap:10px;align-items:center}
.ask input{flex:1;background:var(--dark2);border:0;border-radius:14px;padding:16px 18px;color:var(--paper);font:inherit;font-size:17px;box-shadow:0 0 0 1px var(--line);outline:none;-webkit-user-select:text;user-select:text}
.mic{width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.mic.live{background:#E5484D;color:#fff;animation:pulse 1s infinite}
.mic svg{width:24px;height:24px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 12px;border-radius:99px;background:rgba(243,241,236,.07);font-size:13px;box-shadow:inset 0 0 0 1px var(--line)}

.qr{position:absolute;right:24px;bottom:24px;z-index:3;background:var(--paper);color:var(--ink);border-radius:18px;padding:14px;display:flex;gap:14px;align-items:center;max-width:360px;box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.qr .code{width:112px;height:112px;flex:none}
.qr .code svg{width:100%;height:100%}
.qr b{display:block;font-size:16px;margin-bottom:4px}
.qr span{font-size:13px;color:#5f574d;line-height:1.35}
.qr a{color:var(--maroon);font-size:12px}
.counter .qr{position:static;max-width:none;box-shadow:none}

.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;background:var(--paper);color:var(--ink);border-radius:22px;padding:28px 34px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);min-width:340px;animation:pop .25s ease-out}
.toast .big{font-family:'Source Serif 4',serif;font-size:44px;line-height:1.05}
.toast .small{font-size:15px;color:#5f574d;margin-top:8px}
@keyframes pop{from{transform:translate(-50%,-46%);opacity:0}}

.attract{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(circle at 50% 40%,rgba(255,107,61,.22),rgba(12,12,11,.94) 60%);text-align:center;padding:40px;cursor:pointer}
.attract .t{font-family:'Source Serif 4',serif;font-size:clamp(44px,6vw,88px);line-height:1.02;max-width:900px}
.attract .t em{color:var(--gold2)}
.attract .s{font-size:20px;color:rgba(243,241,236,.7)}
.attract .orb{width:140px;height:140px;font-size:64px}
.attract .trendstrip{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.attract .trendstrip .label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,236,.6)}
.attract .trendstrip .chips{justify-content:center}
.attract .chip.trend{font:inherit;font-size:clamp(17px,1.8vw,22px);padding:12px 22px;color:var(--fg);cursor:pointer;border:0;background:rgba(243,241,236,.08);box-shadow:inset 0 0 0 1px rgba(255,107,61,.55)}
.attract .chip.trend:active{background:rgba(255,107,61,.25)}

.foot{display:flex;gap:10px;justify-content:space-between;align-items:center}
.brainTag{font-size:11px;color:rgba(243,241,236,.4)}

.tabs{display:flex;gap:8px}
.tab{padding:8px 14px;border-radius:99px;font-size:13px;box-shadow:inset 0 0 0 1px var(--line);color:rgba(243,241,236,.7)}
.tab.on{background:var(--paper);color:var(--ink);box-shadow:none;font-weight:600}
.reading{position:absolute;left:28px;bottom:58px;z-index:3;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.chipline{background:rgba(12,12,11,.68);backdrop-filter:blur(6px);padding:8px 14px;border-radius:99px;font-size:14px;display:flex;gap:8px;align-items:center}
.chipline b{color:var(--gold2);font-weight:600}
.chipline .dot{width:8px;height:8px;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px var(--gold2)}
.btn.glass{background:rgba(12,12,11,.62);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(243,241,236,.25)}
.mirror .reading{bottom:72px}

.studio{position:fixed;inset:0;z-index:30;background:rgba(10,9,8,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px}
.studio .sheet{background:var(--paper);color:var(--ink);border-radius:24px;padding:32px;max-width:900px;width:100%;box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.studio .big{font-size:44px;line-height:1.05;margin-bottom:12px}
.studio p{font-size:17px;line-height:1.5;color:#4b443b;margin:0 0 18px}
.studio .small{font-size:13px;color:#7b7368}
.studio .btn.ghost{box-shadow:inset 0 0 0 1px rgba(22,19,15,.2);color:var(--ink)}
.studio .result{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
.studio .result img{width:100%;border-radius:16px;display:block;max-height:70vh;object-fit:cover}
.studio .qrbig{width:150px;height:150px;margin:6px 0 10px}
.studio .qrbig svg{width:100%;height:100%}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,107,61,.25);border-top-color:var(--gold);animation:spin 1s linear infinite}

.scan{position:fixed;inset:0;z-index:25;pointer-events:none}
.scan.consent,.scan.done{background:rgba(10,9,8,.6);backdrop-filter:blur(6px);display:grid;place-items:center;pointer-events:auto}
.scan .sheet{background:var(--paper);color:var(--ink);border-radius:24px;padding:32px;max-width:620px;width:92%}
.scan .sheet .big{font-size:42px;line-height:1.05;margin-bottom:12px}
.scan .sheet p{font-size:17px;line-height:1.5;color:#4b443b;margin:0 0 18px}
.scan .btn.ghost{box-shadow:inset 0 0 0 1px rgba(22,19,15,.2);color:var(--ink)}
.coach{position:absolute;left:50%;top:22px;transform:translateX(-50%);background:rgba(12,12,11,.82);backdrop-filter:blur(8px);color:var(--paper);border-radius:22px;padding:18px 26px;min-width:380px;text-align:center;pointer-events:auto;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.coach .count{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--gold2)}
.coach .title{font-size:34px;margin:6px 0 12px}
.coach .bar{height:8px;border-radius:99px;background:rgba(243,241,236,.15);overflow:hidden}
.coach .bar i{display:block;height:100%;background:var(--gold2);transition:width .1s linear}
.coach .tip{font-size:14px;margin-top:10px;color:rgba(243,241,236,.75)}
.coach .link{margin-top:10px;font-size:13px;color:rgba(243,241,236,.6);text-decoration:underline}
.coach .spinner{margin:8px auto 0}
.readrows{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:4px 0 16px}
.readrows div{display:flex;justify-content:space-between;border-bottom:1px solid rgba(22,19,15,.1);padding:6px 0;font-size:15px;gap:10px}
.readrows span{color:#6E655A}

.combo{display:flex;gap:8px;pointer-events:auto}

.wearing span{font-size:14px}
.mini{padding:5px 9px;border-radius:8px;font-size:12px;background:rgba(243,241,236,.12);opacity:1!important}
.mini.rm{background:rgba(229,72,77,.25)}
.mini.all{background:rgba(12,12,11,.72);backdrop-filter:blur(6px);padding:8px 12px;font-size:13px;align-self:flex-start;box-shadow:inset 0 0 0 1px rgba(243,241,236,.25)}
.onbadge{position:absolute;left:6px;right:6px;top:6px;background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:600;padding:4px 6px;border-radius:6px;text-align:center}

.nocam{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px;background:#14110E}
.nocam .serif{font-size:40px}
.nocam p{max-width:460px;color:rgba(243,241,236,.75);font-size:17px;line-height:1.45}
.real{position:absolute;inset:0;z-index:6;background:#0E0C0A;display:flex;align-items:center;justify-content:center}
.real img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} /* fills the stage like the live mirror; the shopper is centred */
.real .bar{position:absolute;left:20px;right:20px;bottom:20px;display:flex;gap:10px;align-items:center;justify-content:flex-end}
.real .tag{margin-right:auto;background:rgba(12,12,11,.7);padding:8px 12px;border-radius:99px;font-size:13px}
.real .center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.real .center .serif{font-size:34px}
.real .center p{color:rgba(243,241,236,.7)}
.real .btn.ghost{box-shadow:inset 0 0 0 1px var(--line);color:var(--paper)}

.who-for .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.who-for .btn{padding:16px;font-size:17px}
.tab.sec{background:var(--gold);color:var(--ink);box-shadow:none;font-weight:600}

.know .count{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;color:#8E8478;margin-bottom:6px}
.know .opts{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 22px}
.know .opt{padding:12px 16px;border-radius:99px;font-size:16px;box-shadow:inset 0 0 0 1.5px rgba(22,19,15,.18);color:var(--ink)}
.know .opt.on{background:var(--ink);color:var(--paper);box-shadow:none}

/* prices and offers */
.card .p s{font-weight:400;color:rgba(243,241,236,.45);margin-left:4px;font-size:12px}
.card .offer{position:absolute;right:8px;top:8px;background:var(--maroon);color:var(--paper);font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.card.on .offer{top:34px}
.wearing s.was{opacity:.55;font-size:12px}
.wearing .offer-chip{font-style:normal;font-size:11px;font-weight:600;background:var(--maroon);padding:2px 6px;border-radius:6px}
.look .total{text-align:right;line-height:1.15}
.look .thumbs{min-width:96px}
.look .total .disc{font-size:11.5px;font-weight:500;color:var(--gold2);max-width:210px;white-space:normal}
.look .total .disc s{color:rgba(243,241,236,.45)}

.markets{display:flex;gap:6px;margin-top:8px}
.markets .mk{padding:4px 10px;border-radius:99px;font-size:12px;color:inherit;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);opacity:.7}
.markets .mk.on{opacity:1;background:rgba(255,107,61,.22);box-shadow:inset 0 0 0 1px rgba(255,107,61,.6)}

/* the run strip: real agent steps, blue while working, green when done */
.runstrip{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.runstrip .run{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.02em;color:var(--paper);background:rgba(22,21,15,.82);backdrop-filter:blur(6px);padding:6px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--ln)}
.runstrip .dot{width:7px;height:7px;border-radius:50%;flex:none}
.runstrip .dot.live{background:var(--live);animation:livepulse 1.2s ease-in-out infinite}
.runstrip .dot.done{background:var(--ok)}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(91,141,239,.55)}50%{box-shadow:0 0 0 5px rgba(91,141,239,0)}}
/* one-tap replies and today's mood rows */
.replies{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.reply{padding:9px 14px;border-radius:99px;font-size:14px;background:rgba(22,21,15,.82);backdrop-filter:blur(6px);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ln)}
.reply.on{background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 0 0 0 1px var(--accent)}
.moodrows{display:flex;flex-direction:column;gap:8px;align-items:flex-end;margin-top:4px}
.moodrows .label{color:var(--mu)}

/* help me decide: two pieces side by side, the stylist's pick outlined in the accent */
.compare{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(12,12,11,.55);backdrop-filter:blur(3px);padding:28px}
.compare .sheet{position:relative;background:var(--p);color:var(--paper);border-radius:14px;padding:26px;width:min(720px,100%);box-shadow:inset 0 0 0 1px var(--ln),0 40px 100px -30px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:14px}
.compare .x{position:absolute;right:14px;top:12px;font-size:18px;opacity:.7}
.compare .label{color:var(--mu)}
.compare .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare .pc{position:relative;background:var(--p2);border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--ln)}
.compare .pc.pick{box-shadow:0 0 0 2px var(--accent)}
.compare .pc img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#F3EDE3}
.compare .pc .tag{position:absolute;left:8px;top:8px;background:var(--accent);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:4px;font-weight:600}
.compare .pc .t{padding:10px 12px;font-size:15px}
.compare .pc .p{font-weight:600;margin-top:3px}
.compare .why{font-family:'Source Serif 4',serif;font-size:21px;line-height:1.35}
.compare .replies.left{justify-content:flex-start}
.compare .go{border-radius:8px;padding:14px;font-size:16px}
.reply.just{background:transparent}
/* live avatar (mirror): replaces the orb while live; laid out but invisible while connecting so the SDK can attach */
.stylist .face{width:230px;height:300px;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,107,61,.35),0 18px 50px rgba(0,0,0,.45)}
.stylist .face.connecting{position:absolute;right:0;top:0;opacity:0;pointer-events:none}
.stylist .face.live{animation:facein .45s ease-out}
.stylist .face video{width:100%;height:100%;object-fit:cover;display:block}
.orb.hidden{display:none}
.attract img.still{width:180px;height:180px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 8px rgba(255,107,61,.14)}
@keyframes facein{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* who are we styling: four choices in a 2×2 grid, "Prefer not to say" underneath */
.who-for .choices.five{grid-template-columns:1fr 1fr}
.who-for .skip{margin-top:10px;width:100%;background:transparent}
.nocam .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
/* the actions under the reading wrap inside the camera area instead of running off the edge */
.reading{right:28px}
.reading .row{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.reading .row .btn{white-space:nowrap}
/* the look row wraps (thumbs, "+ Add what I'm wearing", total, pay) instead of pushing the pay button off the panel */
.look{flex-wrap:wrap;row-gap:8px}
.look .btn{white-space:nowrap}
.look .thumbs{min-width:96px;flex:1 1 120px}

/* ---------- phones (the website demo on a mobile): the camera first, the shop below it ---------- */
@media (max-width: 700px) {
  .kiosk.mirror, .kiosk.counter { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .kiosk .panel { max-height: 46vh; overflow-y: auto; padding: 10px 12px 12px; gap: 10px; }
  .kiosk .qr { display: none; }                         /* "scan to be remembered" means nothing on the phone itself */
  .attract { gap: 12px; padding: 0 16px; }
  .attract .t { font-size: clamp(28px, 8.4vw, 40px); }
  .attract .s { font-size: 15px; }
  .attract .orb { width: 76px; height: 76px; font-size: 36px; }
  .attract .chip.trend { font-size: 15px; padding: 9px 14px; }
  .attract .trendstrip .label { font-size: 11px; }
  .reading { left: 12px; right: 12px; bottom: 12px; gap: 6px; }
  .reading .chipline { font-size: 12px; }
  .reading .row .btn { padding: 8px 12px; font-size: 13px; }
  .stylist { right: 12px; top: 12px; max-width: 70%; }
  .who-for .btn { padding: 12px; font-size: 15px; }
}
@media (max-width: 700px) {
  .kiosk .panel > * { flex-shrink: 0; }                  /* a capped, scrolling panel must not squeeze its rows to nothing */
  .kiosk .rail, .counter .rail { display: flex; flex: none; overflow-x: auto; overflow-y: hidden; min-height: 0; }
  .kiosk .rail .card { flex: 0 0 132px; width: 132px; }
}
@media (max-width: 700px) {
  .stylist .face { width: 96px; height: 124px; border-radius: 16px; }   /* the live presenter as a small portrait, not a wall */
  .stylist { gap: 8px; max-width: 78%; }
  .reading .chipline { display: none; }                                  /* the face/body readout is for the big screen */
  .reading .row { max-height: 92px; overflow: hidden; }
}
@media (max-width: 700px) {
  .stage:has(.moodrows) .reading { display: none; }      /* one thing at a time: mood chips first, then the actions */
  .moodrows .chip { font-size: 13px; padding: 7px 11px; }
  .privacy { left: 8px; right: 8px; bottom: 6px; font-size: 10.5px; line-height: 1.3; padding: 6px 9px; }
  .reading { bottom: 54px; }
}

/* ---------- phones, round two (6 Nov audit): a clear camera, one conversation, the shop underneath ----------
   The camera shows the shopper and what they're wearing, plus the stylist's latest line. Everything you tap lives in
   the panel below it, and the ask bar stays pinned at the bottom like a messaging app. */
.who-for .btn.choice{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(22,19,15,.22);font-weight:500}
.who-for .btn.choice:active{background:var(--ink);color:var(--paper)}
.demo-by{color:rgba(243,241,236,.6);text-decoration:none}
.demo-by u{color:var(--fg);text-underline-offset:3px}
@media (max-width: 700px) {
  .kiosk.mirror, .kiosk.counter { grid-template-rows: minmax(0, 1fr) auto; }
  .kiosk .panel { max-height: 50dvh; padding: 10px 12px 0; gap: 10px; }
  /* the store's name: one quiet line, clear of the stylist */
  .brand { left: 14px; top: 12px; right: 70px; }
  .brand .name { font-size: 21px; line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
  .brand .sub { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; color: rgba(243,241,236,.75); }
  .brand .markets { display: none; }
  /* the stylist talks from the foot of the camera, like a chat: small face or orb, then the line */
  .stylist { top: auto; left: 12px; right: 12px; bottom: 34px; max-width: none; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
  .stylist .orb { width: 36px; height: 36px; font-size: 17px; flex: none; order: 0; box-shadow: none; }
  .stylist .face { width: 64px; height: 84px; border-radius: 12px; flex: none; order: 0; }
  .stylist .bubble { order: 1; flex: 1 1 0; min-width: 0; font-size: 14.5px; line-height: 1.35; padding: 9px 12px; border-radius: 4px 14px 14px 14px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .stylist .you { order: 2; flex-basis: 100%; font-size: 13px; text-align: right; background: transparent; padding: 0 4px; color: rgba(243,241,236,.7); }
  .stylist .runstrip, .stylist .replies, .stylist .combo { order: 3; flex-basis: 100%; justify-content: flex-start; align-items: flex-start; }
  .stylist .replies { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .stylist .reply { flex: none; font-size: 13px; padding: 7px 12px; }
  .stylist .combo .btn { padding: 8px 12px; font-size: 13px; }
  /* what's on: one compact strip under the name */
  .wearing { left: 12px; right: 12px; top: 50px; gap: 6px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .wearing span { font-size: 12.5px; padding: 5px 6px 5px 10px; gap: 6px; }
  .wearing .mini { padding: 4px 8px; font-size: 11.5px; }
  .wearing .mini.go-real { background: var(--accent); color: var(--ink); font-weight: 600; padding: 7px 11px; font-size: 12.5px; }
  .wearing .mini.all { padding: 6px 10px; font-size: 12px; }
  .privacy { left: 12px; right: auto; bottom: 8px; font-size: 10.5px; padding: 4px 9px; background: rgba(12,12,11,.45); }
  .reading, .stage .moodrows { display: none; }
  .hint { top: auto; bottom: 120px; font-size: 13px; padding: 6px 12px; white-space: nowrap; }
  /* the panel: today's mood and the camera actions as swipeable rows, then the shop */
  .panel .moodrows { flex-direction: row; align-items: center; gap: 6px; margin: 0 -12px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .panel .moodrows::-webkit-scrollbar, .panel .actions::-webkit-scrollbar, .panel .chips::-webkit-scrollbar { display: none; }
  .panel .moodrows .label { flex: none; font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--mu); margin-left: 4px; }
  .panel .moodrows .replies { flex-wrap: nowrap; gap: 6px; }
  .panel .moodrows .reply { flex: none; font-size: 13px; padding: 7px 12px; background: var(--p2); backdrop-filter: none; }
  .panel .actions { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
  .panel .actions .btn { flex: none; padding: 8px 12px; font-size: 13px; border-radius: 99px; backdrop-filter: none; }
  .panel .actions .btn.glass { background: var(--p2); box-shadow: inset 0 0 0 1px var(--ln); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tab { flex: none; }
  .look.empty { display: none; }
  .look { padding: 8px 10px; }
  .look .label { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; width: auto !important; }
  .look .btn { padding: 9px 12px; font-size: 13.5px; }
  .panel .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
  .panel .chips .chip { flex: none; }
  /* the ask bar: always reachable */
  .panel .ask { position: sticky; bottom: 0; z-index: 2; background: var(--g); margin: 0 -12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 18px -10px rgba(0,0,0,.8); order: 99; }
  .panel .foot { order: 98; }
  .ask input { padding: 12px 14px; font-size: 16px; } /* 16px stops iOS zooming in on focus */
  .mic { width: 46px; height: 46px; }
  .foot .chip { padding: 6px 10px; font-size: 12px; }
  /* sheets fit a phone */
  .studio { padding: 12px; align-items: end; }
  .studio .sheet, .scan .sheet { padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px; }
  .studio .big, .scan .sheet .big { font-size: 30px; }
  .studio p, .scan .sheet p { font-size: 15px; }
  .studio .result { grid-template-columns: 1fr; gap: 14px; }
  .studio .result img { max-height: 52vh; }
  .studio .qrbig { display: none; }
  .real .bar { left: 10px; right: 10px; bottom: 10px; flex-wrap: wrap; justify-content: flex-start; }
  .real .bar .tag { flex-basis: 100%; margin: 0; font-size: 12px; }
  .real .bar .btn { padding: 9px 12px; font-size: 13.5px; }
  .compare { padding: 10px; align-items: flex-end; }
  .compare .sheet { padding: 18px; }
  .compare .why { font-size: 17px; }
  .nocam .serif { font-size: 28px; }
  .nocam p { font-size: 15px; }
  .toast { min-width: 0; width: calc(100% - 32px); padding: 20px; }
  .toast .big { font-size: 30px; }
  /* the welcome: no shop showing through behind it */
  .attract .s { font-family: inherit; }
  .attract .trendstrip .label { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
}
@media (max-width: 700px) {
  .wearing { top: 60px; }
  .foot { gap: 8px; }
  .foot .chip { white-space: nowrap; flex: none; }
  .foot .brainTag { flex: 1; min-width: 0; text-align: center; font-size: 11px; line-height: 1.3; }
  .look .thumbs > span { display: none; }
  /* the accent is kept for the two things that act: "See it for real" and the mic */
  .tab.sec { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .panel .actions .btn.gold { background: var(--p2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
}
@media (max-width: 700px) {
  /* the whole answer, never cut off: it scrolls inside the bubble once it's long */
  .stylist .bubble { display: block; -webkit-line-clamp: unset; max-height: 8.2em; overflow-y: auto; overscroll-behavior: contain; }
}