.logo-hero{position:relative;padding:96px 56px;border-radius:var(--radius-2xl);overflow:hidden;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(47,55,255,.16),transparent 60%),linear-gradient(180deg,#000,#050818);border:1px solid hsla(0,0%,100%,.08);isolation:isolate;display:flex;align-items:center;justify-content:center}.logo-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,hsla(0,0%,100%,.6) .5px,transparent 0),radial-gradient(circle,hsla(0,0%,100%,.32) .5px,transparent 0);background-size:220px 220px,360px 360px;background-position:30px 30px,160px 90px;opacity:.5;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 80%)}.logo-hero img,.logo-hero svg{position:relative;width:clamp(280px,50%,580px);height:auto;z-index:1}.logo-hero .caption{position:absolute;bottom:22px;left:56px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:hsla(0,0%,100%,.55);z-index:2}.logo-hero .caption b{color:#fff;font-weight:500}.logo-hero .scale-tag{position:absolute;bottom:22px;right:56px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:hsla(0,0%,100%,.55);z-index:2}.meanings{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:900px){.meanings{grid-template-columns:1fr}}.meaning-card{position:relative;border:1px solid var(--border-default);border-radius:var(--radius-xl);background:hsla(0,0%,100%,.02);padding:28px 26px;overflow:hidden}.meaning-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 100% 100%,rgba(47,55,255,.1),transparent 60%)}.meaning-card>*{position:relative}.meaning-card .ord{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300);margin-bottom:16px}.meaning-card .glyph{width:90px;height:90px;margin:8px 0 24px;display:flex;align-items:center;justify-content:center}.meaning-card .glyph svg{width:100%;height:100%;overflow:visible}.meaning-card h4{font-size:22px;letter-spacing:-.018em;font-weight:600;margin:0 0 4px;color:var(--fg-default)}.meaning-card .sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin:0 0 16px}.meaning-card .desc{font-size:14px;line-height:1.6;color:var(--fg-secondary);margin:0}.variants{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px}@media (max-width:900px){.variants{grid-template-columns:repeat(2,1fr)}}.variant{display:flex;flex-direction:column}.variant .surface{height:200px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;padding:30px;position:relative;overflow:hidden}.variant .surface.dark{background:radial-gradient(ellipse 80% 80% at 30% 30%,rgba(47,55,255,.18),transparent 60%),linear-gradient(180deg,#000,#050818);border:1px solid hsla(0,0%,100%,.08)}.variant .surface.light{background:#fff;border:1px solid rgba(0,0,0,.08)}.variant .surface img,.variant .surface svg{width:100%;height:auto;max-height:100%}.variant .surface.mark img,.variant .surface.mark svg{width:70px}.variant .meta{padding:12px 4px 0;display:flex;flex-direction:column;gap:2px}.variant .meta .n{font-size:13px;font-weight:500;color:var(--fg-default)}.variant .meta .s{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}.clearspace{display:grid;grid-template-columns:1.1fr .9fr;grid-gap:28px;gap:28px;align-items:center}@media (max-width:900px){.clearspace{grid-template-columns:1fr}}.clearspace .demo{position:relative;padding:80px;border-radius:var(--radius-xl);background:hsla(0,0%,100%,.02);border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;min-height:360px}.clearspace .demo svg.guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.clearspace .demo .mark-wrap{position:relative;z-index:2}.clearspace .demo .mark-wrap img,.clearspace .demo .mark-wrap svg{width:280px;display:block}.clearspace .copy{padding:0}.clearspace .copy h3{font-size:26px;letter-spacing:-.018em;margin:0 0 12px;font-weight:600}.clearspace .copy p{font-size:15px;line-height:1.6;color:var(--fg-secondary);margin:0 0 16px;max-width:50ch}.clearspace .copy .rule{display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px solid rgba(133,160,255,.32);background:rgba(47,55,255,.06);border-radius:var(--radius-lg);margin-top:22px}.clearspace .copy .rule .x{font-family:var(--font-mono);font-size:22px;color:var(--blue-300);font-weight:500}.clearspace .copy .rule .t{font-size:13.5px;color:var(--fg-secondary);line-height:1.45}.clearspace .copy .rule .t b{color:var(--fg-default);font-weight:500}.minsizes{display:grid;grid-template-columns:200px 1fr;grid-gap:28px;gap:28px;border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:32px 32px 36px;background:hsla(0,0%,100%,.02)}@media (max-width:720px){.minsizes{grid-template-columns:1fr}}.minsizes .copy h4{font-size:18px;font-weight:600;letter-spacing:-.012em;margin:0 0 6px}.minsizes .copy p{font-size:13px;color:var(--fg-muted);line-height:1.5;margin:0}.minsizes .specimens{display:flex;align-items:flex-end;gap:48px;flex-wrap:wrap}.minsizes .specimen{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.minsizes .specimen img,.minsizes .specimen svg{display:block;height:auto}.minsizes .specimen .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--fg-muted);text-transform:uppercase}.minsizes .specimen .lbl b{color:var(--fg-default);font-weight:500}.donts{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:900px){.donts{grid-template-columns:repeat(2,1fr)}}@media (max-width:540px){.donts{grid-template-columns:1fr}}.dont{border:1px solid var(--border-default);border-radius:var(--radius-xl);background:hsla(0,0%,100%,.02);flex-direction:column}.dont,.dont .stage{overflow:hidden;display:flex}.dont .stage{position:relative;height:180px;background:#050818;align-items:center;justify-content:center}.dont .stage.busy{background:repeating-linear-gradient(45deg,#2f37ff,#2f37ff 12px,#8452ff 0,#8452ff 24px,#17eaea 0,#17eaea 36px)}.dont .stage img,.dont .stage svg{width:60%;max-height:70%;display:block}.dont .stage:after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--orange-500);transform:rotate(-12deg);opacity:.85;z-index:2}.dont .meta{padding:14px 18px 18px;border-top:1px solid var(--border-subtle)}.dont .meta .x{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-300);margin-bottom:6px}.dont .meta h5{font-size:15px;font-weight:600;margin:0 0 4px;letter-spacing:-.005em;color:var(--fg-default)}.dont .meta p{font-size:12.5px;color:var(--fg-muted);line-height:1.5;margin:0}.primitive-row{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:12px;gap:12px}@media (max-width:1000px){.primitive-row{grid-template-columns:repeat(3,1fr)}}@media (max-width:640px){.primitive-row{grid-template-columns:repeat(2,1fr)}}.primitive{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;background:hsla(0,0%,100%,.02);cursor:pointer;transition:border-color .2s ease}.primitive:hover{border-color:hsla(0,0%,100%,.18)}.primitive .chip{height:160px;display:flex;align-items:flex-end;justify-content:flex-start;padding:16px;position:relative}.primitive .chip .role{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.72}.primitive .chip.has-light .role{color:rgba(0,0,0,.74)}.primitive .chip.has-dark .role{color:hsla(0,0%,100%,.78)}.primitive .meta{padding:14px 16px 16px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:2px}.primitive .meta .n{font-size:14.5px;font-weight:600;color:var(--fg-default);letter-spacing:-.005em}.primitive .meta .h{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-muted);text-transform:uppercase}.rule-banner{position:relative;padding:40px 36px;border-radius:var(--radius-xl);border:1px solid rgba(133,160,255,.32);background:radial-gradient(ellipse 80% 100% at 100% 0,rgba(47,55,255,.16),transparent 60%),hsla(0,0%,100%,.02);display:grid;grid-template-columns:90px 1fr auto;grid-gap:28px;gap:28px;align-items:center}@media (max-width:720px){.rule-banner{grid-template-columns:1fr;padding:28px 24px}}.rule-banner .badge{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#dadadd 60%,#93949d);position:relative;display:flex;align-items:center;justify-content:center}.rule-banner .badge:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#000}.rule-banner .badge:before{content:"01";position:absolute;z-index:1;color:#fff;font-family:var(--font-mono);font-size:14px;letter-spacing:.08em;font-weight:500}.rule-banner .copy h3{font-size:22px;letter-spacing:-.018em;margin:0 0 8px;font-weight:600;color:var(--fg-default)}.rule-banner .copy p{font-size:14px;color:var(--fg-secondary);line-height:1.55;margin:0;max-width:60ch}.rule-banner .copy p em{font-style:normal;color:var(--blue-300)}.rule-banner .demo{display:flex;gap:8px;align-items:center}.rule-banner .demo .btn-white{background:#fff;color:#000}.rule-banner .demo .btn-black,.rule-banner .demo .btn-white{border:0;border-radius:4px;padding:11px 18px;font-size:13px;font-weight:500}.rule-banner .demo .btn-black{background:#000;color:#fff}.scale-strip{margin-bottom:28px}.scale-strip:last-child{margin-bottom:0}.scale-strip .label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.scale-strip .label .name{color:var(--fg-default)}.scale-strip .label .gloss{color:var(--fg-muted);font-size:11px}.scale-strip .bar{display:grid;grid-template-columns:repeat(11,1fr);height:64px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-default)}@media (max-width:900px){.scale-strip .bar{grid-template-columns:repeat(6,1fr);height:56px}}.scale-strip .step{position:relative;cursor:pointer;display:flex;align-items:flex-end;justify-content:flex-start;padding:6px 8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;transition:filter .16s ease}.scale-strip .step:hover{filter:brightness(1.08)}.scale-strip .step.is-light{color:rgba(0,0,0,.7)}.scale-strip .step.is-dark{color:hsla(0,0%,100%,.78)}.scale-strip .step.is-key{outline:1px solid var(--fg-default);outline-offset:-1px}.proportion-pair{display:grid;grid-template-columns:1fr;grid-gap:28px;gap:28px}.proportion-card{padding:24px;border-radius:var(--radius-xl);border:1px solid var(--border-default)}.proportion-card.daylight{background:#fff;color:#000}.proportion-card.nightfall{background:radial-gradient(ellipse 80% 100% at 100% 0,rgba(47,55,255,.18),transparent 60%),#050818;color:#fff}.proportion-card .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}.proportion-card .head .l{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.proportion-card.daylight .head .l{color:#767781}.proportion-card.nightfall .head .l{color:hsla(0,0%,100%,.55)}.proportion-card .head .l b{color:inherit;font-weight:500}.proportion-card .head h4{font-size:17px;font-weight:600;margin:0;letter-spacing:-.008em}.proportion-card.daylight .head h4{color:#000}.proportion-card.nightfall .head h4{color:#fff}.proportion-card .bar{height:44px;border-radius:var(--radius-md);overflow:hidden;display:flex}.proportion-card .seg{display:flex;align-items:center;padding:0 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-transform:uppercase}.proportion-card .seg .pct{opacity:.7;margin-left:8px}.semantic-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px}@media (max-width:800px){.semantic-grid{grid-template-columns:repeat(2,1fr)}}.semantic-card{border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;background:hsla(0,0%,100%,.02)}.semantic-card .swatches{display:flex;gap:4px;height:36px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle)}.semantic-card .swatches .s{flex:1 1}.semantic-card .name{font-size:15px;font-weight:600;letter-spacing:-.008em}.semantic-card .role{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}.semantic-card .pair{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-top:auto}.semantic-card .pair .pill{padding:6px 10px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-align:center}.color-donts{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:820px){.color-donts{grid-template-columns:1fr}}.color-dont{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;background:hsla(0,0%,100%,.02)}.color-dont .demo{height:130px;display:flex;align-items:center;justify-content:center;padding:18px;position:relative;border-bottom:1px solid var(--border-subtle)}.color-dont .demo:after{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;background:var(--orange-500);transform:rotate(-10deg);opacity:.85}.color-dont .demo .btn{padding:11px 18px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:500;border:0;display:inline-flex;align-items:center;gap:6px}.color-dont .info{padding:14px 18px 18px}.color-dont .info .x{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-300);margin-bottom:6px}.color-dont .info h5{font-size:15px;font-weight:600;margin:0 0 4px;letter-spacing:-.005em}.color-dont .info p{font-size:12.5px;color:var(--fg-muted);line-height:1.5;margin:0}.type-family{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}@media (max-width:900px){.type-family{grid-template-columns:1fr}}.family-card{border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:36px 32px;background:hsla(0,0%,100%,.02);position:relative;overflow:hidden}.family-card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}.family-card .meta .role{color:var(--blue-300)}.family-card .glyph-large{font-family:var(--font-sans);font-size:clamp(96px,12vw,184px);line-height:.9;letter-spacing:-.04em;font-weight:600;color:var(--fg-default);margin:0 0 18px}.family-card.mono .glyph-large{font-family:var(--font-mono);font-weight:400;letter-spacing:0}.family-card .alphabet{font-size:17px;line-height:1.45;color:var(--fg-secondary);letter-spacing:-.005em;margin:0 0 18px;border-bottom:1px solid var(--border-subtle);padding-bottom:16px}.family-card.mono .alphabet{font-family:var(--font-mono);font-size:14.5px}.family-card h4{font-size:18px;font-weight:600;margin:0 0 6px}.family-card p{font-size:14px;color:var(--fg-secondary);line-height:1.6;margin:0}.scale-ladder{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden}.scale-ladder .step{display:grid;grid-template-columns:110px 1fr 180px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--border-subtle);grid-gap:24px;gap:24px}.scale-ladder .step:last-child{border-bottom:0}@media (max-width:820px){.scale-ladder .step{grid-template-columns:90px 1fr}.scale-ladder .step .props{display:none}}.scale-ladder .step .token{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}.scale-ladder .step .token b{color:var(--blue-300);font-weight:500;display:block;margin-bottom:4px}.scale-ladder .step .specimen{color:var(--fg-default);text-wrap:balance}.scale-ladder .step .props{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-muted);text-align:right;line-height:1.55}.scale-ladder .step .props b{color:var(--fg-secondary);font-weight:400}.weight-row{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:12px;gap:12px}@media (max-width:900px){.weight-row{grid-template-columns:repeat(3,1fr)}}@media (max-width:540px){.weight-row{grid-template-columns:repeat(2,1fr)}}.weight-card{padding:24px 20px 22px;border:1px solid var(--border-default);border-radius:var(--radius-xl);background:hsla(0,0%,100%,.02);display:flex;flex-direction:column;gap:12px}.weight-card .glyph{font-size:56px;line-height:.95;letter-spacing:-.025em;color:var(--fg-default)}.weight-card .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--fg-muted);text-transform:uppercase}.weight-card .meta b{color:var(--blue-300);font-weight:500}.pairing-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}@media (max-width:900px){.pairing-grid{grid-template-columns:1fr}}.pair-card{border-radius:var(--radius-xl);border:1px solid;padding:32px 30px 36px;position:relative;overflow:hidden}.pair-card.daylight{background:#fff;color:#000;border-color:rgba(0,0,0,.08)}.pair-card.nightfall{background:radial-gradient(ellipse 80% 100% at 100% 0,rgba(47,55,255,.16),transparent 60%),#050818;color:#fff;border-color:hsla(0,0%,100%,.1)}.pair-card .ts{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:14px}.pair-card.daylight .ts{color:#767781}.pair-card.nightfall .ts{color:hsla(0,0%,100%,.55)}.pair-card .ts b{font-weight:500}.pair-card.daylight .ts b{color:var(--blue-700)}.pair-card.nightfall .ts b{color:var(--blue-300)}.pair-card .ed{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}.pair-card.daylight .ed{color:var(--blue-700)}.pair-card.nightfall .ed{color:var(--blue-300)}.pair-card .lead{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.025em;line-height:1.08;font-weight:600;margin:0 0 18px;text-wrap:balance}.pair-card .body{font-size:15px;line-height:1.6;margin:0 0 20px}.pair-card.daylight .body{color:#434349}.pair-card.nightfall .body{color:hsla(0,0%,100%,.78)}.pair-card .annotation{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;border-left:1px solid;padding-left:12px}.pair-card.daylight .annotation{color:#767781;border-left-color:rgba(0,0,0,.16)}.pair-card.nightfall .annotation{color:hsla(0,0%,100%,.6);border-left-color:hsla(0,0%,100%,.16)}.type-donts{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:820px){.type-donts{grid-template-columns:1fr}}.type-dont{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;background:hsla(0,0%,100%,.02)}.type-dont .demo{height:140px;display:flex;align-items:center;justify-content:center;padding:18px 22px;position:relative;border-bottom:1px solid var(--border-subtle);text-align:center;font-size:26px;letter-spacing:-.018em;font-weight:600;color:var(--fg-default)}.type-dont .demo:after{content:"";position:absolute;left:14%;right:14%;top:50%;height:2px;background:var(--orange-500);transform:rotate(-8deg);opacity:.85}.type-dont .info{padding:14px 18px 18px}.type-dont .info .x{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-300);margin-bottom:6px}.type-dont .info h5{font-size:14px;font-weight:600;margin:0 0 4px;letter-spacing:-.005em}.type-dont .info p{font-size:12.5px;color:var(--fg-muted);line-height:1.5;margin:0}.img-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:900px){.img-grid{grid-template-columns:1fr}}.img-tile{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid hsla(0,0%,100%,.1);background:#050818;aspect-ratio:1;margin:0;cursor:default}.img-tile.wide{grid-column:1/-1;aspect-ratio:23/10}.img-tile.double{grid-column:span 2;aspect-ratio:2/1}@media (max-width:900px){.img-tile.double,.img-tile.wide{aspect-ratio:16/10;grid-column:auto}}.img-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1);transform:scale(1)}.img-tile:hover img{transform:scale(1.03)}.img-tile figcaption{position:absolute;left:18px;bottom:14px;right:18px;display:flex;justify-content:space-between;align-items:flex-end;z-index:2;pointer-events:none}.img-tile figcaption .ix{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:hsla(0,0%,100%,.78);padding:4px 8px;background:rgba(0,0,0,.4);border-radius:var(--radius-sm);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.img-tile figcaption .ix b{color:#fff;font-weight:500;margin-right:6px}.img-tile figcaption .ratio{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:hsla(0,0%,100%,.55);padding:4px 6px;background:rgba(0,0,0,.4);border-radius:var(--radius-sm);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.img-tile[data-reveal] img{transform:scale(1.08);opacity:0;transition:transform 1.6s cubic-bezier(.22,1,.36,1),opacity .8s ease}.img-tile[data-reveal].is-revealed img{transform:scale(1);opacity:1}@media (prefers-reduced-motion:reduce){.img-tile:hover img,.img-tile[data-reveal] img{transform:none!important;transition:none!important;opacity:1!important}}.cosmic-row{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:900px){.cosmic-row{grid-template-columns:1fr}}.cosmic-slate{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid hsla(0,0%,100%,.08);aspect-ratio:4/5;background:linear-gradient(180deg,#000,#050818);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 22px 22px}.cosmic-slate svg.scene{position:absolute;inset:0;width:100%;height:100%;z-index:0}.cosmic-slate:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,hsla(0,0%,100%,.55) .5px,transparent 0),radial-gradient(circle,hsla(0,0%,100%,.32) .5px,transparent 0);background-size:180px 180px,280px 280px;background-position:0 0,90px 60px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 85%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent 85%);z-index:1}.cosmic-slate .info{position:relative;z-index:2}.cosmic-slate .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:hsla(0,0%,100%,.55);margin-bottom:8px}.cosmic-slate .tag b{color:var(--blue-300);font-weight:500;margin-right:6px}.cosmic-slate h4{font-size:20px;font-weight:600;letter-spacing:-.014em;margin:0 0 4px;color:#fff}.cosmic-slate p{font-size:13px;color:hsla(0,0%,100%,.72);line-height:1.55;margin:0;max-width:38ch}.structural-row{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:900px){.structural-row{grid-template-columns:1fr}}.structural-slate{border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#fff;color:#000;aspect-ratio:4/5;display:flex;flex-direction:column;position:relative}.structural-slate .stage{flex:1 1;position:relative;padding:28px;background:#fafafb;border-bottom:1px solid rgba(0,0,0,.06);overflow:hidden}.structural-slate .stage svg{width:100%;height:100%;display:block;overflow:visible}.structural-slate .info{padding:18px 22px 22px}.structural-slate .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#767781;margin-bottom:6px}.structural-slate .tag b{color:var(--blue-700);font-weight:500;margin-right:6px}.structural-slate h4{font-size:18px;font-weight:600;letter-spacing:-.012em;margin:0 0 4px;color:#000}.structural-slate p{font-size:13px;color:#4e4e56;line-height:1.55;margin:0}.img-donts{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px}@media (max-width:900px){.img-donts{grid-template-columns:repeat(2,1fr)}}.img-dont{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;background:hsla(0,0%,100%,.02)}.img-dont .demo{height:130px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.img-dont .demo:after{content:"";position:absolute;left:14%;right:14%;top:50%;height:2px;background:var(--orange-500);transform:rotate(-10deg);z-index:2}.img-dont .info{padding:12px 16px 16px;border-top:1px solid var(--border-subtle)}.img-dont .info .x{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-300);margin-bottom:4px}.img-dont .info h5{font-size:13px;font-weight:600;margin:0 0 2px}.img-dont .info p{font-size:11.5px;color:var(--fg-muted);line-height:1.45;margin:0}.particles{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px}@media (max-width:820px){.particles{grid-template-columns:1fr}}.particles .specimen{position:relative;height:240px;border-radius:var(--radius-xl);overflow:hidden;border:1px solid hsla(0,0%,100%,.08);background:linear-gradient(180deg,#000,#050818)}.particles .specimen:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,hsla(0,0%,100%,.55) .5px,transparent 0),radial-gradient(circle,hsla(0,0%,100%,.32) .5px,transparent 0);background-size:180px 180px,280px 280px;background-position:0 0,90px 60px;opacity:.55}.particles .specimen.sparse:after{background-size:280px 280px,420px 420px;opacity:.32}.particles .specimen .meta{position:absolute;bottom:14px;left:18px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:hsla(0,0%,100%,.62);z-index:2}.particles .specimen .meta b{color:#fff;font-weight:500}.icon-system{display:grid;grid-template-columns:1.05fr 1fr;grid-gap:28px;gap:28px;align-items:stretch}@media (max-width:900px){.icon-system{grid-template-columns:1fr}}.icon-spec{position:relative;padding:0;border:1px solid var(--border-default);border-radius:var(--radius-xl);background:repeating-linear-gradient(0deg,hsla(0,0%,100%,.04) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,hsla(0,0%,100%,.04) 0 1px,transparent 1px 24px),hsla(0,0%,100%,.02);min-height:320px;display:flex;align-items:center;justify-content:center}.icon-spec svg{width:240px;height:240px}.icon-spec .annot{position:absolute;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-300)}.icon-spec .annot.size{top:14px;left:14px}.icon-spec .annot.stroke{bottom:14px;left:14px}.icon-spec .annot.grid{top:14px;right:14px}.icon-rules{display:flex;flex-direction:column;gap:14px}.icon-rules .rule{padding:16px 18px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:hsla(0,0%,100%,.02)}.icon-rules .rule .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-300);margin-bottom:4px}.icon-rules .rule h5{font-size:15px;font-weight:600;letter-spacing:-.005em;margin:0 0 4px}.icon-rules .rule p{font-size:13px;color:var(--fg-secondary);line-height:1.55;margin:0}.icon-library{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:0;gap:0;border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden}@media (max-width:900px){.icon-library{grid-template-columns:repeat(3,1fr)}}@media (max-width:540px){.icon-library{grid-template-columns:repeat(2,1fr)}}.icon-library .icon-cell{padding:22px 14px 18px;border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);display:flex;flex-direction:column;align-items:center;gap:10px;background:hsla(0,0%,100%,.02)}.icon-library .icon-cell:last-child{border-right:0}.icon-library .icon-cell .glyph{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--fg-default)}.icon-library .icon-cell .glyph svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon-library .icon-cell .name{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);text-align:center}.motion-principles{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:900px){.motion-principles{grid-template-columns:1fr}}.motion-card{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;background:hsla(0,0%,100%,.02);display:flex;flex-direction:column}.motion-card .stage{height:200px;position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(47,55,255,.15),transparent 60%),linear-gradient(180deg,#000,#050818);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center}.motion-card .stage:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,hsla(0,0%,100%,.5) .5px,transparent 0);background-size:90px 90px;background-position:10px 10px;opacity:.4;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent)}.motion-card .info{padding:20px 22px 24px}.motion-card .info .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-300);margin-bottom:6px}.motion-card .info h4{font-size:20px;font-weight:600;letter-spacing:-.014em;margin:0 0 8px}.motion-card .info p{font-size:13.5px;color:var(--fg-secondary);line-height:1.55;margin:0 0 14px}.motion-card .info .specs{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--fg-muted);display:flex;flex-wrap:wrap;gap:6px}.motion-card .info .specs span{padding:4px 9px;border:1px solid var(--border-default);border-radius:var(--radius-full);background:hsla(0,0%,100%,.02)}.orbit-demo svg{width:80%;height:80%;overflow:visible}.orbit-demo .o-ring{fill:none;stroke:rgba(133,160,255,.5);stroke-width:1}.orbit-demo .o-spin-1{animation:spin 18s linear infinite;transform-origin:center}.orbit-demo .o-spin-2{animation:spin 12s linear infinite reverse;transform-origin:center}.drift-demo{position:relative;width:100%;height:100%}.drift-demo .star{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;filter:drop-shadow(0 0 6px rgba(133,160,255,.8));animation:drift 8s ease-in-out infinite}.drift-demo .star:first-child{top:30%;left:12%;animation-delay:0s}.drift-demo .star:nth-child(2){top:56%;left:38%;background:#85a0ff;animation-delay:1.5s}.drift-demo .star:nth-child(3){top:22%;left:62%;background:#c2b3ff;animation-delay:3s}.drift-demo .star:nth-child(4){top:68%;left:78%;background:#69fdf8;animation-delay:4.5s}@keyframes drift{0%,to{transform:translate(0)}50%{transform:translate(18px,-8px)}}.settle-demo{display:flex;align-items:center;justify-content:center}.settle-demo .blocks{display:flex;gap:6px}.settle-demo .blk{width:36px;height:60px;border-radius:4px;background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.18);animation:settle 2.8s cubic-bezier(.22,1,.36,1) infinite;opacity:0;transform:translateY(8px)}.settle-demo .blk:first-child{animation-delay:0s}.settle-demo .blk:nth-child(2){animation-delay:.12s}.settle-demo .blk:nth-child(3){animation-delay:.24s}.settle-demo .blk:nth-child(4){animation-delay:.36s}@keyframes settle{0%{opacity:0;transform:translateY(8px)}25%,75%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.duration-ladder{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden}.duration-ladder .row{display:grid;grid-template-columns:140px 100px 1fr 1fr;align-items:center;padding:14px 22px;border-bottom:1px solid var(--border-subtle);grid-gap:24px;gap:24px}.duration-ladder .row:last-child{border-bottom:0}@media (max-width:820px){.duration-ladder .row{grid-template-columns:100px 1fr}.duration-ladder .row .dur,.duration-ladder .row .ex{display:none}}.duration-ladder .row.head{background:hsla(0,0%,100%,.025);padding:12px 22px}.duration-ladder .row.head>div{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}.duration-ladder .name{font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--fg-default)}.duration-ladder .dur{font-family:var(--font-mono);font-size:13px;color:var(--blue-300);letter-spacing:.04em}.duration-ladder .use{font-size:13.5px;color:var(--fg-secondary);line-height:1.5}.duration-ladder .ex{display:flex;align-items:center;height:18px;position:relative}.duration-ladder .ex .bar{height:2px;background:linear-gradient(90deg,var(--blue-400),var(--blue-300));border-radius:2px;border-right:1px solid var(--fg-muted)}.easing-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:12px;gap:12px}@media (max-width:820px){.easing-grid{grid-template-columns:repeat(2,1fr)}}.easing-card{border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:0;background:hsla(0,0%,100%,.02);overflow:hidden}.easing-card .plot{height:130px;position:relative;border-bottom:1px solid var(--border-subtle);background:repeating-linear-gradient(0deg,hsla(0,0%,100%,.04) 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,hsla(0,0%,100%,.04) 0 1px,transparent 1px 16px)}.easing-card .plot svg{width:100%;height:100%}.easing-card .plot path{fill:none;stroke:var(--blue-300);stroke-width:2;stroke-linecap:round}.easing-card .info{padding:14px 18px 16px}.easing-card .info h5{font-size:14px;font-weight:600;margin:0 0 2px}.easing-card .info code{font-family:var(--font-mono);font-size:11px;color:var(--blue-300);letter-spacing:.02em;margin:0 0 6px;display:block}.easing-card .info p{font-size:12px;color:var(--fg-muted);line-height:1.5;margin:0}.motion-donts{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px;gap:14px}@media (max-width:820px){.motion-donts{grid-template-columns:1fr}}.motion-dont{border:1px solid var(--border-default);border-radius:var(--radius-xl);overflow:hidden;background:hsla(0,0%,100%,.02)}.motion-dont .stage{height:130px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--border-subtle);background:hsla(0,0%,100%,.02)}.motion-dont .stage:after{content:"";position:absolute;left:14%;right:14%;top:50%;height:2px;background:var(--orange-500);transform:rotate(-10deg);z-index:2}.motion-dont .stage .demo-element{padding:12px 22px;border-radius:var(--radius-md);background:hsla(0,0%,100%,.08);color:var(--fg-default);font-size:13px;font-weight:500}.motion-dont .stage.bouncing .demo-element{animation:badBounce .6s ease-in-out infinite}.motion-dont .stage.shaking .demo-element{animation:badShake .25s ease-in-out infinite}.motion-dont .stage.flashing .demo-element{animation:badFlash .4s ease-in-out infinite}@keyframes badBounce{0%,to{transform:translateY(-12px)}50%{transform:translateY(6px)}}@keyframes badShake{0%,to{transform:translateX(-4px)}50%{transform:translateX(4px)}}@keyframes badFlash{0%,to{opacity:1}50%{opacity:.3}}.motion-dont .info{padding:14px 18px 18px}.motion-dont .info .x{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-300);margin-bottom:6px}.motion-dont .info h5{font-size:14px;font-weight:600;margin:0 0 4px}.motion-dont .info p{font-size:12.5px;color:var(--fg-muted);line-height:1.5;margin:0}