.scene{min-width:0;position:relative;padding-top:8px;align-self:center}.scene-kicker{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.08em;color:var(--muted);padding-inline:20px}.scene-kicker>span:last-child{font-variant-numeric:tabular-nums}.scene-stage{height:390px;display:grid;place-items:center;perspective:1200px;position:relative;isolation:isolate}.scene-stage::before{content:'';position:absolute;inset:32px 0 10px;background-image:radial-gradient(#bbc6db 1px,transparent 1px);background-size:20px 20px;z-index:-1;mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}.scene-stack{--rotate-x:12deg;--rotate-y:-16deg;width:440px;height:294px;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y));transition:transform 180ms ease-out}.scene-plane{position:absolute;inset:0;border:1px solid #141c3326;border-radius:9px;box-shadow:0 20px 32px #141c3314;padding:24px;backface-visibility:hidden;transform:translate3d(0,0,-90px);transition:transform 500ms var(--ease);display:flex;flex-direction:column;overflow:hidden}.plane-top,.plane-footer{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:600;letter-spacing:.06em;gap:16px}.plane-top{margin-bottom:22px}.plane-top>span:last-child{font-size:18px;line-height:1}.plane-footer{margin-top:auto;padding-top:16px}.plane-footer>span{font-size:20px;line-height:1}.scene-plane h2{font-size:30px;line-height:1.14;margin-bottom:16px;letter-spacing:-.04em}.scene-plane p{font-size:13px;line-height:1.6;margin-bottom:12px}.idea-plane{background:#dcf5e9;color:#173d32;transform:translate3d(22px,-14px,-110px) rotateZ(8deg)}.idea-flow{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:11px}.idea-flow span{border:1px solid #77a491;border-radius:3px;padding:5px 10px}.idea-flow i{font-style:normal}.code-plane{background:#3155ff;color:white;transform:translate3d(-18px,-32px,-60px) rotateZ(-7deg)}.code-plane .plane-top{margin-bottom:16px}.code-plane h2{font-size:25px;margin-bottom:4px}.code-plane p{font-size:11px;color:#e1e7ff;margin-bottom:12px}.code-plane pre{font:12px/1.7 Consolas,monospace;margin:0;white-space:pre-wrap}.code-plane code span{color:#d6ffc6}.code-plane .plane-footer{font-size:8px;padding-top:10px}.interface-plane{background:white;transform:translate3d(0,0,24px)}.interface-plane .plane-top{color:var(--muted);margin-bottom:14px}.scene[data-active=idea] .code-plane{transform:translate3d(-18px,-32px,-110px) rotateZ(-7deg)}.scene[data-active=idea] .interface-plane{transform:translate3d(22px,20px,-60px) rotateZ(6deg)}.scene[data-active=idea] .idea-plane{transform:translate3d(0,0,24px)}.scene[data-active=code] .idea-plane{transform:translate3d(22px,-14px,-110px) rotateZ(8deg)}.scene[data-active=code] .interface-plane{transform:translate3d(-18px,24px,-60px) rotateZ(-6deg)}.scene[data-active=code] .code-plane{transform:translate3d(0,0,24px)}.scene-controls{padding-inline:20px}.scene-tabs{display:flex;justify-content:center;gap:8px}.scene-tabs button{border:1px solid transparent;background:transparent;color:var(--muted);font-size:12px;padding:9px 12px;min-height:44px;border-radius:5px}.scene-tabs button>span{font-size:9px;margin-right:6px}.scene-tabs button[aria-pressed=true]{color:var(--accent);border-color:#3155ff4d;background:#e8edff}.scene-tabs button:hover{background:var(--hover);color:var(--accent)}.scene-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);min-height:52px}.angle-label{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.angle-label input{width:100px;min-height:32px;padding:0;accent-color:var(--accent);border:0;background:transparent;cursor:ew-resize}.angle-label output{min-width:30px;font-variant-numeric:tabular-nums}.scene-tools>button{min-height:40px;padding:8px 10px;border:0;background:transparent;color:var(--muted);border-radius:4px;font-size:11px}.scene-tools>button[aria-pressed=true]{background:var(--hover);color:var(--accent)}.scene-tools>button:hover:not(:disabled){background:var(--hover)}.scene-tools>button:disabled{opacity:1;color:var(--muted);cursor:default}.scene-caption{font-size:11px;color:var(--muted);margin:10px 0 0;min-height:36px;line-height:1.6}.scene[data-flat=true] .scene-stack{transform:none}.scene[data-flat=true] .scene-plane[aria-hidden=true]{visibility:hidden}.scene[data-flat=true] .scene-plane[aria-hidden=false]{transform:none}.scene[data-flat=true] .scene-tools{justify-content:end}.scene[data-flat=true] .scene-stage::before{display:none}
@supports not (transform-style:preserve-3d){.scene-stack{transform:none}.scene-plane[aria-hidden=true]{visibility:hidden}.scene-plane[aria-hidden=false]{transform:none}.angle-label{display:none}}
@media(max-width:1100px) and (min-width:901px){.scene-stack{width:360px;height:290px}.scene-plane{padding:20px}.scene-stage{height:360px}.scene-controls{padding-inline:0}.scene-kicker{padding-inline:0}.scene-tabs button{padding-inline:8px}}
@media(max-width:900px){.scene{width:min(100%,600px);justify-self:center}.scene-stage{height:390px}.scene-stack{width:440px}.scene-caption{min-height:18px}}
@media(max-width:520px){.scene{padding-top:0}.scene-kicker{padding-inline:0;font-size:8px}.scene-stage{height:324px;perspective:950px}.scene-stack{width:min(270px,calc(100% - 48px));height:260px}.scene-plane{padding:17px}.scene-plane h2{font-size:26px;margin-bottom:10px}.scene-plane p{font-size:11px}.plane-top{font-size:7px;margin-bottom:16px}.plane-footer{font-size:7px;padding-top:12px}.idea-flow{font-size:9px;gap:6px}.idea-flow span{padding:4px 7px}.code-plane h2{font-size:22px}.code-plane p{font-size:9px}.code-plane pre{font-size:9px;line-height:1.65}.code-plane .plane-top{margin-bottom:12px}.scene-controls{padding-inline:0}.scene-tabs{gap:4px}.scene-tabs button{font-size:11px;padding-inline:10px}.scene-tools{margin-top:10px}.scene-caption{font-size:10px;min-height:32px}.angle-label input{width:90px}.scene[data-active=idea] .interface-plane{transform:translate3d(12px,14px,-60px) rotateZ(5deg)}}
@media(prefers-reduced-motion:reduce){.scene-stack{transform:none}.scene-plane[aria-hidden=true]{visibility:hidden}.scene-plane[aria-hidden=false]{transform:none}.scene-stage::before{display:none}}

@media(max-width:360px){.code-plane h2{font-size:20px}.code-plane pre{font-size:8.5px}}

.hero-project-preview{border:1px solid #133047;border-radius:5px;overflow:hidden;background:#001c2c;flex:1;min-height:0}.hero-project-preview img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.interface-plane .plane-footer{padding-top:14px;font-size:8px}@media(max-width:520px){.interface-plane .plane-footer{font-size:6px;padding-top:12px}.hero-project-preview img{object-fit:cover}}
