:root{--bg:#0e0c11;--bg2:#1b1a1d;--s1:#17141b;--s2:#1b1720;--s3:#141118;--s4:#1d1a22;--s5:#231e29;--s6:#26212c;--line:rgba(255,255,255,.07);--fg:#f4f0f5;--fg2:#e7e1ea;--mut:#a49dab;--mut2:#766f7d;--mut3:#5d5664;--pink:oklch(0.72 0.17 355);--pinkfg:#ff8fc4;--onpink:#1a0610;--vio:oklch(0.72 0.17 295);--viofg:#c9b8ff;--danger:oklch(0.62 0.21 25);--ondanger:#fff;--r:16px;--font:Pretendard,system-ui,sans-serif;--phone-scale:1}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg2);color:var(--fg);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
input,textarea,button{font-family:var(--font);color:inherit}
::-webkit-scrollbar{display:none}
/* Fit, not a phone mock-up: one column the full height of the window, in her pictures' own 9:16 (1440×2560), at most
   640 px wide; a phone just fills its screen. Browser tab, installed app or a resized window all look the same. */
.stage{min-height:100dvh;display:flex;justify-content:center;align-items:stretch;background:var(--bg2)}
.stage-frame{width:min(640px,100vw,calc(100dvh * 9 / 16));height:100dvh;flex:none;position:relative}
/* A phone (or any window up to 640 px wide) fills its whole width: a browser tab's address and nav bars leave an area
   wider than 9:16, and pinning 9:16 there left black bars at both sides. Full-screen art crops from the top (ART_Y). */
@media (max-width:640px){.stage-frame{width:100vw}}
.phone{width:100%;height:100%;overflow:hidden;background:var(--bg);position:relative;box-shadow:0 0 80px rgba(0,0,0,.55);flex:none}
.phone .status{display:none}.phone .top{height:calc(10px + env(safe-area-inset-top))}
.status{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font:600 14px var(--font);pointer-events:none;z-index:5}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.screen.nav{inset:0 0 calc(84px + env(safe-area-inset-bottom)) 0}
.top{height:48px;flex:none}
.scroll{flex:1;overflow-y:auto}
nav.nav{position:absolute;left:0;right:0;bottom:0;z-index:6;min-height:84px;border-top:1px solid var(--line);background:var(--bg);display:grid;grid-template-columns:repeat(4,1fr);padding:10px 0 env(safe-area-inset-bottom)}
nav.nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 11px var(--font);color:var(--mut2);cursor:pointer}
nav.nav button.on{color:var(--fg)}
nav.nav i{width:20px;height:20px;border:2px solid currentColor;display:block}
.gem{padding:6px 11px;border-radius:99px;background:var(--s4);font:600 12px var(--font);display:inline-flex;gap:6px;align-items:center}
.gem i{width:8px;height:8px;transform:rotate(45deg);background:var(--pink);display:block}
.gem.vio i{background:var(--vio)}
.btn{border:0;cursor:pointer;height:54px;border-radius:var(--r);background:var(--pink);color:var(--onpink);font:700 16px var(--font);display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.btn.ghost{background:var(--s4);color:var(--fg);font-weight:600;font-size:14px}
.btn.sm{height:44px;font-size:14px;border-radius:12px}
.btn.danger{background:var(--danger);color:var(--ondanger)}
.btn[disabled]{opacity:.4;cursor:default}
.ph{background:repeating-linear-gradient(135deg,#2a2031 0 10px,#231b29 10px 20px);position:relative}
.ph small{position:absolute;top:10px;left:10px;font:500 9px ui-monospace,Menlo,monospace;color:#8d8496}
.art{object-fit:cover;width:100%;height:100%;display:block}
/* 19+ content off (Your settings): a mosaic is a 24-px copy scaled up without smoothing; hidden is a neutral tile. */
.veil-mosaic{image-rendering:pixelated;object-fit:cover}
.veil-hide{display:grid;place-items:center;background:var(--s2);color:var(--mut2);font:600 10px var(--font);letter-spacing:.02em;text-align:center}
.living .veil-mosaic{image-rendering:pixelated}
.card{border-radius:var(--r);background:var(--s1);overflow:hidden;cursor:pointer}
.tag{padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.5);font:600 10px var(--font)}
.chip{padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.12);font:600 11px var(--font)}
.h1{font:800 24px var(--font);letter-spacing:-.03em}
.h2{font:700 16px var(--font)}
.mut{color:var(--mut)}
.back{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;font:600 18px var(--font);border:0;color:var(--fg);cursor:pointer}
.hero-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.45);border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;font:600 22px var(--font);color:var(--fg);cursor:pointer}
.dim{position:absolute;inset:0;background:rgba(6,4,8,.65);z-index:10}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:min(780px,calc(100% - 48px));overflow-y:auto;overscroll-behavior:contain;border-radius:28px 28px 0 0;background:var(--s3);padding:12px 20px calc(34px + env(safe-area-inset-bottom));z-index:11;display:flex;flex-direction:column}
/* Never taller than the screen (a short browser tab pushed the top of a 780 px sheet off it); tall sheets take that
   height from the start and scroll inside. */
.sheet.tall{height:min(780px,calc(100% - 48px))}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:#3a3440;margin:0 auto 16px;flex:none}
/* Never taller than the phone (owner, 2026-10-01 pre-launch: Your settings ran past 812 px and Sign in / Sign out / legal
   fell off-screen): it scrolls inside, and short screens start it higher. Children keep their height instead of squashing. */
.modal{position:absolute;left:20px;right:20px;top:min(110px,13.5%);max-height:calc(100% - min(110px,13.5%) - 16px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border-radius:24px;background:var(--s3);border:1px solid rgba(255,255,255,.08);padding:20px;display:flex;flex-direction:column;gap:14px;z-index:12}
.modal>*{flex-shrink:0}
.nudge{position:absolute;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top));z-index:31;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:rgba(28,22,32,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,120,180,.35);box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--fg);font:400 13px var(--font);cursor:pointer;animation:nudge-in .35s cubic-bezier(.2,.9,.3,1.2)}
.nudge b{font:700 13px var(--font)}.nudge-when{font:500 11px var(--font);color:var(--mut2)}
.nudge-face{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px var(--pink)}
.nudge-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg2)}
.nudge-x{background:none;border:0;color:var(--mut2);font:400 20px var(--font);padding:0 2px;cursor:pointer}
@keyframes nudge-in{from{transform:translateY(-120%);opacity:0}to{transform:none;opacity:1}}
.push-card{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;margin-bottom:14px;border-radius:16px;background:linear-gradient(90deg,rgba(255,111,177,.14),rgba(160,120,255,.12));border:1px solid rgba(255,143,196,.28);font:400 12px var(--font);color:var(--mut)}
.push-card b{font:700 14px var(--font);color:var(--fg)}.push-card .btn{flex:none;width:auto;height:36px;padding:0 14px;font-size:13px}
.push-x{background:none;border:0;color:var(--mut2);font:400 20px var(--font);cursor:pointer;padding:0 2px}
/* A toast never takes a click (it sat over the studio's step bar and the top of a page: the tap under it did nothing); only its action button does. */
.toast{position:absolute;left:24px;right:24px;top:64px;padding:12px 16px;border-radius:14px;background:rgba(244,240,245,.96);color:var(--bg);font:600 13px var(--font);text-align:center;z-index:35;pointer-events:none}
.toast.act{display:flex;align-items:center;justify-content:center;gap:12px}
.toast-b{pointer-events:auto;border:0;background:none;padding:2px 4px;font:800 13px var(--font);color:#c2185b;cursor:pointer;text-decoration:underline}
.loading{position:absolute;inset:0;background:rgba(6,4,8,.8);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font:600 14px var(--font)}
.spin{width:40px;height:40px;border-radius:50%;border:3px solid #3a3440;border-top-color:var(--pinkfg);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.field{padding:13px 14px;border-radius:12px;background:var(--s2);border:0;outline:0;color:var(--fg);font-size:14px;width:100%}
textarea.field{line-height:1.55;resize:none}
.row{display:flex;gap:10px;align-items:center}
.col{display:flex;flex-direction:column;gap:6px}
.sel{box-shadow:inset 0 0 0 1.5px var(--pink)}
.choice-label{align-self:center;font:600 10px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.choice{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,143,196,.45);background:rgba(20,17,24,.82);color:var(--fg);font:500 14px/1.4 var(--font);text-align:left;cursor:pointer}
.choice::after{content:"›";color:var(--pinkfg);font-size:18px;line-height:1}
.choice.hidden{border-color:rgba(201,184,255,.6);background:rgba(28,22,40,.88)}
.choice.hidden .dot{width:7px;height:7px;border-radius:50%;background:var(--vio);flex:none}
.choice.hidden small{font:600 10px var(--font);color:var(--viofg);letter-spacing:.02em;flex:none}
.choice.hidden::after{color:var(--viofg)}
.choice small{font:600 10px var(--font);color:var(--pinkfg);letter-spacing:.02em;flex:none;opacity:.85}
.choice small.choice-cost{margin-left:auto;padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.08);color:var(--fg);opacity:.75;font-variant-numeric:tabular-nums}
.choice.finish{border-color:#ff5fa8;background:rgba(60,14,36,.88)}
.choice.rejoin{border-style:dashed;border-color:rgba(255,255,255,.28);padding-top:9px;padding-bottom:9px;font-size:13px}
.choice.rejoin small:not(.choice-cost){color:var(--mut)}
.choice.rejoin .choice-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.choice.climax{border-color:#ff5fa8;background:linear-gradient(90deg,rgba(255,95,168,.35),rgba(60,14,36,.9));font-weight:700}
.recall{align-self:flex-start;display:inline-flex;gap:5px;align-items:center;padding:4px 8px;border-radius:7px;background:rgba(157,140,240,.14);font:600 10px var(--font);color:var(--viofg)}
.recall i{width:5px;height:5px;border-radius:50%;background:var(--viofg)}
.choice-end{align-self:center;background:none;border:0;padding:6px 10px;color:var(--mut);font:500 12px var(--font);cursor:pointer}
.typing{display:flex;gap:5px;padding:14px 16px;border-radius:4px 16px 16px 16px;background:rgba(31,26,37,.78)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:typing 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.tools{display:flex;gap:8px;padding:0 16px 8px;overflow-x:auto;flex:none;scroll-behavior:auto;overscroll-behavior-x:contain}
.hscroll{cursor:grab;scrollbar-width:none}
.hscroll.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.tool{flex:none;height:32px;padding:0 12px;border-radius:10px;border:0;background:rgba(31,26,37,.92);color:var(--fg);font:600 12px var(--font);display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.tool.draw{background:var(--pink);color:var(--onpink);font-weight:700}
/* Free motion on every received still: a slow push-in and drift (zones ride along in .alive-layer). */
@keyframes alive{0%,100%{transform:scale(1.03) translate3d(0,0,0)}50%{transform:scale(1.08) translate3d(-1.2%,-.8%,0)}}
.alive,.alive-layer{animation:alive 18s ease-in-out infinite;transform-origin:50% 40%;will-change:transform}
@media (prefers-reduced-motion:reduce){.alive,.alive-layer{animation:none}}
/* Scene touch: small hollow rings that fade after a few seconds, instead of labelled outlines; pressing dents the picture around the spot, letting go springs it back. */
.zone-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.92);background:rgba(255,255,255,.12);box-shadow:0 1px 6px rgba(0,0,0,.45);animation:zonepulse 2.4s ease-out infinite;transition:opacity .5s}
.zone-dot.off{opacity:0}
@keyframes zonepulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45),0 1px 6px rgba(0,0,0,.45)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0),0 1px 6px rgba(0,0,0,.45)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 1px 6px rgba(0,0,0,.45)}}
.press-layer{transition:transform .12s ease-out;will-change:transform}
.press-layer.bounce{animation:pressback .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pressback{0%{transform:scale(1.03)}35%{transform:scale(.992)}65%{transform:scale(1.006)}100%{transform:scale(1)}}
.press-ring{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,143,196,.8);background:radial-gradient(rgba(255,143,196,.28),transparent 70%);pointer-events:none;transition:width .1s,height .1s}
@media (prefers-reduced-motion:reduce){.zone-dot,.press-layer.bounce{animation:none}}
.age-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:rgba(6,4,8,.82)}
.age-card{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:22px;background:var(--s3);border:1px solid rgba(255,255,255,.08)}
/* Sign in (web/sheets/signin.js): Google, a thin "or with email" rule, the fields, a quiet mode switch. */
.signin-or{display:flex;align-items:center;gap:10px;color:var(--mut);font:600 11px var(--font)}
.signin-or::before,.signin-or::after{content:"";flex:1;height:1px;background:var(--line)}
.signin-switch{background:none;border:0;padding:4px;color:var(--mut);font:600 12px var(--font);cursor:pointer}
/* Gallery viewer: one item full screen with its actions. */
.viewer{position:absolute;inset:0;z-index:15;background:#000;display:flex;flex-direction:column}
.viewer-top{position:relative;display:flex;align-items:center;gap:8px;padding:52px 16px 12px;background:linear-gradient(rgba(8,6,10,.85),transparent)}
.viewer-nav{position:absolute;top:40%;width:44px;height:64px;border:0;background:rgba(0,0,0,.35);color:var(--fg);font:600 26px var(--font);cursor:pointer}
.viewer-actions{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:28px 16px 34px;background:linear-gradient(transparent,rgba(8,6,10,.95) 35%)}
/* Wardrobe: text chips instead of empty image tiles, colour swatches. */
/* Wardrobe/Playroom controls hug the top edge (at 54 px the title pill sat on her eyes, now that the picture crops from
   the top); a soft shade keeps them legible over bright art. The right-hand buttons never shrink, the title ellipsizes. */
.wd-top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:2}
.wd-top>.row{flex:none}
.wd-top .tag{white-space:nowrap}
.wd-shade{position:absolute;left:0;right:0;top:0;height:calc(110px + env(safe-area-inset-top));background:linear-gradient(rgba(6,4,8,.55),rgba(6,4,8,0));pointer-events:none}
.wd-top .h2{flex:0 1 auto;min-width:0;padding:6px 12px;border-radius:99px;background:rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt{flex:none;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:var(--s2);color:var(--fg);font:600 12px var(--font);white-space:nowrap;cursor:pointer}
.opt.on{border-color:var(--pink);background:rgba(255,143,196,.16);color:var(--pinkfg)}
.opt small{font:700 9px var(--font);color:var(--viofg)}
.wd-thumb{flex:none;width:56px;height:76px;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;background:var(--s2);cursor:pointer}
.wd-thumb.on{border-color:var(--pink)}
.wd-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block}
/* Edit area: the brush layer sits exactly on the picture; the canvas carries its own alpha, so no CSS opacity here. */
.wd-paint{position:absolute;touch-action:none;cursor:crosshair;border-radius:10px}
.swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.18);cursor:pointer;padding:0}
.swatch.on{border-color:var(--pink)}
.swatch.as-is{background:var(--s5);color:var(--mut);font:600 12px var(--font);line-height:1}
/* Wardrobe v2: bottom-panel tabs, round tool icons, the base-picture thumb, the 19+ switch and the Playroom tint. */
.wd-panel{position:absolute;left:0;right:0;bottom:0;border-radius:24px 24px 0 0;background:rgba(20,17,24,.97);padding:12px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.wd-tabs{display:flex;gap:4px;overflow-x:auto}
.wd-tab{flex:none;padding:7px 12px;border-radius:99px;border:0;background:transparent;color:var(--mut);font:700 12px var(--font);cursor:pointer}
.wd-tab.on{background:var(--fg);color:var(--bg)}
.wd-tabs .wd-19{flex:none;align-self:center;margin-right:2px}
.wd-moment{flex:none;height:38px;border-radius:12px;border:1px solid rgba(255,92,138,.45);background:rgba(255,92,138,.14);color:#ffc2d4;font:700 13px var(--font);cursor:pointer}
.wd-sub{display:flex;flex:none;min-width:0;gap:14px;overflow-x:auto;font:600 12px var(--font);color:var(--mut)}
.wd-sub button{flex:none;border:0;background:none;padding:2px 0;color:inherit;font:inherit;cursor:pointer}
.wd-sub button.on{color:var(--fg);box-shadow:inset 0 -2px 0 var(--pink)}
.wd-icons{position:absolute;top:calc(58px + env(safe-area-inset-top));right:12px;display:flex;flex-direction:column;gap:10px}
.wd-icon{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(20,17,24,.78);color:#e7e1ea;font:600 17px var(--font);cursor:pointer}
.wd-icon:disabled{opacity:.4;cursor:default}
.wd-base{position:absolute;top:calc(58px + env(safe-area-inset-top));left:12px;width:48px;height:66px;padding:0;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.5);background:var(--s2);cursor:pointer}
.wd-base.on{border-color:var(--pink)}
.wd-base img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block}
/* Edit kept the old version (owner, 2026-10-01): a glow and a red dot on where it went until it's opened. */
.wd-base.wd-kept{border-color:var(--pink);animation:wd-kept 1.6s ease-in-out infinite}
.tag.wd-kept{box-shadow:0 0 0 2px rgba(255,143,196,.6),0 0 14px rgba(255,143,196,.7)}
.tag.wd-kept::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#ff3b5c;border:2px solid #111}
.wd-base-dot{position:absolute;top:calc(52px + env(safe-area-inset-top));left:54px;width:12px;height:12px;border-radius:50%;background:#ff3b5c;border:2px solid #111;pointer-events:none;z-index:2}
@keyframes wd-kept{0%,100%{box-shadow:0 0 0 2px rgba(255,143,196,.35),0 0 8px rgba(255,143,196,.45)}50%{box-shadow:0 0 0 3px rgba(255,143,196,.6),0 0 18px rgba(255,143,196,.85)}}
/* The 19+ switch: a pink pill with a knob and ON/OFF, first in the tab bar (it took the old Outfit slot). */
.wd-19{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 7px;border-radius:99px;border:1.5px solid #ff5c8a;background:rgba(255,92,138,.12);color:#ff8fb0;font:800 13px var(--font);cursor:pointer;white-space:nowrap}
.wd-19 i{position:relative;width:24px;height:14px;border-radius:99px;background:rgba(255,255,255,.22);flex:none;transition:background .15s}
.wd-19 i::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:left .15s}
.wd-19 small{font:800 9px var(--font);letter-spacing:.06em;opacity:.85}
.wd-19.on{background:#c2184f;border-color:#ff5c8a;color:#fff}
.wd-19.on i{background:#ff5c8a}
.wd-19.on i::after{left:12px}
.wd-play .wd-panel{background:rgba(34,10,18,.97);box-shadow:inset 0 1px 0 rgba(255,92,138,.35)}
.wd-play .wd-tab.on{background:#ff5c8a;color:#1a0610}
.wd-play .opt.on{border-color:#ff5c8a;background:rgba(255,92,138,.18);color:#ffc2d4}
.wd-play .wd-top .h2{background:rgba(90,10,35,.6)}
a{color:var(--pinkfg);text-decoration:none}
a:hover{color:#ffb3d6}
.living{position:absolute;inset:0;overflow:hidden;background:var(--bg);touch-action:none}
/* Her picture never opens the phone's long-press menu (Save / Copy image): taps are the input, not holds. */
.living,.living *,.press-layer,.press-layer *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.heat-gauge{position:absolute;right:10px;top:34%;height:28%;width:6px;border-radius:3px;background:rgba(255,255,255,.12);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
.heat-gauge i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(0deg,var(--vio),var(--pink));transform-origin:bottom;transform:scaleY(0)}
.heat-gauge b{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font:700 13px var(--font);color:var(--pinkfg)}
.heat-gauge.hot b{animation:heat-beat .5s ease-in-out infinite}
@keyframes heat-beat{50%{transform:translateX(-50%) scale(1.35)}}
.tap-heart{position:absolute;transform:translate(-50%,-50%);color:var(--pinkfg);text-shadow:0 0 8px rgba(255,90,160,.7);pointer-events:none;z-index:2;animation:tap-heart .8s ease-out forwards}
@keyframes tap-heart{from{opacity:1;transform:translate(-50%,-50%) scale(.6)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(1.15)}}.living .living-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.living img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* Chat over the living layer: containers let touches through to her, their children still take them. */
.chat-pass{pointer-events:none}.chat-pass>*{pointer-events:auto}
.hide-ui{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:var(--fg);font:400 16px/1 var(--font);display:grid;place-items:center;cursor:pointer}
.hide-ui[aria-pressed="true"]{background:rgba(244,240,245,.9);color:var(--bg)}
.hide-hint{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));text-align:center;font:500 12px var(--font);color:rgba(244,240,245,.7);text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;z-index:2}
.reaction{position:absolute;left:16px;right:16px;bottom:140px;padding:10px 14px;border-radius:14px;background:rgba(31,26,37,.9);font:700 13px/1.5 var(--font);color:var(--pinkfg);z-index:3;pointer-events:none;animation:reaction-in .18s ease-out}
.reaction span{margin-left:6px;font-weight:400;color:var(--fg2)}
@keyframes reaction-in{from{opacity:0;transform:translateY(6px)}}
.reaction.warm{background:rgba(58,24,48,.92)}
.reaction.hot{background:rgba(92,18,56,.94);box-shadow:0 0 24px rgba(255,90,160,.45);font-size:14px;animation:reaction-in .18s ease-out,reaction-pulse 1.2s ease-in-out infinite .2s}
@keyframes reaction-pulse{50%{box-shadow:0 0 36px rgba(255,90,160,.7)}}
/* Adjust mode: translucent region ellipses + handles over the living layer; the root is pointer-events:none so
   empty space still reaches the canvas underneath (poking her stays possible while adjusting). */
.adj-root{position:absolute;inset:0;z-index:8;pointer-events:none}
.adj-ell{position:absolute;border:2px solid rgba(255,143,196,.9);border-radius:50%;background:rgba(255,143,196,.12);pointer-events:auto;touch-action:none}
.adj-ell.sel{border-color:#fff}
.adj-h{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;pointer-events:auto;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.adj-shapes{position:absolute;inset:0;pointer-events:none;animation:adj-in .18s ease-out .2s backwards}
@keyframes adj-in{from{opacity:0}}
/* Owner, 2026-09-30: fits a 320 px phone with no sideways overflow: one actions row that wraps if it must, sliders
   side by side from 380 px up, stacked below; every flex child may shrink (min-width:0) and the values stay visible. */
.adj-bar{position:absolute;left:0;right:0;bottom:0;padding:12px max(12px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:rgba(14,12,17,.97);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;pointer-events:auto;z-index:9;min-width:0;max-width:100%}
.adj-seg{display:flex;gap:6px;min-width:0}
.adj-seg-btn{flex:1 1 0;min-width:0;padding:8px 0;border-radius:10px;border:0;background:var(--s4);color:var(--mut);font:600 12px var(--font);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adj-seg-btn.on{background:var(--pink);color:var(--onpink)}
.adj-seg-btn[disabled]{opacity:.4;cursor:default}
.adj-sliders{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 14px}
@media (max-width:379px){.adj-sliders{grid-template-columns:minmax(0,1fr)}}
.adj-slider-row{display:flex;align-items:center;gap:8px;min-width:0;font:600 11px var(--font);color:var(--mut)}
.adj-slider-row span{flex:none;min-width:50px}
.adj-slider-row input[type=range]{flex:1 1 0;min-width:0;width:auto;margin:0;accent-color:var(--pink)}
.adj-slider-row b{flex:none;width:24px;text-align:right;color:var(--fg);font-weight:700}
.adj-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.adj-actions button{flex:1 1 auto;min-width:0;height:36px;padding:0 8px;border-radius:10px;border:0;background:var(--s4);color:var(--fg);font:600 12px var(--font);white-space:nowrap;cursor:pointer}
.adj-actions button.primary{background:var(--pink);color:var(--onpink)}
.adj-actions button[disabled]{opacity:.4;cursor:default}
/* The chat's view-mode top bar: back on the left, Adjust / Play / 💬 on the right, never wider than the screen. */
.view-top{position:relative;justify-content:space-between;gap:8px;min-width:0;padding:4px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
.adj-pill{padding:4px 10px;border-radius:99px;border:1px solid rgba(201,184,255,.55);background:rgba(0,0,0,.55);font:700 11px var(--font);letter-spacing:.04em;color:var(--viofg);cursor:pointer}
.chat-pill{color:var(--fg);border-color:rgba(255,255,255,.45);white-space:nowrap}
/* A slim pill with a ≥40 px tap area (2026-10-01 pre-launch): the look stays, the hit box grows. */
.hit{position:relative}.hit::after{content:"";position:absolute;inset:-9px -4px}
/* DMs: her phone, a plain messenger. Her bubbles left with a small avatar, yours pink on the right, photos inline. */
.screen.dm{background:var(--bg)}
.dm-head{padding:4px 16px 10px;border-bottom:1px solid var(--line)}
.dm-ava{border-radius:50%;overflow:hidden;flex:none}
.dm-list{display:flex;flex-direction:column;gap:6px;padding:12px 14px}
.dm-day{align-self:center;margin:4px 0 8px;font:500 11px var(--font);color:var(--mut2)}
.dm-row{display:flex;gap:8px;align-items:flex-end;align-self:flex-start;max-width:100%}
.dm-row.me{align-self:flex-end;flex-direction:row-reverse}
.dm-bubble{padding:9px 13px;border-radius:18px 18px 18px 6px;background:var(--s6);color:var(--fg);font:400 14px/1.45 var(--font);white-space:pre-wrap;overflow-wrap:anywhere}
.dm-bubble.me{border-radius:18px 18px 6px 18px;background:rgba(255,143,196,.92);color:var(--onpink)}
.dm-time{font:500 10px var(--font);color:var(--mut3);padding:0 4px}
.dm-photo{position:relative;width:200px;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--s5);cursor:pointer}
.dm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.dm-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,6,14,.25)}
.dm-lock span{padding:9px 14px;border-radius:99px;background:var(--pink);color:var(--onpink);font:700 12px var(--font)}
.dm-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:500 12px var(--font);color:var(--mut);cursor:default;background:linear-gradient(110deg,var(--s4) 30%,var(--s6) 50%,var(--s4) 70%);background-size:220% 100%;animation:dm-shimmer 1.6s linear infinite}
.dm-cam{font-size:22px}
@keyframes dm-shimmer{to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.dm-wait{animation:none}}
.dm-note{padding:6px 10px;border-radius:10px;background:var(--s4);font:500 11px var(--font);color:var(--mut)}
.dm-chips{padding:4px 14px 8px}
.dm-chip{flex:none;padding:8px 13px;border-radius:99px;border:1px solid rgba(255,143,196,.45);background:transparent;color:var(--pinkfg);font:500 13px var(--font);white-space:nowrap;cursor:pointer}
.dm-ask{display:flex;flex-direction:column;gap:10px;margin:0 14px 8px;padding:12px;border-radius:16px;background:var(--s4)}
.dm-x{border:0;background:none;color:var(--mut);font:500 14px var(--font);cursor:pointer;padding:4px}
.dm-input{padding:6px 14px calc(26px + env(safe-area-inset-bottom));gap:8px;flex:none}
.dm-cam-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--s4);font-size:18px;cursor:pointer}
.dm-cam-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--pink)}

/* Background renders (web/jobs.js): a pill while one runs (mid-screen, owner 2026-10-01: at the bottom the chat covered it), the nudge-style banner when it's ready. */
.job-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:29;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:rgba(28,22,32,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,120,180,.35);font:600 12px var(--font);color:var(--fg);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.job-dot{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:jobpulse 1.2s ease-in-out infinite}
@keyframes jobpulse{50%{opacity:.35;transform:scale(.8)}}
.job-ready{z-index:32}
.job-pill{overflow:hidden}.job-bar{position:absolute;left:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--vio),var(--pink));transition:width .9s linear}
.wait{display:flex;flex-direction:column;gap:7px;padding:11px 14px;border-radius:14px;background:rgba(31,26,37,.9);font:600 12px var(--font);color:var(--pinkfg)}
.wait-top{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.wait-bar{height:4px;border-radius:2px;background:#2e2835;overflow:hidden}.wait-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--vio),var(--pink));transition:width .5s linear}
/* Bring to life running: a soft light sweeps down the picture so it's clearly being read, and it can still be looked at. */
.life-scan{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.life-scan::after{content:"";position:absolute;left:0;right:0;height:22%;top:-22%;background:linear-gradient(transparent,rgba(255,143,196,.16) 70%,rgba(255,190,225,.45) 97%,transparent);animation:life-scan 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes life-scan{to{top:100%}}
.legal{font:400 11px/1.7 var(--font);text-align:center}.legal a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}

/* Studio (web/screens/studio.js, web/studio-wizard.js): the owner's prototype — a step bar, labelled fields with a
   pink "Required", dashed add squares, reference groups, scene cards with segmented chips, a fixed footer button. */
.st-head{display:flex;align-items:center;gap:10px;padding:4px 16px 12px;min-height:36px;flex:none}
.st-back{width:32px;height:32px;border-radius:50%;border:0;background:var(--s4);color:var(--fg);display:grid;place-items:center;font:600 18px var(--font);flex:none;cursor:pointer}
.st-head-title{flex:1;min-width:0;font:700 15px var(--font);padding-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-saved{font:500 11px var(--font);color:var(--mut2);display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none;text-align:right}
/* Under Saved once she's published: edits players can't see until Publish changes. */
.st-unpub{font:600 10px var(--font);color:var(--pinkfg);white-space:nowrap}
/* Wizard header: Home, beside Back — a labelled pill (a house + "Home"; writers missed the bare square). */
.st-home{height:32px;border-radius:16px;border:0;background:var(--s4);color:var(--fg);display:flex;align-items:center;gap:5px;flex:none;cursor:pointer;padding:0 11px 0 9px;font:600 12px var(--font)}
.st-home svg{display:block;flex:none}
.st-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 20px 4px;flex:none}
.st-steps button{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0;text-align:left;font:600 11px var(--font);color:var(--mut2);cursor:default}
.st-steps button i{height:3px;border-radius:2px;background:var(--s6);display:block}
.st-steps button.done{color:var(--mut);cursor:pointer}.st-steps button.done i{background:rgba(255,143,196,.45)}
.st-steps button.on{color:var(--fg)}.st-steps button.on i{background:var(--pink)}
.st-body{flex:1;min-height:0;overflow-y:auto;padding:20px 20px 28px;display:flex;flex-direction:column;gap:22px;-webkit-user-select:text;user-select:text}
.st-body>*{flex-shrink:0}
.st-foot{flex:none;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.st-foot .btn{height:50px;border-radius:14px;font-size:15px}.st-foot .btn.sm{height:42px;font-size:13px}
.st-title{font:800 22px/1.3 var(--font);letter-spacing:-.02em}
.st-sub{font:400 13px/1.5 var(--font);color:var(--mut);text-wrap:pretty}
.st-field{display:flex;flex-direction:column;gap:8px}
.st-field.bad .st-label b{color:var(--pinkfg)}
.st-label{display:flex;align-items:baseline;gap:6px}.st-label b{font:700 14px var(--font)}
.st-req{font:600 11px var(--font);color:var(--pinkfg)}.st-opt{font:600 11px var(--font);color:var(--mut2)}
.st-count{font:500 11px var(--font);color:var(--mut2)}
.st-hint{font:400 12px/1.5 var(--font);color:var(--mut2)}
.st-confirm{display:flex;align-items:center;gap:8px;font:500 12px/1.4 var(--font);color:var(--fg2);cursor:pointer}.st-confirm input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--pink)}
.st-input{width:100%;height:46px;padding:0 14px;border-radius:12px;background:var(--s4);border:1px solid rgba(255,255,255,.08);color:var(--fg);font:400 14px var(--font);outline:none}
textarea.st-input{padding:12px 14px;line-height:1.55;resize:none}
.st-input:focus{border-color:rgba(255,143,196,.5)}.st-input.bad{border-color:var(--pink)}.st-input.ok{border-color:rgba(201,184,255,.45)}
.st-input::placeholder{color:var(--mut3)}
.st-caret{position:absolute;right:6px;top:7px;width:32px;height:32px;display:grid;place-items:center;font:600 11px var(--font);color:var(--mut);cursor:pointer}
.st-drop{position:absolute;left:0;right:0;top:52px;z-index:10;max-height:220px;overflow-y:auto;border-radius:12px;background:var(--s5);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 30px rgba(0,0,0,.5);padding:4px}
.st-drop-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;cursor:pointer}
.st-drop-item:hover,.st-drop-item.on{background:var(--s6)}
.st-drop-item.new{font:600 13px var(--font);color:var(--pinkfg)}
.st-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.st-avatar{position:relative;width:104px;height:104px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.2);background:var(--s4);display:grid;place-items:center;font:300 30px var(--font);color:var(--mut);cursor:pointer;padding:0}
.st-avatar>div:first-child{border-radius:50%}
.st-avatar-pen{position:absolute;right:0;bottom:2px;width:30px;height:30px;border-radius:50%;background:var(--pink);color:var(--onpink);border:3px solid var(--bg);display:grid;place-items:center;font:700 13px var(--font)}
.st-strip{display:flex;gap:8px;overflow-x:auto}
.st-tile{position:relative;flex:none;border-radius:12px;overflow:hidden;background:var(--s4)}
.st-tile.ref::after{content:"";position:absolute;inset:0;border:2px solid var(--pink);border-radius:12px;pointer-events:none}
.st-tile.making{background:linear-gradient(110deg,var(--s4) 30%,var(--s6) 50%,var(--s4) 70%);background-size:220% 100%;animation:dm-shimmer 1.6s linear infinite}
.st-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:var(--fg);display:grid;place-items:center;font:600 10px var(--font);cursor:pointer;padding:0}
.st-tile-use,.st-tile-tag{position:absolute;left:4px;right:4px;bottom:4px;height:22px;border-radius:7px;border:0;display:grid;place-items:center;font:700 10px var(--font)}
.st-tile-use{background:rgba(0,0,0,.62);color:var(--fg);cursor:pointer}.st-tile-tag{background:var(--pink);color:var(--onpink)}
.st-add{flex:none;border-radius:12px;border:1.5px dashed rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:500 11px var(--font);color:var(--mut);cursor:pointer}
.st-add span{font:300 22px var(--font);color:var(--fg)}.st-add.pink{border-color:rgba(255,143,196,.45)}
.st-group{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;background:var(--s3);border:1px solid rgba(255,255,255,.06)}
.st-group-name{width:58px;flex:none;display:flex;flex-direction:column;gap:2px;padding-left:4px}
.st-group-name b{font:700 13px var(--font)}.st-group-name span{font:400 10px/1.3 var(--font);color:var(--mut2)}
.st-gen{width:100%;height:48px;border-radius:14px;background:var(--s5);border:1px solid rgba(255,143,196,.35);color:var(--fg);display:flex;align-items:center;justify-content:center;gap:8px;font:700 14px var(--font);cursor:pointer}
.st-gen span{font:500 12px var(--font);color:var(--mut)}.st-gen[disabled]{opacity:.45;cursor:default}
.st-ghost{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;box-sizing:border-box;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,143,196,.45);background:rgba(255,143,196,.08);color:var(--pinkfg);font:600 12px/1.3 var(--font);text-align:left;cursor:pointer}.st-ghost[disabled]{border-color:rgba(255,255,255,.1);background:none;color:var(--mut3);cursor:default}
.st-or{display:flex;align-items:center;gap:10px;margin-top:4px;font:600 12px var(--font);color:var(--mut)}.st-or::before,.st-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
/* web/zoom.js: tap a thumbnail, see it big (over everything, sheets and modals included) */
.zoom{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.94);display:grid;place-items:center;cursor:zoom-out;overscroll-behavior:contain;touch-action:none;animation:zoom-in .14s ease-out}
.zoom-stage{position:absolute;inset:calc(56px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom));display:grid}
.zoom-stage>*{grid-area:1/1;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;border-radius:0;background:none}
.zoom-stage .veil-hide{border-radius:12px}
.zoom-cap{position:absolute;left:20px;right:20px;bottom:calc(28px + env(safe-area-inset-bottom));font:500 14px/1.5 var(--font);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
.zoom-x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font:600 16px var(--font);cursor:pointer}
@keyframes zoom-in{from{opacity:0}to{opacity:1}}
.zoomable{cursor:zoom-in}
.st-looks{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.st-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:var(--s5);font:600 12px var(--font);color:var(--fg)}.st-chip.on{background:rgba(255,143,196,.18);color:var(--pinkfg)}
.st-chip button{border:0;background:none;color:var(--mut);font:600 11px var(--font);cursor:pointer;padding:0 0 0 2px}
.st-look-name{width:100%;height:32px;padding:0 10px;border-radius:9px;border:1px solid #2e2835;background:var(--s1);color:var(--fg);font:600 12px var(--font);box-sizing:border-box}.st-look-name:focus{outline:none;border-color:rgba(255,143,196,.6)}.st-look-name::placeholder{color:var(--mut);font-weight:500}
.st-results{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st-result{display:flex;flex-direction:column;gap:6px}
.st-result-use{height:30px;border-radius:9px;border:1px solid rgba(255,143,196,.45);background:none;color:var(--pinkfg);font:600 11px var(--font);cursor:pointer}
.st-result-on{height:30px;display:grid;place-items:center;font:700 11px var(--font);color:var(--pinkfg)}
.st-scene{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--s3);border:1px solid rgba(255,255,255,.06)}
.st-dot{width:8px;height:8px;border-radius:50%;background:var(--pink)}
.st-seg{display:flex;padding:3px;border-radius:9px;background:var(--s4)}
.st-seg button{border:0;background:none;padding:4px 9px;border-radius:7px;color:var(--mut);font:600 11px var(--font);cursor:pointer}
.st-seg button.on{background:var(--fg);color:var(--bg)}
.st-seg.wide button{flex:1;padding:7px 4px}
.st-x-sq{width:26px;height:26px;border-radius:8px;border:0;background:var(--s4);color:var(--mut);font:600 11px var(--font);cursor:pointer}
.st-add-row{height:44px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.18);background:none;color:#c9c2cf;font:600 13px var(--font);cursor:pointer}
.st-video{align-self:center;width:48%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--s4)}
.st-hero{position:relative;height:220px;border-radius:18px;overflow:hidden;background:var(--s4);flex:none}
.st-hero-text{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(transparent,rgba(10,8,12,.92))}
.st-banner{padding:10px 14px;border-radius:12px;background:rgba(201,184,255,.1);border:1px solid rgba(201,184,255,.25);font:500 12px/1.5 var(--font);color:var(--fg2)}
.st-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--s3);border:1px solid rgba(255,255,255,.06);font:400 13px/1.5 var(--font)}
.st-card-head{display:flex;align-items:center;justify-content:space-between}.st-card-head b{font:700 14px var(--font)}
.st-pen{width:30px;height:30px;border-radius:50%;border:0;background:var(--s4);color:var(--pinkfg);font:600 13px var(--font);cursor:pointer}
.st-line{display:flex;flex-direction:column;gap:2px;color:var(--fg2)}.st-line>span{font:600 11px var(--font);color:var(--mut)}
.st-chip{padding:5px 10px;border-radius:99px;background:rgba(255,143,196,.12);color:var(--pinkfg);font:600 12px var(--font)}
.st-problems{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:12px;background:rgba(255,92,138,.1);border:1px solid rgba(255,92,138,.35);font:500 12px/1.5 var(--font);color:#ffc2d4}
.st-option{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:14px;border:0;background:var(--s4);color:var(--fg);text-align:left;cursor:pointer}
.st-option b{font:700 14px var(--font)}.st-option span{font:400 12px/1.45 var(--font);color:var(--mut)}
.st-cancel{height:44px;margin-top:8px;border:0;background:none;color:var(--mut);font:600 14px var(--font);cursor:pointer}
.st-row{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--s1);cursor:pointer}
.st-row-art{width:56px;height:74px;border-radius:10px;overflow:hidden;flex:none}
.st-clip{font:400 12px/1.4 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-note{font:500 11px/1.4 var(--font);color:#ffc2d4}
.st-pill{flex:none;padding:3px 8px;border-radius:99px;font:700 10px var(--font);background:rgba(255,255,255,.08);color:var(--fg2)}
.st-pill.private{background:rgba(201,184,255,.14);color:var(--viofg)}.st-pill.pending{background:rgba(255,200,120,.14);color:#ffd08a}
.st-pill.public{background:rgba(255,143,196,.16);color:var(--pinkfg)}.st-pill.rejected{background:rgba(255,92,138,.18);color:#ff8fa8}
.st-pill.published{background:rgba(255,143,196,.16);color:var(--pinkfg)}
.st-add-row[disabled]{opacity:.45;cursor:default}
.st-empty{display:flex;flex-direction:column;gap:6px;padding:22px 18px;border-radius:16px;border:1.5px dashed rgba(255,255,255,.12);text-align:center}
.st-signin{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:40px;padding:28px 22px;border-radius:22px;background:var(--s3);border:1px solid rgba(255,255,255,.08);text-align:center}
.st-signin .btn{margin-top:6px}
.st-signin-art{width:64px;height:64px;border-radius:50%;background:rgba(255,143,196,.14);color:var(--pinkfg);display:grid;place-items:center;font:600 26px var(--font)}
.st-tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;align-items:start}
.st-tpl{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--fg);text-align:left;cursor:pointer}
.st-tpl b{font:700 14px var(--font)}.st-tpl>span{font:400 11px/1.4 var(--font)}
.st-tpl.blank{aspect-ratio:3/4;border-radius:12px;border:1.5px dashed rgba(255,143,196,.45);align-items:center;justify-content:center;text-align:center}
.st-tpl-view{position:relative;flex:1;min-height:0;height:min(60vh,540px);display:flex;justify-content:center}
.st-tpl-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font:400 24px/1 var(--font);cursor:pointer}
.st-tpl-nav.prev{left:2px}.st-tpl-nav.next{right:2px}

/* Chat: the log is capped to its latest lines at the bottom (her face stays uncovered); older ones scroll up and fade out
   under the top edge. The padding is the fade's room, so a short log never fades its first bubble. */
/* Owner, 2026-09-30: the text never runs up the whole picture. .chat-stack (log + choices + tools + composer) keeps to the
   lower half; the log takes what the rest leaves (it shrinks first), scrolls on its own and catches swipes anywhere in it.
   View mode / pinning fade the stack out (inert, so taps reach her layer). */
.chat-stack{position:relative;flex:0 1 auto;min-height:0;max-height:42%;display:flex;flex-direction:column;pointer-events:none;transition:opacity .18s ease}
.chat-stack.full{flex:1 1 0;max-height:none}
.chat-stack.off{opacity:0}.chat-stack.off,.chat-stack.off *{pointer-events:none !important}
.chat-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(8,6,10,.4),rgba(8,6,10,0) 14%,rgba(8,6,10,0) 46%,rgba(8,6,10,.82) 76%);transition:opacity .18s ease}
.chat-shade.off{opacity:0}
.chat-pick{pointer-events:auto}
/* Owner, 2026-10-01: a long, obvious fade: transparent at the log's top edge to opaque at half its visible height, so
   only the latest exchange reads at full strength (older lines are also dimmed, .msg.old). Scrolled up to read
   (data-reading, set on scroll), the fade relaxes to the top fifth. The stack's cap went 52 % → 42 %. */
.chat-log{flex:0 1 auto;min-height:64px;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;padding-top:18px !important;--fade:linear-gradient(transparent,rgba(0,0,0,.12) 8%,rgba(0,0,0,.4) 18%,rgba(0,0,0,.75) 29%,#000 40%);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.chat-log[data-reading="1"]{--fade:linear-gradient(transparent,rgba(0,0,0,.6) 10%,#000 22%)}
.chat-log .msg{transition:opacity .25s ease}.chat-log .msg.old{opacity:.6}
.chat-log[data-reading="1"] .msg.old{opacity:.85}
.chat-stack .tools{gap:6px;padding:0 16px 6px}
.chat-stack .tool{height:28px;padding:0 11px;border-radius:9px;font-size:11.5px}
.chat-stack .typing{padding:10px 12px}
/* Short screens (a browser tab under its address bar): tighter choices so the chat block doesn't climb onto her face. */
@media (max-height:700px){.choice{padding:9px 12px;font-size:13px}.choice-label{display:none}}
.wd-short{display:none}@media (max-width:380px){.wd-long{display:none}.wd-short{display:inline}.wd-top .h2{padding:6px 9px;font-size:14px}.wd-top .tag{padding:8px 9px !important}.wd-top>.row{gap:4px !important}}
/* Video intro: full screen over a fresh story room, once (web/screens/chat.js IntroOverlay) */
.intro-ov{position:absolute;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center}
.intro-ov video{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block}
.intro-skip{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;height:34px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:var(--fg);font:600 13px var(--font);cursor:pointer}
.intro-sub{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(40px + env(safe-area-inset-bottom));max-width:calc(100% - 40px);padding:7px 14px;border-radius:10px;background:rgba(0,0,0,.62);color:#fff;font:600 15px/1.4 var(--font);text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.9);pointer-events:none;white-space:pre-wrap}
/* A player's own subtitle over a picture / clip he made (web/ui.js Subtitle): the intro's look, above the media */
.gen-sub{z-index:7;width:max-content}
.intro-sound{position:absolute;top:calc(14px + env(safe-area-inset-top));left:16px;height:34px;padding:0 14px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:var(--fg);font:600 13px var(--font);cursor:pointer}
.intro-start{position:absolute;left:24px;right:24px;bottom:calc(48px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px}
.intro-start .btn{height:52px;border-radius:16px;font-size:16px}
.intro-start span{font:500 12px var(--font);color:#e2dbe7;text-shadow:0 1px 6px rgba(0,0,0,.7)}
/* Studio Intro step */
.st-intro{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-intro-tile{display:flex;flex-direction:column;gap:6px}
.st-intro-tile>div{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--s4)}
.st-intro-tile video,.st-intro-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block}
.st-intro-tile>span{font:600 11px var(--font);color:var(--mut);text-align:center}
.st-intro-tile.end>div::after{content:"";position:absolute;inset:0;border:2px solid var(--pink);border-radius:14px;pointer-events:none}
.st-intro-tile.end>span{color:var(--pinkfg)}
.st-danger{align-self:flex-start;border:0;background:none;padding:2px 0;color:var(--mut);font:600 12px var(--font);cursor:pointer;text-decoration:underline}
/* Comic intro: the writer's cuts, reordered by drag and drop (web/studio-wizard.js CutList) */
.st-cuts{display:flex;flex-direction:column;gap:8px;position:relative}
.st-cut{position:relative;display:flex;flex-direction:column;gap:10px;padding:8px 8px 8px 4px;border-radius:14px;background:var(--s3);border:1px solid rgba(255,255,255,.06);touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;will-change:transform}
.st-cut input,.st-cut textarea{-webkit-user-select:text;user-select:text}
.st-cuts.dragging .st-cut{transition:transform .18s ease}
.st-cuts.dragging .st-cut.lifted{transition:none;z-index:5;background:var(--s4);border-color:rgba(255,143,196,.55);box-shadow:0 16px 36px rgba(0,0,0,.55)}
.st-cut-row{display:flex;gap:10px;align-items:center}
.st-cut-grip{flex:none;width:22px;align-self:stretch;display:grid;place-items:center;color:var(--mut2);font:700 13px/1 var(--font);letter-spacing:-3px;cursor:grab;touch-action:none}
.st-cuts.dragging .st-cut-grip{cursor:grabbing}
.st-cut-thumb{position:relative;flex:none;border-radius:10px;overflow:hidden;background:var(--s4);display:grid;place-items:center;font:700 13px var(--font);color:var(--mut3)}
.st-cut-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.st-cut-text b{font:700 13px var(--font)}
.st-cut-tag{font:600 10px var(--font);color:var(--mut2)}
.st-cut-tools{flex:none;display:grid;grid-template-columns:26px 26px;gap:4px}
.st-cut-tools button{width:26px;height:26px;border-radius:8px;border:0;background:var(--s4);color:var(--mut);font:600 12px var(--font);cursor:pointer;padding:0}
.st-cut-tools button.on{color:var(--pinkfg)}.st-cut-tools button:disabled{opacity:.35;cursor:default}
.st-cut-edit{display:flex;flex-direction:column;gap:8px;padding:0 4px 0 8px}
.st-add-lbl{flex:1;display:flex;align-items:center;justify-content:center}.st-add-lbl.off{opacity:.5;pointer-events:none}
.st-toggle{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--s3);border:1px solid rgba(255,255,255,.06)}.st-toggle b{font:700 14px var(--font)}
/* Home header: the chips never wrap ("Get app" broke onto two lines at 320 px); narrow phones get "App" and tighter spacing. */
.get-app{flex:none;white-space:nowrap}.home-top>.row{flex:none}.ga-short{display:none}
@media (max-width:350px){.ga-long{display:none}.ga-short{display:inline}.home-top{padding-left:16px !important;padding-right:16px !important}.home-top .h1{font-size:21px}.home-top>.row{gap:6px !important}}
/* World tags (src/world-tags.mjs): one chip look for Setup's picker (wraps) and Home's filter row (scrolls sideways on its
   own, edge to edge inside the 20 px gutter; the page itself never scrolls sideways). Home's 🔍 opens into a field. */
.wtags{display:flex;flex-wrap:wrap;gap:6px}
.wtag{flex:none;border:1px solid transparent;padding:5px 11px;border-radius:999px;background:var(--s5);color:var(--fg2);font:600 12px var(--font);white-space:nowrap;cursor:pointer}
.wtag.on{background:rgba(255,143,196,.18);border-color:rgba(255,143,196,.45);color:var(--pinkfg)}
.wtag.ip{color:var(--viofg)}.wtag.ip.on{background:rgba(201,184,255,.16);border-color:rgba(201,184,255,.45);color:var(--viofg)} /* a franchise */
span.wtag{cursor:default}
.home-tags{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;margin:0 -20px 12px;padding:2px 20px;scrollbar-width:none}.home-tags::-webkit-scrollbar{display:none}
.home-search-btn{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--s4);font-size:14px;cursor:pointer}
.home-search{flex:1;min-width:0;max-width:240px;display:flex;align-items:center;height:34px;border-radius:999px;background:var(--s4);border:1px solid rgba(255,143,196,.35);padding:0 4px 0 12px}
.home-search input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:500 13px var(--font);outline:none;-webkit-appearance:none;appearance:none}.home-search input::-webkit-search-cancel-button{display:none}
.home-search button{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--mut);font:600 16px var(--font);cursor:pointer}
/* Chat choices: compact chips that wrap (two lines at most), "Call it a night" as a quiet chip at the end. */
.choices{display:flex;flex-wrap:wrap;gap:4px;padding:2px 16px 5px;flex:none;position:relative}
.choices .choice{width:auto;max-width:100%;padding:5px 10px;border-radius:15px;font:500 12px/1.28 var(--font);gap:5px}
.choices .choice::after{font-size:15px}
.choices .choice-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.choices .choice-end{align-self:auto;padding:5px 10px;border-radius:15px;border:1px dashed rgba(255,255,255,.2);color:var(--mut);font:500 12px var(--font)}
/* Her gallery (web/screens/gallery.js): equal 9:16 tiles; minmax(0,1fr) + min-width:0 so a long one-line caption can't
   widen its column (owner, 2026-10-01: the first tile came out bigger than the rest). */
.gal-grid{padding:0 16px 34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start}
.gal-item{gap:4px;min-width:0;cursor:pointer}
.gal-thumb{width:100%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;position:relative;background:var(--s2)}
.gal-cap{display:block;min-width:0;font:500 10px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Chat ＋ More sheet: the tools that used to overflow the row. */
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.more-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:16px;border:0;background:var(--s5);color:var(--fg);font:700 15px var(--font);text-align:left;cursor:pointer}
.more-btn small{font:400 11px/1.35 var(--font);color:var(--mut)}
/* Wardrobe side icons carry a name (what ✎ and ✦ do wasn't guessable). */
.wd-icon-l{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10px var(--font);color:#e7e1ea;text-shadow:0 1px 4px rgba(0,0,0,.7);cursor:pointer}
/* Empty screens: what goes here, then the next step. */
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 24px;text-align:center}
.empty p{font:400 13px/1.5 var(--font);color:var(--mut);max-width:300px}
.empty-acts{display:flex;flex-direction:column;gap:8px;width:100%;max-width:280px}
/* On/off switch (settings). */
.switch{flex:none;width:46px;height:28px;border-radius:14px;border:0;padding:3px;background:var(--s6);cursor:pointer;transition:background .15s}
.switch i{display:block;width:22px;height:22px;border-radius:50%;background:#cfc8d6;transition:transform .15s}
.switch.on{background:var(--pink)}.switch.on i{transform:translateX(18px);background:#fff}
.switch:disabled{opacity:.4;cursor:default}
.st-cut-thumb .st-cut-play{position:absolute;right:4px;bottom:3px;font:normal 10px/1 var(--font);color:#fff;text-shadow:0 1px 3px #000}

/* Feed: gossip incidents and "Go there" (src/incidents.mjs, enterPost) */
.incident-tag{flex:none;padding:2px 7px;border-radius:6px;background:#ff5fa8;color:#1a0610;font:800 10px var(--font);letter-spacing:.04em;text-transform:uppercase}
.go-there{cursor:pointer;color:var(--pinkfg);font-weight:600}
/* DM her: right end of a post's name row, paper plane + label (web/screens/feed.js); the negative margins keep the row's height. */
.feed-dm{flex:none;margin:-5px -8px -5px auto;padding:5px 8px;display:inline-flex;align-items:center;gap:4px;border:0;border-radius:8px;background:none;color:var(--pinkfg);font:600 12px var(--font);cursor:pointer}
.feed-dm:hover{background:rgba(255,143,196,.12)}
/* His own posts (web/screens/feed.js): the composer on top, the lock label, the ⋯ delete, his initial for a picture. Only he sees them. */
.feed-compose{display:flex;flex-direction:column;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line)}
.feed-compose textarea{min-height:64px;max-height:180px;padding:10px 12px;font:400 14px/1.5 var(--font)}
.feed-compose .feed-price{font:500 11px var(--font);color:var(--mut2);white-space:nowrap}
.feed-from{font:500 10px var(--font);color:var(--mut2);white-space:nowrap}
/* A world's supporting people in its feed (their posts and comments): a round face (initials until drawn), a muted role. */
.side-face{border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--s4);color:var(--fg2);font-weight:800;font-family:var(--font);cursor:pointer}
.side-role{font:500 11px var(--font);color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-role.inline{font-size:10px;display:inline;white-space:normal}
.side-by{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;cursor:pointer;color:var(--fg2)}
.feed-lock{flex:none;padding:2px 7px;border-radius:6px;background:var(--s4);color:var(--mut2);font:600 10px var(--font);white-space:nowrap}
.feed-more{flex:none;margin:-5px -8px -5px auto;padding:2px 10px;border:0;border-radius:8px;background:none;color:var(--mut2);font:700 16px/1 var(--font);cursor:pointer}
.feed-more:hover{background:var(--s4);color:var(--fg2)}
.feed-me{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--s4);color:var(--fg2);font:800 16px var(--font)}
.feed-delete-go{background:var(--danger);color:var(--ondanger)}
.go-there.big{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;border:1px solid #ff5fa8;background:linear-gradient(90deg,rgba(255,95,168,.28),rgba(60,14,36,.6));color:var(--fg);font:700 13px var(--font);text-align:left}
.go-there.big span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.go-there.big small{flex:none;font:600 11px var(--font);color:var(--pinkfg)}

/* The encounter on her picture (src/arc.mjs phase on room.rudder): breathing during sex, a flash and a shudder when she
   comes. On .living, so it works over any backdrop (still, clip, living layer) for every character. */
.arc-sex .living>*{animation:arc-breathe 2.4s ease-in-out infinite}
.arc-sex .living::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(255,60,140,.28));animation:arc-heat 2.4s ease-in-out infinite}
.arc-after .living>*{animation:arc-shudder .9s ease-out 1}
.arc-after .living::after{content:"";position:absolute;inset:0;pointer-events:none;background:#fff;animation:arc-flash 1.4s ease-out 1 forwards}
@keyframes arc-breathe{0%,100%{transform:scale(1.02)}50%{transform:scale(1.06)}}
@keyframes arc-heat{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes arc-shudder{0%{transform:scale(1.08) translate(0,0)}15%{transform:scale(1.08) translate(-6px,3px)}30%{transform:scale(1.07) translate(5px,-4px)}45%{transform:scale(1.06) translate(-4px,2px)}60%{transform:scale(1.05) translate(3px,-2px)}100%{transform:scale(1) translate(0,0)}}
@keyframes arc-flash{0%{opacity:.85}25%{opacity:.35;background:#ff5fa8}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.arc-sex .living>*,.arc-sex .living::after,.arc-after .living>*{animation:none}}
/* Make screen templates (src/stage.mjs): wrap, locked ones dimmed with their ♥ */
.make-opts{display:flex;flex-wrap:wrap;gap:8px}
.make-opts .opt.locked{opacity:.45}
.make-opts .opt.with{display:inline-flex;align-items:center;gap:6px}.make-opts .opt.with img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.st-ghost.st-draw1{color:var(--pinkfg)}
/* Wizard rework (Looks first): Generate + Upload side by side, reference prompts, items, cut references, the intro's AI clip box. */
.st-gen-row{display:flex;gap:8px}.st-gen-row>.st-gen{flex:1;width:auto}
.st-gen.pink{background:var(--pink);border-color:var(--pink);color:var(--onpink)}.st-gen.pink span{color:var(--onpink);opacity:.8}
.st-gen.st-upload{flex:0 0 38%;background:var(--s4);border-color:rgba(255,255,255,.14)}
.st-group.wrap{flex-wrap:wrap}
.st-ref-gen{flex-basis:100%;display:flex;gap:6px}.st-ref-gen .st-input{height:36px;font-size:12px;padding:0 10px;border-radius:10px;flex:1;min-width:0}
.st-ref-go{flex:none;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,143,196,.45);background:none;color:var(--pinkfg);font:700 12px var(--font);cursor:pointer;white-space:nowrap}.st-ref-go[disabled]{opacity:.4;cursor:default}
.st-item{display:flex;gap:8px;align-items:flex-start;padding:10px;border-radius:14px;background:var(--s3);border:1px solid rgba(255,255,255,.06)}
.st-item-icon{width:48px !important;flex:none;height:40px;padding:0;text-align:center;font-size:20px}
.st-ref-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:var(--s4);color:var(--mut);font:600 12px var(--font);cursor:pointer}
.st-ref-chip.on{border-color:var(--pink);color:var(--pinkfg);background:rgba(255,143,196,.12)}
.st-ref-chip-art{position:relative;width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;display:block}
.st-fold{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;padding:0;color:var(--fg);font:700 14px var(--font);cursor:pointer}
/* Comic play (web/screens/play.js): one cut per page, her lines along the bottom; the chat's header links back here. */
.comic-btn{flex:none;padding:7px 13px;border-radius:99px;border:1px solid rgba(255,143,196,.45);background:rgba(0,0,0,.55);color:var(--fg);font:700 12px var(--font);cursor:pointer}
.screen.play{background:#000}
.play-head{position:relative;gap:10px;padding:4px 16px 10px}
.play-scroll{container-type:size;scroll-snap-type:y mandatory;overscroll-behavior:contain}
/* One cut = exactly the visible area (100cqh of the scroller), so her lines and the choices never fall below the fold. */
.cut{height:100cqh;scroll-snap-align:start;scroll-snap-stop:always}
.cut-art{position:relative;width:100%;height:100%;overflow:hidden;background:var(--s1)}
.cut-edit{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);color:var(--fg);font:600 15px var(--font);pointer-events:none}
.play-head .comic-btn+.comic-btn{margin-left:-2px}
/* A page's text reads like the chat's (web/screens/chat.js inline sizes): a band along the bottom (the top when her face
   sits low) over the full-bleed picture, its log capped at 28 % of the page (.cut-log over the chat's .chat-log fade). */
.cut-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:28px 14px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(8,6,10,.7) 38%);pointer-events:none}
.cut-cap.top{top:0;bottom:auto;padding:8px 14px 28px;background:linear-gradient(rgba(8,6,10,.7) 62%,transparent)}
.cut-log{display:flex;flex-direction:column;gap:10px;max-height:28cqh;pointer-events:auto;overscroll-behavior:contain}
.cut-line{align-self:flex-start;max-width:80%;padding:11px 14px;border-radius:4px 16px 16px 16px;background:rgba(31,26,37,.78);color:var(--fg);font:400 14px/1.5 var(--font)}
.cut-line b{display:block;font:700 11px var(--font);margin-bottom:2px}
.cut-her{align-self:flex-start;max-width:80%;display:flex;flex-direction:column;gap:4px}
.cut-her>span{font:700 12px var(--font)}
.cut-her .cut-line{max-width:none}
.cut-narr{align-self:center;max-width:290px;text-align:center;font:italic 400 12px/1.5 var(--font);color:#c9c2cf}
.cut-you{align-self:flex-end;max-width:80%;padding:11px 14px;border-radius:16px 4px 16px 16px;background:rgba(255,143,196,.9);color:#1a0610;font:400 14px/1.5 var(--font)}
.cut .typing{align-self:flex-start}
.cut-wait{position:absolute;left:16px;right:16px;top:38%}
.play-ctl{display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.play-chips{padding:0}
.play-hint{align-self:center;font:500 11px var(--font);color:var(--mut)}
/* A complete episode (src/arc.mjs): the comic's end card in place of the rings, and the chat's short status line. */
.ep-end{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:rgba(20,15,26,.9);border:1px solid rgba(255,143,196,.35);text-align:center;animation:ep-in .35s ease-out}
.ep-end b{font:800 18px var(--font);letter-spacing:.2px}
.ep-end .btn{height:46px;font-size:14px;border-radius:12px;flex:1}
.ep-end .btn small.choice-cost{padding:2px 6px;border-radius:8px;background:rgba(0,0,0,.18);font:700 11px var(--font);font-variant-numeric:tabular-nums}
.ep-line{align-self:center;margin:2px 0 6px;padding:7px 14px;border-radius:99px;background:rgba(20,15,26,.88);border:1px solid rgba(255,143,196,.4);font:600 12px var(--font);color:var(--pinkfg);text-align:center;animation:ep-in .3s ease-out}
@keyframes ep-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ep-end,.ep-line{animation:none}}
/* The newest page is the touch (web/touch-play.js): rings on her hand / chest / hips, the picture leaning under the
   finger (or the living layer's spring), and the picked part's label with its choice and credits. */
.pl-stage{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pl-lean{position:absolute;inset:0;transition:transform .12s ease-out;will-change:transform}
.pl-lean.pressed{transform:scale(1.035)}
.pl-lean.bounce{animation:pressback .5s cubic-bezier(.3,1.6,.5,1)}
.pl-live{position:absolute;inset:0;pointer-events:none}
.pl-live .living-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-spot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,143,196,.22);pointer-events:auto;cursor:pointer;touch-action:manipulation;z-index:5;animation:pl-pulse 1.8s ease-out infinite;transition:transform .15s,background .15s}
/* The ring takes the tap itself, over the text band too (a ring under her speech bubble couldn't be tapped, owner
   2026-09-30); its press bubbles to .pl-stage's handlers. ::after = a finger-sized hit area. */
.pl-spot::after{content:"";position:absolute;inset:-14px;border-radius:50%}
.pl-spot[data-part="place"]{border-style:dashed;background:rgba(255,255,255,.14)} /* the place: a spot of the background, not her */
.pl-spot.on{transform:scale(1.4);background:rgba(255,143,196,.62);border-color:#fff;animation:none;box-shadow:0 0 16px rgba(255,143,196,.7)}
@keyframes pl-pulse{0%{box-shadow:0 0 0 0 rgba(255,143,196,.6),0 1px 6px rgba(0,0,0,.45)}70%{box-shadow:0 0 0 14px rgba(255,143,196,0),0 1px 6px rgba(0,0,0,.45)}100%{box-shadow:0 0 0 0 rgba(255,143,196,0),0 1px 6px rgba(0,0,0,.45)}}
.pl-ripple{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(255,190,220,.9);pointer-events:none;z-index:3;animation:pl-ripple .6s ease-out forwards}
@keyframes pl-ripple{to{transform:scale(4.5);opacity:0}}
.pl-label{position:absolute;z-index:4;max-width:min(64%,260px);display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-radius:14px;border:1px solid rgba(255,143,196,.6);background:rgba(20,17,24,.88);color:var(--fg);font:500 13px/1.35 var(--font);text-align:left;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.45);animation:reaction-in .18s ease-out}
.pl-label .choice-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pl-label small{flex:none;font:600 10px var(--font);color:var(--pinkfg)}
.pl-label small.choice-cost{padding:2px 6px;border-radius:8px;background:rgba(255,143,196,.2);color:var(--fg);font-variant-numeric:tabular-nums}
.pl-label::after{content:"›";color:var(--pinkfg);font-size:17px;line-height:1}
@media (prefers-reduced-motion:reduce){.pl-spot,.pl-lean.bounce{animation:none}}
/* Add Scenes (web/pin.js): the pin overlay over any picture, and the still ⇄ video switch on video backdrops. */
.pin-layer{position:absolute;inset:0;z-index:8;touch-action:none;background:rgba(8,6,10,.3);cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* Pin mode's objective card (top left) and its × (top right). */
.pin-card{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;max-width:calc(100% - 84px);display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:14px;background:rgba(18,14,22,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:default;z-index:3}
.pin-card b{font:700 14px var(--font);color:var(--fg)}.pin-card span{font:500 12px var(--font);color:#d9d2de}
.pin-x{position:absolute;top:calc(18px + env(safe-area-inset-top));right:14px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(18,14,22,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--fg);font:400 22px/1 var(--font);cursor:pointer;z-index:3}
/* Browse (the chat's view mode): only the spots and their strips; the layer itself lets taps through to her. */
.pin-layer.browse{background:none;pointer-events:none;cursor:default;animation:pin-fade .18s ease-out}
.pin-layer.browse .pin-dot,.pin-layer.browse .pin-bubble,.pin-layer.browse .pin-none{pointer-events:auto}
.pin-layer.browse .pin-dot{transition:transform .5s ease,opacity .5s ease,background-color .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease}
@keyframes pin-fade{from{opacity:0}to{opacity:1}}
/* Chat mode (text up): the dots only, smaller and see-through; one tap is view mode with that spot open. */
.pin-layer.peek .pin-dot{opacity:.62;transform:scale(.78);box-shadow:0 0 0 2px rgba(255,143,196,.22),0 2px 6px rgba(0,0,0,.4)}
.pin-catch{position:absolute;inset:0;pointer-events:auto;z-index:0}
.pin-none{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(18,14,22,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#d9d2de;font:500 12px var(--font);white-space:nowrap;cursor:pointer;z-index:1}
.pin-none b{color:var(--pinkfg);font-weight:700}
.pin-mark{position:absolute;z-index:2;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid #fff;background:var(--pink);box-shadow:0 0 0 6px rgba(255,143,196,.35),0 0 22px 6px rgba(255,143,196,.5),0 4px 14px rgba(0,0,0,.5);pointer-events:none;animation:pin-drop .22s ease-out}
@keyframes pin-drop{from{transform:translateY(-14px) scale(.6);opacity:0}to{transform:none;opacity:1}}
/* The pin's speech bubble (owner, 2026-09-30, Manyverse-style): glassy dark, pink accent, a tail pointing at the pin. */
.pin-bubble{position:absolute;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:rgba(18,14,22,.86);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.45);cursor:default;z-index:2;animation:pin-pop .18s ease-out;box-sizing:border-box}
@keyframes pin-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.pin-tail{position:absolute;width:22px;height:11px;margin-left:-11px;background:rgba(255,255,255,.2)}
.pin-tail::after{content:"";position:absolute;left:2px;right:2px;background:rgb(18,14,22);clip-path:inherit}
.pin-tail.up{top:-11px;clip-path:polygon(50% 0,100% 100%,0 100%)}.pin-tail.up::after{top:2px;bottom:-1px}
.pin-tail.down{bottom:-11px;clip-path:polygon(0 0,100% 0,50% 100%)}.pin-tail.down::after{top:-1px;bottom:2px}
.pin-bubble-t{font:700 11px var(--font);letter-spacing:.02em;color:var(--pinkfg);margin:0 2px}
.pin-parts{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 2px 0}
.pin-part{height:28px;padding:0 12px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:var(--fg);font:700 11.5px var(--font);cursor:pointer;white-space:nowrap}
.pin-part.on{background:var(--pink);border-color:transparent;color:var(--onpink)}
/* Tags (owner, 2026-10-01): the bubble's small tag field beside "Touching her chest", and my tile's Edit tag sheet. */
.pin-tagline{display:flex;align-items:center;justify-content:space-between;gap:8px}.pin-tagline>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pin-tag{flex:none;display:flex;align-items:center;gap:5px;cursor:text}.pin-tag small{font:700 9px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pin-tag input,.pin-tag-in{box-sizing:border-box;height:30px;padding:0 9px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:var(--fg);font:600 16px var(--font);outline:none}
.pin-tag input{width:112px}.pin-tag-in{width:100%;height:38px}
.pin-tag input:focus,.pin-tag-in:focus{border-color:rgba(255,143,196,.6)}
.pin-parts.scroll{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px;padding:2px 12px;scrollbar-width:none;touch-action:pan-x}.pin-parts.scroll::-webkit-scrollbar{display:none}.pin-parts.scroll .pin-part{flex:none}
.pin-tile-edit{align-self:flex-start;padding:3px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--fg);font:700 9px var(--font);letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.pin-q{font:700 14px var(--font);color:var(--fg);margin:-4px 2px 0}
.pin-ta{position:relative}
.pin-ta textarea{display:block;width:100%;box-sizing:border-box;resize:none;min-height:64px;padding:9px 11px 20px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.35);color:var(--fg);font:400 16px/1.4 var(--font);outline:none}
.pin-ta textarea:focus{border-color:rgba(255,143,196,.6);box-shadow:0 0 0 3px rgba(255,143,196,.15)}
.pin-ta textarea::placeholder{color:var(--mut2)}
.pin-count{position:absolute;right:10px;bottom:6px;font:600 10px var(--font);color:var(--mut2);font-variant-numeric:tabular-nums;pointer-events:none}
.pin-btns{display:flex;gap:8px}
.pin-go{flex:1;min-width:0;height:38px;padding:0 12px;border:0;border-radius:99px;background:var(--pink);color:var(--onpink);font:800 12px var(--font);letter-spacing:.05em;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.pin-go small{font:700 11px var(--font);letter-spacing:0;opacity:.75}
.pin-go.vid{background:linear-gradient(135deg,var(--pink),var(--vio))}
.pin-go.ghost{background:rgba(255,255,255,.08);color:var(--fg);border:1px solid rgba(255,255,255,.12)}
.pin-go:disabled,.pin-go-off{opacity:.38;cursor:default}
.pin-by{font:800 11px var(--font);letter-spacing:.06em;color:var(--pinkfg)}.pin-meta{font:600 11px var(--font);color:var(--mut)}
/* Branches already grown on the picture (owner's reference, 2026-09-30): a hotspot label pill over a glowing spot. */
/* Declutter (owner, 2026-10-01: pins must not hide her): a spot is a small dot with its count; its label shows only while it is open. */
.pin-dot{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(18,14,22,.6);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 3px rgba(255,143,196,.3),0 2px 8px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1}
.pin-dot::before{content:"";position:absolute;inset:-10px;border-radius:50%}
.pin-dot b{font:800 10px/1 var(--font);font-variant-numeric:tabular-nums}
.pin-spot.mine .pin-dot{border-color:var(--pinkfg)}
.pin-spot.on .pin-dot{background:var(--pink);border-color:#fff;color:var(--onpink)}
/* First visits (web/coach.js): the spots sparkle at full strength for a few seconds, the dots under the chat's text too,
   then settle to the normal dots. Owner, 2026-10-01 ("too subtle"): bigger, solid pink with a white number and a soft
   halo; a ring pulses out well past the dot 3 times (fill-mode both: no ring left over), then the transition above settles it back to the normal look.
   The dots outside the peek gap are `ghost`s: shown while fresh, never tappable (taps reach the chat's chips/text). */
.pin-layer.fresh .pin-dot{opacity:1;transform:scale(1.4);background:var(--pinkfg);border-color:#fff;color:#fff;box-shadow:0 0 0 3px rgba(232,90,160,.45),0 0 18px 6px rgba(255,143,196,.55),0 2px 10px rgba(0,0,0,.55);z-index:2}
.pin-layer.fresh .pin-dot b{text-shadow:0 1px 2px rgba(110,10,60,.7)}
.pin-layer.fresh .pin-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2.5px solid #ff8fc4;box-shadow:0 0 10px 1px rgba(255,143,196,.7),inset 0 0 6px rgba(255,143,196,.5);pointer-events:none;animation:pin-sparkle 1.3s cubic-bezier(.2,.6,.3,1) 3 both}
@keyframes pin-sparkle{0%{transform:scale(1);opacity:1}55%{opacity:.6}100%{transform:scale(3.2);opacity:0}}
.pin-layer.peek .pin-dot.ghost{opacity:0}
.pin-layer.fresh .pin-dot.ghost{opacity:1}
.pin-layer.browse .pin-dot.ghost{pointer-events:none}
.pin-hot{position:absolute;transform:translate(-50%,calc(-100% - 12px));display:flex;align-items:center;gap:6px;max-width:150px;padding:5px 10px 5px 5px;border-radius:99px;background:rgba(18,14,22,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,190,160,.45);box-shadow:0 4px 14px rgba(0,0,0,.35);color:var(--fg);cursor:pointer;z-index:1;white-space:nowrap;transition:border-color .15s,box-shadow .15s}
.pin-hot.below{transform:translate(-50%,16px)}.pin-hot{pointer-events:none;margin-top:-4px;animation:pin-fade .15s ease-out}.pin-hot.below{margin-top:0}
.pin-hot b{font:800 10px var(--font);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis}
.pin-hot small{font:700 8px var(--font);letter-spacing:.06em;color:var(--pinkfg);flex:none}
.pin-hot-i{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(255,143,196,.2);display:grid;place-items:center;font-size:10px;line-height:1}
.pin-hot:hover,.pin-spot.on .pin-hot{border-color:var(--pinkfg);box-shadow:0 0 0 1px rgba(255,143,196,.6),0 0 16px rgba(255,143,196,.55)}
.pin-spot.mine .pin-hot{border-color:rgba(255,143,196,.7)}
.pin-dot-b{position:absolute;min-width:16px;height:16px;padding:0 3px;border-radius:99px;background:rgba(14,12,17,.92);color:#fff;font:700 8px/16px var(--font);text-align:center;box-sizing:border-box}
/* Spots (owner, 2026-09-30): one label per spot with its count; its bubble is a strip of the branches there as
   thumbnail cards (mosaic + 🔒 price when locked, ▶ for a video, YOU on mine), then "Make my own here". */
.pin-hot-n{font:700 10px var(--font);color:#d9d2de;flex:none;font-variant-numeric:tabular-nums}
.pin-spot-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px}
.pin-strip{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:12px;margin:0 -12px;padding:2px 12px;scrollbar-width:none;touch-action:pan-x}
.pin-strip::-webkit-scrollbar{display:none}
.pin-strip{cursor:grab;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%)}.pin-strip.drag{cursor:grabbing;scroll-snap-type:none}.pin-strip.drag .pin-tile{pointer-events:none}
.pin-tile img{-webkit-user-drag:none;user-select:none}
.pin-tile{flex:none;width:80px;display:flex;flex-direction:column;gap:4px;cursor:pointer;scroll-snap-align:start}
.pin-tile-img{position:relative;width:80px;height:136px;border-radius:10px;overflow:hidden;background:#26212c;border:1px solid rgba(255,255,255,.1);box-sizing:border-box}
.pin-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
.pin-tile:hover .pin-tile-img{border-color:rgba(255,143,196,.6)}
.pin-tile-img .pin-dot-b{right:5px;top:5px}
.pin-tile-img .pin-dot-b.play{right:auto;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;font:700 12px/28px var(--font);background:rgba(18,14,22,.72);border:1px solid rgba(255,255,255,.3)}
/* A clip branch playing in place (owner, 2026-10-01): the picture frame, cropped like the backdrop; tap = back. */
.pin-clip{position:absolute;inset:0;z-index:5;background:#000;pointer-events:auto;cursor:pointer;animation:pin-fade .18s ease-out}
.pin-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pin-clip .pin-x{top:calc(64px + env(safe-area-inset-top))}
.pin-clip-wait{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:5px;padding:10px 14px;border-radius:99px;background:rgba(18,14,22,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:default}
.pin-clip-wait i{width:7px;height:7px;border-radius:50%;background:var(--fg);animation:typing 1.2s infinite ease-in-out}
.pin-clip-wait i:nth-child(2){animation-delay:.15s}.pin-clip-wait i:nth-child(3){animation-delay:.3s}
.pin-clip-skip{position:absolute;top:calc(74px + env(safe-area-inset-top));right:14px;z-index:3}
.pin-clip-bar{position:absolute;right:14px;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;gap:8px}
.pin-clip-b{height:32px;padding:0 14px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(18,14,22,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--fg);font:700 12px var(--font);cursor:pointer}
.pin-tile-you{position:absolute;left:5px;top:5px;padding:2px 5px;border-radius:99px;background:var(--pink);color:var(--onpink);font:800 8px/1.2 var(--font);letter-spacing:.06em}
.pin-tile-lock{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);padding:3px 7px;border-radius:99px;background:rgba(14,12,17,.86);border:1px solid rgba(255,190,160,.45);color:#fff;font:700 10px/1.2 var(--font);white-space:nowrap}
.pin-tile-share{position:absolute;left:5px;right:5px;bottom:5px;height:22px;border-radius:99px;border:1px solid rgba(255,143,196,.7);background:rgba(18,14,22,.8);color:var(--pinkfg);font:800 9px var(--font);letter-spacing:.06em;cursor:pointer}
.pin-tile-t{font:500 10px/1.3 var(--font);color:#d9d2de;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:26px}
.pin-tile.locked .pin-tile-t{color:var(--mut)}
/* "Share with everyone" (owner, 2026-09-30: default on), a compact switch under the prompt; off + why for a guest. */
.pin-share{display:flex;align-items:center;gap:9px;margin:0 2px;cursor:pointer;-webkit-user-select:none;user-select:none}
.pin-share .switch{width:34px;height:20px;padding:3px;border-radius:10px}.pin-share .switch i{width:14px;height:14px}.pin-share .switch.on i{transform:translateX(14px)}
.pin-share span{font:600 12px var(--font);color:var(--fg)}.pin-share small{font:500 10px var(--font);color:var(--mut)}
.pin-share.off{cursor:default}.pin-share.off span{color:var(--mut)}.pin-share.off small{color:var(--pinkfg)}
.pin-ref{align-self:flex-start;max-width:100%;padding:5px 10px;border-radius:99px;border:1px solid rgba(255,143,196,.45);background:rgba(255,143,196,.12);color:var(--pinkfg);font:600 11px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.pin-ref.off{border-color:rgba(255,255,255,.18);background:none;color:var(--mut)}
.play-pill{padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.55);color:var(--fg);font:700 12px var(--font);cursor:pointer;white-space:nowrap}
.play-pill[aria-pressed="true"]{background:rgba(244,240,245,.9);color:var(--bg)}
.loop-pill{height:30px;min-width:34px;padding:0 9px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.55);color:var(--fg);font:700 13px var(--font);cursor:pointer;opacity:.6}
.loop-pill.on{opacity:1;border-color:rgba(255,143,196,.7);background:rgba(255,143,196,.28)}
/* ↻ Redraw (web/redraw.js): a small pill (Sketchbook: top left with LIVE · Adjust); pink while today's free one is left. */
.redraw-btn{min-height:32px;padding:6px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.55);color:var(--fg);font:700 12px var(--font);cursor:pointer;white-space:nowrap}
.redraw-btn.free{border-color:rgba(255,143,196,.55);color:var(--pinkfg)}
.redraw-btn[disabled]{opacity:.5;cursor:default}
/* "Share this scene?" after an Add Scenes draw (web/pin.js PinAsk): a small glass card over the picture, under the top bar. */
.pin-ask{position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(340px,calc(100% - 32px));display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:16px;background:rgba(18,14,22,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,143,196,.35);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:6}
.pin-ask b{font:700 14px var(--font);color:var(--fg)}.pin-ask small{font:500 11px var(--font);color:#d9d2de}
.pin-ask-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.pin-ask-btns .redraw-btn{flex:1;min-height:38px}
.pin-ask-btns .pin-del{flex:0 0 auto;color:#ff8a8a}
/* Edit (web/pin.js PromptEdit, owner 2026-09-30): the pin's prompt bubble on its own, under the top bar (the phone's keyboard stays below it). */
.pin-edit{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;padding:calc(76px + env(safe-area-inset-top)) 16px 16px;background:rgba(8,6,10,.4)}
.pin-edit .pin-bubble{position:relative;width:min(340px,100%)}
/* Sketchbook = the scene screen too (2026-09-30): ▶/✋ and LIVE · Adjust under the picture thumb; the icon column's cost line. */
.wd-pills{position:absolute;top:calc(136px + env(safe-area-inset-top));left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;z-index:3}
.wd-pills.up{top:calc(58px + env(safe-area-inset-top))}
.live-tag{padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.55);border:1px solid rgba(255,143,196,.4);font:700 11px var(--font);letter-spacing:.04em;color:var(--pinkfg)}
.wd-icon-l small{font:600 9px var(--font);opacity:.75;margin-top:-2px}
.wd-icons{z-index:3}
/* The touch on the last picture (web/touch.js): the player's glowing spots and question, the studio's spot editor (spots 1–3). */
.tc-stage{position:relative;width:100%;height:100%;overflow:hidden}
.tc-spot{position:absolute;border-radius:50%;border:2px solid rgba(255,143,196,.85);background:rgba(255,143,196,.14);box-shadow:0 0 18px rgba(255,143,196,.55);pointer-events:none;animation:tc-glow 1.6s ease-in-out infinite}
@keyframes tc-glow{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.tc-spot{animation:none}}
.tc-ask{display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.tc-btn{flex:1;justify-content:center}
.tc-ov .cut-cap{pointer-events:auto}
.tc-go{pointer-events:auto;margin-top:4px}
/* Her writer's comic over a fresh chat (web/intro-player.js ComicOverlay): one whole cut per tap or swipe, its lines along the bottom. */
.cmc-ov{touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.cmc-ov>.art,.cmc-ov>video,.cmc-ov>.tc-stage{position:absolute;inset:0;width:100%;height:100%}
.cmc-ov>video,.cmc-ov>.art{object-fit:contain;object-position:50% 50%}
.cmc-cap{max-height:46%;overflow:hidden;justify-content:flex-end}
.cmc-ov .tc-ask,.cmc-ov .tc-go{pointer-events:auto}
.cmc-count{position:absolute;top:calc(22px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font:600 12px var(--font);color:#c9c2cf;text-shadow:0 1px 3px rgba(0,0,0,.9);pointer-events:none}
.cmc-hint{align-self:center;font:500 11px var(--font);color:#c9c2cf;opacity:.75}
.tc-edit{position:relative;width:100%;max-width:260px;align-self:center;border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.tc-edit img,.tc-edit video{display:block;width:100%;height:auto;pointer-events:none}
.tc-ell{position:absolute;border:2px solid rgba(255,143,196,.95);border-radius:50%;background:rgba(255,143,196,.16);display:grid;place-items:center;cursor:move;touch-action:none}
.tc-ell.s1{border-color:rgba(201,184,255,.95);background:rgba(201,184,255,.16)}
.tc-ell.s2{border-color:rgba(140,220,200,.95);background:rgba(140,220,200,.16)}
.tc-ell span{font:700 10px var(--font);color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.tc-dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:nwse-resize;touch-action:none}
.tc-x{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font:700 11px/20px var(--font);text-align:center;cursor:pointer}
/* Actions in a chat line (*touches her chest*): no asterisks, soft italics (web/ui.js Acted). */
i.act { font-style: italic; opacity: .72; }
/* A player video's length (web/video-secs.js, owner 2026-09-30): the seconds picker in the pin bubble and the Make a video sheet. */
.vsecs{display:flex;flex-direction:column;gap:8px}
.vsecs-h{display:flex;align-items:center;gap:8px;margin:0 2px}
.vsecs-h span{font:700 12px var(--font);color:var(--fg)}
.vsecs-h b{margin-left:auto;font:800 12px var(--font);color:var(--pinkfg);font-variant-numeric:tabular-nums;white-space:nowrap}
.vsecs-back{width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:var(--fg);font:700 16px/1 var(--font);cursor:pointer;flex:none}
.vsecs-row{display:flex;align-items:center;gap:8px}
.vsecs-row input[type=range]{flex:1;min-width:0;accent-color:var(--pink);height:28px;margin:0}
.vsecs-step{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:var(--fg);font:700 17px/1 var(--font);cursor:pointer;flex:none}
.vsecs-step:disabled{opacity:.38;cursor:default}
.vsecs .pin-go{flex:none}.sheet-vsecs .pin-go{height:46px;font-size:13px}
/* Crop and Trim (owner, 2026-09-30; web/crop.js, web/trim.js): full-screen over the viewer / Sketchbook, touch first. */
.crop-ov{position:absolute;inset:0;z-index:25;background:#000;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none}
.crop-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;font:700 15px var(--font)}
.crop-x,.crop-save{height:36px;padding:0 16px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:var(--s2);color:var(--fg);font:600 13px var(--font);cursor:pointer}
.crop-save{border:0;background:var(--pink);color:var(--onpink);font-weight:700}
.crop-x:disabled,.crop-save:disabled{opacity:.4;cursor:default}
.crop-area{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.crop-pic{position:absolute}
.crop-pic img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.crop-box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.6);cursor:move;touch-action:none}
.crop-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,transparent calc(33.3% - 1px),rgba(255,255,255,.35) calc(33.3% - 1px),rgba(255,255,255,.35) 33.3%,transparent 33.3%,transparent calc(66.6% - 1px),rgba(255,255,255,.35) calc(66.6% - 1px),rgba(255,255,255,.35) 66.6%,transparent 66.6%),linear-gradient(transparent calc(33.3% - 1px),rgba(255,255,255,.35) calc(33.3% - 1px),rgba(255,255,255,.35) 33.3%,transparent 33.3%,transparent calc(66.6% - 1px),rgba(255,255,255,.35) calc(66.6% - 1px),rgba(255,255,255,.35) 66.6%,transparent 66.6%)}
.crop-h{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;touch-action:none}
.crop-h::after{content:"";position:absolute;left:13px;top:13px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--pink)}
.crop-h.nw{left:0;top:0;cursor:nwse-resize}.crop-h.ne{left:100%;top:0;cursor:nesw-resize}.crop-h.sw{left:0;top:100%;cursor:nesw-resize}.crop-h.se{left:100%;top:100%;cursor:nwse-resize}
.crop-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px 16px calc(18px + env(safe-area-inset-bottom))}
.trim-v{max-width:100%;max-height:100%;object-fit:contain}
.trim-bar{display:flex;flex-direction:column;gap:12px;padding:12px 20px calc(18px + env(safe-area-inset-bottom))}
.trim-times{display:flex;justify-content:space-between;font:600 12px var(--font);color:var(--mut);font-variant-numeric:tabular-nums}.trim-times b{color:var(--fg)}
.trim-track{position:relative;height:44px;margin:0 10px;border-radius:10px;background:rgba(255,255,255,.08);touch-action:none;cursor:pointer}
.trim-sel{position:absolute;top:0;bottom:0;border-radius:10px;background:rgba(255,143,196,.22);border:2px solid var(--pink);box-sizing:border-box;pointer-events:none}
.trim-head{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.trim-h{position:absolute;top:50%;width:40px;height:56px;margin:-28px 0 0 -20px;touch-action:none;cursor:ew-resize}
.trim-h::after{content:"";position:absolute;left:14px;top:8px;width:12px;height:40px;border-radius:6px;background:var(--pink);box-shadow:0 0 0 2px #fff}
/* ⋯ More sheet (web/ui.js MoreSheet, owner 2026-10-01): the rows a picture's ⋯ opens, Delete last and red. */
.more-sheet{display:flex;flex-direction:column;gap:8px}.more-sheet .more-danger{color:#ff8a8a}
/* ✨ prompt enhance (web/enhance.js, owner 2026-10-01): a small glass button in the field's top-right corner (centred on a
   one-line input), an Undo chip under it (beside it on a line) for 6 s, "0:42" while the minute runs. The field is padded clear of it. */
.enh-wrap{position:relative}
.enh-wrap>textarea,.enh-wrap>input{padding-right:46px}
.enh{position:absolute;top:6px;right:6px;display:flex;align-items:center;gap:6px;z-index:2}
.enh:not(.line){flex-direction:column-reverse;align-items:flex-end}.enh.line{top:50%;transform:translateY(-50%)}
.enh-btn{min-width:32px;height:32px;padding:0 6px;border-radius:99px;border:1px solid rgba(255,143,196,.35);background:linear-gradient(135deg,rgba(255,143,196,.2),rgba(201,184,255,.2));color:var(--fg);font:700 14px/1 var(--font);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .15s,transform .1s}
.enh-btn:active{transform:scale(.92)}
.enh-btn.wait{font:700 10.5px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--mut);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);cursor:default}
.enh-btn:disabled{cursor:default}
.enh-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--pinkfg);animation:spin .7s linear infinite}
.enh-undo{height:24px;max-width:40px;padding:0 6px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(18,14,22,.86);color:var(--viofg);font:700 10px var(--font);cursor:pointer;white-space:nowrap;animation:pin-fade .15s ease-out}
/* Chat redesign (owner, 2026-10-01): ‹ › over the picture step through this chat's made scenes; ▶ Play / a scene that
   just landed plays full screen (web/scene-player.js); her avatar's pink ring = "added to your gallery"; the items as a
   chip row above the composer; ✦ Add Scenes and Edit stacked under the top bar's right end. */
.step-nav{position:absolute;top:40%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#1a1620;font:700 22px/1 var(--font);display:grid;place-items:center;padding:0 0 3px;box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer;z-index:4}
.step-nav.left{left:10px}.step-nav.right{right:10px}
.scene-player{position:absolute;inset:0;z-index:30;background:#000;cursor:pointer;overscroll-behavior:contain;touch-action:manipulation;animation:zoom-in .14s ease-out}
.scene-player .step-nav{top:50%;z-index:2}
.sp-count{position:absolute;top:calc(20px + env(safe-area-inset-top));left:16px;padding:4px 10px;border-radius:99px;background:rgba(0,0,0,.5);font:600 12px var(--font);color:#fff;pointer-events:none}
.sp-new{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);padding:6px 14px;border-radius:99px;background:rgba(255,143,196,.9);color:var(--onpink);font:700 12px var(--font);white-space:nowrap;pointer-events:none}
.sp-remove{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2;padding:7px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.55);color:#fff;font:600 12px var(--font);white-space:nowrap;cursor:pointer}
.sp-remove:disabled{opacity:.5}.sp-undo{background:rgba(244,240,245,.92);color:#1a1620}.sp-undo b{color:#c2185b}
.av-glow{box-shadow:0 0 0 2px var(--pink),0 0 12px 3px rgba(255,105,180,.75);animation:av-glow 2.2s ease-in-out infinite}
@keyframes av-glow{50%{box-shadow:0 0 0 2px var(--pink),0 0 20px 6px rgba(255,105,180,.45)}}
.chat-side{position:absolute;top:100%;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:3}
.side-add{padding:7px 13px;border-radius:99px;border:0;background:var(--pink);color:var(--onpink);font:700 12px var(--font);white-space:nowrap;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.side-edit{padding:4px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.6);color:var(--fg);font:600 11px var(--font);cursor:pointer}
/* First visits (web/coach.js): ✦ Add Scenes pulses once on a picture with no spots; the coach bubble (styled like
   .nudge) points up at the control it explains, e.g. the Sketchbook's Edit pill. */
.side-add.hint,.adj-pill.hint{animation:add-hint 1.1s ease-out 2}
@keyframes add-hint{0%{box-shadow:0 0 0 0 rgba(255,143,196,.75),0 2px 10px rgba(0,0,0,.3)}70%{box-shadow:0 0 0 12px rgba(255,143,196,0),0 2px 10px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 0 rgba(255,143,196,0),0 2px 10px rgba(0,0,0,.3)}}
.coach{position:relative;display:flex;align-items:flex-start;gap:6px;width:min(230px,calc(100vw - 32px));box-sizing:border-box;margin-top:4px;padding:9px 6px 9px 12px;border-radius:14px;background:rgba(28,22,32,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,120,180,.45);box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--fg2);font:500 12px/1.35 var(--font);text-align:left;cursor:pointer;animation:coach-in .3s cubic-bezier(.2,.9,.3,1.2)}
.coach span{flex:1;min-width:0}
.coach-tail{position:absolute;top:-6px;right:18px;width:10px;height:10px;background:rgb(28,22,32);border-left:1px solid rgba(255,120,180,.45);border-top:1px solid rgba(255,120,180,.45);transform:rotate(45deg)}
.coach-x{flex:none;background:none;border:0;color:var(--mut2);font:400 18px/1 var(--font);padding:0 4px;margin-top:-2px;cursor:pointer}
@keyframes coach-in{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pin-layer.fresh .pin-dot,.side-add.hint,.adj-pill.hint,.coach{animation:none}.pin-layer.fresh .pin-dot::after{display:none}.pin-layer.browse .pin-dot{transition:none}}
.item-row{display:flex;gap:6px;padding:0 16px 6px;overflow-x:auto;flex:none;overscroll-behavior-x:contain;scrollbar-width:none}
.item-chip{flex:none;height:30px;padding:0 10px 0 8px;border-radius:99px;border:1px solid rgba(255,255,255,.1);background:rgba(31,26,37,.92);color:var(--fg);font:600 11.5px var(--font);display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}
.item-chip i{font-style:normal;font-size:15px}.item-chip small{font:600 10px var(--font);color:var(--pinkfg)}
.item-chip.hidden{border-color:rgba(201,184,255,.55)}.item-chip.hidden small{color:var(--viofg)}
.item-chip:disabled{opacity:.45;cursor:default}
.item-more{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:rgba(31,26,37,.92);color:var(--fg);font:500 18px/1 var(--font);display:grid;place-items:center;cursor:pointer}
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.st-grid .gal-thumb{border-radius:10px;cursor:zoom-in}
/* The Gallery's play list (owner, 2026-10-01; web/play-list-editor.js). */
.gal-tabs{display:flex;gap:6px;padding:0 16px 12px}
.gal-tabs button{flex:1;padding:8px 0;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:var(--s2);color:var(--mut);font:600 12px var(--font);cursor:pointer}
.gal-tabs button[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:var(--onpink)}
.pl-remove{padding:5px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:var(--s4);color:var(--fg);font:600 11px var(--font);cursor:pointer;white-space:nowrap}
.pl-add{position:absolute;left:6px;right:6px;bottom:6px;padding:5px 0;border-radius:8px;border:0;background:rgba(0,0,0,.65);color:#fff;font:700 11px var(--font);cursor:pointer}

/* Up / Down on another player's shared scene (VoteBtns, web/ui.js) */
.vote{display:inline-flex;gap:6px;align-items:center;flex:none}
.vote-b{width:36px;height:32px;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(18,14,22,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:400 15px/1 var(--font);display:grid;place-items:center;cursor:pointer;padding:0;filter:grayscale(.85);opacity:.85}
.vote-b.on{filter:none;opacity:1;border-color:rgba(255,120,180,.7);background:rgba(255,77,148,.22)}
.vote-b.down.on{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.18)}
.vote-b:disabled{opacity:.5}
.vote.sm .vote-b{width:30px;height:28px;font-size:13px}
.sp-vote{position:absolute;right:14px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:2}
.pin-clip-hid{position:absolute;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));padding:12px 14px;border-radius:16px;background:rgba(18,14,22,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:10px;font:600 13px var(--font);color:var(--fg)}
.pin-clip-hid small{font:400 11px var(--font);color:var(--mut2)}
.pin-clip-hid .row{gap:8px;justify-content:flex-end;flex-wrap:wrap}
.scene-hid{margin-bottom:10px;padding:10px 12px;border-radius:14px;background:#26212c;font:500 12px/1.4 var(--font);color:var(--fg2);display:flex;align-items:center;gap:10px}