@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{--ink:#17231e;--muted:#7b827d;--paper:#f5f6f2;--line:#dedfd8;--mint:#99edbf;--coral:#ef756b;--gold:#e8c67c;--accent:var(--mint);font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible{outline:3px solid #20a86e;outline-offset:4px}button{color:inherit}a{color:inherit}svg{width:20px;height:20px;stroke-width:1.6;flex-shrink:0}button svg{pointer-events:none}button[hidden],[hidden]{display:none!important}.topbar{height:91px;padding:0 4%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-size:26px;font-weight:700}.brand-icon{display:grid;place-items:center;width:34px;height:34px;background:var(--ink);color:var(--mint);border-radius:50%}.brand-icon svg{width:24px;height:24px}.demo-tag{margin-left:10px;border-left:1px solid #c7cbc4;padding-left:20px;font-size:9px;font-weight:500;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:12px}.session-label{font-size:10px;margin-right:20px;color:var(--muted)}.icon-button{border:0;background:transparent;width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%}.icon-button:hover{background:#e6e9e2}.topbar .icon-button{border:1px solid var(--line)}main{display:grid;grid-template-columns:minmax(240px,29%) minmax(0,1fr);padding:32px 4% 24px;max-width:1700px;margin:auto;gap:4%}.journey{display:flex;flex-direction:column;min-height:740px;max-height:calc(100vh - 145px);position:sticky;top:24px;padding-right:15px}.eyebrow{font-size:9px;font-weight:500;color:var(--muted);letter-spacing:0}.steps{list-style:none;display:flex;margin:31px 0 0;padding:0;counter-reset:steps;gap:0}.steps li{counter-increment:steps;display:flex;align-items:center;gap:7px;font-size:11px;color:#a3aaa3;flex:1;position:relative}.steps li:before{content:'0'counter(steps);font-size:9px;border:1px solid #d6dcd2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--paper)}.steps li.active{color:var(--ink)}.steps li.active:before{background:var(--ink);color:var(--mint);border-color:var(--ink)}.steps li.done:before{background:#d9ecdf;color:#1e7950;border-color:#d9ecdf}.story{margin:auto 0;padding:40px 0}.chapter{font-size:10px;color:#597364}.story h1{font-size:clamp(34px,3.1rem,50px);line-height:1.3;font-weight:500;margin:22px 0 22px;letter-spacing:0}.story p{font-size:13px;line-height:2.05;max-width:270px;color:#68736a;margin:0 0 24px}.story-detail{display:flex;gap:9px;font-size:9px;color:#858b83;align-items:center;line-height:1.8;min-height:36px;margin-bottom:29px}.little-line{height:1px;width:20px;background:#8daa92;flex-shrink:0}.primary{background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:51px;padding:12px 20px;border:0;border-radius:4px;font-size:12px;font-weight:500;transition:background .2s;width:100%;max-width:280px}.primary:hover{background:#2d4b3b}.primary svg{color:var(--mint);width:18px}.text-button{display:flex;align-items:center;justify-content:space-between;max-width:280px;width:100%;border:0;background:transparent;padding:19px 1px;font-size:10px;color:#717c71}.text-button svg{width:13px}.journey-footer{display:flex;align-items:center;gap:7px;font-size:9px;color:#828b82;padding-top:25px;border-top:1px solid var(--line)}.live-dot{background:#55ad7e;border-radius:50%;width:5px;height:5px;display:inline-block;flex-shrink:0}.index-number{margin-left:auto;font-size:9px}.instrument{background:#fff;border:1px solid #d5dbd2;border-radius:8px;overflow:hidden;min-width:0}.camera-top{height:46px;background:#15201c;color:#cad2c9;padding:0 20px;display:flex;align-items:center;justify-content:space-between;font-size:8px}.camera-label{display:flex;align-items:center;gap:8px}.camera-label .live-dot{background:var(--mint)}.scene-label{display:flex;align-items:center;gap:5px;color:#9ba99e}.scene-label svg{width:12px;height:12px}.viewfinder{position:relative;aspect-ratio:1.85;overflow:hidden;background:#28362d;isolation:isolate}.scene{position:absolute;inset:0;transition:transform 1s cubic-bezier(.2,.65,.3,1);transform:scale(1.04)}.scene img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.86) saturate(.77)}.scene:after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,18,.18),transparent 40%,rgba(9,24,17,.35))}.frame-corner{position:absolute;width:19px;height:19px;z-index:2;border-color:rgba(255,255,255,.7);border-style:solid;pointer-events:none}.tl{top:19px;left:19px;border-width:1px 0 0 1px}.tr{top:19px;right:19px;border-width:1px 1px 0 0}.bl{bottom:19px;left:19px;border-width:0 0 1px 1px}.br{bottom:19px;right:19px;border-width:0 1px 1px 0}.lens-caption{position:absolute;top:35px;left:35px;color:#fff;display:flex;gap:14px;align-items:center;pointer-events:none}.lens-caption>span:first-child{font-size:32px;font-weight:400;line-height:1}.lens-caption>span:last-child{font-size:8px;line-height:1.8}.hotspot{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:5px;border:0;background:transparent;color:white;white-space:nowrap;opacity:0;transition:opacity .25s}.started .hotspot{opacity:1}.hotspot:before{content:'';border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 5px #ffffff15;width:13px;height:13px;border-radius:50%;background:#ffffff15;flex-shrink:0}.hotspot span{font-size:9px;padding:5px 7px;background:#14271dbb;border:1px solid #ffffff33;border-radius:3px}.hotspot:hover:before,.hotspot.selected:before{background:var(--mint);border-color:var(--mint);box-shadow:0 0 0 7px #99edbf33}.hotspot.selected span{background:var(--mint);color:#173323;border-color:var(--mint)}.crosshair{position:absolute;width:46px;height:46px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ffffff9c;border-radius:50%;transition:left .6s,top .6s;pointer-events:none;z-index:2;display:grid;place-items:center}.crosshair:before,.crosshair:after{content:'';position:absolute;background:#fff}.crosshair:before{width:66px;height:1px}.crosshair:after{height:66px;width:1px}.crosshair span{width:40px;height:40px;background:#ffffff10;border-radius:50%;z-index:1;backdrop-filter:blur(1px)}.crosshair b{position:absolute;width:5px;height:5px;background:var(--mint);border-radius:50%;z-index:2}.reading{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;background:#12231ee0;border:1px solid #b1d2bb48;color:white;padding:9px 12px;font-size:11px;border-radius:4px;white-space:nowrap;pointer-events:none}.recognition-dot{width:4px;height:4px;border-radius:50%;background:var(--mint)}.note{padding-left:10px;border-left:1px solid #ffffff33;font-family:monospace;color:var(--mint);min-width:32px}.scene-bottom{position:absolute;left:35px;right:35px;bottom:18px;color:#fff;font-size:8px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.scene-bottom>span:first-child{display:flex;align-items:center;gap:7px}.scene-bottom svg{width:12px;height:12px}.record-hud{position:absolute;right:32px;top:32px;background:#14251fe8;border:1px solid #ffffff22;padding:12px;color:white;width:230px;z-index:5;border-radius:4px}.record-hud>div:first-child{display:flex;align-items:center;gap:6px;font-size:9px}.record-hud strong{font-size:9px;font-weight:500}.record-hud #bar-label{margin-left:auto;color:#c7d2c8;font-size:8px}.rec-dot{background:var(--coral);width:5px;height:5px;border-radius:50%;animation:pulse 1s infinite}.bar-progress{display:flex;gap:4px;margin:12px 0}.bar-progress span{height:3px;background:#ffffff28;flex:1;position:relative;overflow:hidden}.bar-progress span:after{content:'';background:var(--coral);height:100%;width:var(--fill,0%);display:block}.record-hud p{font-size:8px;margin:0;color:#b9c7b9;line-height:1.7}.console{padding:19px 23px 15px;background:#fdfefb}.console-heading{display:flex;justify-content:space-between;font-size:8px;color:#6f7e70;margin-bottom:14px}.console-heading>span:last-child{font-family:monospace}.presets{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:16px}.presets button{display:flex;align-items:center;gap:9px;border:1px solid #dce1d7;background:transparent;padding:11px;border-radius:4px;text-align:left;min-width:0;transition:background .2s}.presets button>svg{width:18px;height:18px;color:#889789}.presets button>span{font-size:11px;font-weight:500}.presets small{display:block;font-size:8px;font-weight:400;color:#8a9387;margin-top:4px}.presets .selected{background:#e9f2e8;border-color:#a5bda5}.presets .selected svg{color:#3d7855}.tracks{display:grid;gap:6px}.track{display:grid;grid-template-columns:5px 91px 1fr 45px 25px;gap:11px;align-items:center;min-height:51px;border-bottom:1px solid #e6e9e1;position:relative}.track .track-color{width:3px;height:28px;background:var(--track-color);border-radius:1px}.track-name{font-size:10px;font-weight:500;line-height:1.6}.track-name small{display:block;font-size:8px;color:#8a9489;font-weight:400}.waveform{height:28px;display:flex;align-items:center;gap:3px;overflow:hidden;opacity:.35}.waveform i{height:var(--h);background:var(--track-color);width:3px;flex:1;min-width:1px;border-radius:1px;max-width:4px}.track.ready .waveform{opacity:1}.track.recording .waveform i{animation:wave .7s infinite alternate}.track.recording .waveform{opacity:1}.track.muted .waveform{opacity:.15}.track-state{font-size:8px;color:#a1aaa0;white-space:nowrap}.track.ready .track-state{color:#457858}.track.recording .track-state{color:#cc685e}.track-toggle{background:transparent;border:0;padding:3px;width:25px;height:28px;display:grid;place-items:center}.track-toggle svg{width:14px;height:14px;color:#6c806e}.transport{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;min-height:73px;padding-top:11px}.transport-left{display:flex;gap:3px}.transport .icon-button{color:#70806f}.record-button{border:1px solid #ccd5c9;background:transparent;border-radius:50%;width:54px;height:54px;padding:5px;justify-self:center;display:grid;place-items:center}.record-button>span{display:block;background:var(--coral);width:40px;height:40px;border-radius:50%;transition:border-radius .2s,transform .2s}.record-button:hover>span{transform:scale(.9)}.record-button.recording>span{border-radius:5px;width:20px;height:20px}.play-button{justify-self:end;background:transparent;border:1px solid #dce2d7;border-radius:4px;display:flex;align-items:center;gap:7px;padding:10px 13px;font-size:10px;min-width:78px}.play-button svg{width:13px;height:13px}.page-footer{display:flex;justify-content:space-between;padding:0 4% 22px;font-size:8px;color:#899184;max-width:1700px;margin:auto}.page-footer button{border:0;background:transparent;color:inherit;padding:0;font-size:inherit;text-decoration:underline;text-underline-offset:3px}.footer-divider{margin:0 8px}.reveal{position:absolute;inset:0;z-index:7;background:#152b23ef;color:#f7fbf3;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;backdrop-filter:blur(8px);padding:20px}.reveal-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;border:1px solid #99edbf66;color:var(--mint);margin-bottom:17px}.reveal .eyebrow{color:var(--mint);font-size:8px}.reveal h2{font-size:32px;line-height:1.4;font-weight:500;margin:15px 0 10px}.reveal p{font-size:10px;color:#b6c8bc;margin:0 0 20px}.reveal .primary{background:var(--mint);color:var(--ink);max-width:210px;min-height:42px;font-size:10px}.reveal .primary svg{color:var(--ink)}.toast{position:fixed;z-index:30;bottom:24px;left:50%;transform:translateX(-50%);background:#172b23;color:white;padding:13px 20px;font-size:12px;box-shadow:0 5px 30px #0002;border:1px solid #b4cbb650;border-radius:4px;max-width:calc(100% - 32px);width:max-content;text-align:center}.toast[hidden]{display:none}dialog{border:1px solid #d8dfd2;border-radius:8px;max-width:470px;width:calc(100% - 32px);padding:38px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#071d14a6;backdrop-filter:blur(6px)}dialog h2{font-weight:500;font-size:25px;margin:20px 0}dialog p{font-size:12px;color:#6a766a;line-height:2}.dialog-close{position:absolute;right:10px;top:10px}.credits{font-size:9px;color:#9aa295;margin:20px 0}.dialog-done{max-width:none}.recording .camera-label .live-dot{background:var(--coral)}.started .viewfinder{cursor:crosshair}body[data-preset=heartbreak]{--accent:var(--coral)}body[data-preset=neptune]{--accent:var(--gold)}
@keyframes pulse{50%{opacity:.3}}@keyframes wave{to{transform:scaleY(.5)}}
@media(min-width:1500px){main{gap:5%;grid-template-columns:29% 1fr}.viewfinder{aspect-ratio:1.95}.journey{min-height:800px}.story h1{font-size:54px}.story p{max-width:310px;font-size:14px}}
@media(max-width:1100px){main{gap:3%;grid-template-columns:255px minmax(0,1fr);padding:24px 3%}.topbar{padding:0 3%;height:75px}.journey{min-height:680px}.story h1{font-size:40px}.viewfinder{aspect-ratio:1.4}.console{padding:17px}.track{gap:6px;grid-template-columns:4px 75px 1fr 38px 22px}.presets button{padding:10px 7px;gap:6px}.presets button>span{font-size:10px}.presets small{font-size:7px}.lens-caption{top:29px;left:29px}.record-hud{top:80px;right:24px}.session-label{display:none}}
@media(max-width:760px){.topbar{height:65px;padding:0 20px}.brand{font-size:22px;gap:8px}.brand-icon{width:29px;height:29px}.demo-tag{font-size:7px;padding-left:12px;margin-left:4px}.top-actions{gap:5px}.topbar .icon-button{width:31px;height:31px;border:0}.topbar .icon-button svg{width:18px;height:18px}main{display:flex;flex-direction:column;padding:0;gap:0}.journey{position:static;min-height:0;max-height:none;padding:20px 22px 22px;display:grid;grid-template-columns:minmax(0,1fr) 120px;column-gap:12px}.journey-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.journey-top>.eyebrow{font-size:7px}.steps{margin:0;gap:12px}.steps li{font-size:9px;gap:5px}.steps li:before{width:18px;height:18px;font-size:7px}.story{grid-column:1/-1;margin:0;padding:24px 0 0;display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:0 12px}.chapter{grid-column:1;font-size:8px}.story h1{font-size:28px;margin:10px 0 8px;grid-column:1;line-height:1.3}.story h1 br{display:none}.story p{font-size:10px;margin:0;grid-column:1;line-height:1.8;max-width:350px}.story-detail{display:none}.story .primary{grid-column:2;grid-row:2;align-self:center;min-height:41px;padding:10px 12px;font-size:10px;gap:5px}.story .primary svg{width:14px}.story .text-button{grid-column:2;grid-row:3;font-size:8px;padding:0;align-self:center;line-height:1.6;gap:5px}.story .text-button svg{width:11px}.journey-footer{display:none}.instrument{border:0;border-top:1px solid #d5dbd2;border-radius:0}.camera-top{height:35px;padding:0 20px;font-size:7px}.viewfinder{aspect-ratio:1.22}.scene img{object-fit:cover}.lens-caption{top:26px;left:27px}.lens-caption>span:first-child{font-size:26px}.lens-caption>span:last-child{font-size:7px}.frame-corner{width:14px;height:14px}.scene-bottom{left:27px;right:27px;bottom:17px;font-size:7px}.hotspot{gap:4px}.hotspot span{font-size:8px;padding:4px}.hotspot:before{width:10px;height:10px}.reading{bottom:40px;padding:7px 10px;font-size:9px}.record-hud{top:74px;right:24px;width:200px;padding:10px}.record-hud p{font-size:7px}.console{padding:19px 22px 12px}.console-heading{font-size:7px}.presets{gap:6px;margin-bottom:11px}.presets button{padding:9px 7px;gap:7px}.presets button svg{width:16px}.presets small{font-size:7px}.track{min-height:47px;grid-template-columns:4px 77px 1fr 41px 25px;gap:9px}.track-name{font-size:9px}.track-name small{font-size:7px}.waveform{gap:2px}.transport{min-height:69px}.page-footer{padding:17px 22px 22px;font-size:6px;gap:12px}.reveal h2{font-size:26px}.reveal-icon{width:34px;height:34px;margin-bottom:10px}.reveal p{font-size:9px}.reveal .primary{min-height:39px}.reveal h2{margin:10px 0}.reveal .eyebrow{font-size:7px}dialog{padding:30px 25px}}
@media(max-width:360px){.demo-tag{display:none}.story{grid-template-columns:minmax(0,1fr) 105px}.story h1{font-size:25px}.journey-top>.eyebrow{max-width:90px;line-height:1.5}.steps{gap:8px}.presets button{gap:5px}.presets button>span{font-size:9px}.presets small{font-size:6px}.track{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}