:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#edf8f6;background:#071015;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #84f2dc;outline-offset:3px}[hidden]{display:none!important}.product{min-height:100vh;background:radial-gradient(circle at 78% 26%,#16424b 0,#0b2028 33%,#071015 74%)}.bar{height:74px;border-bottom:1px solid #ffffff1c;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,70px);gap:20px}.brand{font-size:19px;font-weight:900;letter-spacing:.13em;white-space:nowrap}.brand span:last-child{color:#98dcd3;font-weight:350}.brand-star{font-size:30px;color:#7de8d5;vertical-align:middle;margin-right:8px}.bar-right{display:flex;align-items:center;gap:12px;min-width:0}.badge{font-size:11px;font-weight:850;letter-spacing:.13em;border:1px solid #e0b866;color:#f5d9a0;background:#c3973430;padding:7px 10px}.badge.live{border-color:#49c5a9;color:#97f5de;background:#1c705b50}.connection{font-size:11px;font-weight:700;letter-spacing:.1em;color:#bfd4d2;white-space:nowrap}.text-button{border:0;background:none;color:#cde9e4;text-decoration:underline}.layout{display:grid;grid-template-columns:minmax(420px,1.03fr) minmax(390px,.97fr);gap:clamp(24px,4vw,64px);padding:clamp(24px,4vw,62px) clamp(20px,4vw,70px) 24px;align-items:start}.desk{min-width:0}.top{padding-bottom:26px}.eyebrow,.section-head span,.stage-top,.stage-bottom small,.micro{font-size:11px;font-weight:800;letter-spacing:.15em;color:#9bbebd}.eyebrow{color:#7de8d5}.top h1{font-size:clamp(44px,5vw,76px);letter-spacing:-.06em;line-height:1.02;margin:18px 0 16px}.top h1 em{font-family:Georgia,serif;color:#9beddf;font-weight:400}.top p:not(.eyebrow):not(.micro){max-width:520px;color:#c2d8d5;line-height:1.55}.primary-actions{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 12px}.primary,.secondary,.small,.danger,.scene-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 17px;border-radius:6px;border:1px solid #74dfcc;text-decoration:none;font-weight:800;color:#08201d;background:#80ecd8}.secondary,.small,.scene-button{background:#163d43;color:#e1f7f2;border-color:#478882}.danger{color:#ffe0dd;background:#532b30;border-color:#a6545a}.primary:hover,.secondary:hover,.small:hover,.danger:hover,.scene-button:hover{filter:brightness(1.15)}.primary{font-size:15px;min-height:48px}.micro{letter-spacing:0;color:#afc4c2}.control,.demo-panel,.feed{border:1px solid #6ec5b52e;background:#0d252ce8;border-radius:9px;padding:20px;margin:14px 0}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}.section-head h2{font-size:19px;margin:0 0 16px}.section-head span{letter-spacing:.09em}.control-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.control-grid label{display:grid;gap:6px;color:#c1d4d1;font-size:13px}.control-grid input[type=range]{width:130px;accent-color:#7de8d5}.control-grid select{background:#163740;border:1px solid #4b807f;border-radius:4px;color:#f3fffc;padding:9px;min-width:125px}.obs{border-top:1px solid #ffffff1e;margin-top:20px;padding-top:15px}.obs h3{font-size:16px;margin:0 0 7px}.obs p,.demo-panel p{color:#b6ccc8;font-size:13px;line-height:1.5}.obs-row{display:flex;gap:7px;flex-wrap:wrap}.obs-row input{flex:1 1 180px;min-width:0;background:#071b21;border:1px solid #4a7472;border-radius:4px;color:#e2f8f2;padding:8px}.obs-row button{padding:7px 10px}.scenes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.scene-button{font-size:12px;min-height:37px;padding:7px 10px}.messages{display:grid;gap:6px;max-height:190px;overflow:auto;color:#b4c9c6}.message{display:grid;grid-template-columns:minmax(65px,105px) 1fr 42px;gap:8px;padding:8px 9px;background:#15353b}.message strong{color:#8cebd8;overflow:hidden;text-overflow:ellipsis}.message span{overflow-wrap:anywhere}.message small{color:#f0cc92}.error{color:#ffaaa8;min-height:18px}.stage{height:min(74vh,640px);min-height:440px;border:1px solid #75dccc36;border-radius:10px;background:radial-gradient(circle at 50% 50%,#1a4e57,#0b252d 60%,#091a23);position:sticky;top:20px;overflow:hidden;box-shadow:0 30px 80px #0007}.stage canvas{position:absolute;inset:0;width:100%;height:100%}.stage-top,.stage-bottom{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;gap:10px}.stage-top{top:24px;color:#9feadf}.stage-core{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(95px,16vw,230px);color:#91f0dd;text-shadow:0 0 75px #4fe2cb9a;pointer-events:none}.stage-bottom{bottom:23px}.stage-bottom div{display:grid;gap:7px}.stage-bottom strong{font-size:21px}footer{display:flex;justify-content:space-between;gap:12px;padding:12px clamp(20px,4vw,70px) 24px;color:#91ada9;font-size:12px}footer a{color:#a3f0e0}.overlay{height:100vh;overflow:hidden}.overlay .bar,.overlay .desk,.overlay footer{display:none}.overlay .layout{display:block;padding:0;height:100%}.overlay .stage{position:relative;top:0;width:100%;height:100%;min-height:0;border:0;border-radius:0}.overlay .stage-core{font-size:23vw}@media(max-width:1000px){.layout{grid-template-columns:1fr}.stage{position:relative;top:0;height:390px;min-height:390px}.top h1{font-size:clamp(42px,8vw,65px)}}@media(max-width:560px){.bar{height:65px}.brand{font-size:13px}.brand-star{font-size:22px;margin-right:2px}.connection{font-size:9px;max-width:120px;overflow:hidden;text-overflow:ellipsis}.layout{padding:20px 16px;gap:16px}.stage{height:285px;min-height:285px}.stage-core{font-size:110px}.stage-top,.stage-bottom{left:15px;right:15px}.stage-top{font-size:9px}.stage-bottom strong{font-size:16px}.top h1{font-size:44px}.control,.demo-panel,.feed{padding:15px}.message{grid-template-columns:70px 1fr 38px;font-size:12px}footer{padding:4px 16px 22px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}:root{font-family:Inter,ui-sans-serif,system-ui,Segoe UI,sans-serif;color:#f3f2ff;background:#070711;color-scheme:dark}body{background:#070711}button,input,select{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #77e9ff;outline-offset:3px}.product{--violet:#ac67ff;--cyan:#67e7ff;--blue:#4d83ff;min-height:100vh;background:radial-gradient(ellipse 55% 45% at 53% 9%,#26104e 0,transparent 75%),radial-gradient(ellipse 45% 34% at 96% 61%,#102a50 0,transparent 80%),#070711;color:#f3f2ff}.product.scene-neon{--violet:#ec6cff;--cyan:#70edff;--blue:#537dff}.product.scene-noir{--violet:#a9a8d4;--cyan:#b9d8f4;--blue:#6e7bba}.bar{height:76px;padding:0 clamp(18px,3vw,48px);border-color:#9d7df52e;background:#09091be8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:relative;z-index:3}.brand{font-size:18px;letter-spacing:.08em;color:#fff}.brand span:last-child{font-weight:800;color:var(--violet)}.brand-star{color:var(--cyan);text-shadow:0 0 22px var(--cyan)}.badge{border-radius:100px;background:#77562325;border-color:#e8bc655b;color:#ffd993;padding:8px 14px}.badge.live{background:#8933ed35;border-color:#ae69ff;color:#e6caff;box-shadow:0 0 20px #7a38df45}.connection{color:#aeb5d1}.text-button{color:#d5c9ff;text-underline-offset:3px}.layout{display:grid;grid-template-columns:76px minmax(390px,1.28fr) minmax(355px,.92fr);gap:22px;align-items:start;padding:26px clamp(16px,2.5vw,42px) 30px;max-width:1800px;margin:auto}.studio-nav{grid-column:1;grid-row:1;position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:13px 6px;background:#0e1025;border:1px solid #6e61b345;border-radius:17px;box-shadow:0 25px 60px #0005;z-index:2}.studio-nav .nav-mark{font-size:25px;color:var(--cyan);padding:4px 0 15px}.studio-nav a{display:grid;place-items:center;gap:3px;width:62px;min-height:58px;border-radius:10px;color:#a9afce;text-decoration:none;font-size:24px;transition:background .2s,color .2s}.studio-nav a span{font-size:9px;font-weight:750;letter-spacing:.04em}.studio-nav a:hover,.studio-nav a:focus-visible{background:#8452d637;color:#fff}.desk{grid-column:2;grid-row:1;min-width:0}.stage{grid-column:3;grid-row:1}.is-live .desk{grid-column:3}.is-live .stage{grid-column:2}.top{padding:2px 0 13px}.top-kicker,.eyebrow{display:block;color:var(--cyan);font-weight:800;font-size:10px;letter-spacing:.19em;text-transform:uppercase}.top .eyebrow{margin:13px 0 0;color:#aeb3d7}.top h1{font-size:clamp(39px,3.4vw,62px);line-height:1.02;letter-spacing:-.065em;margin:13px 0}.top h1 em{font-family:Georgia,serif;font-style:italic;color:#d3a1ff;text-shadow:0 0 33px #8d4ffa58}.top p:not(.eyebrow):not(.micro){color:#b6bed6;line-height:1.55;font-size:14px}.primary-actions{margin:19px 0 10px}.primary,.secondary,.small,.danger,.scene-button{border-radius:9px;min-height:43px;border-color:#7770ac;color:#eae8ff;background:#22213e;transition:transform .2s,background .2s,box-shadow .2s}.primary{background:linear-gradient(115deg,#9a4ff1,#5378fb);border-color:#b87aff;color:#fff;box-shadow:0 8px 28px #6b45e553}.secondary{background:#10233e;border-color:#5479b5}.danger{background:#381b38;border-color:#a95a82;color:#ffd8ea}.primary:hover,.secondary:hover,.small:hover,.danger:hover,.scene-button:hover{filter:none;transform:translateY(-2px);box-shadow:0 8px 22px #7654dd45}.micro{color:#9ca8c4;font-size:11px;letter-spacing:0}.control,.demo-panel,.feed{background:linear-gradient(145deg,#16142ce8,#0d1428ed);border:1px solid #7772b148;border-radius:15px;padding:19px 21px;margin:13px 0;box-shadow:0 14px 36px #0003}.section-head{align-items:center}.section-head h2{font-size:19px;letter-spacing:-.025em;margin:0 0 12px}.section-head span{color:#aeb1d1;font-size:10px}.control-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:11px}.control-grid label{font-size:12px;font-weight:650;color:#bec7e3}.control-grid input[type=range]{width:100%;accent-color:#aa70f4;min-height:28px}.control-grid select{background:#111b34;color:#eef2ff;border-color:#6375b0;border-radius:8px;min-width:100%;min-height:40px}.control-grid button{min-width:90px}.control-choice{grid-column:1/-1;border-top:1px solid #8785bd36;padding-top:12px}.choice-title{display:block;font-size:11px;font-weight:700;color:#bfc8df;line-height:1.45;margin-bottom:8px}.choice-row{display:flex;gap:7px;flex-wrap:wrap}.choice-row button{min-width:0;flex:1 1 75px;min-height:38px;padding:7px 9px;background:#111a34;color:#cfdaef;border:1px solid #596b9b;border-radius:7px;cursor:pointer}.choice-row button[aria-pressed=true]{background:linear-gradient(135deg,#7a3bd5,#3156a8);color:#fff;border-color:#ba9dff;box-shadow:inset 0 0 0 1px #ffffff26,0 0 18px #9255e752}.obs{margin-top:19px;border-color:#8b78c84a;padding-top:17px}.obs h3{font-size:17px;margin:8px 0}.obs p,.demo-panel p{color:#b9c4dd;font-size:12px;line-height:1.55}.obs-row input{background:#0b1124;border-color:#5d66a4;border-radius:7px;color:#e5eaff}.obs-row button{min-width:0;padding:7px 11px}.scenes{gap:7px}.scene-button{font-size:11px;background:#201b3c;border-color:#5a5192;padding:8px 11px}.messages{color:#c5cce3;max-height:220px}.message{grid-template-columns:minmax(62px,100px) 1fr 43px;background:#161c39;border:1px solid #4b54805b;border-radius:6px}.message strong{color:#94e5ff}.message small{color:#d8b0ff}.error{color:#ffb7d0;line-height:1.45}.stage{height:min(78vh,790px);min-height:565px;background:radial-gradient(circle at 50% 48%,#4b24727a 0,#12204a 30%,#0b122d 57%,#0b0b1e 82%);border:1px solid #8b71da70;border-radius:19px;box-shadow:0 25px 70px #0009,inset 0 0 90px #6f4ccc2b;top:26px;isolation:isolate}.stage:before{content:"";position:absolute;left:50%;top:50%;width:min(52%,380px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 50%,#0d1230 0 28%,#433aab66 29% 37%,#9d61f477 40% 42%,#20389a66 45% 49%,transparent 51%);border:2px solid #9d7df191;box-shadow:0 0 20px var(--violet),0 0 90px #6748e9a9,inset 0 0 60px #455deebb;pointer-events:none;z-index:0;animation:breathe 5s ease-in-out infinite}.stage:after{content:"";position:absolute;inset:15% 2%;background:repeating-linear-gradient(90deg,transparent 0 13px,#6f7ffd0e 14px 15px);-webkit-mask-image:linear-gradient(transparent,#000 40% 60%,transparent);mask-image:linear-gradient(transparent,#000 40% 60%,transparent);pointer-events:none;z-index:0}.scene-neon .stage{background:radial-gradient(circle at 50% 50%,#4a1769,#122c65 42%,#080b23 80%)}.scene-neon .stage:before{filter:hue-rotate(38deg) saturate(1.4)}.scene-noir .stage{background:radial-gradient(circle at 50% 50%,#343b61,#131629 48%,#070912 80%)}.scene-noir .stage:before{filter:saturate(.35)}.stage canvas{z-index:1}.stage-top,.stage-bottom{z-index:2;left:25px;right:25px}.stage-top{top:25px;display:grid;grid-template-columns:12px 1fr auto;align-items:center;color:#c5d0ff;font-size:10px}.stage-live-dot{width:9px;height:9px;border-radius:50%;background:#e7b368;box-shadow:0 0 13px #e7b368}.is-live .stage-live-dot{background:#78e7ff;box-shadow:0 0 16px #78e7ff}.stage-core{z-index:2;font-size:clamp(70px,8vw,135px);color:#dbbaff;text-shadow:0 0 28px #a364ff,0 0 75px #755aea}.stage-bottom{bottom:26px;padding:17px 4px 0;border-top:1px solid #8275b94d}.stage-bottom small{color:#aeb9d6;font-size:10px}.stage-bottom strong{font-size:19px;color:#f8f6ff}.overlay-unlock{position:absolute;z-index:5;left:50%;bottom:110px;transform:translate(-50%);min-width:210px;padding:12px 18px;border:1px solid var(--cyan);border-radius:8px;background:#182746;color:#fff;box-shadow:0 0 28px #67e7ff5e;cursor:pointer}footer{max-width:1800px;margin:auto;color:#9ca9c5}footer a{color:#b8c4ff}.overlay{background:transparent;overflow:hidden}.overlay .studio-nav{display:none}.overlay .layout{display:block;padding:0;height:100%;max-width:none}.overlay .stage{width:100%;height:100%;min-height:0;border:0;border-radius:0;top:0}.overlay .stage-core{font-size:11vw}.overlay .stage:before{width:min(32vw,45vh)}@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.055);opacity:.85}}@media(max-width:1180px){.layout{grid-template-columns:62px minmax(0,1fr) minmax(330px,.82fr);gap:15px}.studio-nav a{width:50px}.stage{min-height:520px}.top h1{font-size:clamp(36px,4vw,52px)}}@media(max-width:950px){.layout{grid-template-columns:62px minmax(0,1fr)}.studio-nav{grid-column:1;grid-row:1/3}.desk,.stage,.is-live .desk,.is-live .stage{grid-column:2}.stage,.is-live .stage{grid-row:1;position:relative;top:0;height:460px;min-height:460px}.desk,.is-live .desk{grid-row:2}.is-demo .desk{grid-row:1}.is-demo .stage{grid-row:2}.stage:before{width:280px}}@media(max-width:600px){.bar{height:64px;padding:0 14px}.brand{font-size:13px}.bar-right{gap:7px}.badge{font-size:9px;padding:6px 8px}.connection{max-width:90px;font-size:9px}.text-button{font-size:11px}.layout{display:flex;flex-direction:column;padding:12px 14px 20px;gap:12px}.studio-nav{position:static;order:0;flex-direction:row;width:100%;justify-content:space-around;padding:5px}.studio-nav .nav-mark{display:none}.studio-nav a{width:auto;min-width:45px;min-height:48px;font-size:20px}.desk,.stage{width:100%}.is-live .stage{order:1}.is-live .desk{order:2}.is-demo .desk{order:1}.is-demo .stage{order:2}.stage,.is-live .stage{height:340px;min-height:340px}.stage:before{width:220px}.stage-core{font-size:85px}.stage-top,.stage-bottom{left:14px;right:14px}.stage-top{top:14px;font-size:8px}.stage-bottom{bottom:15px}.stage-bottom strong{font-size:14px}.top h1{font-size:45px}.control,.demo-panel,.feed{padding:16px;margin:0 0 12px}.control-grid{grid-template-columns:1fr 1fr}.control-grid label{min-width:0}.obs-row input{flex-basis:100%}footer{padding:0 15px 20px}.overlay .layout{padding:0}.overlay .stage{height:100vh;min-height:0}}@media(prefers-reduced-motion:reduce){.stage:before{animation:none}.primary,.secondary,.small,.danger,.scene-button,.studio-nav a{transition:none}}.overlay-options{margin:12px 0 14px}.overlay-options .choice-row button{flex:1 1 110px}.is-live.overlay-transparent:not(.overlay) .stage{background-color:#171326;background-image:linear-gradient(45deg,#22223d 25%,transparent 25%),linear-gradient(-45deg,#22223d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#22223d 75%),linear-gradient(-45deg,transparent 75%,#22223d 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0}.overlay.overlay-transparent,.overlay.overlay-transparent .stage{background:transparent;box-shadow:none}.overlay.overlay-transparent .stage:after{display:none}html:has(.overlay.overlay-transparent),body:has(.overlay.overlay-transparent){background:transparent!important}
