:root { color-scheme: dark; --ink:#fff2d7; --gold:#efbd63; --blue:#7bdcf3; --night:#020d16; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#020d16; color:var(--ink); }
button,input,textarea,select { font:inherit; }
.studio { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:#031522; }
.studio-water,.studio-night,.studio-grain { position:fixed; inset:0; width:100%; height:100%; }
.studio-water { z-index:-5; object-fit:cover; filter:saturate(.65) contrast(1.14) brightness(.28); transform:scale(1.05); }
.studio-night { z-index:-4; background:linear-gradient(180deg,rgba(1,7,12,.64),rgba(1,12,20,.72)),radial-gradient(circle at 13% 52%,rgba(86,190,223,.16),transparent 27rem),linear-gradient(90deg,rgba(0,0,0,.5),transparent 40%,rgba(0,0,0,.44)); }
.studio-grain { z-index:20; pointer-events:none; opacity:.11; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.studio-header { position:relative; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:1rem; padding:1.35rem clamp(1rem,4vw,4rem); }
.studio-home,.leave-studio { color:rgba(255,255,255,.62); text-decoration:none; font:800 .58rem/1 var(--lh-plain); letter-spacing:.16em; text-transform:uppercase; }
.studio-home span { display:block; margin-top:.42rem; color:var(--ink); font:500 1.35rem/1 var(--lh-serif); letter-spacing:-.04em; text-transform:none; }
.studio-identity { text-align:center; }
.studio-identity small { display:block; color:var(--gold); font:800 .55rem/1 var(--lh-plain); letter-spacing:.24em; text-transform:uppercase; }
.studio-identity strong { display:block; margin-top:.35rem; font:500 clamp(1.35rem,2.5vw,2.1rem)/1 var(--lh-serif); }
.leave-studio { justify-self:end; padding-top:.45rem; border-bottom:1px solid rgba(239,189,99,.38); }
.seller-assurance { position:relative; z-index:8; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(76rem,calc(100% - 2rem)); margin:.35rem auto 1rem; border:1px solid rgba(239,189,99,.26); background:rgba(1,14,23,.76); box-shadow:0 1.2rem 4rem rgba(0,0,0,.25); backdrop-filter:blur(12px); }
.seller-assurance>span { min-width:0; padding:.8rem 1rem; border-right:1px solid rgba(123,220,243,.14); }
.seller-assurance>span:last-child { border-right:0; }
.seller-assurance b,.seller-assurance small { display:block; }
.seller-assurance b { color:var(--ink); font:800 .58rem/1.2 var(--lh-plain); letter-spacing:.1em; text-transform:uppercase; }
.seller-assurance small { margin-top:.28rem; color:rgba(231,244,247,.62); font:.75rem/1.3 var(--lh-serif); }
.beacon-course { position:relative; z-index:8; display:flex; justify-content:center; align-items:center; width:min(46rem,calc(100% - 2rem)); margin:.35rem auto 0; }
.course-light { display:grid; place-items:center; gap:.38rem; width:4.7rem; padding:0; border:0; color:rgba(255,255,255,.48); background:transparent; cursor:pointer; font:800 .52rem/1 var(--lh-plain); letter-spacing:.13em; text-transform:uppercase; }
.course-light span { display:block; width:.8rem; height:.8rem; border-radius:50%; border:1px solid rgba(123,220,243,.42); background:#061d2d; box-shadow:0 0 0 5px rgba(4,34,51,.68); }
.course-light.is-current,.course-light.is-complete { color:var(--ink); }
.course-light.is-current span { background:#fff4be; border-color:var(--gold); box-shadow:0 0 16px rgba(239,189,99,.9),0 0 0 6px rgba(239,189,99,.12); }
.course-light.is-complete span { background:var(--blue); box-shadow:0 0 12px rgba(123,220,243,.72); }
.beacon-course i { width:min(7vw,6rem); height:1px; background:linear-gradient(90deg,rgba(123,220,243,.2),rgba(239,189,99,.4)); }
.studio-stage { position:relative; z-index:4; width:min(91rem,calc(100% - 2rem)); min-height:calc(100svh - 12rem); margin:1.35rem auto 0; padding:clamp(1.2rem,3vw,3rem) clamp(1rem,4vw,4rem) 4rem; border-top:1px solid rgba(239,189,99,.4); border-bottom:1px solid rgba(123,220,243,.22); background:linear-gradient(110deg,rgba(1,11,19,.92),rgba(3,27,42,.74) 55%,rgba(1,10,17,.92)); box-shadow:0 2.5rem 8rem rgba(0,0,0,.58); overflow:hidden; }
.studio-stage::after { content:""; position:absolute; left:-10%; right:-10%; bottom:-8rem; height:16rem; z-index:-1; background:repeating-linear-gradient(176deg,rgba(186,231,243,.08) 0 2px,transparent 2px 18px),radial-gradient(ellipse at 50% 0,rgba(92,194,222,.12),transparent 62%); transform:perspective(40rem) rotateX(55deg); }
.lantern-projector { position:absolute; z-index:-1; left:-3rem; bottom:-7rem; width:clamp(18rem,31vw,34rem); opacity:.43; filter:drop-shadow(2rem 2rem 3rem #000); }
.lantern-projector img { display:block; width:100%; }
.projector-beam { position:absolute; left:55%; top:26%; width:85vw; height:14rem; transform-origin:left; transform:rotate(-8deg); clip-path:polygon(0 45%,100% 0,100% 100%,0 55%); background:linear-gradient(90deg,rgba(255,241,195,.19),rgba(123,220,243,.08),transparent 70%); mix-blend-mode:screen; }
.scene { display:none; min-height:34rem; grid-template-columns:minmax(19rem,.85fr) minmax(24rem,1.15fr); align-items:center; gap:clamp(2rem,6vw,7rem); animation:sceneEnter .65s ease both; }
.scene.is-active { display:grid; }
.scene-words { max-width:37rem; margin-left:clamp(0rem,8vw,9rem); }
.scene-kicker { margin:0 0 .8rem; color:var(--gold); font:800 .61rem/1 var(--lh-plain); letter-spacing:.26em; text-transform:uppercase; }
.scene h1,.scene h2 { margin:0; color:var(--ink); font:500 clamp(3rem,5.5vw,6rem)/.88 var(--lh-serif); letter-spacing:-.06em; text-wrap:balance; }
.scene-words>p:last-child { color:rgba(232,244,246,.74); font:1rem/1.55 var(--lh-serif); }
.spoken-story,.media-drop,.listing-script,.release-choice { position:relative; padding:clamp(1.2rem,3vw,2.4rem) 0; }
.spoken-story { border-top:1px solid rgba(239,189,99,.56); border-bottom:1px solid rgba(123,220,243,.28); }
.spoken-story label,.script-line label { display:block; margin-bottom:.65rem; color:var(--gold); font:800 .58rem/1 var(--lh-plain); letter-spacing:.18em; text-transform:uppercase; }
.spoken-story textarea,.script-line input,.script-line textarea,.script-line select { width:100%; border:0; border-bottom:1px solid rgba(123,220,243,.38); outline:0; color:white; background:rgba(2,16,26,.52); padding:.85rem; font:1rem/1.5 var(--lh-serif); resize:vertical; }
.spoken-story textarea:focus,.script-line input:focus,.script-line textarea:focus,.script-line select:focus { border-color:var(--gold); box-shadow:0 8px 28px rgba(0,0,0,.18); }
.scene-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.8rem; margin-top:1.15rem; }
.gold-action,.quiet-action,.publish-signal { min-height:3.15rem; padding:.75rem 1.25rem; border:1px solid rgba(239,189,99,.54); cursor:pointer; font:900 .65rem/1 var(--lh-plain); letter-spacing:.1em; text-transform:uppercase; }
.gold-action,.publish-signal { color:#08131a; background:linear-gradient(180deg,#ffe5a7,#d9a442); box-shadow:0 1rem 2.5rem rgba(0,0,0,.27); }
.quiet-action { color:rgba(255,245,220,.76); background:rgba(3,23,36,.62); }
.round-mic { position:relative; width:3.15rem; height:3.15rem; padding:0; border:1px solid rgba(123,220,243,.6); border-radius:50%; background:radial-gradient(circle,rgba(123,220,243,.22),rgba(2,15,24,.8)); cursor:pointer; }
.round-mic span { position:absolute; left:50%; top:50%; width:.65rem; height:1.05rem; transform:translate(-50%,-60%); border:2px solid white; border-radius:.6rem; }
.round-mic span::after { content:""; position:absolute; left:50%; top:.9rem; width:.85rem; height:.42rem; transform:translateX(-50%); border:solid white; border-width:0 0 2px 2px; border-radius:0 0 0 .5rem; }
.round-mic.is-listening { box-shadow:0 0 25px var(--blue); }
.concierge-line { min-height:1.4rem; margin:.8rem 0 0; color:rgba(224,242,246,.7); font:italic .88rem/1.4 var(--lh-serif); }
.story-prompts { display:flex; flex-wrap:wrap; gap:.4rem; margin:.8rem 0 0; }
.story-prompts span { padding:.38rem .6rem; border:1px solid rgba(123,220,243,.22); color:rgba(234,246,249,.68); background:rgba(3,29,44,.42); font:700 .52rem/1 var(--lh-plain); letter-spacing:.06em; text-transform:uppercase; }
.saved-draft-callout { display:flex; align-items:center; gap:.7rem; margin-top:1rem; padding:.85rem; border-left:3px solid var(--gold); background:rgba(239,189,99,.08); }
.saved-draft-callout[hidden] { display:none; }
.saved-draft-callout div { flex:1; min-width:0; }
.saved-draft-callout strong,.saved-draft-callout small { display:block; }
.saved-draft-callout small { margin-top:.25rem; color:rgba(235,245,247,.66); }
.saved-draft-callout .quiet-action { min-height:2.45rem; padding:.55rem .8rem; }
.text-action { padding:.4rem; border:0; color:rgba(255,255,255,.62); background:transparent; cursor:pointer; text-decoration:underline; }
.media-drop { text-align:center; }
.media-drop input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.media-drop>label { display:grid; place-items:center; min-height:13rem; padding:1.5rem; border-top:1px solid rgba(239,189,99,.55); border-bottom:1px solid rgba(123,220,243,.33); background:radial-gradient(circle,rgba(123,220,243,.1),transparent 56%); cursor:pointer; }
.media-drop label strong,.media-drop label small { display:block; }
.media-drop label strong { margin-top:.7rem; font:500 1.45rem/1.1 var(--lh-serif); }
.media-drop label small { margin-top:.35rem; color:rgba(255,255,255,.55); font:.62rem/1 var(--lh-plain); letter-spacing:.1em; text-transform:uppercase; }
.aperture { width:3.8rem; height:3.8rem; border-radius:50%; background:conic-gradient(from 15deg,#0f526f,#d9ad5b,#082b40,#71d2ec,#0f526f); box-shadow:inset 0 0 0 .55rem #04131e,inset 0 0 0 .7rem rgba(255,255,255,.25),0 0 28px rgba(123,220,243,.35); }
.media-film { display:flex; gap:.65rem; padding:.8rem 0; overflow-x:auto; scroll-snap-type:x mandatory; }
.media-frame { flex:0 0 7.5rem; aspect-ratio:4/3; position:relative; overflow:hidden; border:1px solid rgba(239,189,99,.35); scroll-snap-align:start; background:#000; }
.media-frame img,.media-frame video { width:100%; height:100%; object-fit:cover; }
.media-frame small { position:absolute; left:.25rem; bottom:.25rem; padding:.15rem .3rem; color:white; background:rgba(0,0,0,.72); font:.48rem/1 var(--lh-plain); text-transform:uppercase; }
.media-frame.is-cover { border-color:var(--gold); box-shadow:0 0 0 2px rgba(239,189,99,.18); }
.media-tools { position:absolute; inset:auto .25rem .25rem auto; display:flex; gap:.25rem; opacity:0; transition:opacity .2s ease; }
.media-frame:hover .media-tools,.media-frame:focus-within .media-tools { opacity:1; }
.media-tools button { min-height:1.65rem; padding:.25rem .4rem; border:1px solid rgba(239,189,99,.5); color:var(--ink); background:rgba(1,12,20,.9); cursor:pointer; font:700 .42rem/1 var(--lh-plain); text-transform:uppercase; }
.media-tools button:disabled { color:#07131b; background:var(--gold); cursor:default; }
.listing-script { display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-top:1px solid rgba(239,189,99,.42); }
.script-line { min-width:0; }
.script-wide { grid-column:1/-1; }
.listing-script.is-guided .script-line.is-carried { display:none; }
.listing-script.is-guided::before { content:"The listing below was prepared from your own words."; grid-column:1/-1; color:rgba(224,242,246,.76); font:italic 1rem/1.5 var(--lh-serif); }
.listing-script.is-guided .script-line:not(.is-carried) { grid-column:1/-1; }
.script-line select { appearance:none; background:rgba(2,16,26,.75) linear-gradient(45deg,transparent 50%,var(--gold) 50%) right 1rem center/.45rem .45rem no-repeat; }
.scene[data-scene-panel="preview"] { align-items:start; padding-top:2rem; }
.preview-heading { align-self:start; margin-top:0; }
.listing-premiere { display:grid; grid-template-columns:1.15fr .85fr; min-height:28rem; border-top:1px solid rgba(239,189,99,.55); border-bottom:1px solid rgba(123,220,243,.3); background:rgba(1,11,18,.78); box-shadow:0 2rem 5rem rgba(0,0,0,.42); }
.premiere-media { position:relative; min-height:24rem; overflow:hidden; background:#020a10; }
.premiere-media img,.premiere-media video { width:100%; height:100%; object-fit:cover; }
.premiere-media>span { position:absolute; left:1rem; top:1rem; color:#08131a; background:var(--gold); padding:.35rem .55rem; font:900 .5rem/1 var(--lh-plain); letter-spacing:.12em; text-transform:uppercase; }
.premiere-story { display:flex; flex-direction:column; justify-content:center; padding:clamp(1.3rem,3vw,2.7rem); }
.premiere-story>p:first-child { color:var(--gold); font:800 .55rem/1 var(--lh-plain); letter-spacing:.18em; text-transform:uppercase; }
.premiere-story h2 { font-size:clamp(2rem,3.5vw,4rem); }
.premiere-story strong { margin:.8rem 0; color:var(--blue); font:500 1.3rem/1 var(--lh-serif); }
.premiere-story p { color:rgba(236,246,248,.78); line-height:1.55; }
.premiere-story small { color:rgba(255,244,220,.64); font-style:italic; }
.preview-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin:.2rem 0 1rem; }
.preview-facts:empty { display:none; }
.preview-facts div { padding:.65rem; border-top:1px solid rgba(239,189,99,.3); background:rgba(8,35,51,.42); }
.preview-facts dt { color:rgba(255,255,255,.5); font:800 .48rem/1 var(--lh-plain); letter-spacing:.1em; text-transform:uppercase; }
.preview-facts dd { margin:.3rem 0 0; color:var(--ink); font:.82rem/1.25 var(--lh-serif); }
.download-story { display:block; margin-top:.75rem; color:var(--gold); text-align:right; }
.download-story[hidden] { display:none; }
.release-light { position:absolute; left:50%; top:50%; width:72vw; height:23rem; transform:translate(-50%,-50%); clip-path:polygon(0 46%,100% 0,100% 100%,0 54%); background:linear-gradient(90deg,transparent,rgba(255,239,189,.18),rgba(123,220,243,.09),transparent); mix-blend-mode:screen; }
.scene[data-scene-panel="release"] { align-items:start; padding-top:2rem; }
.release-copy { position:relative; z-index:2; margin-left:clamp(8rem,14vw,14rem); }
.studio[data-scene="release"] .lantern-projector { left:-9rem; opacity:.28; }
.safety-signals { list-style:none; padding:0; margin:1.3rem 0 0; }
.safety-signals li { position:relative; padding:.5rem 0 .5rem 1.3rem; border-bottom:1px solid rgba(123,220,243,.14); color:rgba(235,246,248,.75); }
.safety-signals li::before { content:""; position:absolute; left:0; top:.9rem; width:.46rem; height:.46rem; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue); }
.safety-signals li.warning::before { background:var(--gold); box-shadow:0 0 10px var(--gold); }
.release-choice { position:relative; z-index:2; text-align:center; border-top:1px solid rgba(239,189,99,.52); border-bottom:1px solid rgba(123,220,243,.28); }
.release-choice>p:first-child { color:rgba(255,255,255,.66); font-style:italic; }
.publish-signal { display:block; width:min(24rem,100%); min-height:4rem; margin:1rem auto; font-size:.73rem; }
.publish-status { white-space:pre-line; color:rgba(235,246,248,.78); line-height:1.5; }
.published-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.published-actions[hidden] { display:none; }
.published-actions a { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.studio-footer { display:flex; justify-content:space-between; width:min(91rem,calc(100% - 2rem)); margin:0 auto; padding:1.3rem .4rem 2rem; color:rgba(255,255,255,.45); font:.58rem/1.3 var(--lh-plain); letter-spacing:.12em; text-transform:uppercase; }
.studio-footer a { color:var(--gold); }
@keyframes sceneEnter { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:none; } }
@media (max-width:850px) {
  .studio { width:100%!important; max-width:none!important; margin:0!important; overflow:visible; }
  .studio-header { grid-template-columns:1fr 1fr; }
  .studio-identity { grid-column:1/-1; grid-row:1; margin-bottom:.6rem; }
  .studio-home { grid-column:1; grid-row:2; }
  .leave-studio { grid-column:2; grid-row:2; }
  .beacon-course { margin-top:.8rem; }
  .seller-assurance { grid-template-columns:1fr 1fr; }
  .seller-assurance>span:nth-child(2) { border-right:0; }
  .seller-assurance>span:nth-child(-n+2) { border-bottom:1px solid rgba(123,220,243,.14); }
  .course-light { width:3.7rem; font-size:.44rem; }
  .studio-stage { min-height:0; padding:2rem 1rem 4rem; }
  .scene,.scene.is-active { grid-template-columns:1fr; gap:1.2rem; min-height:0; }
  .scene-words { margin-left:0; }
  .release-copy { margin-left:0; }
  .studio[data-scene="release"] .lantern-projector { left:auto; right:-6rem; opacity:.1; }
  .scene h1,.scene h2 { font-size:clamp(2.7rem,11vw,4.7rem); }
  .lantern-projector { left:auto; right:-6rem; top:-2rem; bottom:auto; width:20rem; opacity:.12; }
  .listing-premiere { grid-template-columns:1fr; }
  .premiere-media { min-height:18rem; }
  .studio-footer { display:grid; gap:.65rem; }
}
@media (max-width:520px) {
  .studio-header { padding:1rem; }
  .studio-identity strong { font-size:1.45rem; }
  .leave-studio { text-align:right; line-height:1.35; }
  .beacon-course { width:calc(100% - 1rem); }
  .course-light { width:3.2rem; }
  .course-light b { display:none; }
  .beacon-course i { flex:1; }
  .seller-assurance { width:calc(100% - 1rem); grid-template-columns:1fr 1fr; }
  .seller-assurance>span { padding:.65rem .7rem; border-right:1px solid rgba(123,220,243,.14); border-bottom:1px solid rgba(123,220,243,.14); }
  .seller-assurance>span:nth-child(2n) { border-right:0; }
  .seller-assurance>span:nth-last-child(-n+2) { border-bottom:0; }
  .seller-assurance b { font-size:.48rem; }
  .seller-assurance small { font-size:.68rem; }
  .studio-stage { width:calc(100% - .7rem); margin-top:.8rem; }
  .scene { min-width:0; width:calc(100% - 1rem); }
  .scene>* { min-width:0; width:100%; }
  .scene h1,.scene h2 { max-width:100%; font-size:clamp(2.2rem,10.2vw,2.5rem); overflow-wrap:normal; word-break:normal; text-wrap:wrap; }
  .scene-actions { justify-content:stretch; }
  .scene-actions .gold-action,.scene-actions .quiet-action,.scene-actions .publish-signal { flex:1 1 12rem; min-width:0; }
  .scene-actions .round-mic { flex:0 0 3.15rem; }
  .listing-script { grid-template-columns:1fr; }
  .script-wide { grid-column:1; }
  .premiere-media { min-height:14rem; }
  .saved-draft-callout { align-items:stretch; flex-direction:column; }
  .preview-facts { grid-template-columns:1fr; }
  .media-tools { opacity:1; }
}
/* Every visual shown inside a Lighthouse frame keeps its subject at the physical center of that frame. */
.studio-water,
.media-frame img, .media-frame video,
.premiere-media img, .premiere-media video { object-position:center center; }
.media-frame img, .media-frame video,
.premiere-media img, .premiere-media video { display:block; }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }

/* Warm paper workspace inside the upstairs writing room. */
body.desk-mode{color-scheme:light;--ink:#382818;--gold:#865b24;--blue:#966e36;background:#f4ecde;color:var(--ink)}
.desk-mode .studio{background:linear-gradient(115deg,#f8f1e5,#eadeca);min-height:100vh}
.desk-mode .studio-water,.desk-mode .studio-night,.desk-mode .studio-grain,.desk-mode .studio-header,.desk-mode .lantern-projector,.desk-mode .studio-stage::after{display:none}
.desk-mode .studio-stage{width:auto;min-height:0;margin:0;padding:24px 32px;background:none;border:0;box-shadow:none}
.desk-mode .scene{min-height:0;grid-template-columns:minmax(0,1fr);gap:18px}
.desk-mode .scene-words{margin:0;max-width:48rem}
.desk-mode .scene h1,.desk-mode .scene h2{font-size:32px;line-height:1.1;color:#392b1e}
.desk-mode .scene-words>p:last-child{color:#62503a;font-size:16px}
.desk-mode .scene-kicker,.desk-mode .script-line>span,.desk-mode label{color:#785729}
.desk-mode input,.desk-mode textarea,.desk-mode select{background:#fffaf0;color:#342719;border-color:#b9a281}
.desk-mode .listing-script,.desk-mode .spoken-story,.desk-mode .media-drop,.desk-mode .release-choice{background:none;box-shadow:none;padding:0;border:0}
.desk-mode .quiet-action{color:#594027;border-color:#a48659;background:#eee0cb}
.desk-mode .beacon-course{padding:16px 24px;color:#725632;flex-wrap:wrap}
.desk-mode .beacon-course span,.desk-mode .course-light{display:none}
.desk-mode .beacon-course button{color:#725632;text-shadow:none}
@media(max-width:600px){.desk-mode .studio-stage{padding:20px 16px}.desk-mode .listing-script{grid-template-columns:1fr}.desk-mode .scene h2{font-size:26px}}
