.dev-hero{min-height:820px;padding-top:60px;padding-bottom:100px}.dev-hero .hero-content{width:52%;max-width:680px}.dev-hero h1{font-size:clamp(50px,5.3vw,80px);letter-spacing:-3px;line-height:1.03}.dev-hero .hero-logo{width:250px;margin:15px 0 20px}.dev-hero .hero-note{font-size:8px;letter-spacing:2px}.hero-workbench{position:absolute;width:40%;max-width:545px;right:6%;top:70px;transform:rotate(2deg);border:1px solid #d9c49733;border-radius:10px;background:#101622;box-shadow:0 30px 100px #0008,0 0 90px #c69c3d12;overflow:hidden}.art{background-image:url('assets/forest-guardian-showcase.png');background-size:300% 100%;background-repeat:no-repeat;background-color:#10202a}.art-paint{background-position:0% 50%}.art-pixel{background-position:50% 50%;image-rendering:pixelated}.art-model{background-position:100% 50%}.hero-stage{height:480px;position:relative}.hero-stage>.art{position:absolute;inset:0}.hero-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#080e1d77,transparent 40%)}.stage-label{position:absolute;top:16px;left:18px;font-size:7px;letter-spacing:2px;color:#c2d3d6;text-shadow:0 2px 7px #000}.stage-chip{position:absolute;bottom:18px;right:18px;color:#b3ffe9;background:#08252bce;padding:10px 13px;border:1px solid #a7ffe433;border-radius:4px;font-size:9px;z-index:1}.rig-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}.live-dot{color:#76dbbf}.mini-timeline{display:flex;align-items:center;gap:18px;padding:18px;font-size:9px;color:#adb7c9;border-top:1px solid #ffffff15}.mini-timeline>div{flex:1;height:20px;background:repeating-linear-gradient(90deg,transparent 0 24px,#ffffff17 24px 25px);display:flex;align-items:center;justify-content:space-around;position:relative}.mini-timeline>div:after{content:'';position:absolute;left:36%;height:30px;top:-6px;border-left:1px solid #f2c368}.mini-timeline i{width:6px;height:6px;background:#f2c368;transform:rotate(45deg)}.mock-caption{font-size:8px;text-align:center;color:#929eb0;margin:0;padding:0 10px 12px}.ribbon{font-size:11px;letter-spacing:1px;gap:4%}.ribbon>span{font-size:8px;color:#919bb0;letter-spacing:1.5px}.ribbon a:hover{color:var(--gold)}.animation-layout{display:grid;grid-template-columns:42% 1fr;gap:65px;align-items:stretch}.animation-art{position:relative;min-height:600px;border:1px solid #ffffff20;overflow:hidden;border-radius:6px}.animation-art>.art{position:absolute;inset:0}.art-overlay-caption{position:absolute;inset:auto 0 0;padding:100px 25px 25px;background:linear-gradient(transparent,#070e18f5);display:flex;flex-direction:column;gap:10px}.art-overlay-caption span{font-size:8px;letter-spacing:2px;color:var(--gold)}.art-overlay-caption strong{font-family:Outfit,sans-serif;font-size:29px;font-weight:500}.art-overlay-caption small{font-size:9px;color:#a0aabd}.animation-tools article{display:flex;gap:22px;border-top:1px solid var(--line);padding:26px 0 15px}.animation-tools article>span{font-size:10px;color:var(--gold);padding-top:6px}.animation-tools h3{font-size:24px}.animation-tools p{font-size:13px;color:var(--muted);line-height:1.85}.studio{padding-top:10px}.workspace-tabs{gap:32px}.workspace-tabs button span{font-size:14px}.workspace-panel{grid-template-columns:34% 66%}.native-badge{display:inline-block;padding:9px 12px;border:1px solid #d8bb6533;color:var(--gold);font:10px monospace;border-radius:3px;letter-spacing:1px}.demo-editor{height:365px;position:relative;display:grid;grid-template-columns:35px 1fr 105px;grid-template-rows:1fr 35px;background:#0a111b;border:1px solid #ffffff16;overflow:hidden}.demo-toolbar{display:flex;flex-direction:column;gap:21px;align-items:center;padding-top:20px;color:#9faabd;font-size:13px;background:#101927}.demo-canvas{width:100%;height:100%;position:relative}.demo-inspector{background:#121b29;padding:17px 9px;font-size:8px;line-height:2.5;color:#a5b2c2}.demo-inspector b{font-size:6px;letter-spacing:1px;color:#ddc789;font-weight:500;display:block;margin-bottom:10px}.demo-inspector span{display:block}.demo-inspector hr{border:0;border-top:1px solid var(--line);margin:16px 0}.demo-bottom{grid-column:1/-1;background:#172030;display:flex;align-items:center;gap:14px;padding:8px 12px;font-size:7px;color:#b3c1d0;white-space:nowrap}.keyframe-track{flex:1;color:var(--gold);overflow:hidden;letter-spacing:3px}.demo-editor[data-mode=animation] .demo-canvas:after{content:'';position:absolute;inset:25% 20% 15%;background:linear-gradient(83deg,transparent 49%,#8dffe0aa 49% 50%,transparent 50%),linear-gradient(15deg,transparent 48%,#8dffe088 49% 50%,transparent 51%);border:1px solid #84ecd644;border-radius:40%}.demo-editor[data-mode=pixel] .demo-canvas:after{content:'';position:absolute;inset:0;background-image:linear-gradient(#a9e4ff0b 1px,transparent 1px),linear-gradient(90deg,#a9e4ff0b 1px,transparent 1px);background-size:12px 12px}.demo-editor[data-mode=model] .demo-canvas:after{content:'◯';position:absolute;top:40%;left:50%;color:#ffddb1;font-size:55px;font-weight:400}.paint-feature{display:grid;grid-template-columns:1fr 44%;gap:70px;align-items:center;padding-top:35px}.paint-copy>p:not(.eyebrow):not(.intro){color:var(--muted);font-size:13px;line-height:1.9}.paint-copy .intro{margin-bottom:20px;color:#d9dfeb}.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.pill-list span{font-size:9px;border:1px solid #7fb6c533;background:#17222b;padding:10px;border-radius:4px;color:#b3d3da}.paint-copy .paint-note{font-size:10px!important;color:#8894a9!important;margin-top:25px;max-width:440px}.paint-showcase{height:500px;position:relative;margin:0;border:1px solid #94b8d522;border-radius:8px;overflow:hidden;background:#0d1420}.paint-showcase .art{position:absolute;inset:0 0 25px}.paint-showcase figcaption{position:absolute;bottom:0;left:0;right:0;text-align:center;padding:9px;font-size:8px;color:#9aa7ba;background:#0b121c}.paint-swatches{position:absolute;bottom:45px;left:20px;display:flex;gap:8px}.paint-swatches i{width:24px;height:24px;border-radius:50%;border:2px solid #b7c5d377;background:#bf632b}.paint-swatches i:nth-child(2){background:#df9b42}.paint-swatches i:nth-child(3){background:#1c898f}.paint-swatches i:nth-child(4){background:#b3ddd3}.paint-swatches i:nth-child(5){background:#192c40}.effects-section{display:grid;grid-template-columns:1fr 42%;gap:75px;align-items:center;background:#0d131f;border-block:1px solid var(--line)}.effects-copy{color:var(--muted);font-size:13px;line-height:1.9;max-width:470px}.effect-controls{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0 15px}.effect-controls button{border:1px solid #ffffff24;background:#131d2b;color:#c3cbd9;border-radius:4px;cursor:pointer;padding:11px 14px;font-size:11px}.effect-controls button.active{color:#0c111a;background:var(--gold);border-color:var(--gold)}.small-print{font-size:9px;color:#8592a8;line-height:1.8;max-width:400px}.fx-preview{position:relative;height:430px;overflow:hidden;border:1px solid #ffffff20;border-radius:8px;background:#08101b}.fx-preview>.art{position:absolute;inset:0;transition:filter .4s}.fx-preview[data-effect=glow]>.art{filter:brightness(1.2) saturate(1.4);box-shadow:inset 0 0 80px #3affc955}.fx-preview[data-effect=hue]>.art{filter:hue-rotate(125deg)}.fx-label{position:absolute;bottom:17px;left:20px;font-size:8px;letter-spacing:2px;background:#08111ee6;padding:10px;border:1px solid #ffffff15;color:#c6d3e3}.fx-label b{color:var(--gold);font-weight:500}.fx-particles{position:absolute;inset:0;opacity:0;pointer-events:none}.fx-preview[data-effect=sparks] .fx-particles{opacity:1}.fx-particles i{position:absolute;width:4px;height:4px;background:#ffe5a1;border-radius:50%;box-shadow:0 0 15px 4px #ffcc6b66;animation:twinkle 2.8s infinite alternate}.possibilities{padding-top:90px}.feature-symbol{height:120px;display:flex;align-items:center;font-size:105px;color:#b3cbd9;font-weight:400;text-shadow:0 0 40px #62d6c633}.feature .sound-art{height:120px;margin:0 0 5px;justify-content:start}.feature h3{font-size:24px}.save-section{background:linear-gradient(130deg,#111a27,#0a101a);border-block:1px solid var(--line)}.format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.format-grid>div{border-top:1px solid #ffffff22;padding-top:22px;display:flex;flex-direction:column;gap:12px}.format-grid code{font-size:19px;color:var(--gold)}.format-grid span{font-size:11px;color:var(--muted);line-height:1.6}.engine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.engine-grid article{padding:30px 25px;background:#111925;border:1px solid #ffffff15;border-radius:6px;align-self:start}.engine-number{font-size:9px;letter-spacing:2px;color:var(--gold)}.engine-grid h3{font-size:24px;margin:22px 0 18px}.engine-grid p{font-size:12px;line-height:1.85;color:var(--muted)}details{border-top:1px solid var(--line);margin-top:25px;padding-top:16px}summary{cursor:pointer;font-size:11px;list-style:none;display:flex;justify-content:space-between;color:var(--gold)}summary::-webkit-details-marker{display:none}summary span{font-size:17px}details[open] summary{margin-bottom:16px}details[open] summary span{transform:rotate(45deg)}.export-note{padding:22px 25px;border-left:2px solid var(--gold);background:#111821;margin-top:30px}.export-note strong{font-size:12px;font-weight:600}.export-note p{margin:10px 0 0;font-size:11px;color:var(--muted);line-height:1.9}.closing{border-top:1px solid var(--line)}@keyframes twinkle{0%{opacity:.2;transform:translateY(10px) scale(.7)}100%{opacity:1;transform:translateY(-15px) scale(1.3)}}@media(max-width:1050px){.dev-hero h1{font-size:58px}.dev-hero .hero-content{width:54%}.hero-workbench{right:4%;width:38%;top:110px}.hero-stage{height:420px}.dev-hero .actions{gap:15px}.dev-hero .text-link{font-size:10px}.animation-layout{gap:35px}.animation-art{min-height:610px}.workspace-panel{grid-template-columns:37% 63%}.demo-inspector{width:83px;font-size:7px}.demo-editor{grid-template-columns:28px 1fr 83px}.paint-feature,.effects-section{gap:35px}.ribbon{gap:3%;font-size:10px}.engine-grid{gap:15px}.engine-grid article{padding:25px 18px}.engine-grid h3{font-size:21px}}@media(max-width:700px){.dev-hero{min-height:0;padding-top:35px;padding-bottom:70px;display:flex;flex-direction:column;gap:35px}.dev-hero .hero-content{width:100%}.dev-hero h1{font-size:56px;letter-spacing:-2.8px}.dev-hero .eyebrow{font-size:8px}.dev-hero .hero-logo{width:220px}.dev-hero .intro{font-size:13px}.hero-workbench{position:relative;top:auto;right:auto;width:100%;max-width:400px;align-self:center;transform:rotate(1deg)}.hero-stage{height:430px}.dev-hero .hero-note{font-size:7px;margin-bottom:0;line-height:1.8}.dev-hero .actions{gap:22px}.dev-hero .text-link{font-size:11px}.hero .scroll-hint{font-size:7px}.ribbon{flex-wrap:wrap;gap:14px 18px;font-size:10px;padding:22px 5%}.ribbon>span{width:100%;text-align:center;font-size:8px}.ribbon>i:first-of-type{display:none}.ribbon i{font-size:7px}.animation-layout{grid-template-columns:1fr;gap:25px}.animation-art{min-height:440px;max-width:430px;width:100%;justify-self:center}.animation-tools article{padding:22px 0 12px;gap:18px}.animation-tools h3{font-size:22px}.animation-tools p{font-size:12px}.studio{padding-top:0}.workspace-tabs{gap:0}.workspace-tabs button{flex-direction:column;gap:6px;align-items:start;padding-right:8px}.workspace-tabs button span{font-size:11px;white-space:nowrap}.workspace-panel{display:flex}.demo-editor{height:350px;grid-template-columns:26px 1fr 78px}.demo-inspector{width:auto;font-size:6px}.demo-bottom{font-size:6px;gap:8px}.workspace-visual>p{font-size:8px;line-height:1.7}.paint-feature,.effects-section{display:grid;grid-template-columns:1fr;gap:30px}.paint-feature{padding-top:0}.paint-showcase{height:470px;max-width:430px;width:100%;justify-self:center}.paint-copy .intro{font-size:16px}.paint-copy>p:not(.eyebrow):not(.intro){font-size:12px}.fx-preview{height:430px;max-width:430px;width:100%;justify-self:center}.feature-grid{gap:10px}.feature-symbol{height:90px;font-size:80px}.feature .sound-art{height:90px}.format-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}.format-grid code{font-size:18px}.format-grid span{font-size:10px}.save-section .section-heading>p{line-height:1.8}.engine-grid{grid-template-columns:1fr;gap:18px}.engine-grid article{padding:27px 23px}.engine-grid h3{font-size:26px}.export-note{padding:20px}.closing .eyebrow{font-size:8px;letter-spacing:2px}.closing h2{font-size:48px}.closing>p:not(.eyebrow){font-size:13px}footer{font-size:9px}}@media(prefers-reduced-motion:reduce){.fx-particles i{animation:none}.fx-preview>.art{transition:none}}
