/* V11 stage — the fake browser + re-skinnable sample site.
   Shared by picker-v11-style.html and picker-v11-type.html.
   Base sample CSS serves the 23 "more" styles; the 8 lead energies swap in
   bespoke templates (picker-v11-tpl.js) scoped by .site[data-tpl="..."]. */

.stagewrap{position:sticky;top:18px}
@media (max-width:940px){.stagewrap{position:static}}
.browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 26px 64px -30px rgba(20,18,20,.55);container:stage/inline-size}
.bchrome{display:flex;align-items:center;gap:8px;padding:10px 13px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.bchrome i{width:11px;height:11px;border-radius:50%;background:#cfc7ba}
.bchrome i:nth-child(1){background:#d98b83}.bchrome i:nth-child(2){background:#d9b877}.bchrome i:nth-child(3){background:#88bd93}
.burl{margin-left:8px;font:500 11.5px 'JetBrains Mono',monospace;color:var(--muted);background:var(--paper);border-radius:7px;padding:5px 12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logonote{margin:11px 2px 0;font:400 12px var(--sans);color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.logonote b{color:var(--ink);font-weight:600}
.logotog{border:1px solid var(--edge);background:var(--surface);color:var(--muted);font:600 10.5px var(--sans);padding:4px 10px;border-radius:7px;cursor:pointer;transition:border-color .15s,color .15s}
.logotog:hover{border-color:var(--klein-text);color:var(--klein-text)}
.logotog.on{border-color:var(--klein-text);color:var(--klein-text)}
/* the real <input type=file> is visually hidden, so reflect its keyboard focus on the label (WCAG 2.4.7) */
.logotog:focus-within{border-color:var(--klein-text);color:var(--klein-text);outline:2px solid var(--klein);outline-offset:2px}

.logofile{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.logoclr{border:0;background:none;color:var(--muted);font:600 10.5px var(--sans);padding:2px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.logoclr:hover{color:var(--klein-text)}

/* ---- the re-skinnable site root ---- */
.site{--accent:#B23A2E;--ink:#1A1A18;--paper:#F6F3EC;--paper2:#ECE6D8;--muted:#75706a;--line:rgba(0,0,0,.1);--rad:10px;--heroH:2.05em;--btnrad:8px;--fhead:'Fraunces',serif;--fbody:'Inter',sans-serif;--fmono:'JetBrains Mono',monospace;--headw:600;--headsp:-.01em;--headcase:none;--headstyle:normal;--headsoft:0;--headwonk:0;background:var(--paper);color:var(--ink);position:relative;min-height:430px;overflow:hidden;transition:background .5s ease,color .5s ease}
.site[data-shape="sharp"]{--rad:0;--btnrad:0}
.site[data-shape="soft"]{--rad:18px;--btnrad:14px}
.site[data-shape="pill"]{--rad:22px;--btnrad:999px}
.site[data-dark="1"]{--line:rgba(255,255,255,.09)}

/* shared wordmark (all templates keep .wm/.wdot/.echo) */
.wm{font-family:var(--fhead);font-weight:var(--headw);font-size:20px;letter-spacing:var(--headsp);color:var(--accent);font-variation-settings:"SOFT" var(--headsoft),"WONK" var(--headwonk);position:relative;display:inline-block}
.wm .wdot{color:var(--accent)}
.wm.mark::before{content:"";width:20px;height:20px;border-radius:6px;background:var(--accent);display:inline-block;vertical-align:-4px;margin-right:8px}

.wm-logo{display:inline-block;height:24px;width:auto;max-width:150px;vertical-align:middle;object-fit:contain}
/* ponytail: !important is deliberate, it must beat each template's own .wm font-size rule (higher specificity) so the typeset wordmark collapses when the buyer's logo is shown */
.wm.haslogo{font-size:0 !important;letter-spacing:0}
.wm.haslogo::after{display:none}
.site[data-treat="brutal"] .wm.mark .echo{display:none}
.wm::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.site.play[data-rule="1"] .wm::after{animation:ruleDraw .55s .15s ease forwards}
@keyframes ruleDraw{to{transform:scaleX(1)}}
.wm .echo{display:none}
.site[data-treat="brutal"] .wm .echo{display:inline;position:absolute;left:2px;top:2px;z-index:-1;color:color-mix(in srgb,var(--accent) 60%,#888);width:100%}
.site[data-treat="foil"] .wm{background:linear-gradient(110deg,#b8b8c8,#fff,#ff9ee6,#9ee6ff,#b8b8c8);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:foilShift 5s linear infinite}
@keyframes foilShift{to{background-position:300% 0}}

/* stage-level treatment fixtures (paint behind any template) */
.site[data-treat="glass"]::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 55% at 25% 20%,color-mix(in srgb,var(--accent) 60%,transparent),transparent 70%),radial-gradient(55% 60% at 85% 90%,color-mix(in srgb,var(--accent) 45%,#8ad),transparent 70%),linear-gradient(140deg,#eef2ff,#f7f0ff);background-size:200% 200%;animation:auroraDrift 14s ease-in-out infinite}
@keyframes auroraDrift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
.site[data-treat="aero"]::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#bfe9ff 0%,#eafaff 55%,#f2fbf3 100%)}
.site[data-treat="cyber"]::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1px);background-size:20px 20px}
.spot{display:none}
.site[data-treat="cyber"] .spot{display:block;position:absolute;z-index:1;width:280px;height:280px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent 65%);transform:translate(-50%,-50%);left:50%;top:38%;transition:left .12s,top .12s}

/* ---- base sample (fallback template for the 23 more styles) ---- */
.site .snav{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)}
.snav ul{display:flex;gap:17px;list-style:none;margin:0;padding:0;font-size:11.5px;color:var(--ink);opacity:.72;font-family:var(--fbody)}
@container stage (max-width:430px){.snav ul{display:none}}
.shero{padding:34px 22px 30px;text-align:center;position:relative;z-index:2}
.seyebrow{font:600 10px var(--fmono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.shero h1{font-family:var(--fhead);font-weight:var(--headw);font-size:var(--heroH);line-height:1.08;letter-spacing:var(--headsp);text-transform:var(--headcase);font-style:var(--headstyle);color:var(--ink);margin:12px auto 10px;max-width:16ch;text-wrap:balance;font-variation-settings:"SOFT" var(--headsoft),"WONK" var(--headwonk)}
.shero p{font-family:var(--fbody);font-size:12.5px;line-height:1.5;color:var(--ink);opacity:.68;margin:0 auto 17px;max-width:38ch;text-wrap:pretty}
.scta{display:inline-block;font:600 12px var(--fbody);background:var(--accent);color:var(--paper);padding:11px 22px;border-radius:var(--btnrad);border:0;cursor:pointer}
.sstrip{display:flex;gap:9px;padding:4px 22px 26px;position:relative;z-index:2}
.sxcard{flex:1;background:var(--paper2);border:1px solid var(--line);border-radius:var(--rad);padding:12px 11px;text-align:left}
.sxcard .k{font:600 9px var(--fmono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:.9}
.sxcard .t{font-family:var(--fhead);font-weight:var(--headw);font-size:13px;color:var(--ink);margin:5px 0 3px}
.sxcard .d{font-family:var(--fbody);font-size:10px;line-height:1.4;color:var(--ink);opacity:.6}
.site[data-treat="brutal"] .sxcard{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.site[data-treat="brutal"] .scta{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.site[data-treat="brutal"] .snav{border-bottom:2px solid var(--ink)}
.site[data-tpl="brutal"] .tb-hire{white-space:nowrap}
.site[data-treat="clay"] .sxcard{border:0;box-shadow:6px 6px 14px rgba(0,0,0,.10),-5px -5px 12px rgba(255,255,255,.75);background:color-mix(in srgb,var(--paper) 88%,var(--accent))}
.site[data-treat="clay"] .scta{box-shadow:5px 5px 12px rgba(0,0,0,.16),inset 2px 2px 4px rgba(255,255,255,.4)}
.site[data-treat="clay"] .wm{background:color-mix(in srgb,var(--paper) 82%,var(--accent));padding:5px 12px;border-radius:14px;box-shadow:4px 4px 10px rgba(0,0,0,.12),inset 2px 2px 4px rgba(255,255,255,.6)}
.site[data-treat="glass"] .sxcard,.site[data-treat="glass"] .snav{backdrop-filter:blur(14px);background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.5)}
.site[data-dark="1"] .sxcard{background:color-mix(in srgb,var(--paper) 82%,#000)}
.site[data-treat="editorial"] .shero h1{max-width:16ch}
.folio{display:none}
.site[data-treat="editorial"] .folio{display:block;position:absolute;top:60px;right:20px;z-index:3;font:600 9px var(--fmono);letter-spacing:.14em;color:var(--accent)}
.bokeh{display:none}
.site[data-treat="aero"] .bokeh{display:block;position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.site[data-treat="aero"] .bokeh span{position:absolute;bottom:-30px;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9),rgba(150,220,255,.35));animation:brise linear infinite}
@keyframes brise{to{transform:translateY(-480px)}}
.specline{display:none;position:absolute;z-index:3;font:600 8.5px var(--fmono);letter-spacing:.1em;color:var(--accent);border-left:2px solid var(--accent);padding-left:6px}
.site[data-treat="spec"] .specline{display:block}
.specline.a{top:56px;left:20px}.specline.b{top:96px;right:20px;text-align:right;border-left:0;border-right:2px solid var(--accent);padding:0 6px 0 0}

/* ---- entry motion: base sample ---- */
.site.play .shero>*{opacity:0}
.site.play[data-motion="settle"] .shero>*{animation:settleIn .8s ease forwards}
.site.play[data-motion="settle"] .shero h1{filter:blur(6px);animation:settleBlur .9s ease forwards}
.site.play[data-motion="snap"] .shero>*{animation:snapIn .01s linear forwards;animation-delay:.05s}
.site.play[data-motion="inflate"] .shero>*{animation:inflateIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
.site.play[data-motion="settle"] .shero>*:nth-child(2){animation-delay:.08s}
.site.play[data-motion="settle"] .shero>*:nth-child(3){animation-delay:.16s}
.site.play[data-motion="settle"] .shero>*:nth-child(4){animation-delay:.24s}
.site.play[data-motion="settle"] .shero>*:nth-child(5){animation-delay:.32s}
.site.play[data-motion="inflate"] .shero>*:nth-child(2){animation-delay:.06s}
.site.play[data-motion="inflate"] .shero>*:nth-child(3){animation-delay:.12s}
.site.play[data-motion="inflate"] .shero>*:nth-child(4){animation-delay:.18s}
.site.play[data-motion="inflate"] .shero>*:nth-child(5){animation-delay:.24s}
.site.play .sstrip .sxcard{opacity:0;animation:settleIn .6s ease forwards}
.site.play[data-motion="snap"] .sstrip .sxcard{animation:snapIn .01s linear forwards}
.site.play[data-motion="inflate"] .sstrip .sxcard{animation:inflateIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
.site.play .sstrip .sxcard:nth-child(1){animation-delay:.28s}
.site.play .sstrip .sxcard:nth-child(2){animation-delay:.36s}
.site.play .sstrip .sxcard:nth-child(3){animation-delay:.44s}

/* ---- entry motion: bespoke templates mark reveals with .rv + --i ----
   'both' fill (never a bare opacity:0): a template that overrides `animation`
   with its own ambient loop must degrade to visible, not stay hidden. */
.site.play .rv{animation:settleIn .8s ease both;animation-delay:calc(var(--i,0)*.08s)}
.site.play[data-motion="snap"] .rv{animation:snapIn .01s linear both;animation-delay:calc(.05s + var(--i,0)*.06s)}
.site.play[data-motion="inflate"] .rv{animation:inflateIn .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.07s)}

@keyframes settleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes settleBlur{from{opacity:0;filter:blur(6px);transform:scale(1.03)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes snapIn{from{opacity:0}to{opacity:1}}
@keyframes inflateIn{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.site *{animation:none!important}.site .shero>*,.site .sxcard,.site .rv{opacity:1!important}}