@property --bg{syntax:"<color>";inherits:true;initial-value:#373736}@property --panel{syntax:"<color>";inherits:true;initial-value:#62615b}@property --ink{syntax:"<color>";inherits:true;initial-value:#b5b2a2}@property --copy{syntax:"<color>";inherits:true;initial-value:#908e83}@property --muted{syntax:"<color>";inherits:true;initial-value:#79776f}@property --accent{syntax:"<color>";inherits:true;initial-value:#70c1a6}@property --accent-warm{syntax:"<color>";inherits:true;initial-value:#f89c41}@property --syntax-red{syntax:"<color>";inherits:true;initial-value:#ff8169}@property --syntax-blue{syntax:"<color>";inherits:true;initial-value:#7cbcbf}@property --syntax-magenta{syntax:"<color>";inherits:true;initial-value:#ed98bd}@property --syntax-green{syntax:"<color>";inherits:true;initial-value:#b9b63d}:root{--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:72px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:--bg 260ms ease,--panel 260ms ease,--ink 260ms ease,--copy 260ms ease,--muted 260ms ease,--accent 260ms ease,--accent-warm 260ms ease,--syntax-red 260ms ease,--syntax-blue 260ms ease,--syntax-magenta 260ms ease,--syntax-green 260ms ease}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 78% 16%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 24rem),radial-gradient(circle at 12% 74%,color-mix(in srgb,var(--accent-warm) 11%,transparent),transparent 26rem),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 19px),var(--bg);color:var(--ink);transition:background-color 180ms ease,color 180ms ease}.page{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:var(--space-5) 0 var(--space-6)}.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:var(--space-5);min-height:min(730px,calc(100vh - 32px))}.copy{min-width:0}.actions,.controls,.feature-strip{display:flex;flex-wrap:wrap;gap:var(--space-2)}.controls{position:sticky;top:var(--space-2);z-index:10;width:fit-content;margin:-12px -18px var(--space-4);padding:12px 18px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 86%,transparent),transparent 72%)}.control{display:inline-grid;grid-template-columns:repeat(3,auto);gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 4%,transparent),0 8px 22px var(--shadow)}.control--contrast{grid-template-columns:repeat(3,auto)}.contrast-note{margin:calc(var(--space-4) * -1) 0 var(--space-4);color:var(--muted);font-size:.8rem;font-weight:700}.action-link,button{border:0;font:inherit}.action-link,.control button,.feature-strip span,.palette-note{border-radius:999px;padding:7px 11px;font-size:.84rem;font-weight:700}.control button{min-width:58px;color:var(--copy);background:0 0;cursor:pointer;transition:background 140ms ease,box-shadow 140ms ease}.control button:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}.control button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent)}.swatch:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent-warm);outline-offset:3px}.scroll-top{position:fixed;right:var(--space-3);bottom:var(--space-3);z-index:20;display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--border);border-radius:10px;padding:0;color:var(--ink);background:var(--panel);font:inherit;font-size:1.2rem;font-weight:700;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:background 140ms ease,opacity 140ms ease,transform 140ms ease,box-shadow 140ms ease}.scroll-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.scroll-top:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}.scroll-top:active{transform:translateY(1px) scale(.98);box-shadow:0 4px 10px rgba(0,0,0,.16)}.eyebrow{margin:0 0 var(--space-1);color:var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.eyebrow a{color:inherit;text-decoration:none}.eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}h1,h2{margin:0;letter-spacing:-.045em}h1{font-size:clamp(3.1rem, 9vw, 7.1rem);line-height:.88;letter-spacing:0}h2{font-size:clamp(1.6rem, 3vw, 2.45rem);line-height:1.04}.lede{max-width:600px;margin:20px 0 0;color:var(--copy);font-size:clamp(1.02rem, 2vw, 1.22rem);line-height:1.55}.feature-strip{margin-top:var(--space-4)}.feature-strip span,.palette-comment{border:1px solid color-mix(in srgb,var(--border) 72%,transparent);border-radius:999px;padding:7px 11px;color:var(--muted);background:0 0;font-size:.84rem;font-weight:400;line-height:1.35}.actions{margin-top:var(--space-4)}.action-link{border:1px solid var(--border);color:var(--ink);text-decoration:none;background:color-mix(in srgb,var(--panel) 76%,transparent);transition:background 140ms ease,transform 140ms ease,box-shadow 140ms ease}.action-link:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}.action-link:active{transform:translateY(1px) scale(.98);box-shadow:0 4px 10px rgba(0,0,0,.16)}.action-link--pending{color:var(--muted);cursor:default}.wing-figure{position:relative;margin:0;text-align:center}.wing-figure::before{content:"";position:absolute;inset:12%;border-radius:50%;background:color-mix(in srgb,var(--accent) 17%,transparent);filter:blur(38px)}.wing-figure img{position:relative;display:block;width:min(100%,460px);max-height:590px;margin:0 auto;cursor:pointer;filter:drop-shadow(0 24px 46px var(--shadow));transition:transform 480ms cubic-bezier(.22, .61, .36, 1)}:root[data-palette-contrast=normal] .wing-figure img{transform:rotate(180deg)}:root[data-palette-contrast=hard] .wing-figure img{transform:rotate(240deg)}:root[data-palette-contrast=soft] .wing-figure img{transform:rotate(120deg)}:root[data-palette-mode=light][data-palette-contrast=normal] .wing-figure img{transform:rotate(0)}:root[data-palette-mode=light][data-palette-contrast=hard] .wing-figure img{transform:rotate(60deg)}:root[data-palette-mode=light][data-palette-contrast=soft] .wing-figure img{transform:rotate(-60deg)}figcaption{position:relative;margin-top:12px;color:var(--muted);font-size:.85rem}.generator,.palette-section,.preview{border-top:1px solid var(--border);padding:var(--space-6) 0}.preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--space-3)}.preview-copy p:not(.eyebrow){margin:15px 0 0;color:var(--copy);line-height:1.55}.code-sample{overflow:auto;margin:0;border:1px solid var(--border);border-radius:10px;padding:clamp(20px,4vw,34px);background:var(--bg);box-shadow:0 20px 44px var(--shadow);color:var(--ink);font:500 clamp(.88rem, 1.7vw, 1.05rem)/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}.comment{color:var(--muted)}.keyword{color:var(--syntax-red)}.function{color:var(--syntax-blue)}.parameter{color:var(--syntax-magenta)}.string{color:var(--syntax-green)}.generator{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--space-3)}.generator-copy p:not(.eyebrow),.token-note{color:var(--copy);line-height:1.55}.generator-copy p:not(.eyebrow){margin:15px 0 0}.generator-examples{display:grid;gap:14px}.generator-examples h3,.template-pair h3{margin:0 0 7px;color:var(--accent);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}.command{overflow:auto;margin:0;border:1px solid var(--border);border-radius:8px;padding:14px;background:var(--panel);color:var(--ink);font:.82rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.code-sample,.command{scrollbar-color:var(--muted) transparent;scrollbar-width:thin}.code-sample::-webkit-scrollbar,.command::-webkit-scrollbar{width:8px;height:8px}.code-sample::-webkit-scrollbar-track,.command::-webkit-scrollbar-track{background:0 0}.code-sample::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:var(--muted) border-box;background-clip:padding-box}.code-sample::-webkit-scrollbar-thumb:hover,.command::-webkit-scrollbar-thumb:hover{background-color:var(--copy)}.template-pair{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.template-pair .command{min-height:10.4em;background:var(--bg)}.token-note{margin:2px 0 0;font-size:.88rem}.token-note code{color:var(--accent-warm);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:var(--space-4)}.section-head>div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}.section-head .eyebrow{margin-bottom:0}.palette-comment{display:inline-flex;align-items:center;flex:none;margin:0;letter-spacing:0}.palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.palette-group{grid-column:span 6}.palette-group--half{grid-column:span 3}.palette-group-label{margin:0 0 10px;color:var(--accent);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase}.palette-group-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.palette-group--half .palette-group-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.lab-section{border-top:1px solid var(--border);padding:var(--space-6) 0}.lab-copy{max-width:36rem}.lab-copy p:not(.eyebrow){margin:15px 0 0;color:var(--copy);line-height:1.55}.lab-copy code{color:var(--accent-warm);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.lab-note{font-size:.9rem}.lab-chart-wrap{position:relative;overflow:hidden;margin-top:28px;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--bg);box-shadow:0 20px 44px var(--shadow)}.lab-chart-wrap svg{display:block;width:min(100%,760px);margin:0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.lab-axis,.lab-label,.lab-tick{fill:var(--muted);font-size:12px}.lab-axis{font-weight:700;text-anchor:end}.lab-tick{text-anchor:middle}.lab-label{text-anchor:end;text-transform:capitalize}.lab-guide{stroke:var(--border);stroke-width:1}.lab-lane{stroke:color-mix(in srgb,var(--muted) 42%,transparent);stroke-width:1}.lab-connection{fill:none;stroke:color-mix(in srgb,var(--copy) 52%,transparent);stroke-width:2}.lab-role-group{pointer-events:none}.lab-role-group rect{fill:color-mix(in srgb,var(--accent) 6%,transparent);stroke:color-mix(in srgb,var(--accent) 68%,var(--border));stroke-dasharray:5 4;stroke-width:1.5}.lab-role-group text{fill:var(--accent);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.lab-dot{cursor:default;stroke:color-mix(in srgb,var(--ink) 46%,transparent);stroke-width:2.5;filter:drop-shadow(0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent));transition:fill 220ms ease}.lab-tooltip{position:absolute;z-index:1;pointer-events:none;border:1px solid var(--border);border-radius:999px;padding:7px 11px;color:var(--muted);background:var(--panel);box-shadow:0 8px 18px var(--shadow);font:700 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.lab-tooltip[hidden]{display:none}.swatch{position:relative;min-width:0;border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--swatch-ink);background:var(--swatch);text-align:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.14);transition:border-color 150ms ease,transform 150ms ease}.swatch:hover{border-color:color-mix(in srgb,var(--accent) 48%,transparent);transform:translateY(-2px)}.swatch-color{position:relative;display:block;width:100%;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.3);border-radius:5px;margin-bottom:8px;overflow:hidden;background:var(--swatch)}.copied-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;color:#fff;background:rgba(0,0,0,.45);font-size:.78rem;font-weight:700;pointer-events:none}.swatch-hex{display:block;color:inherit;font:700 .8rem ui-monospace,monospace}.swatch-name{display:block;min-height:2.7em;margin-top:3px;overflow:hidden;color:inherit;opacity:.78;font-size:.8rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);border-top:1px solid var(--border);padding:var(--space-6) 0}.principles article{border-top:2px solid var(--accent);padding-top:var(--space-2)}.principles h2{font-size:1.05rem;letter-spacing:0}.principles p{margin:var(--space-1) 0 0;color:var(--copy);font-size:.93rem;line-height:1.55}@media (max-width:960px){.generator,.hero,.preview,.template-pair{grid-template-columns:1fr;min-height:0}.hero{gap:var(--space-3)}h1{font-size:clamp(3.1rem, 9vw, 5.4rem)}.wing-figure img{width:min(82%,400px)}.palette{grid-template-columns:repeat(3,minmax(0,1fr))}.palette-group,.palette-group--half{grid-column:span 3}.palette-group-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.principles{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}}@media (max-width:560px){.page{width:min(100% - 20px,1120px)}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:var(--space-1)}.control{grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.control--contrast{grid-template-columns:repeat(3,minmax(0,1fr))}.control button{min-width:0;padding-inline:7px}.generator,.lab-section,.palette-section,.preview,.principles{padding:var(--space-5) 0}.palette{gap:8px}.palette-group--half .palette-group-swatches,.palette-group-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.swatch{padding:7px}}@media (prefers-reduced-motion:reduce){*,::after,::before{scroll-behavior:auto!important;transition-duration:0s!important}}