*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}:root{--poster-bg: #0a0507;--poster-gray: #9fa080;--poster-cream: #e3dfd2;--poster-red: #9a2925;--accent: #667eea;--accent-dim: #667eea88;--bg: #000;--fg: #fff;--fg-dim: #999;--fg-muted: var(--poster-gray);--green: #22c55e;--amber: #f59e0b;--red: #ef4444;--rule: var(--poster-red);--unit: 1.5rem;--akzidenz: "InterVariable", "Inter", system-ui, sans-serif;--mono: "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace;--sans: var(--akzidenz);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--pad: clamp(var(--unit), 4vw, 4vw);font-feature-settings:"liga" 1,"calt" 1}html{font-size:16px;scroll-behavior:smooth}body{overflow-x:hidden;font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:var(--fg);background:var(--bg)}section{position:relative;width:100%}.section-inner{padding:0 var(--pad)}.section-header{padding:var(--unit) 0 calc(var(--unit) * 2);border-top:1px solid var(--rule)}.section-title{font-family:var(--sans);font-size:clamp(1.2rem,2.5vw,1.75rem);font-weight:400;color:var(--poster-red);letter-spacing:.02em}.hero{display:grid;grid-template-rows:6fr auto .5fr auto;grid-template-columns:1fr;height:100vh;min-height:900px;overflow:hidden;font-family:var(--akzidenz);background:var(--poster-bg)}.hero-accent-text{font-family:var(--akzidenz);font-size:clamp(.9rem,1.6vw,1.15rem);font-weight:500;line-height:1.2;color:var(--poster-red);letter-spacing:-.03em}.hero-accent-text+.hero-accent-text{margin-top:.6em}.hero-label .hero-accent-text:first-child{font-size:clamp(1rem,1.8vw,1.25rem);font-weight:600}.hero-label .hero-accent-text+.hero-accent-text{margin-top:-.15em}.hero-label{z-index:3;grid-row:1;align-self:start;justify-self:start;margin-top:3%;margin-left:29%;opacity:0;animation:fade-in 1s .3s var(--ease-out-expo) forwards}.hero-title{z-index:2;display:flex;grid-row:2;align-items:baseline;align-self:end;white-space:nowrap;opacity:0;animation:title-in 1.2s .1s var(--ease-out-expo) forwards}.hero-title-wrapper{display:flex;align-items:baseline;white-space:nowrap}.hero-title-top{position:relative;z-index:1;flex-shrink:0;margin-right:-2.5em;font-size:18vw;font-weight:700;line-height:1;color:var(--poster-gray);text-transform:lowercase;letter-spacing:-.02em;transition:color .5s var(--ease-out-expo)}.hero-title-bottom{position:relative;z-index:2;font-size:18vw;font-weight:700;line-height:1;color:var(--poster-cream);letter-spacing:-.03em;transition:color .5s var(--ease-out-expo)}.hero-title-text{display:inline;transition:opacity .5s var(--ease-out-expo)}.hero-title-text--hidden{display:none}.hero-title-top.hero-title--transformed{color:var(--poster-cream)}.hero-title-bottom.hero-title--transformed{color:var(--poster-gray)}.hero-bottom{z-index:3;grid-row:4;align-self:end;padding-bottom:4%;margin-right:5%;margin-left:29%}.hero-tagline{margin-bottom:1rem;line-height:1.2;opacity:0;animation:slide-up .8s .8s var(--ease-out-expo) forwards}.hero-playground{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;min-height:2.8em;margin-bottom:.75rem;opacity:0;animation:slide-up .8s 1s var(--ease-out-expo) forwards}.hero-row{display:flex;gap:.4rem;align-items:center;padding:.15rem .35rem;font-family:var(--mono);font-size:clamp(.7rem,1.1vw,.85rem);font-weight:400;color:var(--poster-red);cursor:pointer;transition:background .15s}.hero-row:hover{background:#ffffff0a}.hero-row:focus-visible{outline:1px solid var(--accent);outline-offset:1px}.hero-row-swatch{flex-shrink:0;width:10px;height:10px;border:1px solid #444;transition:box-shadow .3s}.hero-row--transformed .hero-row-swatch{box-shadow:0 0 0 1px var(--accent)}.hero-row-text{display:inline-block;transition:opacity .4s var(--ease-out-expo)}.hero-row-text--hidden{display:none}.hero-row-hex{color:var(--poster-red)}.hero-row-arrow{flex-shrink:0;font-size:.7em;color:#333;transition:color .3s}.hero-row-arrow--done{color:var(--accent)}.hero-row-var,.hero-var-func{color:var(--poster-red)}.hero-var-name{color:var(--accent)}.hero-controls{display:flex;gap:.75rem;opacity:0;animation:slide-up .8s 1.2s var(--ease-out-expo) forwards}.hero-btn{padding:.5rem 1.2rem;font-family:var(--akzidenz);font-size:.85rem;color:var(--poster-gray);letter-spacing:.02em;cursor:pointer;background:transparent;border:1px solid var(--poster-gray);transition:border-color .2s,color .2s,background .2s}.hero-btn:hover{color:var(--fg);background:#9a292510;border-color:var(--poster-red)}.hero-btn:focus-visible{outline:1px solid var(--poster-red);outline-offset:1px}.hero-btn--primary{color:var(--poster-red);border-color:var(--poster-red)}.hero-btn--primary:hover{color:var(--fg);background:#9a292520}.demo{padding:calc(var(--unit) * 4) 0}.demo-panels{position:relative;display:flex;gap:1px;background:#333}.demo-panel{flex:1;overflow:hidden;background:var(--bg)}.demo-panel-header{display:flex;gap:.5rem;align-items:center;padding:.75rem 1rem;font-family:var(--mono);font-size:.75rem;color:var(--fg-muted);border-bottom:1px solid #333}.demo-panel-dot{width:6px;height:6px;background:var(--fg-muted);opacity:.3}.demo-panel-body{padding:1rem;overflow-x:auto;font-family:var(--mono);font-size:clamp(.8rem,1.5vw,.95rem);line-height:1.8;color:var(--poster-cream)}.demo-line{display:flex;white-space:pre}.demo-line-num{flex-shrink:0;width:2.5em;padding-right:1em;color:var(--fg-muted);text-align:right;-webkit-user-select:none;user-select:none}.demo-line-content{flex:1;min-width:0}.demo-color{position:relative;padding:0 2px;cursor:pointer;transition:background .2s}.demo-color:hover{background:#ffffff10}.demo-color:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.demo-color-swatch{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:middle;border:1px solid #333}.demo-color-text{display:inline-block;transition:filter .4s var(--ease-out-expo),opacity .4s var(--ease-out-expo)}.demo-color-text.blur-out{opacity:0;filter:url(#blur-h-sm)}.demo-color-text.hidden{position:absolute;visibility:hidden}.demo-color-text.var-text{color:var(--accent)}.demo-color[data-match=exact] .demo-color-swatch{box-shadow:0 0 0 1px var(--green)}.demo-color[data-match=close] .demo-color-swatch{box-shadow:0 0 0 1px var(--amber)}.demo-color[data-match=unmatched] .demo-color-swatch{box-shadow:0 0 0 1px var(--red)}.demo-color[data-match=effect]{opacity:.5}.demo-color.transformed .demo-color-text.original{position:absolute;visibility:hidden;opacity:0;filter:url(#blur-h-sm)}.demo-color.transformed .demo-color-text.replacement{position:relative;visibility:visible}.demo-var{display:flex;gap:.75rem;align-items:center;padding:.35rem .5rem;transition:background .2s}.demo-var.highlighted{background:#ffffff08}.demo-var-swatch{flex-shrink:0;width:14px;height:14px;border:1px solid #333}.demo-var-name{color:var(--accent)}.demo-var-value{margin-left:auto;color:var(--poster-cream)}.demo-connections{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.demo-connection-line{opacity:0;stroke:var(--accent);stroke-width:1;stroke-dasharray:4 4;transition:opacity .3s}.demo-connection-line.visible{opacity:.5}.demo-controls{display:flex;gap:var(--unit);margin-top:var(--unit)}.demo-btn{padding:.7rem 1.5rem;font-family:var(--akzidenz);font-size:1rem;color:var(--poster-gray);letter-spacing:.02em;cursor:pointer;background:transparent;border:1px solid var(--poster-gray);transition:border-color .2s,background .2s,color .2s}.demo-btn:hover{color:var(--fg);background:#9a292510;border-color:var(--poster-red)}.demo-btn--primary:hover{background:#9a292520}.demo-btn:focus-visible{outline:2px solid var(--poster-red);outline-offset:2px}.demo-btn--primary{color:var(--poster-red);background:#9a292518;border-color:var(--poster-red)}.demo-legend{display:flex;gap:var(--unit);margin-top:calc(var(--unit) * .67);font-size:1.1rem;color:var(--poster-red)}.demo-legend-item{display:flex;gap:.4rem;align-items:center}.demo-legend-dot{width:8px;height:8px}.features{padding:calc(var(--unit) * 4) 0}.features-list{display:flex;flex-direction:column}.feature-row{padding:calc(var(--unit) * 1.5) 0;border-top:1px solid var(--rule)}.feature-row-top{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--unit) * 2);align-items:baseline;margin-bottom:calc(var(--unit) * .5)}.feature-row-title{font-family:var(--akzidenz);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;line-height:1.2;color:var(--poster-red);letter-spacing:.01em}.feature-row-desc{font-family:var(--akzidenz);font-size:clamp(1rem,1.8vw,1.15rem);font-weight:400;line-height:1.5;color:var(--poster-red)}.feature-row-cli{font-family:var(--mono);font-size:clamp(.85rem,1.4vw,1rem);color:var(--poster-red);opacity:.7}.feature-row-cli .prompt{color:var(--poster-red);-webkit-user-select:none;user-select:none}.workflow{padding:calc(var(--unit) * 4) 0}.install{padding:calc(var(--unit) * 2) 0;margin-top:calc(var(--unit) * 3);border-top:1px solid var(--rule)}.install-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--unit) * 2);align-items:start}.install-heading{margin-bottom:calc(var(--unit) * .5);font-family:var(--akzidenz);font-size:clamp(1.3rem,2.5vw,1.5rem);font-weight:600;color:var(--poster-red)}.install-cmd{display:flex;gap:.75rem;align-items:center;font-family:var(--mono);font-size:clamp(.9rem,1.8vw,1.1rem);color:var(--poster-red)}.install-cmd .prompt{color:var(--poster-red);-webkit-user-select:none;user-select:none}.install-copy{padding:.25rem .5rem;font-family:var(--akzidenz);font-size:.85rem;font-weight:500;color:var(--poster-red);cursor:pointer;background:none;border:none;transition:color .2s}.install-copy:hover{color:var(--fg)}.install-copy:focus-visible{outline:2px solid var(--poster-red);outline-offset:2px}.install-right{display:flex;flex-direction:column;gap:calc(var(--unit) * .5)}.install-link-row{display:flex;gap:calc(var(--unit) * .75);align-items:baseline;text-decoration:none;transition:opacity .2s}.install-link-row:hover{opacity:.7}.install-link-label{min-width:5rem;font-family:var(--akzidenz);font-size:clamp(1rem,1.8vw,1.1rem);font-weight:600;color:var(--poster-red)}.install-link-desc{font-family:var(--akzidenz);font-size:clamp(1rem,1.8vw,1.1rem);font-weight:400;color:var(--poster-red)}.site-footer{padding:calc(var(--unit) * 1.5) 0;font-family:var(--akzidenz);letter-spacing:.02em;border-top:1px solid var(--rule)}.footer-inner{display:flex;align-items:flex-end;justify-content:space-between}.footer-left{display:flex;flex-direction:column;gap:.15rem}.footer-name{font-size:clamp(1rem,1.8vw,1.15rem);font-weight:600;color:var(--poster-red)}.footer-desc{font-size:clamp(.85rem,1.4vw,.95rem);font-weight:400;color:var(--poster-red)}.footer-right{display:flex;flex-direction:column;gap:.15rem;text-align:right}.footer-version{font-size:clamp(.85rem,1.4vw,.95rem);font-weight:400;color:var(--poster-red)}.footer-copy{font-size:clamp(.85rem,1.4vw,.95rem);font-weight:500;color:var(--poster-red)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes title-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.demo-color-text.blur-out{filter:none!important}.hero-title,.hero-label,.hero-tagline,.hero-playground,.hero-controls{opacity:1!important;transform:none!important}}@media(max-width:768px){.hero{grid-template-rows:7.5fr auto .25fr auto}.hero-accent-text{font-size:clamp(1.05rem,2.2vw,1.35rem)}.hero-title-wrapper{display:flex;align-items:baseline;width:100%}.hero-title-top{flex-shrink:0;width:50vw;margin-right:-38vw;font-size:28vw;text-align:left}.hero-title-bottom{flex-shrink:0;width:50vw;font-size:28vw;text-align:right}.hero-label{margin-top:5%;margin-left:5%}.hero-bottom{margin-right:5%;margin-left:5%}.section-header{padding:calc(var(--unit) * .67) 0 var(--unit)}.demo-panels{flex-direction:column}.demo-connections{display:none}.feature-row-top{grid-template-columns:1fr;row-gap:calc(var(--unit) * .5)}.install-grid{grid-template-columns:1fr;row-gap:calc(var(--unit) * 1.5)}.demo-legend{flex-wrap:wrap}}@media(max-width:400px){.hero-accent-text{font-size:clamp(.95rem,2.5vw,1.1rem)}}