/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"JetBrains Mono", ui-monospace, monospace;--color-white:#fff;--spacing:.25rem;--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--leading-normal:1.5;--leading-relaxed:1.625;--radius-lg:1rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-cream:#f6f3f9;--color-violet:#8b5cf6;--color-violet-deep:#6d28d9;--color-ink:#1a0f2e;--color-ink-subtle:#1a0f2e99;--color-ink-faint:#1a0f2e1a;--color-violet-wash:#8b5cf608;--color-violet-subtle:#8b5cf60f;--color-violet-tint:#8b5cf614;--color-violet-soft:#8b5cf61f;--color-violet-medium:#8b5cf62e;--color-violet-strong:#8b5cf64d;--color-cyan:#00d4ff;--color-cream-dark:#e8dff2;--color-danger:#d6284a;--color-danger-strong:#b3142f;--font-display:"Clash Display", sans-serif;--font-body:"Satoshi", system-ui, sans-serif;--font-accent:"Cabinet Grotesk", sans-serif;--font-signature:"NinjaKage", "Melodrama", serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}body{font-family:var(--font-body);background:var(--cream);color:var(--ink);overflow-wrap:break-word;overflow-x:hidden}:focus-visible{outline:2px solid var(--violet);outline-offset:2px}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.-top-\[100px\]{top:-100px}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-\[clamp\(1rem\,3svh\,2rem\)\]{top:clamp(1rem,3svh,2rem)}.top-\[var\(--topbar-height\)\]{top:var(--topbar-height)}.right-0{right:calc(var(--spacing) * 0)}.right-\[clamp\(1rem\,3vw\,2\.5rem\)\]{right:clamp(1rem,3vw,2.5rem)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-4{left:calc(var(--spacing) * 4)}.left-5{left:calc(var(--spacing) * 5)}.z-0{z-index:0}.z-10{z-index:10}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.z-\[3\]{z-index:3}.z-\[4\]{z-index:4}.z-\[20\]{z-index:20}.z-\[100\]{z-index:100}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.mt-0{margin-top:calc(var(--spacing) * 0)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.\!mb-0{margin-bottom:calc(var(--spacing) * 0)!important}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-\[0\.1rem\]{margin-bottom:.1rem}.mb-\[0\.35rem\]{margin-bottom:.35rem}.mb-\[0\.85rem\]{margin-bottom:.85rem}.mb-\[1\.1rem\]{margin-bottom:1.1rem}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.h-2{height:calc(var(--spacing) * 2)}.h-3\/4{height:75%}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-\[2px\]{height:2px}.h-\[5px\]{height:5px}.h-\[10px\]{height:10px}.h-\[24\%\]{height:24%}.h-\[100svh\]{height:100svh}.h-\[var\(--topbar-height\)\]{height:var(--topbar-height)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[0\.7rem\]{min-height:.7rem}.min-h-\[1\.95rem\]{min-height:1.95rem}.min-h-\[44px\]{min-height:44px}.min-h-\[46px\]{min-height:46px}.min-h-\[62px\]{min-height:62px}.min-h-\[320px\]{min-height:320px}.w-1\/2{width:50%}.w-2{width:calc(var(--spacing) * 2)}.w-3\/4{width:75%}.w-5{width:calc(var(--spacing) * 5)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-\[5px\]{width:5px}.w-\[10px\]{width:10px}.w-\[12px\]{width:12px}.w-\[24\%\]{width:24%}.w-\[400px\]{width:400px}.w-\[min\(420px\,92vw\)\]{width:min(420px,92vw)}.w-\[min\(680px\,94vw\)\]{width:min(680px,94vw)}.w-full{width:100%}.max-w-\[36ch\]{max-width:36ch}.max-w-\[44ch\]{max-width:44ch}.max-w-\[290px\]{max-width:290px}.max-w-\[min\(92vw\,56ch\)\]{max-width:min(92vw,56ch)}.max-w-\[min\(440px\,100\%\)\]{max-width:min(440px,100%)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[32px\]{min-width:32px}.flex-1{flex:1}.flex-\[1\.5_1_0\]{flex:1.5 1 0}.flex-\[1_1_0\]{flex:1 1 0}.flex-\[3_1_0\]{flex:3 1 0}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.origin-left{transform-origin:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-\[0\.94\]{scale:.94}.\[transform\:scaleX\(0\)\]{transform:scaleX(0)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-manipulation{touch-action:manipulation}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-\[0\.4rem\]{gap:.4rem}.gap-\[0\.35rem\]{gap:.35rem}.gap-\[0\.45rem\]{gap:.45rem}.gap-\[0\.65rem\]{gap:.65rem}.gap-\[1\.1rem\]{gap:1.1rem}.gap-\[2px\]{gap:2px}.gap-\[5px\]{gap:5px}.gap-\[6px\]{gap:6px}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[0\.5rem\]{border-radius:.5rem}.rounded-\[0\.75rem\]{border-radius:.75rem}.rounded-\[1px\]{border-radius:1px}.rounded-\[1rem\]{border-radius:1rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[3px\]{border-radius:3px}.rounded-\[4px\]{border-radius:4px}.rounded-\[5px\]{border-radius:5px}.rounded-\[6px\]{border-radius:6px}.rounded-\[7px\]{border-radius:7px}.rounded-\[12px\]{border-radius:12px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-\[3px\]{border-style:var(--tw-border-style);border-width:3px}.border-y{border-block-style:var(--tw-border-style);border-block-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.\!border-violet{border-color:var(--color-violet)!important}.\!border-violet-deep{border-color:var(--color-violet-deep)!important}.border-\[rgba\(0\,212\,255\,0\.35\)\]{border-color:#00d4ff59}.border-\[rgba\(109\,40\,217\,0\.1\)\]{border-color:#6d28d91a}.border-\[rgba\(109\,40\,217\,0\.12\)\]{border-color:#6d28d91f}.border-\[rgba\(109\,40\,217\,0\.18\)\]{border-color:#6d28d92e}.border-\[rgba\(109\,40\,217\,0\.35\)\]{border-color:#6d28d959}.border-\[rgba\(214\,40\,74\,0\.15\)\]{border-color:#d6284a26}.border-cyan\/20{border-color:#00d4ff33}@supports (color:color-mix(in lab, red, red)){.border-cyan\/20{border-color:color-mix(in oklab, var(--color-cyan) 20%, transparent)}}.border-cyan\/60{border-color:#00d4ff99}@supports (color:color-mix(in lab, red, red)){.border-cyan\/60{border-color:color-mix(in oklab, var(--color-cyan) 60%, transparent)}}.border-ink-faint{border-color:var(--color-ink-faint)}.border-transparent{border-color:#0000}.border-violet-deep{border-color:var(--color-violet-deep)}.border-violet-medium{border-color:var(--color-violet-medium)}.border-violet-soft{border-color:var(--color-violet-soft)}.border-violet-strong{border-color:var(--color-violet-strong)}.border-violet-subtle{border-color:var(--color-violet-subtle)}.border-violet-tint{border-color:var(--color-violet-tint)}.border-white{border-color:var(--color-white)}.\!bg-\[var\(--color-danger\)\]{background-color:var(--color-danger)!important}.\!bg-cyan{background-color:var(--color-cyan)!important}.\!bg-violet{background-color:var(--color-violet)!important}.\!bg-violet-deep{background-color:var(--color-violet-deep)!important}.bg-\[\#f8f7fc\]{background-color:#f8f7fc}.bg-\[\#febc2e\]{background-color:#febc2e}.bg-\[\#ff5f57\]{background-color:#ff5f57}.bg-\[rgba\(26\,15\,46\,0\.45\)\]{background-color:#1a0f2e73}.bg-\[rgba\(178\,94\,0\,0\.1\)\]{background-color:#b25e001a}.bg-\[rgba\(179\,20\,47\,0\.1\)\]{background-color:#b3142f1a}.bg-\[rgba\(214\,40\,74\,0\.05\)\]{background-color:#d6284a0d}.bg-cream{background-color:var(--color-cream)}.bg-cream-dark{background-color:var(--color-cream-dark)}.bg-cyan{background-color:var(--color-cyan)}.bg-cyan\/\[0\.06\]{background-color:#00d4ff0f}@supports (color:color-mix(in lab, red, red)){.bg-cyan\/\[0\.06\]{background-color:color-mix(in oklab, var(--color-cyan) 6%, transparent)}}.bg-ink{background-color:var(--color-ink)}.bg-ink-faint{background-color:var(--color-ink-faint)}.bg-transparent{background-color:#0000}.bg-violet{background-color:var(--color-violet)}.bg-violet-deep{background-color:var(--color-violet-deep)}.bg-violet-deep\/90{background-color:#6d28d9e6}@supports (color:color-mix(in lab, red, red)){.bg-violet-deep\/90{background-color:color-mix(in oklab, var(--color-violet-deep) 90%, transparent)}}.bg-violet-medium{background-color:var(--color-violet-medium)}.bg-violet-soft{background-color:var(--color-violet-soft)}.bg-violet-strong{background-color:var(--color-violet-strong)}.bg-violet-subtle{background-color:var(--color-violet-subtle)}.bg-violet-tint{background-color:var(--color-violet-tint)}.bg-violet-wash{background-color:var(--color-violet-wash)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-cyan\/30{--tw-gradient-from:#00d4ff4d}@supports (color:color-mix(in lab, red, red)){.from-cyan\/30{--tw-gradient-from:color-mix(in oklab, var(--color-cyan) 30%, transparent)}}.from-cyan\/30{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-violet{--tw-gradient-from:var(--color-violet);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-violet-soft{--tw-gradient-via:var(--color-violet-soft);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-violet-deep{--tw-gradient-to:var(--color-violet-deep);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-violet\/25{--tw-gradient-to:#8b5cf640}@supports (color:color-mix(in lab, red, red)){.to-violet\/25{--tw-gradient-to:color-mix(in oklab, var(--color-violet) 25%, transparent)}}.to-violet\/25{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-8{padding:calc(var(--spacing) * 8)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-16{padding-inline:calc(var(--spacing) * 16)}.px-\[0\.7rem\]{padding-inline:.7rem}.px-\[0\.25rem\]{padding-inline:.25rem}.px-\[1\.1rem\]{padding-inline:1.1rem}.px-\[3\%\]{padding-inline:3%}.px-\[clamp\(0\.75rem\,1\.5vw\,1\.25rem\)\]{padding-inline:clamp(.75rem,1.5vw,1.25rem)}.px-\[clamp\(1rem\,4vw\,3rem\)\]{padding-inline:clamp(1rem,4vw,3rem)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-\[0\.2rem\]{padding-block:.2rem}.py-\[0\.4rem\]{padding-block:.4rem}.py-\[0\.15rem\]{padding-block:.15rem}.py-\[0\.55rem\]{padding-block:.55rem}.py-\[0\.65rem\]{padding-block:.65rem}.py-\[1\.2rem\]{padding-block:1.2rem}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-\[0\.35rem\]{padding-top:.35rem}.pt-\[calc\(var\(--nav-height\)\+1\.5rem\)\]{padding-top:calc(var(--nav-height) + 1.5rem)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-\[max\(0\.9rem\,env\(safe-area-inset-bottom\)\)\]{padding-bottom:max(.9rem, env(safe-area-inset-bottom))}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-\[6px\]{padding-left:6px}.pl-\[14px\]{padding-left:14px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-body{font-family:var(--font-body)}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.font-signature{font-family:var(--font-signature)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[0\.55rem\]{font-size:.55rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.75rem\]{font-size:.75rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.85rem\]{font-size:.85rem}.text-\[0\.88rem\]{font-size:.88rem}.text-\[0\.95rem\]{font-size:.95rem}.text-\[1\.1em\]{font-size:1.1em}.text-\[1\.1rem\]{font-size:1.1rem}.text-\[1\.2rem\]{font-size:1.2rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1rem\]{font-size:1rem}.text-\[clamp\(0\.85rem\,1\.875vw\,1\.2rem\)\]{font-size:clamp(.85rem,1.875vw,1.2rem)}.text-\[clamp\(1\.15rem\,2\.4vw\,1\.4rem\)\]{font-size:clamp(1.15rem,2.4vw,1.4rem)}.text-\[clamp\(1\.75rem\,3\.4vw\,2\.75rem\)\]{font-size:clamp(1.75rem,3.4vw,2.75rem)}.text-\[clamp\(1rem\,1\.3vw\,1\.1rem\)\]{font-size:clamp(1rem,1.3vw,1.1rem)}.text-\[clamp\(1rem\,1\.3vw\,1\.15rem\)\]{font-size:clamp(1rem,1.3vw,1.15rem)}.text-\[clamp\(2\.6rem\,6\.5vw\,5\.25rem\)\]{font-size:clamp(2.6rem,6.5vw,5.25rem)}.text-\[clamp\(2\.75rem\,10\.16vw\,6\.5rem\)\]{font-size:clamp(2.75rem,10.16vw,6.5rem)}.text-\[clamp\(3\.5rem\,18\.75vw\,12rem\)\]{font-size:clamp(3.5rem,18.75vw,12rem)}.text-\[clamp\(10rem\,22svh\,18rem\)\]{font-size:clamp(10rem,22svh,18rem)}.leading-\[0\.85\]{--tw-leading:.85;line-height:.85}.leading-\[0\.98\]{--tw-leading:.98;line-height:.98}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[1\.2\]{--tw-leading:1.2;line-height:1.2}.leading-\[1\.4\]{--tw-leading:1.4;line-height:1.4}.leading-\[1\.45\]{--tw-leading:1.45;line-height:1.45}.leading-\[1\.55\]{--tw-leading:1.55;line-height:1.55}.leading-none{--tw-leading:1;line-height:1}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-\[var\(--font-body\)\]{--tw-font-weight:var(--font-body);font-weight:var(--font-body)}.font-\[var\(--font-display\)\]{--tw-font-weight:var(--font-display);font-weight:var(--font-display)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.tracking-\[-0\.03em\]{--tw-tracking:-.03em;letter-spacing:-.03em}.tracking-\[-0\.05em\]{--tw-tracking:-.05em;letter-spacing:-.05em}.tracking-\[0\.3px\]{--tw-tracking:.3px;letter-spacing:.3px}.tracking-\[0\.5px\]{--tw-tracking:.5px;letter-spacing:.5px}.tracking-\[1\.5px\]{--tw-tracking:1.5px;letter-spacing:1.5px}.tracking-\[1px\]{--tw-tracking:1px;letter-spacing:1px}.tracking-\[2px\]{--tw-tracking:2px;letter-spacing:2px}.tracking-\[3px\]{--tw-tracking:3px;letter-spacing:3px}.tracking-\[5px\]{--tw-tracking:5px;letter-spacing:5px}.tracking-\[6px\]{--tw-tracking:6px;letter-spacing:6px}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.\!text-\[var\(--color-danger\)\]{color:var(--color-danger)!important}.\!text-cream{color:var(--color-cream)!important}.\!text-violet-deep{color:var(--color-violet-deep)!important}.text-\[\#b25e00\]{color:#b25e00}.text-\[\#febc2e\]{color:#febc2e}.text-\[rgba\(246\,243\,249\,0\.66\)\]{color:#f6f3f9a8}.text-\[rgba\(246\,243\,249\,0\.68\)\]{color:#f6f3f9ad}.text-\[var\(--color-danger\)\]{color:var(--color-danger)}.text-\[var\(--color-danger-strong\)\]{color:var(--color-danger-strong)}.text-cream{color:var(--color-cream)}.text-cyan{color:var(--color-cyan)}.text-ink{color:var(--color-ink)}.text-ink-subtle{color:var(--color-ink-subtle)}.text-violet{color:var(--color-violet)}.text-violet-deep{color:var(--color-violet-deep)}.text-violet-deep\/55{color:#6d28d98c}@supports (color:color-mix(in lab, red, red)){.text-violet-deep\/55{color:color-mix(in oklab, var(--color-violet-deep) 55%, transparent)}}.text-violet-deep\/65{color:#6d28d9a6}@supports (color:color-mix(in lab, red, red)){.text-violet-deep\/65{color:color-mix(in oklab, var(--color-violet-deep) 65%, transparent)}}.text-violet-strong{color:var(--color-violet-strong)}.text-violet\/70{color:#8b5cf6b3}@supports (color:color-mix(in lab, red, red)){.text-violet\/70{color:color-mix(in oklab, var(--color-violet) 70%, transparent)}}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.\[font-variant-numeric\:tabular-nums\]{font-variant-numeric:tabular-nums}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.opacity-85{opacity:.85}.opacity-\[0\.06\]{opacity:.06}.opacity-\[0\.78\]{opacity:.78}.mix-blend-overlay{mix-blend-mode:overlay}.shadow-\[0_0_8px_rgba\(139\,92\,246\,0\.45\)\]{--tw-shadow:0 0 8px var(--tw-shadow-color,#8b5cf673);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_24px_rgba\(139\,92\,246\,0\.35\)\]{--tw-shadow:0 0 24px var(--tw-shadow-color,#8b5cf659);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_2px_rgba\(109\,40\,217\,0\.08\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#6d28d914);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_2px_6px_rgba\(109\,40\,217\,0\.2\)\]{--tw-shadow:0 2px 6px var(--tw-shadow-color,#6d28d933);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_8px_30px_rgba\(109\,40\,217\,0\.06\)\]{--tw-shadow:0 8px 30px var(--tw-shadow-color,#6d28d90f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_10px_34px_rgba\(139\,92\,246\,0\.45\)\,inset_0_1px_0_rgba\(255\,255\,255\,0\.25\)\]{--tw-shadow:0 10px 34px var(--tw-shadow-color,#8b5cf673), inset 0 1px 0 var(--tw-shadow-color,#ffffff40);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_20px_60px_rgba\(109\,40\,217\,0\.15\)\]{--tw-shadow:0 20px 60px var(--tw-shadow-color,#6d28d926);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_24px_60px_rgba\(26\,15\,46\,0\.35\)\,0_4px_12px_rgba\(26\,15\,46\,0\.18\)\]{--tw-shadow:0 24px 60px var(--tw-shadow-color,#1a0f2e59), 0 4px 12px var(--tw-shadow-color,#1a0f2e2e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_24px_80px_rgba\(0\,0\,0\,0\.5\)\,0_0_60px_rgba\(139\,92\,246\,0\.22\)\]{--tw-shadow:0 24px 80px var(--tw-shadow-color,#00000080), 0 0 60px var(--tw-shadow-color,#8b5cf638);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-\[0_3px_6px_rgba\(26\,15\,46\,0\.3\)\]{--tw-drop-shadow-size:drop-shadow(0 3px 6px var(--tw-drop-shadow-color,#1a0f2e4d));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background\,color\]{transition-property:background,color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background\,transform\,opacity\]{transition-property:background,transform,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background\,transform\]{transition-property:background,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[background\]{transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,background\,box-shadow\]{transition-property:border-color,background,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[border-color\,box-shadow\]{transition-property:border-color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[opacity\,transform\]{transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[top\]{transition-property:top;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-\[120ms\]{--tw-duration:.12s;transition-duration:.12s}.duration-\[400ms\]{--tw-duration:.4s;transition-duration:.4s}.duration-\[600ms\]{--tw-duration:.6s;transition-duration:.6s}.ease-\[ease\]{--tw-ease:ease;transition-timing-function:ease}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.\[transition-timing-function\:cubic-bezier\(0\.22\,1\,0\.36\,1\)\]{transition-timing-function:cubic-bezier(.22,1,.36,1)}.select-none{-webkit-user-select:none;user-select:none}.\[--topbar-height\:40px\]{--topbar-height:40px}.\[image-rendering\:pixelated\]{image-rendering:pixelated}@media (hover:hover){.group-hover\:flex:is(:where(.group):hover *){display:flex}.group-hover\:translate-x-\[2px\]:is(:where(.group):hover *){--tw-translate-x:2px;translate:var(--tw-translate-x) var(--tw-translate-y)}}.placeholder\:text-ink-subtle::placeholder{color:var(--color-ink-subtle)}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-px:hover{--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-\[1\.08\]:hover{scale:1.08}.hover\:border-\[rgba\(0\,212\,255\,0\.7\)\]:hover{border-color:#00d4ffb3}.hover\:border-violet-strong:hover{border-color:var(--color-violet-strong)}.hover\:bg-violet-deep:hover{background-color:var(--color-violet-deep)}.hover\:bg-violet-medium:hover{background-color:var(--color-violet-medium)}.hover\:bg-violet-tint:hover{background-color:var(--color-violet-tint)}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:text-violet-deep:hover{color:var(--color-violet-deep)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-\[0_3px_12px_rgba\(139\,92\,246\,0\.3\)\]:hover{--tw-shadow:0 3px 12px var(--tw-shadow-color,#8b5cf64d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[0_4px_14px_rgba\(109\,40\,217\,0\.3\)\]:hover{--tw-shadow:0 4px 14px var(--tw-shadow-color,#6d28d94d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[0_14px_44px_rgba\(139\,92\,246\,0\.6\)\,0_0_0_4px_rgba\(0\,212\,255\,0\.12\)\]:hover{--tw-shadow:0 14px 44px var(--tw-shadow-color,#8b5cf699), 0 0 0 4px var(--tw-shadow-color,#00d4ff1f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:not-disabled\:-translate-y-px:hover:not(:disabled){--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:not-disabled\:border-violet:hover:not(:disabled){border-color:var(--color-violet)}.hover\:not-disabled\:bg-violet:hover:not(:disabled){background-color:var(--color-violet)}.hover\:not-disabled\:bg-violet-deep:hover:not(:disabled){background-color:var(--color-violet-deep)}.hover\:not-disabled\:text-cream:hover:not(:disabled){color:var(--color-cream)}.hover\:not-disabled\:text-violet:hover:not(:disabled){color:var(--color-violet)}.hover\:not-disabled\:shadow-\[0_3px_10px_rgba\(109\,40\,217\,0\.2\)\]:hover:not(:disabled){--tw-shadow:0 3px 10px var(--tw-shadow-color,#6d28d933);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:not-disabled\:shadow-\[0_5px_18px_rgba\(109\,40\,217\,0\.35\)\]:hover:not(:disabled){--tw-shadow:0 5px 18px var(--tw-shadow-color,#6d28d959);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:top-4:focus{top:calc(var(--spacing) * 4)}.focus-visible\:border-violet:focus-visible{border-color:var(--color-violet)}.focus-visible\:bg-white:focus-visible{background-color:var(--color-white)}.focus-visible\:\[box-shadow\:0_0_0_3px_rgba\(139\,92\,246\,0\.3\)\]:focus-visible{box-shadow:0 0 0 3px #8b5cf64d}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-offset-\[3px\]:focus-visible{outline-offset:3px}.focus-visible\:outline-violet:focus-visible{outline-color:var(--color-violet)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:scale-\[0\.96\]:active{scale:.96}.active\:border-violet:active{border-color:var(--color-violet)}.active\:bg-violet-tint:active{background-color:var(--color-violet-tint)}.active\:not-disabled\:scale-95:active:not(:disabled){--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-20:disabled{opacity:.2}.disabled\:opacity-25:disabled{opacity:.25}.disabled\:opacity-60:disabled{opacity:.6}@media not all and (width>=1279px){.max-\[1279px\]\:inline-block{display:inline-block}.max-\[1279px\]\:text-\[12px\]{font-size:12px}.max-\[1279px\]\:text-\[56px\]{font-size:56px}.max-\[1279px\]\:tracking-\[2px\]{--tw-tracking:2px;letter-spacing:2px}}@media not all and (width>=900px){.max-\[900px\]\:text-\[0\.72rem\]{font-size:.72rem}.max-\[900px\]\:text-\[0\.85rem\]{font-size:.85rem}.max-\[900px\]\:text-\[0\.95rem\]{font-size:.95rem}}@media (width>=40rem){.sm\:bottom-3{bottom:calc(var(--spacing) * 3)}.sm\:left-4{left:calc(var(--spacing) * 4)}.sm\:h-\[3\.25rem\]{height:3.25rem}.sm\:min-h-\[48px\]{min-height:48px}.sm\:gap-\[0\.5rem\]{gap:.5rem}.sm\:gap-\[0\.9rem\]{gap:.9rem}.sm\:gap-\[0\.45rem\]{gap:.45rem}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-2{padding-inline:calc(var(--spacing) * 2)}.sm\:pt-4{padding-top:calc(var(--spacing) * 4)}.sm\:pr-4{padding-right:calc(var(--spacing) * 4)}.sm\:pb-\[1\.1rem\]{padding-bottom:1.1rem}.sm\:pl-4{padding-left:calc(var(--spacing) * 4)}.sm\:text-\[0\.65rem\]{font-size:.65rem}.sm\:text-\[1rem\]{font-size:1rem}.sm\:tracking-\[0\.5px\]{--tw-tracking:.5px;letter-spacing:.5px}.sm\:\[--topbar-height\:36px\]{--topbar-height:36px}}@media (width>=48rem){.md\:self-start{align-self:flex-start}.md\:text-left{text-align:left}.md\:whitespace-nowrap{white-space:nowrap}}@media (orientation:portrait){.portrait\:hidden{display:none}}@media (orientation:landscape){.landscape\:block{display:block}.landscape\:grid{display:grid}.landscape\:h-\[700px\]{height:700px}.landscape\:w-\[1220px\]{width:1220px}.landscape\:flex-1{flex:1}.landscape\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.landscape\:grid-cols-\[1fr_2px_1fr\]{grid-template-columns:1fr 2px 1fr}.landscape\:grid-rows-\[1fr\]{grid-template-rows:1fr}}@media (height<=700px){.short\:py-1{padding-block:calc(var(--spacing) * 1)}.short\:py-2{padding-block:calc(var(--spacing) * 2)}.short\:pb-2{padding-bottom:calc(var(--spacing) * 2)}}}@font-face{font-family:NinjaKage;src:url(/fonts/NinjaKageDemo-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:NinjaKage;src:url(/fonts/NinjaKageDemo-Rough.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Savery;src:url(/fonts/Savery.woff2)format("woff2");font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/fonts/JetBrainsMono-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/fonts/JetBrainsMono-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/fonts/JetBrainsMono-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Kanji Watermark;src:url(/fonts/NotoSerifJP-kanji.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}:root{--cream:#f6f3f9;--violet:#8b5cf6;--violet-deep:#6d28d9;--cyan:#00d4ff;--ink:#1a0f2e;--ink-subtle:#1a0f2e99;--ink-faint:#1a0f2e1a;--violet-wash:#8b5cf608;--violet-subtle:#8b5cf60f;--violet-tint:#8b5cf614;--violet-soft:#8b5cf61f;--violet-medium:#8b5cf62e;--violet-strong:#8b5cf64d;--font-hero-headline:"Savery", "Clash Display", sans-serif;--display-word-spacing:.14em;--space-xl:2rem;--max-width:1400px;--width-content:1100px;--width-grid:1200px;--section-pad:clamp(5rem, 14svh, 9rem);--content-padding:3rem;--nav-height:6.875rem;--ease-fast:.15s ease;--ease-medium:.3s ease;--ease-slow:.6s cubic-bezier(.16, 1, .3, 1);--seal-size:2.5rem;--seal-size-sm:2rem;--seal-glow:drop-shadow(0 0 8px #00d4ff66)}@media (width<=1024px){:root{--nav-height:5.8125rem}}@media (width<=560px){:root{--nav-height:5.3125rem}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-snap-type: y proximity;
  /* Firefox: thin violet thumb on a cream track. */
  scrollbar-color: var(--violet) var(--cream);
  scrollbar-width: thin;
}

/* ---- Page scrollbar: the signal thread down the edge of the page ----
   Violet-to-deep pill thumb inset on the cream track; matches the
   console-body scrollbar convention in puzzle.css. */

::-webkit-scrollbar {
  width: 11px;
}
::-webkit-scrollbar-track {
  background: var(--cream);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--violet) 0%, var(--violet-deep) 100%);
  border-radius: 999px;
  border: 3px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--violet-deep);
}

.hero, .demo, .about, .approach, .services, .projects, .process, .connect {
  scroll-snap-align: start;
}

section[id] {
  scroll-margin-top: var(--nav-height);
}

/* ---- Section eyebrow: the one label primitive every section uses.
   Seal image + Clash Display small caps. `--ink` variant for dark sections. */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--violet-deep);
  margin-bottom: 1rem;
}

.section-eyebrow__seal {
  width: var(--seal-size);
  height: var(--seal-size);
  object-fit: contain;
  flex-shrink: 0;
  filter: var(--seal-glow);
  will-change: transform;
}

.section-eyebrow--ink {
  color: var(--cream);
}

@media (max-width: 900px) {
  .section-eyebrow__seal {
    width: var(--seal-size-sm);
    height: var(--seal-size-sm);
  }
}

/* ---- Reveal choreography ----
   Sections opt in with `.reveal` (via use_in_view) and mark children `.r`
   with an optional `--rd` stagger delay. Motion is opacity/transform only.
   The hidden state is gated on no-preference so reduced-motion users (and
   any observer failure path) always see content. */

@media (prefers-reduced-motion: no-preference) {
  .reveal .r {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--rd, 0ms);
  }
  .reveal.is-inview .r {
    opacity: 1;
    transform: none;
  }
}

/* ---- Section header primitive (see primitives/section_header.rs) ---- */

.s-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.s-header--center {
  align-items: center;
  text-align: center;
}

.s-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}

/* Clash Display ships with unusually narrow spaces. Keep the compact tracking
   while restoring a clear word boundary wherever it carries display copy. */
.s-header__title,
.about__lead,
.approach__headline,
.service-card__title,
.project-card__title,
.process__step-title,
.connect__title,
.font-display {
  word-spacing: var(--display-word-spacing);
}

/* The title's accent voice: the ronin's hand. One script, two inks. */
.s-header__title em {
  font-family: var(--font-signature);
  font-style: normal;
  font-weight: 400;
  color: var(--violet-deep);
}

.s-header__sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink-subtle);
  margin: 0.75rem 0 0;
}

.s-header--ink .s-header__title {
  color: var(--cream);
}
.s-header--ink .s-header__title em {
  color: var(--cyan);
}
.s-header--ink .s-header__sub {
  color: rgba(246, 243, 249, 0.62);
}

/* ---- Section rule: a thread gem on the border two cream sections share ---- */

.section-rule {
  position: relative;
  height: 0;
  z-index: 3;
}

.section-rule__gem {
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--cream);
  border: 1px solid var(--violet-medium);
}

.section-rule__gem::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--cyan);
  opacity: 0.7;
}

/* ---- Kanji watermark ---- */

.section-watermark {
  position: absolute;
  top: 50%;
  right: clamp(-2rem, -3vw, -1rem);
  transform: translateY(-50%);
  /* Subset webfont first: the CJK glyphs must never fall back to Latin serif. */
  font-family: 'Kanji Watermark', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-weight: 900;
  font-size: clamp(12rem, 32svh, 28rem);
  line-height: 0.9;
  color: var(--violet-deep);
  opacity: 0.05;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.02em;
  z-index: 0;
}

@media (max-width: 720px) {
  .section-watermark {
    font-size: clamp(8rem, 26svh, 14rem);
    right: -1rem;
    opacity: 0.04;
  }
}

.section-watermark--left {
  right: auto;
  left: clamp(-2rem, -3vw, -1rem);
}

/* On ink sections the violet-deep glyph vanishes; use a cream ghost. */
.section-watermark--ink {
  color: var(--cream);
  opacity: 0.04;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.nav{z-index:10;position:fixed;top:0;left:0;right:0}.nav__bar{z-index:2;padding:var(--space-xl) var(--content-padding);background:0 0;border-bottom:1px solid #0000;justify-content:space-between;align-items:center;gap:1.25rem;transition:background .2s,-webkit-backdrop-filter .2s,backdrop-filter .2s,border-color .2s;display:flex;position:relative}.nav__bar--scrolled,.nav__bar--menu-open{border-bottom-color:var(--ink-faint);background:#f6f3f9}@media (prefers-reduced-motion:reduce){.nav__bar{transition:none}}.nav__logo{font-family:var(--font-display);letter-spacing:3px;color:var(--violet-deep);font-size:1.2rem;font-weight:700}.nav__logo:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:.5rem}.nav__links{gap:1.5rem;display:flex}.nav__link{font-family:var(--font-body);letter-spacing:2px;text-transform:uppercase;color:var(--ink);transition:color var(--ease-fast);font-size:.8rem;font-weight:600;position:relative}.nav__link:hover,.nav__link--active{color:var(--violet-deep)}.nav__link--active:after{content:"";background:var(--violet-deep);border-radius:2px;width:16px;height:2px;position:absolute;bottom:-.5rem;left:50%;transform:translate(-50%)}.nav__link:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:2px}.nav__cta{background:var(--ink);color:var(--cream);font-family:var(--font-body);letter-spacing:1.5px;text-transform:uppercase;transition:background var(--ease-fast);border-radius:.5rem;padding:.8rem 1.6rem;font-size:.8rem;font-weight:600}.nav__cta:hover,.nav__cta--active{background:var(--violet-deep)}.nav__cta:focus-visible{outline:2px solid var(--violet);outline-offset:4px}.nav__hamburger{flex-direction:column;gap:5px;padding:14px 8px;display:none}.nav__hamburger span{background:var(--ink);width:24px;height:2px;transition:transform var(--ease-medium), opacity var(--ease-fast);transform-origin:50%}.nav__hamburger span.open:first-child{transform:translateY(7px)rotate(45deg)}.nav__hamburger span.open:nth-child(2){opacity:0}.nav__hamburger span.open:nth-child(3){transform:translateY(-7px)rotate(-45deg)}.nav__backdrop,.nav__drawer{display:none}@media (width<=1400px){.nav__links{gap:1rem}.nav__link{letter-spacing:1.5px;font-size:.72rem}}@media (width<=1024px){.nav__bar{padding:1.5rem var(--content-padding)}.nav__logo{font-size:1.05rem}.nav__links,.nav__cta{display:none}.nav__hamburger{display:flex}.nav__backdrop{opacity:0;pointer-events:none;transition:opacity var(--ease-medium);z-index:1;background:#1a0f2e59;display:block;position:fixed;inset:0}.nav__backdrop--visible{opacity:1;pointer-events:auto}.nav__drawer{background:var(--cream);border-left:1px solid var(--ink-faint);visibility:hidden;width:min(78vw,340px);height:100dvh;transition:transform var(--ease-slow), visibility 0s .6s;z-index:3;outline:none;flex-direction:column;justify-content:center;align-items:stretch;gap:.4rem;padding:4rem 2.25rem;display:flex;position:fixed;top:0;right:0;transform:translate(100%)}.nav__drawer-close{justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:absolute;top:1.5rem;right:1.5rem}.nav__drawer-close span{background:var(--ink);width:22px;height:2px;transition:background var(--ease-fast);border-radius:2px;position:absolute;top:50%;left:50%}.nav__drawer-close span:first-child{transform:translate(-50%,-50%)rotate(45deg)}.nav__drawer-close span:nth-child(2){transform:translate(-50%,-50%)rotate(-45deg)}.nav__drawer-close:hover span{background:var(--violet-deep)}.nav__drawer-close:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:4px}.nav__drawer--open{visibility:visible;transition:transform var(--ease-slow), visibility 0s;transform:translate(0)}.nav__menu-link{min-height:44px;font-family:var(--font-display);letter-spacing:2px;text-transform:uppercase;color:var(--ink);transition:color var(--ease-fast), background var(--ease-fast);border-radius:.6rem;align-items:center;padding:.55rem .9rem;font-size:1.45rem;font-weight:600;display:flex}.nav__menu-link:hover{color:var(--violet-deep)}.nav__menu-link:focus-visible{outline:2px solid var(--violet);outline-offset:2px}.nav__menu-link--active{color:var(--violet-deep);text-underline-offset:6px;text-decoration:underline 2px;text-decoration-color:var(--violet-deep)}}@media (width<=560px){.nav__bar{padding:1.25rem}.nav__logo{letter-spacing:2px;font-size:.85rem}}.pattern-container{z-index:0;position:absolute;inset:0;overflow:hidden}.pattern-layer{will-change:transform;background-image:url(/assets/topography-violet.svg);background-repeat:repeat;position:absolute;inset:-600px;transform:translate(0,0)}.pattern-layer--front{background-size:600px 600px;animation:120s linear infinite drift-down-right}.pattern-layer--back{opacity:.5;background-size:900px 900px;animation:180s linear infinite drift-up-left}@keyframes drift-down-right{0%{transform:translate(0,0)}to{transform:translate(600px,600px)}}@keyframes drift-up-left{0%{transform:translate(0,0)}to{transform:translate(-900px,-900px)}}.hero-headline {
  font-family: var(--font-hero-headline);
  font-synthesis: none;
  -webkit-text-stroke: 0.8px var(--cream);
}

.hero-headline--left {
  margin-left: clamp(0.5rem, 4.69vw, 3rem);
}

.hero-headline--right {
  justify-self: end;
  margin-right: clamp(1rem, 7.81vw, 5rem);
}

@media (max-width: 1279px) {
  .hero-headline {
    font-size: 107px;
    letter-spacing: 1px;
    text-align: left;
    -webkit-text-stroke: 0;
  }

  .hero-headline--left,
  .hero-headline--right {
    margin-left: 0;
    margin-right: 0;
    justify-self: unset;
  }
}
.hero-tagline__jp{font-family:var(--font-accent);font-size:clamp(.95rem,1.875vw,1.2rem)}.hero-tagline__quote{font-family:var(--font-accent);font-size:clamp(.72rem,1.33vw,.85rem)}.hero-tagline__quote:before,.hero-tagline__quote:after{content:"\""}@media (width<=1279px){.hero-tagline{text-align:left;align-items:flex-start;gap:6px}.hero-tagline__jp{margin:0;font-size:18px}.hero-tagline__quote{max-width:100%;font-size:12px}}.info-card {
  --arrow-size: 52px;
  --arrow-offset: 14px;
  --arrow-cx: calc(100% - 12px);
  --arrow-cy: 12px;
  --arrow-cut: 34px;

  position: relative;
  max-width: clamp(260px, 30vw, 340px);
  filter: drop-shadow(0 8px 24px rgba(109, 40, 217, 0.1));
}

.info-card__body {
  background: var(--cream);
  padding: 1.5rem 1.75rem;
  border-radius: 1.25rem;
  -webkit-mask: radial-gradient(
    circle var(--arrow-cut) at var(--arrow-cx) var(--arrow-cy),
    transparent calc(var(--arrow-cut) - 0.5px),
    #000 var(--arrow-cut)
  );
  mask: radial-gradient(
    circle var(--arrow-cut) at var(--arrow-cx) var(--arrow-cy),
    transparent calc(var(--arrow-cut) - 0.5px),
    #000 var(--arrow-cut)
  );
}


.info-card__arrow {
  position: absolute;
  top: calc(var(--arrow-offset) * -1);
  right: calc(var(--arrow-offset) * -1);
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  background: var(--violet);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(109, 40, 217, 0.25);
  text-decoration: none;
  transition: transform var(--ease-fast, 150ms ease);
}

.info-card__arrow:hover,
.info-card__arrow:focus-visible {
  transform: scale(1.05);
}

.info-card__arrow svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 640px) {
  .info-card {
    max-width: none;
  }

  .info-card__body {
    padding: 1.25rem;
  }

  .info-card__title {
    font-size: 1rem;
  }

  .info-card__description {
    font-size: 0.78rem;
  }

  .info-card__arrow {
    --arrow-size: 44px;
    --arrow-offset: 10px;
  }

  .info-card__arrow svg {
    width: 16px;
    height: 16px;
  }
}
/* Hero section, layout + positioning only.
   Typography and component-specific visuals live with each sub-component. */

.hero {
  position: relative;
  /* min-height is 1080px (the reference height), not 100svh, because
     the zoom below multiplies through. 1080px * zoom == 1080 * (vh/1080)
     == viewport height for zoom in the clamped range, so the Hero
     stays exactly viewport-sized. */
  height: 1080px;
  overflow: hidden;
  /* 1920×1080 is the reference. Everything inside the Hero scales
     together as one block, driven by whichever viewport dimension
     is the tighter constraint. Clamped 0.65-1.6. Mobile (≤1023)
     opts out — that tier has its own stack layout. */
  zoom: clamp(0.65, min(calc(100svh / 1080px), calc(100vw / 1920px)), 1.6);
}

@media (max-width: 1279px) {
  .hero {
    zoom: 1;
    min-height: 100svh;
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(245, 241, 232, 0.65) 0%,
    rgba(245, 241, 232, 0.2) 60%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(6px, 0.6svh, 10px);
  background: var(--violet-deep);
  z-index: 6;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* 1080px matches the .hero min-height. Zoom multiplies. */
  height: 1080px;
  min-height: 1080px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4.69vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1rem, 3.13vw, 2rem);
}

.hero__col {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
  row-gap: 0;
  text-align: left;
}

.hero__cursive-slot {
  grid-row: 1;
  align-self: end;
  justify-self: start;
  margin-left: -0.3rem;
  margin-bottom: -1.5rem;
  z-index: 3;
}

.hero__level-slot {
  grid-row: 1;
  align-self: end;
  justify-self: end;
  margin-right: clamp(1rem, 7.81vw, 5rem);
  margin-bottom: 0.75rem;
  z-index: 3;
}

.hero__col .hero__headline-slot {
  grid-row: 2;
  align-self: center;
}

.hero__tagline-slot {
  grid-row: 3;
  align-self: start;
  justify-self: end;
  margin-top: 1.25rem;
  /* Moderate inset from the viewport's right edge — the tagline
     sits in the right half but not glued to the edge. */
  margin-right: clamp(2rem, 7.81vw, 5rem);
  max-width: clamp(200px, 27.34vw, 280px);
}

.hero__ronin {
  position: absolute;
  bottom: 0;
  left: 49%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

/* Atmosphere bloom: bleeds the figure's violet palette into the cream
   field so the character belongs to the background rather than sitting
   on top of it. Centered on the upper torso (~30% from top of the 918px
   figure = ~275px offset from the element's top edge).
   z-index -1 keeps it strictly behind the img. */
.hero__ronin::before {
  content: '';
  position: absolute;
  /* Wide enough that the bloom extends well past the figure's shoulders. */
  width: 820px;
  height: 820px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(109, 40, 217, 0.13) 0%,
    rgba(139, 92, 246, 0.07) 35%,
    rgba(139, 92, 246, 0.02) 65%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* Ground shadow pool: gives the figure contact with the floor plane.
   A flat ellipse at the base whose x-radius is much wider than y-radius
   reads as a cast shadow on a horizontal surface. */
.hero__ronin::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(109, 40, 217, 0.18) 0%,
    rgba(109, 40, 217, 0.06) 55%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
}

.hero__ronin img,
.hero__ronin .hero__ronin-img {
  /* Fixed at the reference value (918px = 85% of 1080). The .hero's
     zoom is the ONLY scaler — it multiplies through for big screens
     and divides for small ones. */
  height: 918px;
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  display: block;
  filter:
    drop-shadow(0 20px 40px rgba(109, 40, 217, 0.35))
    drop-shadow(0 0 90px rgba(109, 40, 217, 0.12));
}

/* Stack the two ronin variants in the same slot. The "primary" is the
   default canonical (rifle). The "glitch" is the palette-matched bonsai
   alternate, normally hidden, briefly revealed during the glitch cycle. */
.hero__ronin .hero__ronin-img--glitch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

/* Glitch cycle: 14 seconds total.
     0    -> 89.5%   rifle clean, bonsai hidden
     90%  -> 91%     SWAP IN  — both images glitched (chromatic + jitter)
     91%  -> 96%     bonsai clean, rifle hidden
     96%  -> 97%     SWAP OUT — both images glitched (reverse direction)
     97%  -> 100%    rifle clean, bonsai hidden
   The chromatic split only fires DURING the swap, never on a single
   image alone. Reduced-motion users skip the cycle via the global rule
   in globals.css (animation-iteration-count: 1, near-zero duration),
   leaving the static primary with the glitch image at its base opacity 0. */
.hero__ronin .hero__ronin-img--primary {
  position: relative;
  animation: hero-glitch-primary 14s linear infinite;
}

.hero__ronin .hero__ronin-img--glitch {
  animation: hero-glitch-alternate 14s linear infinite;
}

/* Every keyframe uses the SAME filter function list so the chromatic
   drop-shadows interpolate smoothly to alpha 0 when clean, instead of
   being removed (which would force a paint pop). */
@keyframes hero-glitch-primary {
  0%, 89.5%, 91%, 95.5%, 97%, 100% {
    opacity: 1;
    transform: translate(0, 0);
    filter:
      drop-shadow(0 0 0 rgba(0, 212, 255, 0))
      drop-shadow(0 0 0 rgba(255, 0, 170, 0))
      drop-shadow(0 20px 40px rgba(109, 40, 217, 0.35))
      drop-shadow(0 0 90px rgba(109, 40, 217, 0.12));
  }
  /* SWAP IN: chromatic shift right + slight horizontal jitter. */
  90% {
    opacity: 0.5;
    transform: translate(-3px, 0);
    filter:
      drop-shadow(3px 0 0 rgba(0, 212, 255, 0.7))
      drop-shadow(-3px 0 0 rgba(255, 0, 170, 0.6))
      drop-shadow(0 20px 40px rgba(109, 40, 217, 0.35))
      drop-shadow(0 0 90px rgba(109, 40, 217, 0.12));
  }
  /* Mid-swap: rifle invisible during the bonsai hold. */
  91.01%, 95.49% {
    opacity: 0;
  }
  /* SWAP OUT: chromatic shift left as rifle returns. */
  96% {
    opacity: 0.5;
    transform: translate(2px, 0);
    filter:
      drop-shadow(-3px 0 0 rgba(0, 212, 255, 0.7))
      drop-shadow(3px 0 0 rgba(255, 0, 170, 0.6))
      drop-shadow(0 20px 40px rgba(109, 40, 217, 0.35))
      drop-shadow(0 0 90px rgba(109, 40, 217, 0.12));
  }
}

@keyframes hero-glitch-alternate {
  0%, 89.5%, 91%, 95.5%, 97%, 100% {
    opacity: 0;
    transform: translateX(-50%) translate(0, 0);
    filter:
      drop-shadow(0 0 0 rgba(0, 212, 255, 0))
      drop-shadow(0 0 0 rgba(255, 0, 170, 0))
      drop-shadow(0 20px 40px rgba(109, 40, 217, 0.35))
      drop-shadow(0 0 90px rgba(109, 40, 217, 0.12));
  }
  /* SWAP IN: bonsai chromatic flicker as it arrives. */
  90% {
    opacity: 0.5;
    transform: translateX(-50%) translate(3px, 0);
    filter:
      drop-shadow(-3px 0 0 rgba(0, 212, 255, 0.6))
      drop-shadow(3px 0 0 rgba(255, 0, 170, 0.5))
      drop-shadow(0 20px 40px rgba(109, 40, 217, 0.35))
      drop-shadow(0 0 90px rgba(109, 40, 217, 0.12));
  }
  /* Bonsai clean and visible during the hold. */
  91.01%, 95.49% {
    opacity: 1;
  }
  /* SWAP OUT: bonsai chromatic flicker as it leaves. */
  96% {
    opacity: 0.5;
    transform: translateX(-50%) translate(-2px, 0);
    filter:
      drop-shadow(3px 0 0 rgba(0, 212, 255, 0.6))
      drop-shadow(-3px 0 0 rgba(255, 0, 170, 0.5))
      drop-shadow(0 20px 40px rgba(109, 40, 217, 0.35))
      drop-shadow(0 0 90px rgba(109, 40, 217, 0.12));
  }
}

.hero__info-card {
  position: absolute;
  bottom: clamp(1rem, 4.69vw, 3rem);
  left: clamp(1rem, 4.69vw, 3rem);
  z-index: 5;
}

/* ---------- MOBILE & TABLET (≤ 1023px) ----------
   Two-zone composition: the ronin occupies the lower half of the viewport
   as an absolute-positioned anchor, and the typography stacks in the upper
   half with the figure's torso overlapping into the headline zone.

   This mirrors what makes the desktop work: figure and type share the same
   spatial plane rather than stacking sequentially.

   Visual layers (back→front):
     z-index 0: PatternBackground (topography tiling)
     z-index 1: hero::before (center-fade cream overlay)
     z-index 2: hero__ronin::before (atmosphere bloom)
     z-index 3: hero__ronin + img (the figure)
     z-index 4: typography (DEV/OPS/cursive/tagline/badge)
     z-index 5: hero__info-card
     z-index 6: hero::after (6px violet section separator, at bottom)

   Flex order for the non-absolute elements:
     1. LVL badge (top-right of the type zone)
     2. DEV headline
     3. OPS headline (tight under DEV, line-height collapse)
     4. Hedi cursive signature
     5. Tagline (JP + quote)
   The ronin is absolute, so it does not participate in flex order. */
@media (max-width: 1279px) {
  /* Mobile uses the same proportional-scaling technique as desktop:
     the entire Hero composition is sized at a fixed 467×823 reference
     (the layout the user approved) and `zoom` scales the whole block
     to fit any viewport. Every internal value is FIXED in px so the
     ratio between elements never changes — zoom is the only scaler. */
  .hero {
    min-height: 823px;
    height: 823px;
    zoom: clamp(0.55, min(calc(100svh / 823px), calc(100vw / 467px)), 1.6);
  }

  .hero::before {
    display: none;
  }

  .hero__ronin::before {
    display: none;
  }

  .hero__content {
    height: 823px;
    min-height: 823px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding-top: 346px;
    padding-bottom: 181px;
    padding-inline: 24px;
    gap: 0;
    /* Width locked to the reference (467px) and centered. This keeps
       the headlines, ronin, tagline and info-card in the same relative
       positions to each other regardless of viewport width — only zoom
       on .hero scales the whole block. */
    width: 467px;
    max-width: 467px;
    margin: 0 auto;
    position: relative;
  }

  /* Dissolve grid columns — all children become direct flex items. */
  .hero__col {
    display: contents;
  }

  /* ---- Ronin: absolute, CENTERED horizontally ---- */
  .hero__ronin {
    position: absolute;
    top: 41px;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    order: unset;
    width: auto;
  }

  /* White silhouette backdrop: the same ronin PNG painted as a
     background-image, then filtered to pure white. It sits directly
     behind the colored img and matches the figure's exact alpha shape.
     The same gradient mask as the colored img applies here too, so the
     white silhouette fades along with the figure at the lower body —
     producing a clean vanish into the cream background. */
  .hero__ronin::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
    background: url('/assets/hero-canonical-cut.webp') center/contain no-repeat;
    filter: brightness(0) invert(1);
    z-index: 0;
    pointer-events: none;
    /* Softer fade than the colored img above — the white silhouette
       persists longer so a faint white "ghost" of the figure remains
       visible at the bottom even after the colored img has fully
       vanished. The figure dissolves but its outline whispers. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 70%,
      rgba(0, 0, 0, 0.85) 85%,
      rgba(0, 0, 0, 0.45) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 70%,
      rgba(0, 0, 0, 0.85) 85%,
      rgba(0, 0, 0, 0.45) 100%
    );
  }

  /* No ::after overlay — the white silhouette ::before catches the fade. */
  .hero__ronin::after {
    display: none;
  }

  .hero__ronin img {
    width: 411px;
    height: auto;
    max-height: 642px;
    max-width: none;
    position: relative;
    z-index: 1;
    /* Mask the colored img so the lower body fades to transparent.
       The white silhouette backdrop (::before above) shows through the
       fade, so the figure appears to vanish into the cream — topography
       behind never bleeds through the figure's shape. */
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 62%,
      rgba(0, 0, 0, 0.55) 80%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 62%,
      rgba(0, 0, 0, 0.55) 80%,
      transparent 100%
    );
    filter: drop-shadow(0 12px 24px rgba(109, 40, 217, 0.22));
  }

  /* Stack order from the reference layout:
       1. Hedi cursive — LEFT-aligned signature, overlapping DEV's top
       2. DEV — LEFT-aligned headline, overlapping figure's left side
       3. LVL 07+ — small label positioned above-right of OPS (mid-right)
       4. OPS — CENTERED headline, overlapping figure's lower body
       5. Tagline (JP + quote) — LEFT-aligned below
     Each headline has a soft white glow halo so the text reads cleanly
     against the figure behind it. */

  /* ---- Hedi cursive: order 1, LEFT, signature overlapping DEV's top ---- */
  .hero__cursive-slot {
    order: 1;
    align-self: flex-start;
    justify-self: unset;
    position: relative;
    margin: 0 0 -17px 9px;
    z-index: 5;
  }

  /* ---- DEV: order 2, LEFT-aligned, in front of figure ---- */
  .hero__col--left .hero__headline-slot {
    order: 2;
    align-self: flex-start;
    justify-self: unset;
    margin: 0;
    z-index: 4;
    position: relative;
  }

  /* ---- LVL badge: order 3, positioned mid-right above OPS ---- */
  .hero__level-slot {
    position: relative;
    top: auto;
    right: auto;
    order: 3;
    align-self: center;
    justify-self: unset;
    margin: 10px 0 4px 140px;
    z-index: 4;
  }

  /* ---- OPS: order 4, CENTERED, in front of figure ---- */
  .hero__col--right .hero__headline-slot {
    order: 4;
    align-self: center;
    justify-self: unset;
    margin: 0;
    z-index: 4;
    position: relative;
  }

  /* Wide diffuse white smoke around DEV/OPS — the dominant headlines
     get the strongest halo so they read cleanly against the figure. */
  .hero__col--left .hero__headline-slot,
  .hero__col--right .hero__headline-slot {
    text-shadow:
      0 0 28px rgba(246, 243, 249, 1),
      0 0 56px rgba(246, 243, 249, 0.88),
      0 0 96px rgba(246, 243, 249, 0.62),
      0 0 140px rgba(246, 243, 249, 0.35);
  }

  /* Hedi cursive + LVL get NO halo — only DEV/OPS carry the smoke
     effect, so there is zero halo bleed from Hedi onto DEV. */
  .hero__cursive-slot,
  .hero__level-slot {
    text-shadow: none;
  }


  /* ---- Tagline: order 5, container CENTERED horizontally, text inside
     stays LEFT-aligned. ---- */
  .hero__tagline-slot {
    order: 5;
    width: auto;
    max-width: 360px;
    margin: 8px 0 0;
    align-self: center;
    justify-self: unset;
    z-index: 4;
    position: relative;
  }

  /* InfoCard locked to the same 467 reference box as the rest of the
     composition, centered horizontally. */
  .hero__info-card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 25px;
    width: 419px;
    max-width: 419px;
  }
}

/* Off-screen (toggled by the observer in hero_section.rs): freeze the glitch
   cycle and the pattern drift — invisible work, and through a translucent
   surface the cycle reads as navbar flicker. Resumes on the same frame. */
.hero[data-offscreen="true"] .hero__ronin-img--primary,
.hero[data-offscreen="true"] .hero__ronin-img--glitch,
.hero[data-offscreen="true"] .pattern-layer--front,
.hero[data-offscreen="true"] .pattern-layer--back {
  animation-play-state: paused;
}
.demo{width:100%;min-height:calc(100svh - var(--nav-height));background:linear-gradient(#1a0f2eed, #1a0f2eed), url(/assets/circuit-board-violet.svg) var(--ink) repeat;isolation:isolate;--vkb-height:0px;background-size:auto,304px 304px;position:relative;overflow:hidden}@media (hover:none) and (pointer:coarse){.demo{--vkb-height:290px}}@media (hover:none) and (pointer:coarse) and (width>=700px){.demo{--vkb-height:320px}}.demo:after{content:"";background:var(--violet-deep);z-index:6;pointer-events:none;height:6px;position:absolute;bottom:0;left:0;right:0}.demo__intro-seal{animation:24s linear infinite demo-shuriken-turn}@keyframes demo-shuriken-turn{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.demo__intro-seal{animation:none}}.demo__foreground{z-index:5;min-height:calc(100svh - var(--nav-height));pointer-events:none;justify-content:center;align-items:center;padding:clamp(5rem,10svh,6rem) clamp(1rem,4vw,3rem);display:flex;position:relative}.demo__composition{max-width:var(--width-content);grid-template-columns:1fr;place-items:center;gap:clamp(2rem,5vw,4rem);width:100%;transition:opacity .6s,transform .6s;display:grid;position:relative}.demo__composition:before,.demo__composition:after{content:"";opacity:.45;pointer-events:none;width:28px;height:28px;position:absolute}.demo__composition:before{border-top:1px solid var(--cyan);border-left:1px solid var(--cyan);top:-22px;left:-22px}.demo__composition:after{border-bottom:1px solid var(--cyan);border-right:1px solid var(--cyan);bottom:-22px;right:-22px}.demo__composition--hidden{opacity:0;pointer-events:none;transform:scale(.96)}@media (width>=900px){.demo__composition{grid-template-columns:minmax(0,1fr) min(400px,45vw);place-items:center start}}@media (width<=900px){.demo__composition{height:auto;min-height:100%;padding-bottom:env(safe-area-inset-bottom,0);grid-template-rows:minmax(min-content,1fr) minmax(min-content,1fr);place-items:center;gap:clamp(1.5rem,5svh,3rem)}.demo__intro,.auth-terminal{transition:transform 2.2s cubic-bezier(.76,0,.24,1),opacity .6s}.auth-terminal{margin-top:clamp(1rem,4svh,2.5rem)}.demo__composition--hidden{opacity:1;transform:none}.demo__composition--hidden .demo__intro{transform:translateY(-100svh)}.demo__composition--hidden .auth-terminal{transform:translateY(100svh)}}@media (prefers-reduced-motion:reduce){.demo__composition,.demo__intro,.auth-terminal{transition:none}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.auth-terminal__capsule-shimmer{background:linear-gradient(90deg,#0000 0%,#fff0 35%,#ffffff8c 50%,#fff0 65%,#0000 100%);animation:1.8s ease-in-out infinite auth-terminal-shimmer;transform:translate(-100%)}@keyframes auth-terminal-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media (prefers-reduced-motion:reduce){.auth-terminal__capsule-shimmer{opacity:0;animation:none}}@media (width<=900px){.auth-terminal--hidden{opacity:1;transform:translateY(100svh)}}.door-mechanism__panel{background:linear-gradient(#1a0f2ee0, #1a0f2ee0), url(/assets/topography-violet.svg) var(--ink) repeat;pointer-events:auto;background-size:auto,600px 600px;transition:transform 2.2s cubic-bezier(.76,0,.24,1)}.door-mechanism__panel--left{border-right:1px solid #8b5cf659;box-shadow:10px 0 30px #00000059}.door-mechanism__panel--right{border-left:1px solid #8b5cf659;box-shadow:-10px 0 30px #00000059}.door-mechanism--open .door-mechanism__panel--left{transform:translate(-100%)}.door-mechanism--open .door-mechanism__panel--right{transform:translate(100%)}.door-mechanism--open .door-mechanism__panel{pointer-events:none}.door-mechanism__kanji{letter-spacing:-.05em;color:var(--cream);opacity:.05;user-select:none;white-space:nowrap;font-family:Kanji Watermark,Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(18rem,40svh,32rem);font-weight:900;line-height:1;position:absolute;top:50%;transform:translateY(-50%)}.door-mechanism__panel--left .door-mechanism__kanji{right:1rem}.door-mechanism__panel--right .door-mechanism__kanji{left:1rem}@media (width<=900px){.door-mechanism{flex-direction:column}.door-mechanism__panel{width:100%;height:50%}.door-mechanism__panel--left{border-bottom:1px solid #6d28d933;border-right:none;box-shadow:0 10px 30px #6d28d90d}.door-mechanism__panel--right{border-top:1px solid #6d28d933;border-left:none;box-shadow:0 -10px 30px #6d28d90d}.door-mechanism--open .door-mechanism__panel--left{transform:translateY(-100%)}.door-mechanism--open .door-mechanism__panel--right{transform:translateY(100%)}.door-mechanism__kanji{font-size:clamp(10rem,30svh,18rem)}.door-mechanism__panel--left .door-mechanism__kanji,.door-mechanism__panel--right .door-mechanism__kanji{left:50%;right:auto;transform:translate(-50%,-50%)}}@media (prefers-reduced-motion:reduce){.door-mechanism__panel{transition:none}}.demo-stage{top:clamp(.75rem,2svh,1.5rem);left:clamp(1rem,4vw,3rem);right:clamp(1rem,4vw,3rem);bottom:calc(clamp(.75rem, 2svh, 1.5rem) + var(--vkb-height,0px));z-index:1;filter:drop-shadow(0 22px 50px #6d28d938)drop-shadow(0 2px 8px #1a0f2e14);position:absolute}.countdown--pulse{animation:1s ease-in-out infinite countdownPulse}@keyframes countdownPulse{0%,to{opacity:1}50%{opacity:.5}}@media (prefers-reduced-motion:reduce){.countdown--pulse{animation:none}}/* ============================================================
   DesktopWelcome — keyframe entry animations + backdrop-blur
   Layout/spacing/color/typography live in the view! macro.
   backdrop-filter is kept here because the Tailwind utility
   only applies blur but not the vendor-prefixed -webkit- form
   that Safari requires. Keyframes and reduced-motion stay here.
   ============================================================ */

.desktop-welcome {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: desktop-welcome-fade-in 220ms ease-out;
}

.desktop-welcome__panel {
  animation: desktop-welcome-rise 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes desktop-welcome-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes desktop-welcome-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-welcome,
  .desktop-welcome__panel {
    animation: none;
  }
}
.vnc-overlay{background:radial-gradient(circle at 50% 50%, #8b5cf638 0%, transparent 55%), linear-gradient(180deg, var(--ink) 0%, #0a0612 100%);z-index:2;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.vnc-overlay__scanlines{pointer-events:none;opacity:.7;background-image:repeating-linear-gradient(0deg,#0000 0 2px,#8b5cf60d 2px 3px);position:absolute;inset:0}.vnc-overlay__content{text-align:center;flex-direction:column;align-items:center;gap:1rem;max-width:min(560px,80%);padding:2rem;display:flex;position:relative}.vnc-overlay__headline{letter-spacing:4px;text-transform:uppercase;color:var(--violet);text-shadow:0 0 12px #8b5cf699;margin:0;font-family:ui-monospace,JetBrains Mono,Courier New,monospace;font-size:1rem;font-weight:600}.vnc-overlay__headline--error{color:var(--cream);text-shadow:0 0 10px #8b5cf68c}.vnc-overlay__subline{letter-spacing:2px;color:#f6f3f9a6;max-width:40ch;margin:0;font-family:ui-monospace,JetBrains Mono,Courier New,monospace;font-size:.78rem;line-height:1.5}.vnc-overlay__pulse{gap:.45rem;margin-bottom:.25rem;display:inline-flex}.vnc-overlay__pulse span{background:var(--cream);border-radius:50%;width:.7rem;height:.7rem;animation:1.4s ease-in-out infinite vnc-overlay-pulse;box-shadow:0 0 8px #f6f3f9f2,0 0 18px #f6f3f98c}.vnc-overlay__pulse span:nth-child(2){animation-delay:.2s}.vnc-overlay__pulse span:nth-child(3){animation-delay:.4s}@keyframes vnc-overlay-pulse{0%,80%,to{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}.vnc-overlay__icon{width:3rem;height:3rem;color:var(--violet);filter:drop-shadow(0 0 10px #8b5cf68c);justify-content:center;align-items:center;display:inline-flex}.vnc-overlay__icon svg{width:100%;height:100%}.vnc-overlay__icon--error{color:var(--cream);filter:drop-shadow(0 0 10px #8b5cf699)}@media (prefers-reduced-motion:reduce){.vnc-overlay__pulse span{opacity:.75;animation:none;transform:none}}.vnc-placeholder{background:radial-gradient(ellipse at 50% 55%, #6d28d933 0%, #1a0f2e00 55%), var(--ink);box-shadow:inset 0 2px 4px #00000073,inset 2px 0 4px #00000059,inset 0 -1px #8b5cf614,inset -1px 0 #8b5cf614}.vnc-desktop{width:100%;height:100%;position:relative}.vnc-desktop__canvas{width:100%;height:100%}.vnc-desktop__canvas>div{background:var(--ink)!important}.vkb__key{transition:transform .12s,background-color .12s,border-color .12s}.vkb__key--armed{background:var(--violet-deep);border-color:var(--violet);color:#fff;box-shadow:0 0 0 1px var(--violet), 0 0 14px #8b5cf666}.demo__keyboard{z-index:6;justify-content:center;padding:0 1rem;animation:.26s cubic-bezier(.22,1,.36,1) both demo-keyboard-in;display:flex;position:absolute;bottom:.5rem;left:0;right:0}@keyframes demo-keyboard-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}.vkb{pointer-events:auto;box-shadow:0 20px 60px #6d28d926}@media (prefers-reduced-motion:reduce){.demo__keyboard{animation:none}.vkb__key{transition:none}.vkb__key:active{transform:none}}.about{isolation:isolate;background:var(--cream);padding:var(--section-pad) var(--content-padding);border-top:1px solid var(--ink-faint);border-bottom:1px solid var(--ink-faint);position:relative;overflow:hidden}.about:before{content:"";z-index:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.about__inner{z-index:2;max-width:var(--width-content);text-align:center;flex-direction:column;align-items:center;margin:0 auto;display:flex;position:relative}.about .section-watermark{top:16%;transform:none}.about__branch{user-select:none;pointer-events:none;z-index:1;height:auto;position:absolute}.about__branch--left{transform-origin:0;will-change:transform;width:clamp(18rem,30vw,36rem);animation:6.2s ease-in-out infinite about-wind-left;top:50%;left:-2rem;transform:translateY(-50%)}.about__branch--left-back{transform-origin:0;opacity:.75;z-index:0;will-change:transform;width:clamp(14rem,24vw,28rem);animation:7.4s ease-in-out infinite about-wind-left-back;top:50%;left:-2rem;transform:translateY(-50%)rotate(-18deg)}.about__branch--right{transform-origin:100%;will-change:transform;width:clamp(18rem,30vw,36rem);animation:6.8s ease-in-out infinite about-wind-right;top:50%;right:-2rem;transform:translateY(-50%)}.about__branch--right-back{transform-origin:100%;opacity:.75;z-index:0;will-change:transform;width:clamp(18rem,30vw,36rem);animation:8s ease-in-out infinite about-wind-right-back;top:50%;right:-2rem;transform:translateY(-50%)rotate(18deg)}@media (width<=900px){.about__branch{animation:none;display:none}}.about__eyebrow{text-shadow:0 0 6px var(--cream), 0 0 12px var(--cream), 0 0 18px var(--cream);margin:0 0 2rem}.about__seal{animation:6s ease-in-out infinite about-seal-float}.about__lead{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);max-width:22ch;text-shadow:0 0 10px var(--cream), 0 0 24px var(--cream);margin:0 0 2rem;font-size:clamp(2rem,4.2vw,3.4rem);font-weight:700;line-height:1.15}.about__lead em{color:var(--violet-deep);font-style:normal;position:relative}.about__lead em:after{content:"";background:var(--cyan);opacity:.85;border-radius:1px;height:.08em;position:absolute;bottom:.08em;left:0;right:0}@media (width<=900px){.about{padding:4.5rem 1.5rem}.about__lead{font-size:clamp(1.6rem,6.5vw,2.4rem)}}@keyframes about-wind-left{0%,to{transform:translateY(-50%)rotate(0)}50%{transform:translateY(-50%)rotate(1.4deg)}}@keyframes about-wind-left-back{0%,to{transform:translateY(-50%)rotate(-18deg)}50%{transform:translateY(-50%)rotate(-16.6deg)}}@keyframes about-wind-right{0%,to{transform:translateY(-50%)rotate(0)}50%{transform:translateY(-50%)rotate(-1.4deg)}}@keyframes about-wind-right-back{0%,to{transform:translateY(-50%)rotate(18deg)}50%{transform:translateY(-50%)rotate(16.6deg)}}@keyframes about-seal-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.about__branch,.about__seal{animation:none}}/* ============================================================
   approach.css - the Approach section (id="approach").
   Four numbered operating principles, editorial rows on cream,
   gear seal, faint ambient grid, kanji watermark.
   ============================================================ */

.approach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream);
  padding: var(--section-pad) var(--content-padding);
  border-bottom: 1px solid var(--ink-faint);
}

/* Faint blueprint grid so the section reads as a working document. */
.approach::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--violet-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--violet-subtle) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000 0%, transparent 100%);
          mask-image: radial-gradient(75% 65% at 50% 42%, #000 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.approach__inner {
  position: relative;
  z-index: 1;
  max-width: var(--width-content);
  margin: 0 auto;
}

.approach__seal {
  animation: approach-gear-rock 14s ease-in-out infinite;
}

.approach__script {
  font-family: var(--font-signature);
  font-style: normal;
  font-weight: 400;
  color: var(--violet-deep);
}

.approach__accent {
  color: var(--violet-deep);
  position: relative;
}
.approach__accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.08em;
  background: var(--cyan);
  border-radius: 1px;
  opacity: 0.85;
}

/* ---- Principle rows ---- */

.approach__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

.approach__row {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.approach__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.9;
  color: var(--violet);
  opacity: 0.28;
  letter-spacing: -0.02em;
}

.approach__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.approach__body {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink-subtle);
  max-width: 58ch;
  margin: 0;
}

@keyframes approach-gear-rock {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(6deg); }
  75%      { transform: rotate(-6deg); }
}

@media (max-width: 900px) {
  .approach {
    padding: 4.5rem clamp(1rem, 4vw, 3rem);
  }
  .approach__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .approach__num {
    font-size: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approach__seal {
    animation: none;
  }
}

.services{isolation:isolate;background:linear-gradient(#1a0f2ef0, #1a0f2ef0), url(/assets/circuit-board-violet.svg) var(--ink) repeat;color:var(--cream);padding:var(--section-pad) var(--content-padding);background-size:auto,304px 304px;position:relative;overflow:hidden}.services:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(#8b5cf624 0%,#0000 60%);width:90%;height:100%;position:absolute;bottom:-30%;left:50%;transform:translate(-50%)}.services:after{content:"";background:var(--violet-deep);pointer-events:none;height:6px;position:absolute;bottom:0;left:0;right:0}.services__inner{z-index:1;max-width:var(--width-grid);margin:0 auto;position:relative}.services__seal{transform-origin:top;animation:7s ease-in-out infinite services-seal-sway}.services__grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;display:grid}.service-card{background:#f6f3f908;border:1px solid #f6f3f91a;border-radius:4px;flex-direction:column;gap:.9rem;min-height:380px;padding:2rem;transition:transform .22s cubic-bezier(.2,0,0,1),border-color .22s,background .22s;display:flex}.service-card:hover{border-color:var(--violet);background:#f6f3f90d;transform:translateY(-8px);box-shadow:0 14px 44px -12px #6d28d947}.service-card__crate{will-change:transform;width:min(180px,60%);margin:0 auto .5rem;animation:4s ease-in-out infinite service-crate-float;position:relative}.service-card__crate:before{content:"";background:radial-gradient(circle,#8b5cf652 0%,#00d4ff14 55%,#0000 72%);border-radius:50%;position:absolute;inset:-12%}.service-card:nth-child(2) .service-card__crate{animation-delay:-1.3s}.service-card:nth-child(3) .service-card__crate{animation-delay:-2.6s}.service-card__crate img{object-fit:contain;filter:drop-shadow(0 6px 18px #00000073);width:100%;height:180px;transition:transform .22s;display:block;position:relative}.service-card:hover .service-card__crate img{transform:scale(1.06)}.service-card__num{font-family:var(--font-display);color:var(--violet);opacity:.35;letter-spacing:-.02em;font-size:2.5rem;font-weight:700;line-height:1}.service-card__title{font-family:var(--font-display);letter-spacing:-.01em;color:var(--cream);align-self:flex-start;margin:0;font-size:1.5rem;font-weight:700;line-height:1.15;position:relative}.service-card__title:after{content:"";background:linear-gradient(90deg, var(--violet) 0%, var(--cyan) 100%);transform-origin:0;height:1px;transition:transform .42s cubic-bezier(.16,1,.3,1);position:absolute;bottom:-6px;left:0;right:0;transform:scaleX(0)}.service-card:hover .service-card__title:after{transform:scaleX(1)}.service-card__desc{font-family:var(--font-body);color:#f6f3f9a8;flex-grow:1;margin:0;font-size:.92rem;line-height:1.6}.service-card__tags{flex-wrap:wrap;gap:.4rem;display:flex}.service-card__tag{font-family:var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--cream);background:#f6f3f90f;border:1px solid #f6f3f924;padding:.28rem .6rem;font-size:.72rem;font-weight:600}@keyframes services-seal-sway{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes service-crate-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media (width<=1023px){.services__grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.services{padding:4.5rem clamp(1rem,4vw,3rem)}.services__grid{grid-template-columns:1fr;gap:1rem}.service-card{min-height:auto;padding:1.5rem}}@media (prefers-reduced-motion:reduce){.services__seal,.service-card__crate{animation:none}.service-card__title:after{transition:none}}.projects{isolation:isolate;background:var(--cream);padding:var(--section-pad) var(--content-padding);border-bottom:1px solid var(--ink-faint);position:relative;overflow:hidden}.projects__inner{z-index:1;max-width:var(--width-grid);margin:0 auto;position:relative}.projects__seal{animation:5s ease-in-out infinite projects-seal-float}.projects__grid{grid-template-columns:repeat(2,1fr);gap:1.25rem;display:grid}.projects__grid--loaded>.project-card:last-child:nth-child(2n){grid-column:1/-1}.project-card{background:linear-gradient(135deg, var(--violet-subtle) 0%, transparent 45%), var(--color-cream-dark);border:1px solid var(--ink-faint);min-height:250px;color:var(--ink);border-radius:4px;flex-direction:column;gap:1rem;padding:2rem;text-decoration:none;transition:transform .22s cubic-bezier(.2,0,0,1),border-color .22s,box-shadow .22s;display:flex;position:relative;box-shadow:inset 0 1px #ffffff80}a.project-card:hover,a.project-card:focus-visible{border-color:var(--violet);transform:translateY(-8px);box-shadow:0 14px 44px -12px #6d28d947}a.project-card:focus-visible{outline:2px solid var(--violet);outline-offset:4px}.project-card--wide{background:var(--ink);min-height:380px;color:var(--cream);border-color:#0000;grid-column:1/-1;position:relative;overflow:hidden}.project-card--wide>:not(.project-card__scene):not(.project-card__scrim){z-index:1;position:relative}.project-card__scene{z-index:0;will-change:transform;background-position:50%;background-size:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1);position:absolute;inset:0;transform:scale(1.001)}.project-card__scrim{z-index:0;background:linear-gradient(115deg,#1a0f2ee6 0%,#1a0f2e80 55%,#1a0f2e4d 100%),linear-gradient(#0000 50%,#1a0f2ed1 100%);position:absolute;inset:0}a.project-card--wide:hover .project-card__scene,a.project-card--wide:focus-visible .project-card__scene{transform:scale(1.045)}.project-card--wide .project-card__top{margin-bottom:auto}.project-card--wide .project-card__body{flex-grow:0}.project-card--wide .project-card__status{color:var(--cyan);background:#00d4ff1f}.project-card--wide .project-card__title{color:var(--cream);font-size:clamp(2.1rem,5vw,3.3rem)}.project-card--wide .project-card__tagline{color:#f6f3f9c7}.project-card--wide .project-card__tag{color:var(--cream);background:#f6f3f914;border-color:#f6f3f929}.project-card--static{cursor:default}.project-card--more{background:linear-gradient(135deg, var(--violet-wash) 0%, transparent 50%), var(--cream);border-style:dashed;justify-content:flex-start;gap:.9rem;padding-top:3rem}.more-card__prompt{color:var(--violet-deep);font-family:var(--font-mono);align-items:center;gap:2px;margin:0;font-size:1rem;font-weight:500;display:flex}.more-card__cursor{background:var(--cyan);width:9px;height:1.15em;animation:1.1s steps(2,start) infinite more-cursor-blink;display:inline-block}.project-card__top{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.project-card__status{font-family:var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--violet-deep);background:var(--violet-tint);border-radius:999px;padding:.3rem .7rem;font-size:.72rem;font-weight:600}.project-card__open{color:var(--violet-deep);opacity:.5;transition:opacity var(--ease-fast), transform var(--ease-fast);display:inline-flex}.project-card__open svg{width:18px;height:18px;display:block}.project-card--wide .project-card__open{color:var(--cyan);opacity:.85}a.project-card:hover .project-card__open,a.project-card:focus-visible .project-card__open{opacity:1;transform:translate(2px,-2px)}.project-card__body{flex-grow:1}.project-card__title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0 0 .4rem;font-size:1.7rem;font-weight:700;line-height:1.08}.project-card__tagline{font-family:var(--font-body);color:var(--ink-subtle);margin:0;font-size:.95rem;line-height:1.55}.project-card--wide .project-card__tagline{max-width:46ch;font-size:1.05rem}.project-card__tags{flex-wrap:wrap;gap:.4rem;display:flex}.project-card__tag{font-family:var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--cream);border:1px solid var(--ink-faint);padding:.28rem .6rem;font-size:.72rem;font-weight:600}.project-card--skeleton{pointer-events:none;justify-content:flex-start;gap:1rem}.project-skeleton{background:var(--violet-subtle);border-radius:4px;display:block;position:relative;overflow:hidden}.project-skeleton:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--violet-tint) 50%, transparent 100%);will-change:transform;animation:1.4s ease-in-out infinite project-shimmer;position:absolute;inset:0;transform:translate(-100%)}.project-skeleton--pill{width:30%;height:1.2rem}.project-skeleton--title{width:65%;height:1.7rem}.project-skeleton--title.is-wide{width:45%;height:2.4rem}.project-skeleton--line{width:100%;height:.85rem}.project-skeleton--line.is-short{width:55%}@keyframes projects-seal-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes project-shimmer{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes more-cursor-blink{to{visibility:hidden}}@media (width<=900px){.projects{padding:4.5rem 1.5rem}.projects__grid{grid-template-columns:1fr;gap:1rem}.project-card,.project-card--wide{min-height:auto;padding:1.5rem}}@media (prefers-reduced-motion:reduce){.projects__seal,.more-card__cursor,.project-skeleton:after{animation:none}.project-card__scene{transition:none}}/* ============================================================
   process.css - the Process section (id="process").
   A three-step vertical timeline: gradient rule through numbered
   markers, duration pills. Butterfly seal, kanji watermark.
   ============================================================ */

.process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream);
  padding: var(--section-pad) var(--content-padding);
  border-bottom: 1px solid var(--ink-faint);
}

/* Fine dot grid behind the timeline: procedural, distinct from Approach's
   blueprint lines, concentrated left where the timeline lives. */
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--violet-subtle) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 30% 50%, #000 0%, transparent 100%);
}

.process__inner {
  position: relative;
  z-index: 1;
  max-width: var(--width-content);
  margin: 0 auto;
}

.process__seal {
  animation: process-butterfly-rock 18s ease-in-out infinite;
}

/* ---- Timeline ---- */

.process__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 880px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* The signal thread: violet fading to cyan, threaded through the markers.
   It draws itself top-to-bottom when the section enters view. */
.process__timeline::before {
  content: '';
  position: absolute;
  left: 1.75rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(180deg, var(--violet) 0%, var(--cyan) 100%);
  opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
  .process.reveal .process__timeline::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 250ms;
  }
  .process.reveal.is-inview .process__timeline::before {
    transform: scaleY(1);
  }
}

.process__step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

.process__marker {
  position: relative;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--violet-deep);
  background: var(--cream);
  border: 2px solid var(--violet-medium);
  box-shadow: 0 0 0 6px var(--cream);
}

.process__duration {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-deep);
  background: var(--violet-tint);
  border: 1px solid var(--violet-soft);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.6rem;
}

.process__step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.process__body {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink-subtle);
  max-width: 58ch;
  margin: 0;
}

@keyframes process-butterfly-rock {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(4deg); }
  75%      { transform: rotate(-4deg); }
}

@media (max-width: 900px) {
  .process {
    padding: 4.5rem clamp(1rem, 4vw, 3rem);
  }
  .process__timeline::before {
    left: 1.25rem;
  }
  .process__step {
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
  }
  .process__marker {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process__seal {
    animation: none;
  }
}


.interlude{isolation:isolate;background:var(--ink);border-top:6px solid var(--violet-deep);border-bottom:6px solid var(--violet-deep);justify-content:center;align-items:center;min-height:58svh;display:flex;position:relative;overflow:hidden}.interlude__scene{background:url(/assets/scene-dragon-pagoda.webp) 50% 38%/cover no-repeat;position:absolute;inset:0}.interlude__video{object-fit:cover;object-position:center 38%;width:100%;height:100%;position:absolute;inset:0}.interlude__scrim{background:radial-gradient(80% 90% at 50% 55%,#0000 0%,#1a0f2e8c 100%),linear-gradient(#1a0f2e80 0%,#0000 30% 70%,#1a0f2e8c 100%);position:absolute;inset:0}.interlude__quote{z-index:1;width:100%;padding:clamp(2.5rem, 7svh, 4.5rem) var(--content-padding);text-align:center;background:linear-gradient(90deg,#0000 0%,#1a0f2ec7 18% 82%,#0000 100%);margin:0;position:relative}.interlude__jp{letter-spacing:.08em;color:var(--cream);text-shadow:0 2px 18px #000000e6;margin:0 0 1rem;font-family:Kanji Watermark,Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(1.9rem,4.6vw,3.6rem);font-weight:900}.interlude__en{font-family:var(--font-body);color:#f6f3f9e0;text-shadow:0 1px 10px #000000e6;max-width:58ch;margin:0 auto;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.6}@media (width<=640px){.interlude{min-height:44svh}}@media (prefers-reduced-motion:reduce){.interlude__video{display:none}}@keyframes playerBreathe{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.02)}}@keyframes playerVictory{0%{transform:scale(1)}40%{transform:scale(1.15)translateY(-6px)}70%{transform:scale(1.05)translateY(-2px)}to{transform:scale(1)}}@keyframes playerStumble{0%{transform:rotate(0)}20%{transform:rotate(-8deg)translate(-3px)}40%{transform:rotate(5deg)translate(2px)}60%{transform:rotate(-3deg)}80%{opacity:.7;transform:rotate(1deg)}to{opacity:1;transform:rotate(0)}}.puzzle-player--idle{animation:2s ease-in-out infinite playerBreathe}.puzzle-player--victory{filter:drop-shadow(0 0 12px #8b5cf680);animation:.6s cubic-bezier(.34,1.56,.64,1) playerVictory}.puzzle-player--stumble{filter:drop-shadow(0 3px 8px #d6284a66);animation:.5s ease-out playerStumble}@keyframes terminalEntry{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes terminalShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.puzzle-terminal{animation:.6s cubic-bezier(.16,1,.3,1) both terminalEntry}.puzzle-terminal--won{border-color:var(--violet)!important;box-shadow:0 12px 48px #6d28d91a,0 0 0 1px #8b5cf614!important}.puzzle-terminal--failed{animation:.4s ease-out terminalShake;border-color:var(--color-danger)!important}@keyframes slotEntrance{0%{opacity:0;transform:translate(8px)scale(.85)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes execPulse{0%{box-shadow:0 0 #8b5cf699}to{box-shadow:0 0 0 6px #8b5cf600}}.cmd-slot--filled{animation:.18s cubic-bezier(.34,1.56,.64,1) both slotEntrance}.cmd-slot--executing{animation:.6s infinite alternate execPulse}@keyframes consoleDotPulse{0%{opacity:.4}to{opacity:1}}.console-dot--executing{animation:.6s infinite alternate consoleDotPulse}@keyframes messageEntrance{0%{opacity:0;transform:translateY(4px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.console-message,.puzzle-status--solved{animation:.25s cubic-bezier(.16,1,.3,1) both messageEntrance}@keyframes actionPulse{0%,to{opacity:0}50%{opacity:1}}.run-btn--ready,.next-btn--active{position:relative;box-shadow:0 3px 12px #6d28d933}.run-btn--ready:after,.next-btn--active:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;animation:2s infinite actionPulse;position:absolute;inset:0}.run-btn--ready:after{box-shadow:0 0 0 5px var(--violet-soft)}.next-btn--active:after{animation-duration:1.5s;box-shadow:0 0 0 5px #8b5cf61a}.console-body::-webkit-scrollbar{width:6px}.console-body::-webkit-scrollbar-track{background:0 0}.console-body::-webkit-scrollbar-thumb{background:var(--violet-medium);border-radius:9999px}.console-body::-webkit-scrollbar-thumb:hover{background:var(--violet-strong)}.puzzle__terrain{background:repeating-linear-gradient(0deg, #f6f3f905 0 1px, transparent 1px 4px), radial-gradient(70% 55% at 50% 92%, #8b5cf638 0%, transparent 60%), radial-gradient(50% 32% at 50% 0%, #00d4ff0f 0%, transparent 70%), url(/assets/shuriken-field.svg) var(--ink) repeat;background-size:auto,auto,auto,520px 520px}.puzzle-intro__cover{will-change:transform;background:repeating-linear-gradient(0deg, #f6f3f906 0 1px, transparent 1px 4px), radial-gradient(70% 55% at 50% 88%, #8b5cf647 0%, transparent 70%), radial-gradient(50% 40% at 50% 30%, #00d4ff0f 0%, transparent 70%), url(/assets/shuriken-field.svg) var(--ink) repeat;background-size:auto,auto,auto,520px 520px;position:absolute;inset:0;overflow:hidden}.puzzle-intro__lantern{transform-origin:top;filter:drop-shadow(0 0 24px #00d4ff40);pointer-events:none;user-select:none;z-index:0;height:clamp(9rem,20vh,13rem);animation:7s ease-in-out infinite lanternSway;position:absolute;top:0;right:clamp(6%,14vw,20%)}@keyframes lanternSway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.puzzle-intro__cta{flex-direction:column;align-items:stretch;display:inline-flex}.puzzle-intro__patrol{height:8.5rem;margin-bottom:.5rem;position:relative}.puzzle-intro__ninja{height:8.5rem;image-rendering:pixelated;pointer-events:none;user-select:none;animation:9s linear infinite patrolMove;position:absolute;bottom:0;left:-3.02rem}@keyframes patrolMove{0%{left:-3.02rem;transform:scaleX(1)}49.8%{left:calc(100% - 5.48rem);transform:scaleX(1)}50.2%{left:calc(100% - 5.48rem);transform:scaleX(-1)}99.8%{left:-3.02rem;transform:scaleX(-1)}to{left:-3.02rem;transform:scaleX(1)}}.puzzle-intro__crystal{filter:drop-shadow(0 0 26px #00d4ff80);height:clamp(5.5rem,15vh,9rem);animation:4.5s ease-in-out infinite introCrystalFloat;bottom:18%;right:clamp(5%,13vw,19%)}@keyframes introCrystalFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.puzzle-intro__stage{animation:.82s cubic-bezier(.22,1,.36,1) both introCardIn}.puzzle-intro__stage>*{animation:introRise .72s var(--ease-slow) both}.puzzle-intro__stage>:first-child{animation-delay:.16s}.puzzle-intro__stage>:nth-child(2){animation-delay:.25s}.puzzle-intro__stage>:nth-child(3){animation-delay:.34s}.puzzle-intro__stage>:nth-child(4){animation-delay:.45s}.puzzle-intro__stage>:nth-child(5){animation-delay:.56s}.puzzle-intro__play-btn{position:relative;overflow:hidden}.puzzle-intro__play-btn:after{content:"";pointer-events:none;background:linear-gradient(115deg,#0000 32%,#ffffff61 50%,#0000 68%);transition:transform .42s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;transform:translate(-130%)}.puzzle-intro__play-btn:hover:after{transform:translate(130%)}@keyframes introCardIn{0%{opacity:0;transform:translateY(22px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes introRise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes introSlideUp{0%{transform:translateY(0)}to{transform:translateY(-105%)}}@keyframes introFade{0%,99%{opacity:1}to{opacity:0}}.puzzle-intro--cracking{pointer-events:none;animation:1.7s step-end forwards introFade}.puzzle-intro--cracking .puzzle-intro__cover{animation:1.6s cubic-bezier(.45,0,.4,1) forwards introSlideUp}@keyframes goalActivate{0%{box-shadow:0 0 #00d4ff8c,0 0 #8b5cf666}70%{box-shadow:0 0 0 14px #00d4ff00,0 0 0 7px #8b5cf600}to{box-shadow:0 0 #00d4ff00,0 0 #8b5cf600}}@keyframes goalGlow{0%,to{opacity:0}50%{opacity:1}}.puzzle-goal--reached{animation:.6s cubic-bezier(.16,1,.3,1) goalActivate;position:relative;box-shadow:0 0 6px 1px #00d4ff59}.puzzle-goal--reached:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;animation:1.8s ease-in-out .6s infinite goalGlow;position:absolute;inset:0;box-shadow:0 0 14px 4px #00d4ff8c}@media (prefers-reduced-motion:reduce){.puzzle-player--idle,.puzzle-player--victory,.puzzle-player--stumble,.puzzle-terminal,.puzzle-terminal--failed,.cmd-slot--filled,.cmd-slot--executing,.console-dot--executing,.console-message,.puzzle-status--solved,.run-btn--ready:after,.next-btn--active:after,.puzzle-intro__play-btn,.puzzle-goal--reached,.puzzle-goal--reached:after,.puzzle-intro__stage,.puzzle-intro__stage>*,.puzzle-intro__ninja,.puzzle-intro--cracking .puzzle-intro__cover{animation:none!important}.puzzle-intro__ninja{left:50%;transform:translate(-50%)}.puzzle-goal--reached{box-shadow:0 0 10px 2px #00d4ff73}.puzzle-goal--reached:after{opacity:0}.puzzle-intro__stage,.puzzle-intro__stage>*{opacity:1;filter:none;transform:none}.puzzle-intro--cracking{animation:.22s linear forwards introFade!important}}/* ============================================================
   connect.css - the Connect section (id="connect").
   Minimal monument: deep ink, a faint torii-at-dawn horizon, one
   violet bloom, giant type, and the email as the primary action.
   ============================================================ */

.connect {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: clamp(6rem, 18svh, 11rem) var(--content-padding);
}

/* Torii at dawn, faint, anchored low like a horizon and faded out toward the
   top so the headline rests on near-black. A slow drift keeps it alive. */
.connect__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/assets/scene-torii-dawn.webp') center 72% / cover no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  animation: connect-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* One soft violet bloom behind the type. */
.connect__glow {
  position: absolute;
  left: 50%;
  top: 36%;
  z-index: 0;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, transparent 62%);
  filter: blur(22px);
  pointer-events: none;
}

.connect__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--width-content);
  margin: 0 auto;
}

/* Layout only; type comes from the shared .section-eyebrow primitive. */
.connect__eyebrow {
  margin-bottom: 1.5rem;
}

.connect__seal {
  animation: connect-crane-float 8s ease-in-out infinite;
}

.connect__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--cream);
  margin: 0 0 2rem;
}
/* The accent word in the ronin's hand, cyan on ink like every dark section. */
.connect__title em {
  font-family: var(--font-signature);
  font-style: normal;
  font-weight: 400;
  color: var(--cyan);
}

.connect__avail {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(246, 243, 249, 0.62);
  max-width: 46ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

/* The email is the hero: large, with a cyan underline that draws on hover. */
.connect__email {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.6vw, 2.7rem);
  letter-spacing: -0.02em;
  color: var(--cream);
  text-decoration: none;
  position: relative;
  transition: color var(--ease-medium);
}
.connect__email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-slow);
}
.connect__email:hover,
.connect__email:focus-visible {
  color: var(--cyan);
}
.connect__email:hover::after,
.connect__email:focus-visible::after {
  transform: scaleX(1);
}
.connect__email:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 6px;
}

.connect__links {
  display: flex;
  gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.connect__link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 243, 249, 0.7);
  text-decoration: none;
  position: relative;
  transition: color var(--ease-fast);
  /* Comfortable touch target without changing the visual size. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.connect__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-medium);
}
.connect__link:hover,
.connect__link:focus-visible {
  color: var(--cream);
}
.connect__link:hover::after,
.connect__link:focus-visible::after {
  transform: scaleX(1);
}
.connect__link:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}


@keyframes connect-crane-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}

@keyframes connect-drift {
  from { transform: scale(1.03) translateY(0); }
  to   { transform: scale(1.09) translateY(-1.5%); }
}

@media (max-width: 640px) {
  .connect {
    padding: 5rem 1.5rem;
    min-height: 78svh;
  }
  .connect__links {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .connect__scene,
  .connect__seal {
    animation: none;
  }
}
/* ============================================================
   footer.css - the site footer.
   Deep ink beneath Connect: a faint mountain ridge on the top
   horizon, brand block, link columns, closing bar.
   ============================================================ */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #120a20;
  color: var(--cream);
  border-top: 6px solid var(--violet-deep);
}

/* The closing horizon: mountain ridge dissolving into the deep ink. */
.footer__mountains {
  position: absolute;
  inset: 0 0 auto 0;
  height: 240px;
  background: url('/assets/asset-mountain-layer.webp') center top / cover no-repeat;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}

.footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--width-grid);
  margin: 0 auto;
  padding: clamp(3.5rem, 8svh, 5.5rem) var(--content-padding) 2.5rem;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.footer__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 3px;
  color: var(--cream);
  margin-bottom: 0.75rem;
}

.footer__tagline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(246, 243, 249, 0.55);
  margin: 0;
}

/* The sign-off: the hero's signature hand closes the page. */
.footer__signature {
  display: inline-block;
  font-family: var(--font-signature);
  font-size: 2.4rem;
  color: rgba(246, 243, 249, 0.85);
  transform: rotate(-3deg);
  margin-top: 1.5rem;
  user-select: none;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer__col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 0.6rem;
}

.footer__col a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(246, 243, 249, 0.72);
  text-decoration: none;
  padding: 0.35rem 0;
  min-height: 32px;
  width: fit-content;
  transition: color var(--ease-fast);
}
.footer__col a:hover {
  color: var(--cyan);
}
.footer__col a:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.footer__bar {
  position: relative;
  z-index: 1;
  max-width: var(--width-grid);
  margin: 0 auto;
  padding: 1.25rem var(--content-padding);
  border-top: 1px solid rgba(246, 243, 249, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(246, 243, 249, 0.4);
}

@media (max-width: 900px) {
  .footer__inner {
    grid-template-columns: 1fr;
    padding: 3rem 1.5rem 2rem;
  }
  .footer__bar {
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem 1.5rem;
  }
  .footer__col a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* The lantern rests beneath the signature, flame lit at the page's close. */
.footer__lantern {
  display: block;
  height: clamp(6.5rem, 11vh, 9rem);
  width: auto;
  margin-top: 1.25rem;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.18));
}