:root{--paper:#0d1117;--ink:#e6edf3;--muted:#9daabd;--line:#293443;--blue:#70e0bb;--blue-dark:#a6f5d9;--serif:Georgia,'Times New Roman',serif;--ease:cubic-bezier(.22,1,.36,1)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:40px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:#294b49;color:#e3fff4}
a{color:inherit;text-decoration:none}
button{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:7px;border-radius:3px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;line-height:1.08;letter-spacing:-.055em}
h2{font-size:clamp(40px,4.5vw,62px)}
h2 em,h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.055em}
em{font-style:italic}
.wrap{max-width:1184px;margin-inline:auto;padding-inline:32px}
.section-space{padding-block:100px}
.eyebrow,.section-label{font-size:11px;font-weight:600;letter-spacing:.13em;line-height:1.6}
.section-label{display:flex;align-items:center;gap:20px}
.section-number{color:#81848e;white-space:nowrap}
.skip-link{position:fixed;top:12px;left:12px;background:var(--blue);color:#091a16;padding:12px 20px;z-index:10;transform:translateY(-150%)}
.skip-link:focus{transform:none}

.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.identity{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;letter-spacing:-.025em}
.monogram{font-family:var(--serif);font-size:35px;line-height:1;letter-spacing:-.12em;font-weight:bold}
.monogram span{color:var(--blue)}
.site-header nav{display:flex;gap:30px;color:#a5b1c2;font-size:13px}
.site-header a{transition:color .2s}
.site-header a:hover{color:var(--blue)}
.header-hello{font-size:13px;border-bottom:1px solid #344554;padding-block:5px}
.header-hello span{padding-left:12px}

.hero{display:grid;grid-template-columns:1.45fr 1fr;position:relative;padding-top:98px;min-height:680px;column-gap:15px}
.hero-copy{position:relative;z-index:2}
.status-dot{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-right:8px;vertical-align:2px}
.hero h1{font-size:clamp(65px,6.8vw,97px);line-height:1.05;margin-top:27px;letter-spacing:-.07em}
.hero h1 em{color:var(--blue)}
.hero-intro{font-size:17px;line-height:1.75;color:var(--muted);margin-top:30px;letter-spacing:-.015em}
.primary-link{display:inline-flex;gap:26px;align-items:center;margin-top:32px;font-size:13px;font-weight:600;padding:14px 19px;background:var(--blue);color:#091a16;border-radius:7px;transition:background .25s,transform .3s var(--ease)}
.primary-link:hover{background:#a0f5d6;transform:translateY(-3px)}
.primary-link span{font-size:20px;line-height:1}
.hero-bottom{grid-column:1/-1;align-self:end;display:flex;justify-content:space-between;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding-block:45px 22px;margin-top:60px;color:#93a2b4;font-size:12px}
.hero-bottom a span{padding-left:15px;color:var(--ink)}

.constellation{position:relative;min-width:0;height:380px;margin-top:10px}
.orbit{position:absolute;border:1px dashed #32554d;border-radius:50%;width:330px;height:330px;left:36px;top:2px}
.orbit-two{width:250px;height:250px;top:42px;left:77px;border-style:solid;border-color:#223b37}
.orbit-cross{position:absolute;right:5px;top:42px;font-size:42px;line-height:1;color:var(--blue);transform:rotate(18deg)}
.tiny-dot{position:absolute;left:55px;bottom:55px;background:#c4a5fa;width:12px;height:12px;border-radius:50%}
.floating-app{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;animation:float 7s ease-in-out infinite;--angle:0deg;transform:rotate(var(--angle))}
.floating-app img{width:110px;height:110px;object-fit:cover;border-radius:25%;box-shadow:0 18px 35px -18px #323d6d80;transition:transform .55s var(--ease),box-shadow .55s}
.floating-app:hover img{transform:translateY(-7px) rotate(-5deg);box-shadow:0 23px 40px -15px #323d6d80}
.floating-app span{background:#19232f;border:1px solid #3a4b60;padding:3px 10px 3px 12px;border-radius:5px;font-size:11px;box-shadow:0 3px 10px #252c4210}
.floating-app i{font-style:normal;color:#70e0bb;margin-left:6px}
.float-noctra{top:4px;left:130px;--angle:-10deg}
.float-widgetella{top:163px;left:15px;--angle:9deg;animation-delay:-2.3s}
.float-widgetella img{width:98px;height:98px}
.float-kingdom{top:197px;right:5px;--angle:-9deg;animation-delay:-4.6s}
.float-kingdom img{width:120px;height:120px}
.orbit-note{position:absolute;bottom:-40px;left:70px;font-family:var(--serif);font-size:18px;font-style:italic;color:#91a5b3;transform:rotate(-6deg)}
.orbit-note span{display:inline-block;font-size:36px;transform:rotate(16deg);margin-left:4px}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--angle))}
50%{transform:translateY(-11px) rotate(calc(var(--angle) + 3deg))}
}

.story{display:grid;grid-template-columns:1fr 2.1fr;gap:45px;padding-top:100px}
.story>.section-label{align-items:flex-start;font-size:10px;gap:15px;padding-top:12px;max-width:215px}
.story h2{font-size:46px;line-height:1.17;letter-spacing:-.045em}
.story h2 em{color:var(--blue)}
.story-columns{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:30px;color:var(--muted);font-size:15px;line-height:1.85}
.story-footnote{font-size:12px;color:#95a8bb;margin-top:22px}
.story-footnote span{color:var(--blue);margin-right:10px}

.work{padding-top:50px}
.work-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px}
.work-heading h2{margin-top:22px}
.work-heading h2 em{color:var(--blue)}
.work-heading>p{font-size:14px;color:var(--muted);padding-bottom:8px}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.project-offset{padding-top:86px}
.project-visual{display:block;position:relative;height:440px;border-radius:14px;overflow:hidden;isolation:isolate}
.noctra-visual{background:#14182b;color:#fff}
.noctra-sky{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1.2s var(--ease)}
.noctra-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0f143422,#0f143400 60%,#0f1434bb);z-index:-1}
.noctra-brand{position:absolute;top:55px;left:40px}
.noctra-brand img{width:48px;height:48px;border-radius:12px;display:inline-block;vertical-align:middle;box-shadow:0 8px 20px #08082030}
.noctra-brand>span{font-size:21px;letter-spacing:-.05em;margin-left:11px;vertical-align:middle}
.noctra-brand p{font-family:var(--serif);font-size:43px;line-height:1.1;letter-spacing:-.025em;margin-top:23px;text-shadow:0 2px 15px #08162750}
.visual-tag{position:absolute;bottom:24px;left:28px;font-size:10px;font-weight:600;letter-spacing:.12em;z-index:2}
.visual-arrow{position:absolute;right:24px;bottom:21px;width:32px;height:32px;background:#ffffff25;border:1px solid #ffffff33;border-radius:50%;display:grid;place-items:center;transition:transform .35s var(--ease)}
.project-visual:hover .visual-arrow{transform:rotate(45deg)}
.project-visual:hover .noctra-sky{transform:scale(1.045)}
.project-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:24px 0 12px}
.project-heading h3{font-size:26px;letter-spacing:-.035em}
.project-heading>span{font-size:11px;color:#91a2b7}
.project>p,.kingdom-copy>p:not(.section-label){font-size:15px;color:var(--muted);line-height:1.8;max-width:450px}
.text-link{display:inline-flex;gap:20px;font-size:12px;font-weight:600;border-bottom:1px solid #3c5360;padding-bottom:5px;margin-top:20px;transition:color .2s,border-color .2s}
.text-link:hover{color:var(--blue);border-color:var(--blue)}
.widget-visual{background:#181b30;color:#e4e3f6}
.widget-orbit{position:absolute;left:-100px;top:0;width:530px;height:530px;border:1px solid #343854;border-radius:50%}
.widget-brand{position:absolute;top:34px;left:32px;z-index:1}
.widget-brand img{width:50px;height:50px;border-radius:12px;margin-bottom:19px}
.widget-brand>span{font-size:28px;letter-spacing:-.055em;line-height:1.2;display:block}
.widget-brand em{font-family:var(--serif);font-size:33px}
.phone-frame{position:absolute;right:-22px;top:46px;width:242px;padding:7px;background:#252536;border-radius:29px;transform:rotate(10deg);box-shadow:-15px 20px 40px #36325122;transition:transform .9s var(--ease)}
.phone-frame img{width:100%;border-radius:23px}
.widget-visual:hover .phone-frame{transform:rotate(6deg) translateY(-9px)}
.widget-visual .visual-arrow{background:#ffffff80;border-color:#ffffff80}
.widget-visual .visual-tag{background:#181b30d9;padding:6px 10px;left:18px;bottom:19px;border-radius:5px}

.kingdom-project{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;background:#101e20;border:1px solid #294039;border-radius:14px;padding:48px;margin-top:72px}
.kingdom-art{position:relative;height:295px;display:grid;place-items:center}
.kingdom-art>img{width:225px;height:225px;border-radius:42px;transform:rotate(-7deg);box-shadow:0 20px 35px #47695020;position:relative;transition:transform .8s var(--ease)}
.kingdom-project:hover .kingdom-art>img{transform:rotate(-3deg) translateY(-6px)}
.paper-card{position:absolute;left:calc(50% - 90px);top:38px;width:180px;height:230px;border-radius:20px;background:#263f36;border:1px solid #42604f;transform:rotate(17deg)}
.paper-back{transform:rotate(-22deg);background:#423c2e;border-color:#665b40}
.art-spark{position:absolute;top:-6px;right:5px;font-size:47px;color:#88ba9b;transform:rotate(18deg)}
.kingdom-copy h3{font-size:37px;letter-spacing:-.045em;line-height:1.12;margin:22px 0 19px}
.kingdom-copy .section-label{gap:14px;flex-wrap:wrap;font-size:10px}
.development-tag{display:inline-block;letter-spacing:.02em;font-size:10px;background:#233c31;color:#9ce2b3;padding:3px 9px;border-radius:20px}
.kingdom-copy .project-heading{justify-content:flex-start;gap:12px;font-size:13px;margin-bottom:0}
.kingdom-copy .text-link{margin-top:14px}
.directory-link{text-align:center;font-size:12px;color:var(--muted);margin-top:42px}
.directory-link a{color:var(--ink);border-bottom:1px solid #3c5360;padding-bottom:3px;margin-left:5px}

.approach{background:#111820;padding-block:95px}
.approach-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.approach h2{margin-top:30px;font-size:60px;line-height:1.06}
.approach h2 em{color:var(--blue)}
.principles{padding-top:18px}
.principle{display:flex;gap:22px;padding:27px 0;border-bottom:1px solid #2b3743}
.principle:first-child{padding-top:0}
.principle:last-child{border-bottom:0;padding-bottom:0}
.principle>span{font-size:11px;color:#8d9cae;padding-top:5px}
.principle h3{font-size:23px;letter-spacing:-.035em;line-height:1.35;margin-bottom:9px}
.principle p{font-size:14px;line-height:1.8;color:var(--muted)}
.now{display:grid;grid-template-columns:1fr 2.1fr;gap:45px}
.now>.section-label{align-items:flex-start;padding-top:10px}
.now-content{display:flex;gap:36px}
.now-mark{align-self:flex-start;color:var(--blue);font-size:60px;line-height:1;display:block;margin-top:33px;transform:rotate(-10deg)}
.now-content h2{font-size:43px;margin-top:13px}
.now-content p:not(.eyebrow){max-width:440px;font-size:15px;color:var(--muted);margin-top:22px;line-height:1.8}
.now-content .eyebrow{color:var(--muted);font-size:10px}
.small-note{font-size:11px;display:block;margin-top:18px;color:#8a9aaf}

.contact{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:83px;padding-bottom:90px;position:relative}
.contact h2{font-size:75px;margin-top:26px}
.contact h2 em{color:var(--blue)}
.contact p:not(.eyebrow){font-size:15px;color:var(--muted);line-height:1.8;margin-top:25px}
.contact-link{display:inline-flex;gap:35px;font-size:21px;letter-spacing:-.03em;border-bottom:1px solid #355a55;padding-bottom:9px;margin-top:25px;transition:color .2s}
.contact-link:hover{color:var(--blue)}
.contact-doodle{position:absolute;right:110px;top:165px;font-size:69px;letter-spacing:-.06em;font-family:var(--serif);font-style:italic;color:#70e0bb;transform:rotate(-15deg)}
.contact-doodle:after{content:'';position:absolute;inset:-38px -35px;border:1px solid #28493f;border-radius:50%;transform:rotate(15deg)}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:35px;padding-top:36px;padding-bottom:38px}
.site-footer .identity{font-size:12px;font-weight:400}
.site-footer .monogram{font-size:26px}
.copyright{display:block;font-size:10px;color:#8a9aaf;margin-top:9px}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:11px;color:#99a9bc}
.site-footer nav a:hover{color:var(--blue)}
#motion-toggle{font-size:10px;color:#a1b7c7;background:transparent;border:1px solid #344959;padding:4px 8px;cursor:pointer;border-radius:20px}

.hero-enter{animation:enter .9s var(--ease) backwards}
.hero-copy h1{animation-delay:.09s}
.hero-intro{animation-delay:.18s}
.hero .primary-link{animation-delay:.27s}
.constellation{animation-delay:.3s}
@keyframes enter{from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}
.js-motion .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js-motion .reveal.in-view{opacity:1;transform:none}
html[data-motion="off"]{scroll-behavior:auto!important}
[data-motion="off"] *,[data-motion="off"] *:before,[data-motion="off"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-motion="off"] .reveal{opacity:1;transform:none}

@media(min-width:1450px){.hero{padding-top:110px;min-height:735px}
.hero-bottom{padding-bottom:28px}
.constellation{margin-top:24px}
}

@media(max-width:1000px){.wrap{padding-inline:28px}
.hero{grid-template-columns:1.25fr 1fr;padding-top:70px;min-height:600px}
.hero h1{font-size:72px}
.hero-intro{font-size:15px}
.desktop-break{display:none}
.orbit{left:5px;width:285px;height:285px}
.orbit-two{width:215px;height:215px;left:40px;top:37px}
.float-noctra{left:100px}
.float-widgetella{left:0;top:165px}
.float-kingdom{right:0;top:190px}
.float-kingdom img{width:100px;height:100px}
.orbit-cross{right:0}
.orbit-note{left:30px;bottom:-10px;font-size:15px}
.story,.now{grid-template-columns:1fr 2.5fr;gap:32px}
.project-visual{height:380px}
.phone-frame{width:215px;right:-40px;top:100px}
.widget-brand>span{font-size:23px}
.widget-brand em{font-size:27px}
.noctra-brand{left:28px}
.noctra-brand p{font-size:37px}
.kingdom-project{padding:35px;gap:35px}
.kingdom-copy h3{font-size:32px}
.kingdom-art>img{width:195px;height:195px;border-radius:33px}
.approach-layout{gap:60px}
.contact-doodle{right:85px;font-size:57px}
}

@media(max-width:700px){.wrap{padding-inline:22px}
.section-space{padding-block:64px}
.site-header{height:88px;gap:16px}
.identity{font-size:13px;gap:8px}
.monogram{font-size:30px}
.site-header nav{gap:20px;font-size:12px}
.site-header nav a:first-child{display:none}
.header-hello{font-size:12px}
.header-hello span{padding-left:3px}
.hero{display:flex;flex-direction:column;padding-top:45px;min-height:0}
.hero h1{font-size:clamp(56px,10.8vw,76px);margin-top:24px;letter-spacing:-.06em}
.eyebrow{font-size:10px}
.hero-intro{font-size:16px;max-width:330px;margin-top:24px}
.primary-link{margin-top:24px;padding:13px 17px}
.constellation{align-self:center;width:330px;height:335px;margin-top:40px}
.orbit{left:22px;top:0;width:285px;height:285px}
.orbit-two{width:215px;height:215px;left:57px;top:35px}
.float-noctra{left:120px;top:3px}
.floating-app img{width:90px;height:90px}
.float-widgetella{left:5px;top:150px}
.float-widgetella img{width:86px;height:86px}
.float-kingdom{right:3px;top:166px}
.float-kingdom img{width:100px;height:100px}
.orbit-cross{right:1px;top:47px;font-size:32px}
.tiny-dot{left:68px;bottom:60px;width:9px;height:9px}
.orbit-note{left:56px;bottom:-6px}
.hero-bottom{width:100%;margin-top:20px;padding-top:15px;padding-bottom:23px;font-size:10px;align-items:flex-end}
.hero-bottom a{max-width:150px;text-align:right}
.hero-bottom a span{padding-left:5px}
.story{display:block}
.story>.section-label{max-width:none;padding-top:0;font-size:10px}
.story-body{margin-top:27px}
.story h2{font-size:38px}
.story-columns{grid-template-columns:1fr;gap:16px;margin-top:24px;font-size:15px}
.story-footnote{font-size:11px}
.work{padding-top:20px}
.work-heading{display:block;margin-bottom:30px}
.work-heading h2{font-size:45px;margin-top:20px}
.work-heading>p{margin-top:22px;font-size:13px}
.project-grid{grid-template-columns:1fr;gap:47px}
.project-offset{padding-top:0}
.project-visual{height:420px}
.noctra-brand{top:45px;left:30px}
.noctra-brand p{font-size:41px}
.widget-brand{left:30px;top:35px}
.widget-brand>span{font-size:28px}
.widget-brand em{font-size:32px}
.phone-frame{right:-15px;top:180px;width:223px}
.project-heading{margin-top:22px}
.project-heading h3{font-size:25px}
.project-heading>span{font-size:10px}
.project>p{font-size:15px}
.text-link{font-size:12px}
.kingdom-project{grid-template-columns:1fr;padding:27px;gap:15px;margin-top:48px}
.kingdom-art{height:260px}
.kingdom-art>img{width:200px;height:200px}
.paper-card{height:205px;top:25px}
.art-spark{right:18px;top:0}
.kingdom-copy h3{font-size:35px}
.kingdom-copy>p:not(.section-label){font-size:14px}
.directory-link{font-size:11px;line-height:2.2;margin-top:28px}
.directory-link a{white-space:nowrap}
.approach-layout{grid-template-columns:1fr;gap:35px}
.approach h2{font-size:52px;margin-top:24px}
.principles{padding-top:0}
.principle{padding-block:24px;gap:20px}
.principle h3{font-size:23px}
.now{display:block}
.now-content{margin-top:35px;gap:20px}
.now-mark{font-size:42px}
.now-content h2{font-size:39px}
.now-content p:not(.eyebrow){font-size:14px}
.contact{padding-top:55px;padding-bottom:58px}
.contact .eyebrow{font-size:9px}
.contact h2{font-size:53px;margin-top:24px}
.contact p:not(.eyebrow){font-size:14px;max-width:320px}
.contact-link{font-size:20px;gap:26px}
.contact-doodle{display:none}
.site-footer{align-items:flex-start;flex-direction:column;gap:26px;padding-block:28px}
.site-footer nav{gap:19px;font-size:11px}
.copyright{margin-left:29px}
}

@media(max-width:370px){.site-header nav{gap:12px}
.site-header nav a:last-child{display:none}
.constellation{width:290px}
.hero h1{font-size:53px}
.orbit{left:5px;width:265px;height:265px}
.orbit-two{left:32px;width:215px;height:215px}
.float-noctra{left:100px}
.float-widgetella{left:0}
.float-kingdom{right:0}
.hero-bottom{font-size:9px}
.contact h2{font-size:47px}
.phone-frame{width:195px;right:-35px;top:180px}
.widget-brand>span{font-size:25px}
.widget-brand em{font-size:29px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.js-motion .reveal{opacity:1;transform:none}
}


/* Midnight workspace: editor chrome, syntax accents and interactive surfaces. */
:root { color-scheme: dark; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body { isolation: isolate; background-image: radial-gradient(ellipse at 78% 12%, #13282366, transparent 48%); }
#matrix-rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .23; mask-image: linear-gradient(90deg, #0003, #000 70%); }
::selection { background: #295449; }
.site-header { border-bottom: 1px solid var(--line); height: 94px; }
.site-header nav, .header-hello, .eyebrow, .section-label, .hero-bottom, .visual-tag, .development-tag, .small-note { font-family: var(--mono); }
.site-header nav a { position: relative; padding: 10px 0; }
.site-header nav a::after { content: ''; position: absolute; height: 1px; background: var(--blue); bottom: 2px; left: 0; width: 100%; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { transform: scaleX(1); }
.hero { padding-top: 25px; grid-template-columns: 1.35fr 1fr; gap: 0 35px; min-height: 670px; }
.workspace-path { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 46px; font: 11px/1.5 var(--mono); color: #8c9db3; }
.path-divider { color: #4c5f70; margin-inline: 8px; }
.syntax-green { color: #70e0bb; } .syntax-purple { color: #c4a5fa; }
.hero h1 { font-size: clamp(60px, 6.4vw, 85px); }
.hero h1 em, h2 em { font-family: var(--mono); font-size: .87em; font-style: normal; letter-spacing: -.075em; }
.hero h1 em { text-shadow: 0 0 45px #70e0bb25; }
.status-dot { box-shadow: 0 0 12px #70e0bb88; }
.primary-link { box-shadow: 0 0 0 1px #99f3d640, 0 5px 28px #70e0bb10; }
.primary-link:hover { box-shadow: 0 0 0 1px #99f3d680, 0 8px 36px #70e0bb30; }
.hero-bottom { margin-top: 34px; padding-top: 25px; }
.ide-window { align-self: start; min-width: 0; border: 1px solid #344250; border-radius: 12px; background: #10171fda; box-shadow: 0 30px 80px #0005, 0 0 90px #70e0bb08; overflow: hidden; }
.editor-tabbar { height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 16px; background: #1b2430; border-bottom: 1px solid #344250; font: 11px var(--mono); color: #c0ccdc; }
.window-dots { display: flex; gap: 5px; } .window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #f07983; } .window-dots i:nth-child(2) { background: #e4c07d; } .window-dots i:nth-child(3) { background: #70c49d; }
.editor-tab-close { color: #7890a2; font-size: 17px; }
.editor-comment { font: 10px var(--mono); color: #6f9186; margin: 17px 20px 0; }
.constellation { margin: 20px 15px 0; height: 340px; background-image: radial-gradient(#65858a2a 1px, transparent 1px); background-size: 20px 20px; }
.orbit { width: 280px; height: 280px; left: calc(50% - 140px); }
.orbit-two { width: 215px; height: 215px; left: calc(50% - 107px); top: 34px; }
.float-noctra { left: calc(50% - 45px); top: 7px; }
.float-widgetella { left: 10px; top: 140px; }
.float-kingdom { right: 5px; top: 160px; }
.floating-app img { width: 92px; height: 92px; box-shadow: 0 14px 32px #0007; }
.float-widgetella img { width: 80px; height: 80px; }
.float-kingdom img { width: 100px; height: 100px; }
.floating-app:hover img { box-shadow: 0 0 24px #70e0bb44, 0 20px 40px #0007; }
.floating-app span { color: #cedbea; box-shadow: 0 5px 16px #0003; }
.orbit-cross { font-size: 30px; right: 12px; top: 25px; color: #c4a5fa; }
.tiny-dot { left: 46px; bottom: 54px; width: 6px; height: 6px; box-shadow: 0 0 12px #c4a5fa77; }
.orbit-note { left: 14px; bottom: 12px; font: 11px var(--mono); transform: none; color: #a7b9c7; }
.orbit-note span { display: inline; font: inherit; transform: none; margin: 0; }
.editor-status { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid #293640; font: 9px var(--mono); color: #90a1b7; background: #141f27; }
.story, .work, .now, .contact { position: relative; }
.section-number { color: #80a099; }
.story-footnote { font-family: var(--mono); font-size: 11px; }
.project-visual { border: 1px solid #364358; transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s var(--ease), border-color .4s, box-shadow .4s; }
.project-visual::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(450px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #b7fce526, transparent 60%); transition: opacity .4s; }
.project-visual:hover::before { opacity: 1; }
.project-visual:hover, .project-visual:focus-visible { border-color: #70e0bb99; box-shadow: 0 15px 50px #0004, 0 0 30px #70e0bb0c; }
.project-heading h3 { transition: color .3s; } .project:hover h3 { color: var(--blue); }
.widget-visual { background: radial-gradient(ellipse at 80% 65%, #403269, #191b30 70%); }
.widget-visual .visual-tag { background: #181b30e8; }
.widget-visual .visual-arrow { background: #30304ccc; border-color: #686381; }
.phone-frame { box-shadow: -15px 20px 40px #0006; border: 1px solid #756a8f; }
.widget-brand em { color: #d1b8ff; }
.kingdom-project { background: radial-gradient(ellipse at 20% 50%, #1e342d, #101b21 70%); transition: border-color .4s, box-shadow .4s; }
.kingdom-project:hover { border-color: #4a7964; box-shadow: 0 0 50px #70e0bb0a; }
.kingdom-art { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s var(--ease); }
.approach { border-block: 1px solid var(--line); background: #111820ee; }
.principle { transition: padding .35s var(--ease); }
.principle:hover { padding-left: 10px; } .principle:hover h3 { color: #c4a5fa; }
.contact-doodle { font-family: var(--mono); font-size: 48px; font-style: normal; color: #c4a5fa; }
.contact-doodle:after { border-style: dashed; }
.contact-link:hover { text-shadow: 0 0 24px #70e0bb55; }
.motion-control, #motion-toggle { font: 10px var(--mono); color: #9ac5b9; background: #11221e; border: 1px solid #315448; padding: 6px 10px; cursor: pointer; border-radius: 5px; }
.motion-control:hover, #motion-toggle:hover { border-color: #70e0bb; color: #d9fff0; }
.motion-control[aria-pressed='true'], #motion-toggle[aria-pressed='true'] { background: #19212c; color: #a6b3c3; border-color: #3d4a5b; }
.site-footer { background: #0d1117aa; }
.skip-link { background: #70e0bb; color: #091a16; }
@media(max-width:1000px) {
 .hero { grid-template-columns: 1.2fr 1fr; gap: 0 25px; } .hero h1 { font-size: 65px; }
 .constellation { margin-inline: 8px; } .floating-app img { width: 80px; height: 80px; } .float-kingdom img { width: 90px; height: 90px; }
 .float-widgetella { left: 0; } .float-kingdom { right: 0; } .editor-tabbar { padding-inline: 12px; font-size: 10px; }
}
@media(max-width:700px) {
 .site-header { height: 80px; } .site-header nav { gap: 16px; font-size: 11px; }
 .hero { padding-top: 18px; } .workspace-path { width: 100%; margin-bottom: 33px; font-size: 10px; }
 .hero h1 { font-size: clamp(53px, 10.8vw, 76px); } .hero h1 em { font-size: .95em; }
 .hero .eyebrow { font-size: 9px; letter-spacing: .08em; }
 .ide-window { width: 100%; margin-top: 42px; } .constellation { width: auto; margin: 20px 12px 0; height: 335px; }
 .floating-app img { width: 86px; height: 86px; } .float-kingdom img { width: 96px; height: 96px; }
 .float-noctra { left: calc(50% - 43px); } .float-widgetella { left: 5px; } .float-kingdom { right: 5px; }
 .hero-bottom { margin-top: 24px; font: 9px/1.8 var(--mono); }
 .section-label, .story>.section-label { font-size: 9px; letter-spacing: .08em; }
 .approach h2 { font-size: 49px; } .contact h2 { font-size: 49px; }
 .motion-control { font-size: 9px; padding: 5px 7px; white-space: nowrap; }
}
@media(max-width:370px) {
 .workspace-path { font-size: 9px; } .workspace-path>span { max-width: 160px; }
 .constellation { margin-inline: 8px; } .orbit { width: 230px; height: 230px; left: calc(50% - 115px); top: 25px; }
 .orbit-two { width: 180px; height: 180px; left: calc(50% - 90px); top: 50px; }
 .floating-app img { width: 76px; height: 76px; } .float-kingdom img { width: 83px; height: 83px; }
 .floating-app span { font-size: 9px; padding-inline: 8px; } .orbit-note { font-size: 10px; }
 .hero h1 { font-size: 51px; } .contact h2 { font-size: 44px; }
}
@media(hover: none) { .project-visual::before { display: none; } }
[data-motion="off"] #matrix-rain { display: none; }
[data-motion="off"] .project-visual, [data-motion="off"] .kingdom-art { transform: none; }
@media(prefers-reduced-motion:reduce) { #matrix-rain { display:none; } .project-visual, .kingdom-art { transform:none!important; } }

.page-hidden * { animation-play-state: paused!important; }

.site-header .identity, .header-hello { white-space: nowrap; }
@media(max-width:370px) {
 .site-header { gap: 10px; } .site-header .identity { font-size: 11px; gap: 6px; }
 .site-header nav, .header-hello { font-size: 10px; }
}