:root{--paper:#faf5eb;--ink:#182635;--muted:#475b69;--line:#d8d1c3;--navy:#141d2b;--brass:#815217;--white:#fff;--focus:#815217;color-scheme:light;font-family:Pretendard,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:16px;line-height:1.75;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
img{display:block;max-inline-size:100%}
button,input,select{font:inherit}
a{color:inherit;text-underline-offset:.25em}
a:hover{text-decoration-thickness:2px}
:where(a,button,select,summary):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.wrap{width:min(1216px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:fixed;inset-block-start:-100px;inset-inline-start:20px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:6px}
.skip-link:focus{inset-block-start:12px}
.site-header{min-height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
.brand span{font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.03em}.brand img{width:32px;height:32px;flex:none}
.brand small{display:block;margin-top:5px;font-size:12px;font-weight:500;line-height:1.5;letter-spacing:0;color:var(--muted)}
.site-header nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 24px;font-size:14px}.current-location{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--brass)}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.site-header nav a:hover{text-decoration:underline}
.intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:80px;align-items:end;padding-block:78px 76px}
.eyebrow{margin:0 0 15px;font-size:11px;font-weight:650;letter-spacing:.16em;color:var(--brass)}
h1,h2,h3,p{overflow-wrap:break-word}
h1{margin:0;font-size:clamp(40px,4.8vw,62px);font-weight:650;line-height:1.17;letter-spacing:-.05em}
.lead{margin:26px 0 0;font-size:18px;line-height:1.8;letter-spacing:-.015em;color:var(--muted)}
.intro-note{padding-left:30px;border-left:1px solid var(--line);max-width:390px}
.note-rule{display:block;width:32px;height:3px;background:#f4be70;margin-bottom:22px}
.intro-note h2{font-size:20px;font-weight:650;letter-spacing:-.025em;margin:0 0 12px}
.intro-note p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 18px}
.intro-note p:last-child{margin-bottom:0}
.intro-note strong{font-weight:650;color:var(--ink)}
.collection{scroll-margin-top:24px;border-top:1px solid var(--ink);padding-top:36px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}
.section-heading .eyebrow{margin-bottom:9px}
.section-heading h2{font-size:27px;font-weight:650;line-height:1.4;letter-spacing:-.035em;margin:0}
.section-heading>p{margin:0;font-size:13px;color:var(--muted)}
.display-controls{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;background:#f1ebdf;border:1px solid var(--line);border-radius:10px}
.display-controls fieldset{display:flex;gap:20px;border:0;padding:0;margin:0;min-inline-size:0}
.display-controls legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.display-controls label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.display-controls select{min-height:44px;max-width:100%;background:var(--white);border:1px solid #687c87;border-radius:6px;color:var(--ink);font-size:14px;padding:8px 34px 8px 12px}
.display-controls p{font-size:12px;line-height:1.6;color:var(--muted);margin:0;max-width:240px}
.display-status{margin:12px 0 23px;min-height:22px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.icon-card{min-width:0;border:1px solid var(--line);border-radius:12px;background:#fffcf6;overflow:hidden}
.icon-preview{margin:0;height:150px;display:flex;align-items:center;justify-content:center;background:#f0eee7;border-bottom:1px solid var(--line)}
.icon-preview[data-mode="mono"]{background:#fff}
.icon-preview[data-mode="reverse"]{background:var(--navy);border-bottom-color:var(--navy)}
.icon-preview img{flex:none}
.icon-card-body{padding:21px 21px 17px}
.icon-card h3{font-size:18px;line-height:1.4;letter-spacing:-.025em;font-weight:650;margin:0 0 5px}
.icon-role{font-size:14px;color:var(--muted);margin:0;min-height:46px;line-height:1.65}
.size-strip{list-style:none;margin:20px 0 15px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:end}
.size-strip li{display:flex;flex-direction:column;align-items:center;gap:8px}
.size-strip .sample{height:40px;display:flex;align-items:center;justify-content:center}
.size-strip img{max-width:none;flex:none}
.size-strip span{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.download-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.download-links a{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;white-space:nowrap;border-radius:5px;color:var(--brass);text-decoration:none}
.download-links a:hover{background:#f1ebdf;text-decoration:underline}
.collection-note{font-size:13px;color:var(--muted);margin:20px 0 0;max-width:700px}
.load-error{padding:28px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.load-error h3{font-size:18px;margin:0 0 8px}
.load-error p{font-size:15px;color:var(--muted);margin:0}
.usage{margin-block:76px 64px;border-top:1px solid var(--ink);padding-top:36px}
/* Context samples are static compositions, not product controls. */
.context-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.context-sample{min-width:0;margin:0;display:flex;flex-direction:column}
.context-stage{flex:1;min-height:204px;padding:26px 24px;border:1px solid #344253;border-radius:10px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.context-stage img,.surface-example img{flex:none;max-inline-size:none}
.context-navy{background:#141d2b;color:#faf5eb}
.context-paper{background:#fffcf6;color:#182635;border-color:#d8d1c3}
.context-forest{background:#1b2018;color:#eff1e8;border-color:#495e35;justify-content:center;gap:18px}
.context-brand{display:flex;align-items:center;gap:12px}
.context-brand strong{font-size:22px;line-height:1.2;letter-spacing:-.03em;font-weight:700}
.context-brand small{display:block;margin-top:5px;font-size:12px;line-height:1.5;letter-spacing:0;font-weight:500;color:#c0c8d1}
.context-message{font-size:21px;line-height:1.5;font-weight:550;letter-spacing:-.035em;margin:0;word-break:keep-all}
.context-product{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.context-product strong{font-size:18px;line-height:1.4;font-weight:650;letter-spacing:-.025em}
.context-product>span{font-size:12px;color:#475b69;margin-left:auto}
.context-label{margin:0 0 2px;font-size:12px;color:#acb7a2}
.context-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:32px}
.context-row img{justify-self:center}
.context-row strong{font-size:14px;font-weight:600;line-height:1.5}
.context-row>span{font-size:12px;line-height:1.5;color:#acb7a2}
.context-sample figcaption{display:grid;gap:5px;margin-top:15px;font-size:12px;line-height:1.75;color:#475b69}
.context-sample figcaption strong{font-size:13px;font-weight:650;color:#182635}
.surface-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.surface-example{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:80px;padding:20px 24px;background:#fffcf6;color:#182635;border:1px solid #d8d1c3;border-radius:8px}
.surface-example strong{font-size:16px;font-weight:650;line-height:1.5}
.surface-example>span{margin-left:auto;color:#475b69;font-size:12px;line-height:1.5}
.surface-example-dark{background:#141d2b;color:#faf5eb;border-color:#344253}
.surface-example-dark>span{color:#c0c8d1}
.context-note{font-size:13px;line-height:1.8;color:#475b69;margin:14px 0 0}
.usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;margin-top:36px}
.usage-grid article{padding-left:20px;border-left:1px solid var(--line)}
.rule-index{font-size:12px;font-variant-numeric:tabular-nums;color:var(--brass)}
.usage-grid h3{font-size:17px;font-weight:650;letter-spacing:-.025em;margin:14px 0 10px}
.usage-grid p{font-size:14px;line-height:1.85;margin:0;color:var(--muted)}
.implementation{margin-top:40px;padding-top:15px;border-top:1px solid var(--line)}
.implementation summary{display:list-item;cursor:pointer;min-height:44px;align-content:center;font-size:14px;font-weight:600}
.implementation>div{padding-block:8px 10px;max-width:720px}
.implementation p{font-size:14px;color:var(--muted);margin:8px 0 12px}
.implementation pre{overflow:auto;background:#eee8dc;border-radius:8px;padding:20px;font-size:12px;line-height:1.8}
.implementation code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.site-footer{padding-block:28px 32px;border-top:1px solid var(--line);display:flex;align-items:start;justify-content:space-between;gap:28px;font-size:12px;color:var(--muted)}
.site-footer p{margin:0;line-height:1.85}
.site-footer>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 24px}
.site-footer a{display:inline-flex;align-items:center;min-height:40px}
#source-ref a{min-height:initial}
@media(min-width:1100px){.icon-card-body{padding-inline:24px}}
@media(max-width:1050px){.context-grid{gap:16px}.context-stage{padding:22px 18px}.context-product>span{width:100%;margin:0}.context-message{font-size:19px}.context-row{grid-template-columns:20px minmax(0,1fr)}.context-row>span{grid-column:2}.surface-pair{gap:16px}.surface-example>span{width:100%;margin-left:36px}.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.display-controls{align-items:start;flex-direction:column;gap:12px}.display-controls p{max-width:none}.intro{gap:40px}.usage-grid{gap:20px}}
@media(max-width:650px){.context-grid,.surface-pair{grid-template-columns:1fr;gap:24px}.context-stage{min-height:190px;padding:24px}.context-product>span{width:auto;margin-left:auto}.context-message{font-size:23px}.context-row{grid-template-columns:20px minmax(0,1fr) auto}.context-row>span{grid-column:auto}.surface-pair{gap:12px;margin-top:28px}.surface-example>span{width:auto;margin-left:auto}.wrap{width:calc(100% - 36px)}.site-header{min-height:0;padding-block:16px 10px;flex-direction:column;align-items:start;gap:12px}.site-header nav{width:100%;justify-content:flex-start;gap:0 20px;font-size:13px}.intro{grid-template-columns:1fr;gap:32px;padding-block:48px}.intro-note{padding-left:20px;max-width:none}.intro-note p{font-size:14px}.note-rule{display:none}.lead{font-size:16px;margin-top:22px}.section-heading{align-items:start;flex-direction:column;gap:10px}.section-heading h2{font-size:24px}.display-controls{padding:16px}.display-controls fieldset{flex-wrap:wrap;gap:12px}.display-controls label{align-items:start;flex-direction:column;gap:5px}.display-controls select{font-size:13px}.usage-grid{grid-template-columns:1fr;gap:28px}.usage{margin-block:56px 42px}.site-footer{flex-direction:column;gap:14px}.site-footer>div{justify-content:flex-start}.icon-grid{gap:12px}.icon-card-body{padding:16px 12px}.icon-card h3{font-size:16px}.download-links{grid-template-columns:repeat(2,minmax(0,1fr))}.icon-role{font-size:13px;min-height:43px}.icon-preview{height:124px}.collection-note{font-size:12px}}
@media(max-width:370px){.icon-grid{grid-template-columns:1fr}.download-links{grid-template-columns:repeat(4,minmax(0,1fr))}.icon-role{min-height:0}}
@media(forced-colors:active){.context-stage,.surface-example{border:1px solid CanvasText}.context-stage img,.surface-example img{forced-color-adjust:none}.current-location{color:CanvasText;text-decoration:underline}.icon-card,.display-controls,.download-links a{border:1px solid CanvasText}.icon-preview{forced-color-adjust:none}}