.sys main{padding-top:calc(var(--s-8) + var(--s-2))}.sys .nav__index{gap:1em}.sys-hero__body{column-gap:var(--gutter);row-gap:var(--s-7);padding-block:var(--s-8) var(--s-9);grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;display:grid}.sys-hero__title{flex-direction:column;grid-column:1/-1;line-height:.86;display:flex}.sys-hero__en{font-size:var(--fs-display);color:var(--ink-2);letter-spacing:-.03em;font-weight:300}.sys-hero__ko{font-size:var(--fs-mega);letter-spacing:var(--tracking-mega);align-items:flex-end;font-weight:900;display:flex}.sys-hero__comma{transform-origin:50% 36%;width:.42em;height:auto;margin-bottom:-.2em;margin-left:-.06em}.sys-hero__lead{color:var(--ink);grid-column:1/span 6}.sys-toc{grid-column:9/span 4}.sys-toc li{border-top:var(--hair) solid var(--rule-soft)}.sys-toc li:last-child{border-bottom:var(--hair) solid var(--rule-soft)}.sys-toc a{gap:var(--s-4);font-family:var(--font-ko);letter-spacing:0;transition:color var(--t-fast) linear, padding var(--t-base) var(--ease-out);padding-block:7px;font-size:.8125rem;font-weight:600;display:flex}.sys-toc a span{font-family:var(--font-mono);color:var(--ink-3)}.sys-toc a:hover{color:var(--signal-deep);padding-left:var(--s-2)}.sys-sec{padding-block:var(--s-9) var(--s-10)}.sys-h2{margin-block:var(--s-6) var(--s-8);font-size:var(--fs-h1);letter-spacing:var(--tracking-head);font-weight:860;line-height:1.02}.sys-h2 .fr{color:var(--ink-2);font-weight:340}.sys-h3{margin-block:var(--s-9) var(--s-5);font-size:var(--fs-h3);letter-spacing:-.03em;font-weight:820}.sys-note{margin-top:var(--s-4);color:var(--ink-2)}.sys-principles{gap:var(--gutter);margin-top:var(--s-7);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.sys-card{align-content:start;gap:var(--s-4);padding:var(--s-5);background:var(--paper-bright);border-top:var(--stroke) solid var(--ink);min-height:300px;display:grid}.sys-card__num{color:var(--signal);font-size:2.5rem;line-height:1}.sys-card h3{font-size:var(--fs-h3);letter-spacing:-.03em;font-weight:820}.sys-card p{color:var(--ink-2)}.ratio{border:var(--hair) solid var(--ink);height:72px;display:flex}.ratio span{flex:var(--w) 1 0;background:var(--c);padding:var(--s-2);align-items:flex-end;min-width:0;display:flex;overflow:hidden}.ratio em{white-space:nowrap;font-style:normal}.swatches{gap:var(--gutter);margin-top:var(--s-8);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.sw{text-align:left;padding-bottom:var(--s-3);border-bottom:var(--hair) solid var(--rule-soft);gap:2px;display:grid}.sw__chip{height:140px;margin-bottom:var(--s-3);background:var(--c);box-shadow:inset 0 0 0 var(--hair) var(--rule-soft);transition:transform var(--t-base) var(--ease-spring)}.sw:hover .sw__chip{transform:translateY(-6px)}.sw__name{letter-spacing:-.02em;font-size:1.0625rem;font-weight:800}.sw__token,.sw__hex{color:var(--ink-2)}.sw__role{margin-top:var(--s-2);font-size:var(--fs-small);color:var(--ink-2)}.sw.is-copied .sw__hex{color:var(--signal-deep)}.fonts{gap:var(--gutter);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.font{align-content:start;gap:var(--s-3);padding-top:var(--s-4);border-top:var(--stroke) solid var(--ink);display:grid}.font__meta{justify-content:space-between;gap:var(--s-3);color:var(--ink-2);display:flex}.font__glyph{letter-spacing:-.04em;white-space:nowrap;font-size:clamp(4rem,7vw,7rem);line-height:1.05}.font__glyph--mono{font-family:var(--font-mono);letter-spacing:-.02em;font-size:clamp(3rem,5vw,5rem);font-weight:300}.font__name{letter-spacing:-.02em;font-size:1.125rem;font-weight:800}.font__use{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6}.scale{margin-top:var(--s-9);border-bottom:var(--hair) solid var(--rule)}.scale__row{align-items:baseline;gap:var(--gutter);padding-block:var(--s-4);border-top:var(--hair) solid var(--rule);grid-template-columns:9rem 5rem minmax(0,1fr);display:grid}.scale__row>.mono{color:var(--ink-2)}.scale__sample{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.space{gap:var(--s-2);display:grid}.space__row{align-items:center;gap:var(--gutter);grid-template-columns:6rem minmax(0,1fr) 3rem;display:grid}.space__row i{width:var(--v);background:var(--signal);transform-origin:0;height:14px;display:block}.space__row>.mono:last-child{text-align:right;color:var(--ink-2)}.gridshow{column-gap:var(--gutter);height:160px;margin-top:var(--s-8);grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.gridshow span{padding:var(--s-2);border-top:var(--stroke) solid var(--signal);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--signal-deep);transform-origin:top;background:#ff4a171f;align-items:flex-end;display:flex}.eases{gap:var(--gutter);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.ease{text-align:left;padding:var(--s-4);background:var(--paper-bright);border-top:var(--stroke) solid var(--ink);gap:4px;display:grid}.ease svg{aspect-ratio:1;width:100%;margin-bottom:var(--s-3);background:linear-gradient(var(--rule-soft), var(--rule-soft)) 0 100% / 100% 1px no-repeat, linear-gradient(var(--rule-soft), var(--rule-soft)) 0 0 / 1px 100% no-repeat;overflow:visible}.ease__curve{fill:none;stroke:var(--ink);stroke-width:1.5px}.ease__dot{fill:var(--signal)}.ease__name{font-size:var(--fs-h3);letter-spacing:-.03em;font-weight:820}.ease .mono{color:var(--ink-2)}.ease__use{margin-top:var(--s-2);font-size:var(--fs-small);color:var(--ink-2)}.durations{margin-top:var(--s-8);border-top:var(--hair) solid var(--rule);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.durations>div{gap:var(--s-2);padding:var(--s-4) var(--s-4) 0;border-left:var(--hair) solid var(--rule-soft);display:grid}.durations>div:first-child{border-left:0;padding-left:0}.durations .mono{color:var(--ink-2)}.durations b{letter-spacing:-.04em;font-size:clamp(3rem,6vw,5.5rem);font-style:normal;font-weight:300;line-height:.9}.durations small{color:var(--ink-2);margin-left:.1em;font-size:.32em}.durations span:last-child{font-size:var(--fs-small);color:var(--ink-2)}.sigs{gap:var(--gutter);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.sig-m{gap:var(--s-2);align-content:start;display:grid}.sig-m__stage{aspect-ratio:4/3;margin-bottom:var(--s-3);background:var(--paper-deep);place-items:center;display:grid;overflow:hidden}.sig-m__rise{letter-spacing:-.05em;font-size:clamp(3rem,5vw,4.5rem);font-weight:900;line-height:1;display:block;overflow:hidden}.sig-m__rise span{display:block}.sig-m__comma{width:34%;height:auto}.sig-m__mark{letter-spacing:-.03em;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:800}.sig-m__morph{width:56%;height:auto;overflow:visible}.sig-m h4{letter-spacing:-.02em;font-size:1.125rem;font-weight:820}.sig-m p{font-size:var(--fs-small);color:var(--ink-2)}.comp{gap:var(--gutter);padding-block:var(--s-6);border-top:var(--hair) solid var(--rule);grid-template-columns:10rem minmax(0,1fr);align-items:center;display:grid}.comp__label{color:var(--ink-2)}.comp__row{align-items:center;gap:var(--s-4);flex-wrap:wrap;display:flex}.comp__split{gap:var(--gutter);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;display:grid}.comp__split .stat{border-left:0;padding-left:0}.comp__tape{overflow:hidden}.voice-quote{margin:var(--s-8) 0 var(--s-4);font-size:var(--fs-h1);letter-spacing:-.03em;font-weight:600;line-height:1.15}.voice-quote cite{margin-top:var(--s-5);color:var(--ink-2);font-style:normal;display:block}.voice{gap:var(--gutter);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.voice ul{border-top:var(--stroke) solid var(--ink)}.voice li{padding-block:var(--s-4);border-bottom:var(--hair) solid var(--rule-soft);font-size:var(--fs-lead);line-height:1.5}.voice__no li{color:var(--ink-2);text-decoration:line-through;-webkit-text-decoration-color:var(--signal);text-decoration-color:var(--signal);text-decoration-thickness:2px}.foot--light{color:var(--ink-2);border-top:var(--hair) solid var(--rule);margin-top:0}.foot--light a:hover{color:var(--signal-deep)}@media (width<=1099px){.sys-principles,.fonts,.eases,.sigs{row-gap:var(--s-7);grid-template-columns:repeat(2,minmax(0,1fr))}.sys-hero__lead{grid-column:1/span 7}}@media (width<=719px){.sys-principles,.fonts,.voice{grid-template-columns:1fr}.sys-hero__lead,.sys-toc{grid-column:1/-1}.sys-hero__ko{font-size:clamp(5rem,30vw,10rem)}.durations{row-gap:var(--s-5);grid-template-columns:repeat(2,minmax(0,1fr))}.durations>div:nth-child(3){border-left:0;padding-left:0}.scale__row{grid-template-columns:1fr auto}.scale__sample{grid-column:1/-1}.comp,.comp__split{grid-template-columns:1fr}.gridshow{height:100px}}