.lhead{padding:22px 16px 6px}
#steps{display:flex;flex-direction:row;gap:6px;margin:0 0 16px;flex-wrap:wrap}
#steps span{font-size:12px;font-weight:700;color:var(--mute);border:1.5px solid var(--line);border-radius:999px;padding:5px 11px}
#steps span.on{color:var(--text);border-color:var(--text)}
#steps span.done{color:var(--green);border-color:#3ee08f55}
.lhead h1{font-size:26px;letter-spacing:-.5px;font-weight:800}
.lhead p{color:var(--soft);margin-top:6px}
/* ---------- 1. describe: one big line → what we understood (tags) + name/ticker ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dcard{margin:6px 16px 0;background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:16px 16px 6px;transition:border-color .2s}
.dcard:focus-within{border-color:#4a414f}
#desc{display:block;width:100%;min-height:150px;resize:none;background:none;border:0;outline:0;color:var(--text);caret-color:var(--pink);
  font:600 21px/1.38 Inter,system-ui,sans-serif;letter-spacing:-.25px}
#desc::placeholder{color:#5f5763}
.dfoot{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.surprise{display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:10px 12px 10px 0;min-height:44px;font-weight:700;font-size:14px;color:var(--soft);
  text-decoration:underline;text-decoration-color:#4a414f;text-underline-offset:4px}
.surprise:hover{color:var(--text)}
.die{position:relative;width:17px;height:17px;border:1.6px solid currentColor;border-radius:4px;flex:none;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.die i{position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor}
.die i:nth-child(1){left:2.5px;top:2.5px}.die i:nth-child(2){left:5.5px;top:5.5px}.die i:nth-child(3){right:2.5px;bottom:2.5px}
.surprise:active .die{transform:rotate(90deg)}
.dcount{font-size:11px;color:var(--mute)}
/* after reading: the line shrinks to a quote you can still edit */
.dcard.compact{padding:10px 14px 2px}
.dcard.compact #desc{font-size:15px;font-weight:500;min-height:0;height:auto;color:var(--soft);line-height:1.4}
.dcard.compact .dfoot{margin-top:0}.dcard.compact .surprise{min-height:38px;padding-top:6px;padding-bottom:6px;font-size:13px}
.dnote{margin:10px 18px 0;font-size:12.5px;color:var(--mute)}
.refusal{margin:12px 16px 0}
.rf{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:14px;border:1px solid #ff6b6b40;background:#ff6b6b0b;border-radius:14px}
.rf>.ic{color:var(--red);width:20px;height:20px;margin-top:1px}
.rf b{font-weight:600;font-size:14px;line-height:1.4;display:block}
.sugg{display:grid;grid-template-columns:1fr 18px;gap:2px 8px;align-items:center;width:100%;margin-top:12px;text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;min-height:52px}
.sugg small{grid-column:1;font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.6px;text-transform:uppercase;color:var(--mute)}
.sugg span{grid-column:1;font-weight:600;font-size:14px}
.sugg .ic{grid-row:1/3;grid-column:2;width:18px;height:18px;color:var(--mute)}
.read{padding:16px 16px 0}
.plate{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding-bottom:12px}
.pname input{display:block;width:100%;background:none;border:0;outline:0;color:var(--text);font:800 34px/1.12 Inter,system-ui,sans-serif;letter-spacing:-.9px;padding:2px 0;
  border-bottom:1.5px dashed transparent;border-radius:0}
.pname input:focus{border-bottom-color:#4a414f}
.ptk{display:inline-flex;align-items:center;height:42px;padding:0 4px 0 11px;border:1.5px solid var(--line);border-radius:11px;background:var(--panel)}
.ptk:focus-within{border-color:#4a414f}
.ptk b{color:var(--mute);font-weight:700}
.ptk input{width:9.6ch;background:none;border:0;outline:0;color:var(--text);font:700 16px 'JetBrains Mono',monospace;text-transform:uppercase;padding:0 4px 0 1px}
.pstat{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-height:18px;font-size:12.5px;color:var(--mute)}
.pstat .ic{width:14px;height:14px;stroke-width:3}.pstat .spin{width:11px;height:11px;border-width:2px}
.pstat.ok{color:var(--green)}.pstat.err{color:var(--red)}
.plate.ghost input{color:transparent}.plate.ghost .pname{position:relative}
.plate.ghost .pname::after{content:'';position:absolute;left:0;top:10px;width:58%;height:22px;border-radius:7px;background:var(--panel2);animation:shim 1.1s ease-in-out infinite}
.plate.ghost .pstat{visibility:hidden}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:11.5px;color:var(--mute);margin:2px 0 10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .k{width:11px;height:11px;border-radius:3px;border:1.5px solid #8d8590}.legend .k.auto{border-style:dashed;border-color:#6a626e}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:54px;padding:8px 13px 9px;text-align:left;
  background:var(--panel);border:1.5px solid #423a46;border-radius:12px;color:var(--text);transition:transform .12s,border-color .2s,background .2s}
.tag small{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.tag b{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px;white-space:nowrap}
.tag b i{width:13px;height:13px;border-radius:50%;border:1px solid #fff3;flex:none}
.tag.auto{background:none;border-style:dashed;border-color:#3d3640}.tag.auto b{color:var(--soft);font-weight:600}
.tag:hover{border-color:#5a515e}.tag:active{transform:scale(.97)}
.tag.dev{animation:tagin .46s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 34ms)}
@keyframes tagin{0%{opacity:0;transform:translateY(7px);filter:brightness(1.9) saturate(0)}60%{opacity:1}100%{opacity:1;transform:none;filter:none}}
.tag.flash{animation:tflash .7s ease-out}
@keyframes tflash{0%{border-color:var(--pink);background:#ff3d7f17}100%{}}
.tag.sk{border-style:dashed;border-color:#2f2a33;background:none}
.tag.sk b{width:66px;height:13px;margin-top:3px;border-radius:5px;background:var(--panel2);animation:shim 1.1s ease-in-out infinite;animation-delay:calc(var(--n,0) * 60ms)}
.tags.busy .tag:not(.sk){opacity:.45}
@keyframes shim{50%{opacity:.4}}
.warns{list-style:none;display:grid;gap:6px;margin-top:12px}
.warns li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:12.5px;color:var(--mute);line-height:1.4}
.warns .ic{width:15px;height:15px;color:var(--gold);margin-top:1px}
/* edit sheets */
.pickm .opts{margin-top:4px}
.agepick{display:flex;align-items:center;width:fit-content;margin:6px auto 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);overflow:hidden}
.agepick .ab{width:58px;height:54px;border:0;background:none;font-size:24px;font-weight:600}
.agepick input{width:76px;text-align:center;border:0;background:none;outline:0;font:700 26px 'JetBrains Mono',monospace;-moz-appearance:textfield}
.agepick input::-webkit-inner-spin-button{-webkit-appearance:none}
.chips.quick{justify-content:center;margin-bottom:16px}.chips.quick .chip{min-width:52px;justify-content:center;font-family:'JetBrains Mono',monospace}
/* iPhone keyboard: the sticky bar rides above it */
body.kb .mbar{transform:translateY(calc(-1 * var(--kb, 0px)));padding-bottom:10px;transition:none}
.ro .who{color:var(--soft);font-size:12px;font-weight:700}
@media(max-width:430px){.mbar .row .cta:only-child:not(.ghost){justify-content:space-between}.mbar .row .cta:only-child small{display:inline}}
@media(max-width:430px){.pname input{font-size:30px}.tag{padding:7px 11px 8px;min-height:50px}.tag b{font-size:14.5px}}
@media(min-width:981px){#desc{min-height:170px;font-size:23px}.read{padding-top:20px}}
.lact{padding:16px;display:grid;gap:8px}
@media(max-width:980px){.lact{display:none}}

/* ---------- photoshoot: viewfinder readout + contact sheet ---------- */
#s-shoot{padding-bottom:8px}
.readout{position:sticky;top:0;z-index:6;background:var(--bg);padding:10px 16px 12px;border-bottom:1px solid var(--line)}
@media(max-width:980px){.readout{top:calc(58px + env(safe-area-inset-top))}}
.ro{display:flex;align-items:center;gap:10px;font-size:13px}
.ro b{font-size:12px;letter-spacing:1.4px;font-weight:800}
.ro .cnt{margin-left:auto;font-size:15px;font-weight:700}
.ro .cnt i{font-style:normal;color:var(--mute);margin:0 1px}
.ro .eta{color:var(--mute);font-size:12px;min-width:64px;text-align:right}
.rec{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 3px #ff4d4d22;animation:rec 1.2s steps(2,start) infinite}
.rec.done{background:var(--green);box-shadow:0 0 0 3px #3ee08f22;animation:none}
.rec.off{background:var(--mute);box-shadow:none;animation:none}
@keyframes rec{50%{opacity:.25}}
.film{height:3px;background:var(--panel2);border-radius:3px;margin-top:10px;overflow:hidden}
.film i{display:block;height:100%;background:var(--text);transition:width .6s ease}
.sheetlbl,.besth{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 16px 10px}
.besth{flex-direction:column;gap:3px}
.sheetlbl .lbl,.besth .lbl{margin:0}
.sheetlbl small,.besth small{color:var(--mute);font-size:12px}
.contact{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 16px;background:none}
.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 4px}
.fr{position:relative;aspect-ratio:1;border:0;padding:0;background:var(--panel);overflow:hidden;border-radius:4px;display:block;width:100%}
.fr img{width:100%;height:100%;object-fit:cover;display:block}
.fr.big{border-radius:10px}
.fr .no{position:absolute;left:4px;bottom:3px;font-size:9.5px;font-weight:700;color:#fff;opacity:.82;text-shadow:0 1px 2px #000a;letter-spacing:.4px;pointer-events:none}
.fr.big .no{left:8px;bottom:7px;font-size:11px}
.fr.empty{background:#121014;outline:1px dashed #2b262f;outline-offset:-1px}
.fr.empty .no{color:#3a343e;text-shadow:none;opacity:1}
.fr.next{outline:1px solid #3a343e}
.fr .grain{position:absolute;inset:-40%;width:180%;height:180%;opacity:.22;animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-8%,4%)}50%{transform:translate(5%,-6%)}75%{transform:translate(-4%,-3%)}100%{transform:translate(6%,5%)}}
/* new frame: develops like a print in the tray (no glow, no bounce) */
.fr.dev img{animation:develop 1.4s cubic-bezier(.2,.6,.2,1) both}
@keyframes develop{0%{opacity:0;filter:brightness(2.4) contrast(.5) saturate(0)}35%{opacity:1}100%{filter:none}}
.fr.noface img{opacity:.55}
/* heart: small stamp in the corner, big tap target */
.fr .ht{position:absolute;right:0;top:0;width:34px;height:34px;display:grid;place-items:center;color:#fff;opacity:.0;transition:opacity .2s}
.fr .ht .ic{width:15px;height:15px;filter:drop-shadow(0 1px 1px #0009)}
.fr:hover .ht,.fr .ht.on{opacity:1}
@media(hover:none){.fr .ht{opacity:.72}}
.fr .ht.on{color:var(--pink)}
.fr .ht.on .ic{fill:var(--pink)}
.fr.big .ht{width:44px;height:44px}.fr.big .ht .ic{width:20px;height:20px}
.ht.pop .ic{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
/* circled: grease-pencil loop drawn on the print + a hand-written rank */
.fr .pencil{position:absolute;inset:6%;width:88%;height:88%;pointer-events:none;overflow:visible}
.fr .pencil path{fill:none;stroke:var(--pink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s .1s cubic-bezier(.4,0,.2,1) forwards}
.fr.big .pencil path{stroke-width:1.5}
@keyframes draw{to{stroke-dashoffset:0}}
.fr .mark{position:absolute;left:6px;top:4px;color:var(--pink);font-size:12px;font-weight:700;text-shadow:0 1px 2px #000c}
.fr.big .mark{left:10px;top:8px;font-size:15px}
.contact .fr.top{outline:1.5px solid #ff3d7f88;outline-offset:-1.5px}
.fr.sel{outline:3px solid var(--text)!important;outline-offset:-3px}
.fr.sel img{opacity:.92}
.fr .pickd{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:5px;align-items:center;background:var(--text);color:var(--bg);font-size:11px;font-weight:800;padding:4px 9px 4px 7px;border-radius:999px;white-space:nowrap}
.fr .pickd .ic{width:12px;height:12px;stroke-width:3}
.contact .fr .pickd{font-size:0;padding:4px;bottom:4px}.contact .fr .pickd .ic{width:11px;height:11px}
.shootnote{color:var(--mute);font-size:12.5px;padding:12px 16px 0}
.best{padding-bottom:6px;border-bottom:1px solid var(--line)}
/* loupe */
.loupe .lph{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--panel2);margin-top:34px}
.loupe .lph img{width:100%;height:100%;object-fit:cover}
.loupe .lph .pencil{position:absolute;inset:5%;width:90%;height:90%}
.loupe .lph .pencil path{fill:none;stroke:var(--pink);stroke-width:1.2;stroke-linecap:round}
.loupe .lph .mark{position:absolute;left:12px;top:10px;color:var(--pink);font-size:16px}
.lpr{display:flex;justify-content:space-between;align-items:center;margin:12px 0 14px;font-size:12px;color:var(--mute);letter-spacing:.6px}
.hbtn{display:inline-flex;gap:7px;align-items:center;border:1.5px solid var(--line);background:none;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;min-height:40px}
.hbtn .ic{width:16px;height:16px}
.hbtn.on{border-color:#ff3d7f88;color:var(--pink)}.hbtn.on .ic{fill:var(--pink)}
.lpn{font-size:13px;text-align:center}

/* ---------- name ---------- */
.chosen{display:flex;gap:14px;align-items:center;padding:16px}
.chosen img{width:96px;height:96px;border-radius:12px;object-fit:cover;outline:1px solid var(--line)}
.chosen b{font-size:11px;letter-spacing:1px;color:var(--mute)}
.chosen p{font-size:13px;color:var(--soft);margin-top:4px}
.inp{display:block;padding:0 16px 18px}
.inp span{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.inp input{width:100%;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font-size:16px;outline:0}
.inp input:focus{border-color:#4a414f}
.inp small{display:block;color:var(--mute);font-size:12px;margin-top:6px}
.inp small.err{color:var(--red)}
.tk{display:flex;align-items:center;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding-left:14px}
.tk b{color:var(--mute);font-family:'JetBrains Mono',monospace}
.tk input{border:0;background:none;font-family:'JetBrains Mono',monospace;text-transform:uppercase;padding-left:4px}

/* ---------- live ---------- */
.run{padding:16px;display:grid;gap:10px}
.hero{position:relative;aspect-ratio:1;max-width:260px;width:100%;margin:0 auto 6px;border-radius:16px;overflow:hidden;background:var(--panel2)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .tkr{position:absolute;left:12px;top:12px;background:#000b;padding:4px 10px;border-radius:8px;font-weight:700;font-size:13px}
.hero .lv{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;align-items:center;background:#0d1f16e6;color:var(--green);border:1px solid #3ee08f55;padding:5px 10px;border-radius:999px;font-weight:700;font-size:12.5px}
.hero .lv .ic{width:14px;height:14px}
.rstep{display:grid;grid-template-columns:36px 1fr;gap:3px 12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.rstep .d{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);color:var(--mute);grid-row:span 2}
.rstep .d .spin{width:16px;height:16px}
.rstep b{font-size:15px}
.rstep small{color:var(--mute);font-size:13px}
.rstep .bar{grid-column:2;margin-top:8px;height:6px}
.rstep.done .d{border-color:#3ee08f55;color:var(--green);background:#3ee08f12}
.rstep.now{border-color:#ff3d7f55}
.rstep.now .d{border-color:#ff3d7f55}
.rstep.todo{opacity:.55}
.runnote{font-size:12.5px;text-align:center}
.run .cta{margin-top:6px}
.sheetv{display:grid;gap:7px;font-size:13px}
.sheetv div{display:flex;justify-content:space-between;gap:10px}
.sheetv span{color:var(--mute)}
.sheetv b{font-weight:600;text-align:right}
.sheetv b.no{color:#4d4650;font-weight:500}
.how2{list-style:none;counter-reset:s;display:grid;gap:12px;font-size:13px;color:var(--soft)}
.how2 li{counter-increment:s;display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start}
.how2 li::before{content:counter(s);width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:11px;color:var(--text)}
.how2 b{color:var(--text)}
.rules ul{list-style:none;display:grid;gap:8px;font-size:13px;color:var(--soft)}
.rules li{padding-left:16px;position:relative}
.rules li::before{content:'';position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--pink)}
.mbar .row{display:flex;gap:8px}
.mbar .row .cta.ghost{width:auto;flex:none;padding:14px 18px}
.linkish{background:none;border:0;color:var(--text);text-decoration:underline;font-weight:600}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:var(--panel);overflow:hidden}
.stepper button{width:48px;height:44px;border:0;background:none;font-size:20px;font-weight:600}
.stepper input{width:56px;text-align:center;border:0;background:none;font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:700;outline:0;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.mbar .row .cta{white-space:nowrap;font-size:14px;padding:14px 18px}.mbar .row .cta:not(.ghost){flex:1}@media(max-width:430px){.mbar .row .cta small{display:none}.mbar .row .cta:not(.ghost){justify-content:center}}
.mbar .row{align-items:center}.mbar .row .cta{min-height:50px;height:50px}
@media(prefers-reduced-motion:reduce){.fr.dev img,.fr .pencil path,.rec,.fr .grain,.tag.dev,.tag.flash,.tag.sk b{animation:none!important}.fr .pencil path{stroke-dashoffset:0}}
