.photon-landing{--landing-gold:#ffcc62;--landing-ink:#090c12;--landing-muted:#a9adba;position:fixed;inset:0;z-index:9000;overflow:auto;scroll-behavior:smooth;background:#080a0f;color:#f6f3ee;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.photon-landing *{box-sizing:border-box}
.photon-landing a{color:inherit;text-decoration:none}
.photon-landing button{font:inherit;cursor:pointer}
.photon-landing button:focus-visible,.photon-landing a:focus-visible{outline:2px solid #ffcc62;outline-offset:4px}
.photon-landing main{padding:0}
.landing-nav{position:relative;z-index:2;width:100%;height:78px;padding:0 clamp(22px,5vw,88px);display:flex;align-items:center;gap:30px;border-bottom:1px solid #ffffff1a;background:#090b10b3;backdrop-filter:blur(16px)}
.landing-brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:19px;font-weight:750;letter-spacing:-.5px}
.landing-brand img{width:36px;height:36px;object-fit:contain}
.landing-brand small{font-size:10px;letter-spacing:.08em;font-weight:500;color:#a6a7aa;border-left:1px solid #ffffff35;padding-left:10px;margin-left:2px}
.landing-nav nav{display:flex;gap:28px;margin:0 auto 0 6vw;padding:0;border:0;font-size:13px;font-weight:600;color:#b9bcc7}
.landing-nav nav a:hover,.landing-footer a:hover{color:#ffcc62}
.landing-nav-cta{margin-left:auto;padding:11px 17px!important;border-radius:999px!important;border:1px solid #e7b951!important;background:#ecc15b!important;color:#17130c!important;font-size:12px!important;font-weight:750!important;white-space:nowrap}
.landing-sign-in{margin-left:auto;padding:9px 3px!important;background:none!important;border:0!important;color:#bfc2cc!important;font-size:12px!important;font-weight:650!important;white-space:nowrap}
.landing-sign-in:hover{color:#ffcc62!important;background:none!important}
.landing-sign-in+.landing-nav-cta{margin-left:0}
.landing-nav-cta span[aria-hidden]{margin-left:10px;font-size:16px}
.landing-nav-short{display:none}
.landing-nav-cta:hover,.landing-button-primary:hover{background:#ffe08b!important;transform:translateY(-2px)}
html[data-theme=light] .photon-landing .landing-nav{background:#090b10!important;color:#f6f3ee!important;border-color:#ffffff1a!important}
html[data-theme=light] .photon-landing .landing-nav nav{background:none!important;color:#b9bcc7!important;border-color:transparent!important}
html[data-theme=light] .photon-landing .landing-brand{color:#f6f3ee}
.landing-hero{position:relative;overflow:hidden;isolation:isolate;min-height:850px;padding:65px 20px 85px;text-align:center;background:radial-gradient(ellipse 50% 31% at 50% 55%,#172139 0%,#090c14 72%,transparent 100%),radial-gradient(ellipse 52% 35% at 50% 108%,#4d2b19 0%,transparent 80%),#080a0f}
.landing-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 0 49.9%,#ffffff09 50%,transparent 50.1%),linear-gradient(0deg,transparent 0 49.9%,#ffffff06 50%,transparent 50.1%);background-size:96px 96px;mask-image:linear-gradient(transparent 3%,#000 60%,transparent 100%);pointer-events:none}
.landing-hero:after{content:"";position:absolute;z-index:-1;left:50%;bottom:120px;width:min(950px,85vw);height:250px;transform:translateX(-50%);border-radius:50%;background:#ffad5730;filter:blur(100px);pointer-events:none}
.landing-hero-copy{position:relative;z-index:2;max-width:1080px;margin:0 auto}
.landing-kicker,.landing-label{color:#f6c76a!important;font:650 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.18em}
.landing-kicker{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 22px!important}
.landing-kicker span{width:7px;height:7px;border-radius:50%;background:#ffca61;box-shadow:0 0 12px #ffca61}
.landing-hero h1{font-size:clamp(52px,7.5vw,112px)!important;line-height:.99!important;font-weight:760;letter-spacing:-.065em!important;word-spacing:.12em;margin:0!important;color:#fff7e9;text-wrap:balance;text-shadow:0 0 50px #ffd17c1b}
.landing-hero h1 em{font-style:normal;color:#ffc962}
.landing-hero-subtitle{font-size:clamp(20px,2.8vw,34px)!important;line-height:1.23!important;letter-spacing:-.035em;color:#f0dcba!important;font-weight:400;margin:20px 0 14px!important}
.landing-hero-detail{max-width:630px;margin:0 auto!important;color:#b2b6c4!important;font-size:15px!important;line-height:1.7!important}
.landing-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0 13px}
.landing-button{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:52px;padding:0 23px!important;border-radius:9px!important;font-size:13px!important;font-weight:720!important;transition:background .2s,transform .2s,border-color .2s}
.landing-button span{font-size:18px;font-weight:400}
.landing-button-primary{background:#f1c75e!important;border:1px solid #f1c75e!important;color:#19150e!important;box-shadow:0 10px 34px #ffd36a26}
.landing-button-secondary{border:1px solid #ffffff45;background:#ffffff0a;color:#f3f2ee}
.landing-button-secondary:hover{background:#ffffff1c;border-color:#ffffff8c;transform:translateY(-2px)}
.landing-free-note{font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace!important;color:#9299a9!important;margin:0!important}
.landing-free-note a{color:#e5d4bb;text-decoration:underline;text-underline-offset:3px}.landing-free-note a:hover{color:#fff}html[data-theme=light] .landing-free-note a{color:#273e57!important}html[data-theme=light] .landing-free-note a:hover{color:#000!important}
.landing-ambient{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.landing-ambient .bubble{position:absolute;display:block;aspect-ratio:1;border-radius:50%;border:1px solid #ffffff70;box-shadow:inset -14px -20px 28px #09132d8c,inset 8px 9px 18px #ffffff4d,0 16px 55px #0006,0 0 30px #97b8ff40;background:radial-gradient(circle at 28% 25%,#ffffffb3 0 2%,#ffffff18 7%,transparent 20%),radial-gradient(circle at 68% 71%,#ffe881a8,transparent 35%),radial-gradient(circle at 25% 77%,#65cfffaf,transparent 40%),radial-gradient(circle at 68% 23%,#f180c1a6,transparent 48%),#8d88ec44;backdrop-filter:blur(4px);animation:landing-float 8s ease-in-out infinite alternate}
.bubble-one{width:190px;top:150px;left:3%;animation-delay:-1.2s!important}.bubble-two{width:85px;top:145px;right:16%;animation-delay:-4s!important}.bubble-three{width:135px;top:365px;right:2%;animation-delay:-2.8s!important}.bubble-four{width:58px;top:440px;left:15%;animation-delay:-6s!important}.bubble-five{width:44px;top:55px;left:28%;animation-delay:-3s!important}.bubble-six{width:34px;top:570px;right:21%;animation-delay:-5s!important}
.landing-orbit{position:absolute;width:1150px;height:520px;left:50%;top:245px;transform:translateX(-50%) rotate(-8deg);border:1px solid #ffcf7630;border-radius:50%;box-shadow:0 0 25px #ff9d1422,inset 0 0 25px #ff9d1418}
@keyframes landing-float{from{transform:translate3d(0,14px,0) rotate(-7deg)}to{transform:translate3d(20px,-20px,0) rotate(9deg)}}
.landing-device-wrap{position:relative;z-index:1;width:min(1000px,92vw);margin:40px auto 0}
.landing-laptop{position:relative;width:100%;filter:drop-shadow(0 35px 35px #0009)}
.landing-laptop-lid{position:relative;width:88%;margin:auto;padding:13px 12px 12px;border:1px solid #848b94;border-bottom:0;border-radius:18px 18px 3px 3px;background:linear-gradient(125deg,#545b65,#1d232b 12%,#11151b 85%,#72777e);box-shadow:inset 0 0 0 2px #ffffff18,0 0 60px #94b5ff16}
.landing-laptop-camera{width:4px;height:4px;border-radius:50%;background:#414c5d;box-shadow:0 0 0 2px #181c22;margin:-6px auto 8px}
.landing-laptop-screen{aspect-ratio:16/9;overflow:hidden;background:#f8f9fa;color:#272a30;text-align:left;border-radius:4px;font-size:clamp(5px,.7vw,10px);box-shadow:inset 0 0 0 1px #0004}
.landing-laptop-base{height:19px;width:100%;border-radius:4px 4px 48% 48% / 4px 4px 95% 95%;border:1px solid #8c9095;background:linear-gradient(#a9aeb2,#5c6269 28%,#22262b 75%,#4f5459);box-shadow:0 7px 15px #0008;position:relative}
.landing-laptop-base i{display:block;width:14%;height:5px;margin:auto;border-radius:0 0 10px 10px;background:#4e545a;box-shadow:inset 0 1px 2px #0008}
.landing-device-caption{margin-top:25px!important;color:#9da4b0!important;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.05em}
.preview-topbar{height:8%;display:flex;align-items:center;gap:1.2%;padding:0 1.4%;background:#eff0f2;border-bottom:1px solid #d8dade;white-space:nowrap}.preview-mark{color:#d7ab37;font-size:1.8em;font-weight:900}.preview-topbar strong{font-size:1.15em}.preview-topbar small{color:#7a7f88;font-size:.85em}.preview-topbar-right{margin-left:auto;color:#6e7480}
.preview-nav{height:9%;display:flex;align-items:stretch;background:#e9eaec;overflow:hidden}.preview-nav span{display:flex;align-items:center;padding:0 1.7%;border-right:1px solid #d8dade;white-space:nowrap;color:#60646c}.preview-nav .selected{background:#ffefbd;color:#76520b;border-top:2px solid #d6a91d}
.preview-workspace{display:flex;height:83%}.preview-sidebar{width:21%;padding:2.1% 0;background:#eff0f2;border-right:1px solid #d8dade;display:flex;flex-direction:column;gap:2%}.preview-sidebar b,.preview-sidebar small{font-size:.85em;color:#777d86;padding:0 7%;letter-spacing:.05em}.preview-sidebar small{margin-top:8%}.preview-sidebar span{padding:2% 7%;color:#535963}.preview-sidebar .preview-file{background:#ffedb8;color:#7b5a10;border-left:2px solid #d7a927}
.preview-stage{flex:1;min-width:0;display:flex;flex-direction:column}.preview-stagebar{height:13%;display:flex;align-items:center;justify-content:space-between;padding:0 2%;background:#fbfbfb;border-bottom:1px solid #ddd}.preview-stagebar b{padding:1% 1.5%;background:#efc44c;border-radius:2px}.preview-canvas{position:relative;flex:1;background-color:#fff;background-image:radial-gradient(#d5dae0 .5px,transparent .6px);background-size:14px 14px;overflow:hidden}.preview-canvas svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}.preview-canvas svg path{fill:none;stroke:#5dbac9;stroke-width:3}.preview-node{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:12%;height:15%;border:1px solid #b6a1eb;border-radius:8px;background:#f7f2ff;color:#6c598b;font-size:2.1em;box-shadow:0 3px 10px #50447d1c}.preview-node small{font:600 .34em ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.preview-node.n1{left:4%;top:25%}.preview-node.n2{left:4%;top:64%}.preview-node.n3{left:31%;top:43%}.preview-node.n4{left:58%;top:26%}.preview-node.n5{left:83%;top:26%}.preview-node.n6{left:83%;top:65%}.preview-console{height:10%;display:flex;align-items:center;gap:1%;padding:0 2%;background:#f0f1f3;border-top:1px solid #ddd;color:#58616c}.preview-console span:last-child{margin-left:auto}.preview-ok{color:#26a578}
.landing-ticker{display:flex;justify-content:center;align-items:center;gap:clamp(15px,3vw,50px);padding:21px 24px;border-top:1px solid #ffffff1a;border-bottom:1px solid #ffffff1a;background:#0e1118;color:#a8acb6;font:650 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;white-space:nowrap;overflow:auto}.landing-ticker i{width:4px;height:4px;flex:none;background:#f2c466;border-radius:50%}
.landing-section{padding:120px clamp(24px,6vw,96px);scroll-margin-top:50px}.landing-section-intro{max-width:700px;margin-bottom:55px}.landing-label{margin:0 0 16px!important}.landing-section h2{font-size:clamp(36px,4.8vw,66px)!important;line-height:1.04!important;letter-spacing:-.06em!important;word-spacing:.14em;font-weight:700;margin:0 0 20px!important;color:#f7f4ef}.landing-section-intro>p:last-child,.landing-plans-heading p:last-child{max-width:620px;color:#b1b3bd;font-size:16px;line-height:1.7}
.landing-workflow{background:linear-gradient(155deg,#101622,#0b0e15 55%,#141116)}.landing-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid #ffffff26;background:#ffffff23}.landing-steps article{min-height:315px;padding:27px;background:#11151e}.landing-steps article>span{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#e4b55d}.landing-step-symbol{display:grid;place-items:center;width:70px;height:70px;margin:25px 0 30px;border:1px solid #ffdb9a51;border-radius:18px;background:radial-gradient(circle at 30% 20%,#ffcf7652,#3f355947 70%,#232339);box-shadow:0 0 35px #e3a65a19;color:#ffe1a4;font:32px ui-monospace,SFMono-Regular,Menlo,monospace}.landing-steps h3,.landing-feature-grid h3{font-size:20px;letter-spacing:-.035em;margin:0 0 11px;color:#fff}.landing-steps p,.landing-feature-grid p{font-size:13px;line-height:1.65;color:#adb2c0;margin:0}
.landing-features{background:radial-gradient(circle at 80% 35%,#20233f 0,transparent 40%),#0b0d14}.landing-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.landing-feature-grid article{padding:35px;min-height:230px;border:1px solid #ffffff1f;border-radius:14px;background:linear-gradient(150deg,#ffffff0d,#ffffff04)}.landing-feature-grid article:hover{border-color:#ffd68766;background:linear-gradient(150deg,#ffd68716,#ffffff06)}.landing-feature-grid b{display:block;color:#d3ad66;font:650 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;margin-bottom:36px}
.landing-plans{background:#111018}.landing-plans-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:48px}.landing-plans-heading p:last-child{margin-bottom:0}.landing-plan-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #ffffff2a;border-radius:14px;overflow:hidden}.landing-plan-strip>div{padding:29px;display:flex;flex-direction:column;gap:14px;border-right:1px solid #ffffff2a;background:#191820}.landing-plan-strip>div:last-child{border-right:0}.landing-plan-strip strong{font-size:13px;color:#ead0a0}.landing-plan-strip span{font-size:30px;font-weight:700;letter-spacing:-.06em;color:#fff}.landing-plan-strip small{font-size:12px;color:#a7aab4;line-height:1.5}.landing-text-button{display:inline-flex;gap:12px;margin-top:23px;padding:0!important;background:transparent!important;border:0!important;color:#ffcc62!important;font-size:13px!important;font-weight:650!important}.landing-text-button:hover{text-decoration:underline}
.landing-status{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-top:95px;padding-bottom:100px;border-top:1px solid #ffffff16;background:radial-gradient(circle at 10% 70%,#432c263b,transparent 44%),#0b0d13}.landing-status h2{max-width:650px}.landing-status>p{font-size:15px;color:#b7bac4;line-height:1.8;max-width:580px}
.landing-footer{display:flex;align-items:center;gap:30px;min-height:115px;padding:25px clamp(24px,6vw,96px);border-top:1px solid #ffffff23;background:#080a0f;color:#acafba}.landing-footer>div{display:flex;align-items:center;gap:8px;color:#fff;white-space:nowrap}.landing-footer img{width:28px;height:28px}.landing-footer strong{font-size:15px}.landing-footer>div span{font-size:10px;color:#8e919c}.landing-footer p{margin:0 auto!important;font-size:12px;color:#989daa}.landing-footer a{font-size:12px;white-space:nowrap}
@media(max-width:1000px){.landing-nav nav{margin-left:auto}.landing-steps{grid-template-columns:repeat(2,1fr)}.landing-steps article{min-height:260px}.landing-hero{min-height:auto;padding-bottom:85px}.bubble-one{left:-75px}.bubble-three{right:-45px}}
@media(max-width:690px){.landing-nav{height:68px;padding:0 20px}.landing-nav nav{display:none}.landing-brand{font-size:16px}.landing-brand img{width:30px;height:30px}.landing-brand small{font-size:9px}.landing-nav-cta{padding:9px 11px!important;font-size:11px!important}.landing-nav-cta span{display:none}.landing-hero{padding:70px 18px 70px}.landing-hero h1{font-size:clamp(48px,13vw,70px)!important;letter-spacing:-.065em!important}.landing-hero-subtitle{font-size:20px!important}.landing-hero-detail{font-size:13px!important}.landing-device-wrap{margin-top:50px;width:100%}.landing-laptop-lid{padding:8px 6px 6px;border-radius:10px 10px 2px 2px}.landing-laptop-camera{margin:-4px auto 4px}.landing-laptop-base{height:12px}.landing-device-caption{font-size:9px!important}.landing-section{padding:75px 22px}.landing-section-intro{margin-bottom:35px}.landing-section h2{font-size:38px!important}.landing-feature-grid,.landing-plan-strip,.landing-status{grid-template-columns:1fr}.landing-steps article{padding:24px}.landing-feature-grid article{min-height:200px;padding:26px}.landing-plans-heading{align-items:start;flex-direction:column}.landing-plan-strip>div{border-right:0;border-bottom:1px solid #ffffff2a}.landing-plan-strip>div:last-child{border-bottom:0}.landing-status{gap:0}.landing-footer{flex-wrap:wrap;gap:12px}.landing-footer p{order:3;flex:0 0 100%}.landing-footer a{margin-left:auto}.bubble-two,.bubble-five,.bubble-six{display:none}.landing-orbit{width:750px;top:330px}}
@media(max-width:430px){.landing-hero h1{font-size:47px!important}.landing-kicker{font-size:9px!important}.landing-steps{grid-template-columns:1fr}.landing-steps article{min-height:230px}.landing-ticker{justify-content:start}.landing-hero-actions{align-items:stretch;flex-direction:column}.landing-button{width:100%}.landing-device-wrap{width:110%;margin-left:-5%}.landing-device-caption{padding:0 16px}}
@media(max-width:520px){.landing-nav{gap:10px;padding:0 15px}.landing-brand{gap:6px}.landing-brand small{display:none}.landing-sign-in{font-size:11px!important}.landing-nav-cta .landing-nav-full{display:none}.landing-nav-cta .landing-nav-short,.landing-nav-cta span[aria-hidden]{display:inline}.landing-nav-cta{padding:8px 10px!important}.landing-nav-cta span[aria-hidden]{margin-left:3px;font-size:13px}.landing-hero h1{font-size:clamp(42px,11.5vw,54px)!important;line-height:1.04!important;letter-spacing:-.05em!important}.bubble-one{width:100px;top:365px;left:-35px;opacity:.35}.bubble-three{width:88px;top:470px;right:-32px;opacity:.35}.bubble-four{display:none}.bubble-five{display:block;width:40px;top:96px;left:72%;opacity:.5}}
@media(prefers-reduced-motion:reduce){.photon-landing{scroll-behavior:auto}.landing-ambient .bubble{animation:none}.landing-button,.landing-nav-cta{transition:none}}
.preview-mark img{display:block;width:1.7em;height:1.7em;object-fit:contain}
.landing-workflow .landing-section-intro{max-width:820px}
.landing-showcase-list{display:grid;gap:24px;max-width:1440px;margin:0 auto}
.landing-showcase{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);align-items:center;gap:clamp(30px,5vw,82px);min-height:440px;padding:clamp(24px,3.5vw,54px);border:1px solid #ffffff25;border-radius:24px;background:linear-gradient(140deg,#171b26,#11141d);box-shadow:0 20px 55px #0002}
.landing-showcase:nth-child(even){grid-template-columns:minmax(0,1.28fr) minmax(260px,.72fr)}
.landing-showcase:nth-child(even) .landing-showcase-visual{grid-column:1;grid-row:1}
.landing-showcase:nth-child(even) .landing-showcase-copy{grid-column:2;grid-row:1}
.landing-showcase-copy{max-width:430px}
.landing-showcase-number{display:block;margin-bottom:22px;color:#f6c76a;font:700 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}
.landing-showcase-copy h3{margin:0 0 18px;color:#fff;font-size:clamp(31px,3.3vw,48px);line-height:1.07;letter-spacing:-.055em}
.landing-showcase-copy p{margin:0;color:#b6bbc8;font-size:15px;line-height:1.75}
.landing-showcase-copy a{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding-bottom:5px;border-bottom:1px solid currentColor;color:#f5d286;font-size:13px;font-weight:700}
.landing-showcase-copy a:hover{opacity:.72}
.landing-showcase-visual{min-width:0;margin:0;padding:10px 10px 0;border:1px solid #ffffff35;border-radius:14px;background:#e8ebee;box-shadow:0 24px 52px #0003;overflow:hidden}
.landing-showcase-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border:1px solid #abb1ba;border-radius:6px;background:#fff}
.landing-showcase-visual figcaption{padding:10px 2px 12px;color:#424a55;font:650 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase}
.landing-feature-grid article{position:relative;overflow:hidden;min-height:215px}
.landing-feature-grid article:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#ec3836,#f89d25,#ffdb34,#22bb6c,#30b4ee,#7852e5)}
@media(max-width:900px){.landing-showcase,.landing-showcase:nth-child(even){grid-template-columns:1fr;gap:25px;min-height:0}.landing-showcase:nth-child(even) .landing-showcase-visual,.landing-showcase:nth-child(even) .landing-showcase-copy{grid-column:auto;grid-row:auto}.landing-showcase-copy{max-width:650px}}
@media(max-width:690px){.landing-showcase-list{gap:15px}.landing-showcase{padding:20px;border-radius:16px}.landing-showcase-copy h3{font-size:34px}.landing-showcase-copy p{font-size:14px}.landing-showcase-visual{padding:6px 6px 0;border-radius:10px}.landing-showcase-visual figcaption{font-size:9px}}

/* The laptop demonstration is isolated from the actual project editor. */
.landing-laptop-screen{position:relative}
.demo-active .preview-node{opacity:0;transition:opacity .22s,box-shadow .3s}
.demo-active .preview-node.demo-placed{opacity:1}
.demo-active .preview-canvas>svg{opacity:0;transition:opacity .5s}
.demo-active .preview-canvas.demo-connected>svg{opacity:1}
.demo-cursor{position:absolute;left:0;top:0;width:clamp(10px,1.4vw,21px);height:28px;z-index:8;pointer-events:none;filter:drop-shadow(1px 2px 2px #0005)}
.demo-cursor svg{width:100%;height:100%;fill:#fff;stroke:#171a20;stroke-width:1.6}
.demo-cursor.demo-click:after{content:'';position:absolute;left:-8px;top:-8px;width:20px;height:20px;border:2px solid #8c71d6;border-radius:50%}
.demo-drag{position:absolute;left:0;top:0;z-index:7;width:8%;height:12%;display:grid;place-items:center;background:#f7f2ffdc;border:1px solid #a68be5;border-radius:6px;font-size:2em;color:#6c598b;box-shadow:0 8px 15px #0002;pointer-events:none}
.demo-drag[hidden]{display:none}
.demo-code{display:none;position:absolute;inset:0;margin:0;padding:5% 4%;white-space:pre-wrap;background:#fff;color:#354555;font:clamp(5px,.85vw,12px)/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left;border-left:25px solid #eff0f2;z-index:3}
.demo-code-view .demo-code{display:block}
.demo-code:after{content:'▏';color:#7a42b0}
.demo-edit-highlight{color:#603391;background:linear-gradient(transparent 0 38%,#ede8ff 38% 47%,transparent 47%),#fff}
.demo-simulating .preview-node{box-shadow:0 0 14px #54b5c65c}
.demo-static .demo-cursor,.demo-static .demo-drag{display:none}
.demo-toggle{margin-left:12px;padding:5px 9px;border:1px solid currentColor;border-radius:5px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.demo-toggle:focus-visible{outline:2px solid #8c71d6;outline-offset:3px}

.demo-editor{position:absolute;inset:0;transition:transform .85s cubic-bezier(.65,0,.2,1),opacity .65s}
.demo-finished .demo-editor{transform:translateY(-105%);opacity:0;pointer-events:none}
.demo-reset .demo-editor{transition:none}
.demo-closing{position:absolute;inset:0;display:grid;place-items:center;padding:6%;background:radial-gradient(ellipse at 15% 85%,#b9ddff66,transparent 55%),radial-gradient(ellipse at 90% 15%,#e2c6ff66,transparent 55%),#fafbfc;opacity:0;transform:translateY(25%);transition:opacity .65s .15s,transform .85s .1s;pointer-events:none;text-align:center;color:#171a20}
.demo-finished .demo-closing{opacity:1;transform:translateY(0);pointer-events:auto}
.demo-reset .demo-closing{transition:none}
.demo-closing-link{display:flex;flex-direction:column;align-items:center;gap:1.4em;text-decoration:none;color:inherit!important}
.demo-closing-link strong{font-size:clamp(16px,3.8vw,56px);letter-spacing:-.045em;line-height:1.05}
.demo-closing-link span{font-size:clamp(6px,1.15vw,17px);color:#535963;line-height:1.6}
.demo-closing-link i{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:#171a20;color:#fff;font:normal clamp(12px,1.8vw,26px)/1 system-ui}
.demo-closing-link:focus-visible{outline:2px solid #6f52a4;outline-offset:12px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.demo-editor,.demo-closing{transition:none}}
.demo-code:after{content:none}
.demo-phase-value{position:relative}
.demo-value-selected{background:#d4c5ff;color:#392260;border-radius:2px}
.demo-value-editing:after{content:'';position:absolute;right:-1px;top:0;height:1.1em;border-right:1px solid #603391;animation:demo-caret .8s steps(1) infinite}
@keyframes demo-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.demo-value-editing:after{animation:none}}