:root{color-scheme:dark;--bg:#080808;--panel:#15110e;--line:#38302a;--gold:#edb36d;--text:#faf7f3;--muted:#ada49b;font-family:Alegreya,Georgia,serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.topbar{position:relative;z-index:1;background:#090909;border-bottom:1px solid #302419}.topbar-inner{max-width:1320px;padding:14px 24px;min-height:68px;margin:auto;display:flex;gap:16px;align-items:center;justify-content:space-between}.brand{font-size:clamp(16px,3.5vw,21px);font-weight:800;white-space:nowrap;letter-spacing:.035em}.brand span,.kicker{color:var(--gold)}
#app{max-width:1320px;margin:auto;padding:34px 24px 60px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:#151310;color:var(--text);font-weight:650}.button:hover,.plan:hover{border-color:var(--gold)}.button.primary{background:#faf6ef;color:#15100a;border-color:#faf6ef}.button.subtle{font-size:13px;background:transparent}.kicker{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}.heading h1,.editor h1{font-size:clamp(31px,5vw,53px);letter-spacing:-.06em;margin:0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.cover{display:flex;flex-direction:column;justify-content:flex-end;text-align:left;min-width:0;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:2/3;background:#17130e;border:1px solid #504334;border-radius:12px;padding:12px;color:var(--text)}.cover img,.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.cover:after,.scene:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#080604 0%,#080604ba 18%,transparent 62%);pointer-events:none}.cover strong{font-size:clamp(17px,2.4vw,24px)}.cover span{margin-top:5px;color:#e9e1d7;font-size:12px}.cover .open{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #fff3;margin-top:12px;padding-top:9px;color:var(--gold);font-size:11px;font-weight:800}.cover:hover,.scene:hover{border-color:var(--gold)}.hidden-cover{background:radial-gradient(ellipse at 50% 40%,#3b2a1b,#110e0a 70%)}.hidden-cover .veil{margin:auto auto 0;color:var(--gold);font-size:28px}
.story{max-width:980px;margin:auto}.story-hero{min-height:310px;border:1px solid #352a1f;border-radius:15px;overflow:hidden;position:relative;isolation:isolate;display:flex;align-items:flex-end;padding:26px;background:#20170e}.story-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 33%;opacity:.62;z-index:-2}.story-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#080808 0%,#080808a6 34%,transparent 100%)}.story-hero h1{margin:0;font-size:clamp(33px,8vw,68px);line-height:1;letter-spacing:-.045em}.story-hero p:last-child{margin-bottom:0}.back{margin-bottom:14px}.story-panel{border:1px solid #644c34;border-radius:14px;background:linear-gradient(140deg,#201913,#100e0c);padding:20px;margin:16px 0 28px}.story-panel h2,.heading h2{margin:0;font-size:clamp(26px,5vw,37px);letter-spacing:-.04em}.story-panel p:not(.kicker){color:#c8bcb0;margin:9px 0 16px}.story-panel .button{width:100%}.scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.scene{position:relative;isolation:isolate;aspect-ratio:2/3;display:grid;place-items:center;overflow:hidden;border:1px solid #514236;border-radius:12px;background:#17130e;color:white}.scene:after{background:linear-gradient(0deg,#080604ad,transparent 75%)}.scene .play{border:1px solid #fffd;background:#0707078c;border-radius:100%;width:46px;height:46px;display:grid;place-items:center;padding-left:2px}.scene .number{position:absolute;top:10px;right:10px;border:1px solid #fff8;border-radius:100%;background:#080808b3;padding:6px;font-size:12px}.scene.hidden-cover .play{border-color:var(--gold)}
dialog{border:1px solid #367080;color:#eff8ff;border-radius:20px;width:min(570px,calc(100% - 24px));padding:20px;background:#081a29}dialog::backdrop{background:#000a}.checkout{margin:auto auto max(12px,env(safe-area-inset-bottom));max-height:calc(100dvh - 24px);overflow:auto}.checkout-header,.player header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.checkout h2{font:700 31px Alegreya,Georgia,serif;margin:7px 0 10px}.vip{color:#f7d47c;font:700 15px Alegreya,Georgia,serif}.close{background:#0b2637;border:1px solid #367080;color:#fff;border-radius:12px;width:42px;height:42px;font-size:25px}.checkout p{line-height:1.45;color:#bacfdd}.plans{display:grid;gap:8px;margin-top:16px}.plan{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:12px;padding:12px 14px;border:1px solid #348498;color:#f1f7fb;background:#0c2434;font:700 18px Alegreya,Georgia,serif;text-align:left}.plan small{display:block;color:#f6cb77;margin-top:3px;font:600 12px Alegreya,Georgia,serif}.checkout form,.editor form{display:grid;gap:12px}.player video{width:100%;max-height:72vh}.player h2{margin:4px 0 16px}
.editor{max-width:730px;margin:auto}.editor form{margin-top:22px;background:var(--panel);padding:20px;border-radius:14px;border:1px solid var(--line)}label{display:grid;gap:7px;font-weight:650}input,textarea{border:1px solid #51483d;border-radius:8px;padding:10px;background:#0c0c0c;color:white;width:100%}.muted{color:var(--muted);line-height:1.5}.published{display:grid;gap:8px;margin-top:24px}.published a{border:1px solid var(--line);border-radius:8px;padding:12px}.error{color:#ffb0a7}
@media(max-width:820px){.grid,.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.topbar-inner{padding:10px 12px}.topbar .subtle{padding:7px 9px;font-size:11px}.brand{letter-spacing:0}#app{padding:23px 12px 38px}.heading{gap:8px}.heading .button{padding:8px 10px;font-size:12px}.grid,.scene-grid{gap:9px}.cover{padding:9px}.story-hero{min-height:262px;padding:17px}.editor form{padding:14px}}
.visibility-toggle{gap:7px}
.visibility-eye{color:var(--gold);flex-shrink:0}
.story-text{white-space:pre-line}
.player img{display:block;max-width:100%;max-height:72vh;margin:auto;object-fit:contain}
.player img[hidden]{display:none}
.preview-fallback{position:absolute;bottom:8px;left:8px;padding:3px 6px;border-radius:5px;background:#080808d9;font-size:12px}

.topbar-actions { display: flex; align-items: center; gap: 6px; }
.account { background: var(--panel); border-color: #644c34; color: var(--text); }
.account h2 { margin: 4px 0 16px; }
.account .close { background: #231b14; border-color: #644c34; flex: 0 0 42px; }
#account-login:not([hidden]) { display: grid; gap: 12px; }
#account-access { color: var(--gold); }
#account-feedback, #scene-feedback { color: var(--muted); }
.checkout-account { margin-top: 12px; width: 100%; }
#account-provider { font: inherit; color: var(--text); background: #0c0c0c; border: 1px solid #644c34; border-radius: 8px; padding: 9px; margin-bottom: 14px; }
.pix-qr { display: block; margin: 12px auto; border-radius: 8px; background: white; }
#checkout-body > .button + .button { margin: 8px 0 0 8px; }
.legacy-scenes { margin-top: 26px; }
.player-media { position: relative; }
.player-media video[hidden] { display: none; }
#player-account-mark {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  background: #000a;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: account-mark-position 26s step-end infinite;
}
@keyframes account-mark-position {
  25% { left: auto; right: 10px; }
  50% { inset: auto 10px 48px auto; }
  75% { inset: auto auto 48px 10px; }
}
@media (max-width: 480px) {
  .topbar-inner { gap: 8px; }
  .topbar-actions .button { min-height: 34px; }
}