:root{color-scheme:dark;--ink:#f1eddd;--muted:#a9aea3;--border:#373d35;--bg:#121613;--panel:#1d221d;--accent:#d6f087;--peach:#ffbda5;--orange:#f6a36c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 "DM Sans",system-ui,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(1520px,calc(100% - 84px));margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 18px;background:var(--accent);color:#0a110d}
.skip:focus{top:12px}
.header{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:100px;border-bottom:1px solid var(--border)}
.identity{display:flex;gap:14px;align-items:center;white-space:nowrap;font:600 19px/1 "Space Grotesk",sans-serif;letter-spacing:-.05em}
.identity b{color:var(--accent);font-weight:600}
.identity small{display:block;font:600 9px/1.7 "DM Sans",sans-serif;letter-spacing:.13em;color:var(--muted);margin-top:5px}
.logo-icon{display:grid;place-items:center;font-size:32px;width:46px;height:46px;color:#10150f;background:var(--accent);border-radius:9px}
.header nav{display:flex;align-items:center;gap:26px;font:700 11px/1 "DM Sans",sans-serif;letter-spacing:.1em}
.header nav a{border-bottom:1px solid #adb8a2;padding-block:10px}
.free{color:#10150e;background:var(--accent);padding:13px 15px;border-radius:4px;white-space:nowrap}
.intro{display:grid;grid-template-columns:1fr 280px;gap:40px;padding:67px 0 62px}
.eyebrow{font:700 11px "DM Sans",sans-serif;letter-spacing:.18em;color:var(--accent)}
.point{color:var(--accent);padding-right:8px}
.intro h1,.how h2{font:600 clamp(60px,7.8vw,130px)/.88 "Space Grotesk",sans-serif;letter-spacing:-.085em;margin:21px 0 27px}
.intro h1 em,.how h2 em{font-style:normal;color:var(--peach)}
.intro p{max-width:675px;font-size:clamp(16px,1.55vw,23px);line-height:1.52;color:#ccd2c6;margin:0}
.intro-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:31px}
.intro-tags span{border:1px solid #526052;padding:8px 11px;border-radius:2px;font-weight:700;font-size:10px;letter-spacing:.13em}
.intro-side{align-self:end;background:var(--peach);color:#1b1a17;border-radius:6px;min-height:208px;padding:24px;display:flex;flex-direction:column}
.intro-side>span{font-size:10px;font-weight:700;letter-spacing:.12em;padding-block:5px;border-bottom:1px solid #2c272228}
.intro-side strong{font:700 22px/1.1 "Space Grotesk",sans-serif;letter-spacing:-.05em;margin-top:auto}
.studio{border:1px solid #53604f;border-radius:10px;overflow:hidden;background:#161c17;box-shadow:0 30px 90px #03070440}
.studio-label{padding:12px 24px;background:var(--accent);color:#1b2118;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;font-weight:800;letter-spacing:.15em}
.studio-label .point{color:#1e3a1d}
.workspace{display:grid;grid-template-columns:minmax(260px,25%) minmax(0,1fr) minmax(250px,23%);gap:0;min-height:690px}
.workspace>section,.workspace>aside{padding:23px 22px 25px;min-width:0}
.editor-panel{border-right:1px solid var(--border)}
.settings-panel{border-left:1px solid var(--border)}
.panel-top{display:flex;justify-content:space-between;gap:8px;color:#b0bea9;font-size:9px;font-weight:700;letter-spacing:.15em;min-height:23px}
.panel-top span:last-child{color:var(--accent);white-space:nowrap}
.editor-panel h2,.settings-panel h2{font:600 30px/1.1 "Space Grotesk",sans-serif;letter-spacing:-.055em;margin:14px 0 13px}
.hint,.detail{font-size:12px;color:#adb5a9;line-height:1.6}
.hint{margin:0 0 18px}
textarea{display:block;width:100%;min-height:365px;resize:vertical;background:#0e130f;border:1px solid #506151;border-radius:4px;color:#f3f4e7;padding:17px;line-height:1.65;letter-spacing:.01em;font-size:14px}
textarea::placeholder{color:#829287}
.script-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.mini,.quiet,.ghost{border:1px solid #5c6b5d;background:transparent;color:#e2eddc;border-radius:4px}
.mini{padding:10px 9px;font-size:10px;font-weight:700;letter-spacing:.05em}
.mini:hover,.quiet:hover,.ghost:hover{background:#304032;border-color:var(--accent)}
.script-meta{border-top:1px solid var(--border);margin-top:28px;padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.script-meta div{display:flex;flex-direction:column;gap:7px}
.script-meta span{font-size:10px;letter-spacing:.08em;color:#a9b2a4}
.script-meta strong{font:600 26px "Space Grotesk",sans-serif}
.preview-panel{display:flex;flex-direction:column;gap:14px;background:#1b211c;padding-inline:20px!important}
.preview-panel>.panel-top{margin-bottom:2px}
.stage{position:relative;isolation:isolate;aspect-ratio:16/9;min-height:350px;border-radius:6px;overflow:hidden;background:radial-gradient(ellipse 120% 75% at 50% 0,#38453b,#0d100e 69%);border:1px solid #434a42}
.stage:fullscreen{border-radius:0;border:0;width:100vw;height:100vh;aspect-ratio:auto}
.stage:fullscreen .reader-scroll{top:12%;bottom:12%}
.stage:fullscreen .stage-top{top:22px}
.stage:fullscreen .stage-bottom{bottom:20px}
.stage #cameraVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.stage #cameraVideo[hidden]{display:none!important}
.stage-shade{position:absolute;inset:0;background:linear-gradient(#04050473,#0d1109ab 43%,#070a08a8);z-index:0;pointer-events:none}
.stage.no-camera .stage-shade{background:transparent}
.stage.high-contrast .stage-shade{background:#070a07ed}
.stage-top,.stage-bottom{position:absolute;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:8px;left:21px;right:21px;color:#dbecd3;font-size:9px;letter-spacing:.12em;font-weight:700;pointer-events:none}
.stage-top{top:19px}
.stage-bottom{bottom:17px;color:#b6c5b2}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px}
#recLabel{color:#ff7b75}
.reader-scroll{position:absolute;z-index:2;top:17%;bottom:16%;width:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;mask-image:linear-gradient(to bottom,transparent,#000 21%,#000 77%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 21%,#000 77%,transparent)}
.reader-scroll::-webkit-scrollbar{display:none}
.reader-content{width:80%;margin:auto;text-align:center;color:#f7f8ed;text-shadow:0 3px 16px #000b;word-break:break-word;font:600 44px/1.38 "Space Grotesk",sans-serif;letter-spacing:-.025em}
.reader-content:before{content:"";display:block;height:18px}
.reader-content:after{content:"";display:block;height:36vh;max-height:350px}
.reader-content p{margin:0 0 1em}
.reader-content .placeholder{color:#e5e9d0;opacity:.8}
.focus-line{position:absolute;z-index:2;left:9%;right:9%;top:49%;height:1px;border-top:1px dashed #e9ebcd50;pointer-events:none}
.stage.mirrored .reader-content{transform:scaleX(-1)}
.stage.mirrored .stage-top,.stage.mirrored .stage-bottom{transform:none}
.transport{display:flex;gap:10px;align-items:center;justify-content:center}
.transport button{height:46px}
.quiet{min-width:48px;font-size:22px}
.primary{flex:1;max-width:390px;background:var(--accent);border:1px solid var(--accent);color:#111810;border-radius:4px;font-size:12px;font-weight:800;letter-spacing:.12em}
.primary:hover{background:#eeffa9}
.footnote{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:9px;letter-spacing:.1em;color:#a3afa1}
.footnote span:last-child{color:var(--accent)}
.control-index{font-size:8px}
.form-field{margin-top:18px}
.form-field label{display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:800;letter-spacing:.1em;color:#d3dfcd}
.form-field label strong{color:var(--accent)}
.form-field select{width:100%;border:1px solid #57665b;border-radius:4px;background:#0e160f;color:#ebf1e7;padding:10px;font-size:12px;margin-top:9px}
.form-field input[type=range]{margin-top:14px;width:100%;accent-color:var(--accent);cursor:pointer}
.form-field .detail{margin:7px 0 0;font-size:11px}
.toggle-line{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-block:13px;border-bottom:1px solid var(--border);font-size:10px;font-weight:800;letter-spacing:.1em}
.toggle-line span{display:block;color:#a9b5a7;font-size:10px;font-weight:400;letter-spacing:normal;margin-top:4px}
.toggle-line input{width:20px;height:20px;accent-color:var(--accent)}
.section-rule{border-top:1px solid #687263;margin:24px 0 18px}
.feature-label{font-size:10px;letter-spacing:.12em;font-weight:800;margin-bottom:11px;color:var(--peach)}
.wide{width:100%;padding:13px 10px;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.07em;margin-bottom:8px}
.record{background:#ffbcab;border:1px solid #ffbcab;color:#29201c}
.record:hover{background:#ffe2d7}
.record.is-recording{background:#c84540;border-color:#c84540;color:white;animation:reclight 1s infinite alternate}
@keyframes reclight{from{opacity:1}to{opacity:.72}}
.message{font-size:11px;color:#dcdfc7;border-left:2px solid var(--accent);background:#2a3329;padding:11px 12px;min-height:50px;line-height:1.6}
.message.error{border-color:#f68b8b;color:#ffc3bc}
.how{padding-block:105px 110px}
.how h2{font-size:clamp(52px,6vw,90px);margin:15px 0 52px}
.how-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #4a544c;gap:40px}
.how-items>div{padding-top:28px}
.how-items span{color:var(--accent);font-size:12px;font-weight:800}
.how-items h3{font:600 27px/1.1 "Space Grotesk",sans-serif;letter-spacing:-.04em;margin:15px 0}
.how-items p{font-size:14px;line-height:1.7;color:#b8c2b7;max-width:410px}
.footer{border-top:1px solid #505a51;padding:29px 0 55px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:10px;font-weight:700;letter-spacing:.1em;color:#b1b9af}
.footer a{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1350px){.workspace{grid-template-columns:minmax(220px,26%) minmax(0,1fr) minmax(235px,25%)}.workspace>section,.workspace>aside{padding-inline:16px}.reader-content{font-size:36px}.stage{min-height:320px}.intro{grid-template-columns:1fr 230px}.intro h1{font-size:clamp(60px,7vw,105px)}}
@media(max-width:1080px){.wrap{width:min(100% - 44px,1400px)}.workspace{grid-template-columns:minmax(240px,34%) minmax(0,1fr)}.settings-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px}.settings-panel>.panel-top,.settings-panel>h2,.settings-panel>.section-rule,.settings-panel>.feature-label,.settings-panel>.detail,.settings-panel>.message{grid-column:1/-1}.settings-panel .form-field{margin-top:8px}.studio{margin-top:10px}.stage{min-height:345px}.reader-content{font-size:39px}}
@media(max-width:750px){.header{min-height:80px}.header nav{gap:12px}.header nav>a{font-size:9px}.header .free{display:none}.intro{display:block;padding:50px 0 30px}.intro h1{font-size:clamp(49px,11vw,79px)}.intro-side{display:none}.workspace{display:flex;flex-direction:column}.preview-panel{order:1}.editor-panel{order:2;border-right:0;border-top:1px solid var(--border)}.settings-panel{order:3;display:block}.preview-panel{padding-block:16px!important}.stage{min-height:300px}.reader-content{font-size:36px}.intro-tags{margin-top:22px}.how{padding:60px 0}.how-items{grid-template-columns:1fr;gap:8px}.how h2{margin-bottom:35px}.how-items>div{padding-top:22px;border-top:1px solid #38493c}}
@media(max-width:450px){.wrap{width:calc(100% - 24px)}.header{min-height:70px}.identity{font-size:14px;gap:9px}.identity small{font-size:7px}.logo-icon{width:34px;height:34px;font-size:22px}.header nav>a{font-size:8px;text-align:right}.intro{padding:36px 0 20px}.intro h1{font-size:clamp(43px,12vw,58px);margin-block:18px}.intro p{font-size:14px}.eyebrow{font-size:9px}.intro-tags span{font-size:8px;padding:7px 6px}.workspace>section,.workspace>aside{padding:14px 11px}.preview-panel{padding:12px!important}.studio-label{font-size:8px;padding:12px}.studio-label #availability{display:none}.stage{min-height:250px}.stage-top,.stage-bottom{left:11px;right:11px;font-size:7px}.stage-bottom>span:first-child{max-width:74%}.stage-top{top:12px}.stage-bottom{bottom:9px}.reader-content{font-size:30px}.transport{gap:5px}.transport button{height:42px}.quiet{min-width:36px;font-size:18px}.primary{font-size:10px;letter-spacing:.02em}.footnote{font-size:8px}.footnote span:last-child{display:none}textarea{min-height:220px}.how h2{font-size:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.record.is-recording{animation:none}*{scroll-behavior:auto!important}}