:root{color-scheme:light;--page: #F3F7F7;--surface: #FFFFFF;--surface-hover: #EBEFEF;--text: #151518;--muted: #38383B;--hairline: #0A37371A;--accent: #6CF9D8;--accent-text: #60D5B9;--on-accent: #202024}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Supreme,sans-serif;font-feature-settings:"lnum" 1,"tnum" 1;background:var(--page);color:var(--text);overflow:hidden;height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#page-transition{position:fixed;inset:0;background:var(--page);z-index:999;transition:opacity .5s ease-out}#page-transition.done{opacity:0;pointer-events:none}#guide{display:flex;height:100vh}#side-nav{width:280px;min-width:280px;height:100vh;background:var(--page);border-right:.5px solid var(--hairline);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;opacity:0;transform:translate(-10px);transition:opacity .5s ease-out,transform .5s ease-out}#side-nav.visible{opacity:1;transform:translate(0)}#side-nav::-webkit-scrollbar{width:0}.sn-section{padding:20px;border-bottom:.5px solid var(--hairline);flex-shrink:0}.sn-logo a{display:block;line-height:0;text-decoration:none}.sn-logo img{height:40px;width:auto;display:block}.sn-info{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:400;letter-spacing:1.2px;text-transform:uppercase;line-height:1.2}.sn-info .muted{opacity:.3}.sn-download{margin-top:auto;padding:20px;border-top:.5px solid var(--hairline);flex-shrink:0}.sn-download a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 0;background:#151518;color:#fff;font-family:Supreme,sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1px;text-decoration:none;line-height:1;transition:opacity .15s ease}.sn-download a:hover{opacity:.7}.sn-download a svg{width:14px;height:14px}.sn-category{padding:20px;border-bottom:.5px solid var(--hairline);flex-shrink:0}.category-header{font-size:14px;font-weight:500;text-transform:uppercase;line-height:1.2;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .15s ease}.category-header:hover{opacity:.5}.category-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}.sn-category.open .category-body{grid-template-rows:1fr}.category-body-inner{overflow:hidden}.category-pages{display:flex;flex-direction:column;gap:12px;padding-left:12px;padding-top:15px}.page-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:400;line-height:1.2;transition:opacity .15s ease}.page-header:hover{opacity:.5}.page-chevron{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.page-chevron svg{width:14px;height:14px;transition:transform .35s cubic-bezier(.16,1,.3,1)}.page-item.active .page-chevron svg{transform:rotate(90deg)}.page-header--disabled{cursor:default;opacity:.4}.page-header--disabled:hover{opacity:.4}.page-coming-soon{font-size:12px;font-weight:500;letter-spacing:.8px;text-transform:uppercase}.page-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1)}.page-item.active .page-body{grid-template-rows:1fr}.page-body-inner{overflow:hidden}.page-sections{display:flex;flex-direction:column;gap:8px;padding-left:12px;padding-top:8px;position:relative}.section-link{font-size:13px;font-weight:400;line-height:1.2;color:var(--text);opacity:.3;cursor:pointer;text-decoration:none;display:block;transition:opacity .15s ease;white-space:nowrap}.section-link:hover{opacity:.55}.section-link.active{opacity:1}.section-dot{position:absolute;left:0;width:4px;height:4px;border-radius:50%;background:var(--accent-text);pointer-events:none;opacity:0;transition:top .3s cubic-bezier(.16,1,.3,1),opacity .2s ease}.section-dot.visible{opacity:1}#guide-content{flex:1;height:100vh;overflow-y:auto;overflow-x:hidden;opacity:0;transform:translateY(8px);transition:opacity .5s ease-out .1s,transform .5s ease-out .1s}#guide-content.visible{opacity:1;transform:translateY(0)}.content-header{background:var(--surface);height:320px;padding:40px;display:flex;align-items:flex-end}.content-header-text{display:flex;justify-content:space-between;width:100%;font-size:14px;line-height:1.2}.content-header-category{font-weight:500;text-transform:uppercase;flex-shrink:0}.content-header-title{font-weight:400;width:400px}.content-section{padding:40px;border-bottom:.5px solid var(--hairline);display:flex;flex-direction:column;gap:40px}.section-text{display:flex;justify-content:space-between}.section-title{font-size:14px;font-weight:500;text-transform:uppercase;line-height:1.2;flex-shrink:0}.section-desc{font-size:14px;font-weight:400;line-height:1.5;max-width:420px;width:420px}.section-desc p{margin-bottom:12px}.section-desc p:last-child{margin-bottom:0}.section-image img{width:100%;display:block}.section-images-stack{display:flex;flex-direction:column;gap:40px}.section-images-stack img{width:100%;display:block}.section-cards-row{display:flex;gap:20px}.section-card{flex:1;overflow:hidden;position:relative}.section-card img{width:100%;display:block}.section-card-label{position:absolute;bottom:12px;left:12px;font-size:12px;font-weight:500;color:var(--accent-text);text-transform:lowercase;letter-spacing:.5px}.section-resources{display:flex;justify-content:flex-end}.resources-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:400px}.resource-card{height:190px;background:var(--page);border:.5px solid var(--hairline);padding:20px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:background .15s ease;text-decoration:none;color:inherit}.resource-card:hover{background:var(--surface-hover)}.resource-card-info{display:flex;flex-direction:column;gap:4px}.resource-card-name{font-size:12px;font-weight:500;line-height:1.2}.resource-card-format{font-size:12px;font-weight:400;opacity:.3;text-transform:uppercase;letter-spacing:.5px}.resource-card-icon{align-self:flex-end}.resource-card-icon svg{width:16px;height:16px;opacity:.3}.playground{display:flex;flex-direction:column;border:.5px solid var(--hairline);overflow:hidden}.playground-canvas{position:relative;height:480px;display:flex;align-items:center;justify-content:center;background:#000;transition:background-color .4s ease}.playground-logo{display:flex;align-items:center;justify-content:center;transition:color .4s ease,width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1),opacity .2s ease}.playground-logo svg{width:100%;height:100%}.playground-controls{display:flex;flex-direction:column;border-top:.5px solid var(--hairline)}.playground-row{display:flex;align-items:center;padding:16px 20px;border-bottom:.5px solid var(--hairline);gap:16px}.playground-row:last-child{border-bottom:none}.playground-row--picker{align-items:flex-start}.playground-row--picker .playground-label{padding-top:4px}.playground-label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1px;opacity:.4;width:100px;flex-shrink:0}.playground-swatches{display:flex;gap:8px;align-items:center}.playground-swatch{width:20px;height:20px;border:1.5px solid transparent;cursor:pointer;transition:border-color .15s ease,transform .15s ease}.playground-swatch:hover{transform:scale(1.15)}.playground-swatch.active{border-color:var(--text)}.playground-swatch--light{box-shadow:inset 0 0 0 .5px #d4d4d4}.playground-hex{font-family:Supreme,sans-serif;font-size:12px;font-weight:400;background:none;border:none;border-bottom:1px solid var(--hairline);padding:2px 0;width:72px;color:var(--text);outline:none;margin-left:auto}.playground-hex:focus{border-bottom-color:var(--text)}.playground-picker{display:flex;flex-direction:column;gap:8px;flex:1}.playground-picker-area{position:relative;width:100%;height:160px;cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none;overflow:hidden}.playground-picker-area-bg{position:absolute;inset:0;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent)}.playground-picker-cursor{position:absolute;width:12px;height:12px;border:2px solid #fff;box-shadow:0 0 0 1px #0003;pointer-events:none;transform:translate(-50%,-50%)}.playground-picker-hue{position:relative;width:100%;height:10px;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}.playground-picker-hue-cursor{position:absolute;top:50%;width:4px;height:14px;background:var(--page);box-shadow:0 0 0 1px #0003;pointer-events:none;transform:translate(-50%,-50%)}.playground-slider{display:flex;align-items:center;gap:12px;flex:1}.playground-slider input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:1px;background:#d4d4d4;outline:none}.playground-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#151518;cursor:pointer;transition:transform .1s ease}.playground-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}.playground-slider-value{font-size:12px;font-weight:400;opacity:.4;width:48px;text-align:right;flex-shrink:0}.playground-toggles{display:flex}.playground-toggle{font-family:Supreme,sans-serif;font-size:12px;font-weight:400;padding:6px 14px;border:.5px solid var(--hairline);background:none;cursor:pointer;color:var(--text);opacity:.35;transition:opacity .15s ease,background .15s ease}.playground-toggle:last-child{border-left:none}.playground-toggle.active{opacity:1;background:var(--surface-hover)}.playground-color-indicator{display:flex;align-items:center;gap:8px;margin-left:auto}.playground-color-dot{width:8px;height:8px;transition:background-color .4s ease}.playground-color-dot--light{box-shadow:inset 0 0 0 .5px #d4d4d4}.playground-color-name{font-size:12px;font-weight:400;opacity:.4;text-transform:uppercase;letter-spacing:.5px}.content-footer{background:var(--surface);padding:40px;display:flex;gap:40px}.content-footer-col{flex:1;font-size:12px;font-weight:300;line-height:1.5;opacity:.5}.type-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.type-overview-card{background:#6cf9d8;height:400px;display:flex;flex-direction:column;position:relative;text-decoration:none;color:inherit;cursor:pointer}#type-hover-tag{position:fixed;top:0;left:0;z-index:999;pointer-events:none;height:26px;background:#151518;display:flex;align-items:center;padding:0 10px;overflow:hidden;white-space:nowrap;opacity:0;width:2px}#type-hover-tag span{font-family:Supreme,sans-serif;font-weight:500;font-size:12px;color:var(--accent-text);display:inline-block;opacity:0;transform:translateY(4px);transition:opacity .18s ease-out,transform .25s cubic-bezier(.16,1,.3,1)}.type-overview-sample{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 32px;font-size:32px;color:var(--text);line-height:1.25}.type-overview-bar{display:flex;justify-content:space-between;align-items:baseline;padding:16px 24px;border-top:.5px solid rgba(21,21,24,.12)}.type-overview-label{font-family:Supreme,sans-serif;font-size:12px;font-weight:500;color:var(--text);text-transform:uppercase;letter-spacing:.5px}.type-overview-role{font-family:Supreme,sans-serif;font-size:12px;font-weight:400;color:#15151866;text-transform:uppercase;letter-spacing:.5px}.type-specimen{background:#151518;display:flex;flex-direction:column}.type-specimen-row{display:grid;grid-template-columns:1fr 1fr;align-items:baseline;padding:20px 32px;border-bottom:.5px solid #6CF9D8}.type-specimen-row:last-child{border-bottom:none}.type-specimen-row-name{font-size:36px;color:#fff;line-height:1.3}.type-specimen-row-weight{font-size:36px;color:#fff;line-height:1.3;text-align:right}.type-scale-wrap{display:flex;flex-direction:column;gap:0}.type-scale-group-header{font-family:Supreme,sans-serif;font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:16px 0 8px}.type-scale-row{display:flex;align-items:baseline;padding:10px 0;gap:24px}.type-scale-meta{width:160px;flex-shrink:0;display:flex;flex-direction:column;gap:2px}.type-scale-label{font-family:Supreme,sans-serif;font-size:12px;font-weight:500;color:var(--text);letter-spacing:.3px}.type-scale-info{font-family:Supreme,sans-serif;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.3px}.type-scale-sample{color:var(--text);white-space:nowrap;overflow:visible;min-width:0}.type-usage-wrap{display:flex;flex-direction:column;gap:0}.type-usage-block{padding:40px 0;border-bottom:.5px solid var(--hairline)}.type-usage-block:first-child{padding-top:0}.type-usage-block:last-child{border-bottom:none}.type-usage-meta{display:flex;gap:48px;margin-bottom:20px}.type-usage-meta-left{display:flex;flex-direction:column;gap:2px;min-width:160px}.type-usage-role{font-family:Supreme,sans-serif;font-size:13px;font-weight:500;color:var(--text)}.type-usage-font{font-family:Supreme,sans-serif;font-size:13px;font-weight:400;color:var(--muted)}.type-usage-meta-specs{display:flex;flex-direction:column;gap:2px}.type-usage-spec{display:flex;gap:16px}.type-usage-spec-label{font-family:Supreme,sans-serif;font-size:13px;font-weight:400;color:var(--muted);min-width:72px}.type-usage-spec-value{font-family:Supreme,sans-serif;font-size:13px;font-weight:500;color:var(--text)}.type-usage-sample{color:var(--text);overflow:visible}.color-blocks-row{display:flex;gap:20px}.color-block{flex:1}.color-block-swatch{position:relative;height:240px;cursor:pointer}.cb-label{position:absolute;z-index:2;pointer-events:none;height:26px;background:#6cf9d8;display:flex;align-items:center;padding:0 10px;overflow:hidden;white-space:nowrap;opacity:0;width:2px}.cb-label span{font-family:Supreme,sans-serif;font-weight:500;font-size:12px;color:var(--text);display:inline-block;opacity:0;transform:translateY(4px);transition:opacity .18s ease-out,transform .25s cubic-bezier(.16,1,.3,1)}.color-block-swatch--light{box-shadow:inset 0 0 0 .5px #e8e8e8}.color-block-info{display:flex;justify-content:space-between;align-items:center;padding-top:12px}.color-block-name{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.color-block-hex{font-size:12px;font-weight:400;opacity:.4}.color-shades-row{display:flex;gap:20px}.color-shade-col{flex:1;display:flex;flex-direction:column}.color-shade-header{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;padding-bottom:12px}.color-shade-list{display:flex;flex-direction:column;overflow:hidden;flex:1}.color-shade-item{position:relative;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 14px;min-height:36px;color:var(--text);cursor:pointer;transition:filter .15s ease}.color-shade-item:hover{filter:brightness(.92)}.color-shade-item--dark:hover{filter:brightness(1.1)}.color-shade-item--light{box-shadow:inset 0 0 0 .5px #e8e8e8}.color-shade-step{font-size:12px;font-weight:500}.color-shade-hex{font-size:12px;font-weight:400;opacity:.6}.color-trans-wrap{background:#2d2e33;padding:24px}.color-trans-row{display:flex;gap:20px}.color-trans-col{flex:1}.color-trans-col--light{background:var(--page);padding:16px}.color-trans-header{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#ffffff80;padding-bottom:12px}.color-trans-col--light .color-trans-header{color:#15151866}.color-trans-list{display:flex;flex-direction:column;gap:4px}.color-trans-item{display:flex;align-items:center;gap:12px;cursor:pointer;padding:4px 0;transition:opacity .15s ease}.color-trans-item:hover{opacity:.8}.color-trans-swatch{width:32px;height:32px;flex-shrink:0}.color-trans-pct{font-size:12px;font-weight:500;color:#ffffffb3;width:36px}.color-trans-col--light .color-trans-pct{color:#151518b3}.color-trans-alpha{font-size:12px;font-weight:400;color:#ffffff4d;margin-left:auto;transition:color .15s ease}.color-trans-col--light .color-trans-alpha{color:#1515184d}.color-trans-item:hover .color-trans-alpha{color:#fff9}.color-trans-col--light .color-trans-item:hover .color-trans-alpha{color:#15151899}.color-trans-alpha.copied{color:var(--accent-text)!important}.icon-feature-card{display:block;text-decoration:none;overflow:hidden;transition:filter .2s ease}.icon-feature-card:hover{filter:brightness(.96)}.icon-feature-top{background:#151518;overflow:hidden}.icon-feature-img{display:block;width:100%;height:auto}.icon-feature-bar{display:flex;align-items:baseline;padding:16px 24px;border-top:.5px solid rgba(21,21,24,.12);gap:8px}.icon-feature-name{font-family:Supreme,sans-serif;font-size:12px;font-weight:500;color:var(--text);text-transform:uppercase;letter-spacing:.5px}.icon-feature-provider{font-family:Supreme,sans-serif;font-size:12px;font-weight:400;color:#15151866;text-transform:uppercase;letter-spacing:.5px}.icon-feature-link{font-family:Supreme,sans-serif;font-size:12px;font-weight:500;color:var(--text);margin-left:auto;text-transform:uppercase;letter-spacing:.5px;opacity:.4;transition:opacity .15s ease}.icon-feature-card:hover .icon-feature-link{opacity:1}#mobile-logo{display:none;position:fixed;top:20px;left:20px;z-index:1100;height:40px;background:var(--page);border:.5px solid var(--hairline);align-items:center;padding:0 12px;text-decoration:none}#mobile-logo img{height:20px;display:block}#mobile-menu-btn{display:none;position:fixed;top:20px;right:20px;z-index:1100;width:40px;height:40px;background:var(--page);border:.5px solid var(--hairline);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:0}#mobile-menu-btn span{display:block;width:16px;height:1.5px;background:#151518;transition:transform .3s ease,opacity .2s ease}.mobile-nav-open #mobile-menu-btn span:first-child{transform:translateY(3.75px) rotate(45deg)}.mobile-nav-open #mobile-menu-btn span:last-child{transform:translateY(-3.75px) rotate(-45deg)}#mobile-overlay{display:none}@media(max-width:768px){#mobile-logo,#mobile-menu-btn{display:flex}.sn-logo{display:none}#side-nav{position:fixed;inset:0;width:100%!important;min-width:0!important;z-index:1050;background:var(--page);transform:translateY(-100%);opacity:1;transition:transform .4s cubic-bezier(.16,1,.3,1);padding-top:72px;border-right:none}#side-nav.visible{opacity:1;transform:translateY(-100%)}.mobile-nav-open #side-nav,.mobile-nav-open #side-nav.visible{transform:translateY(0)}#mobile-overlay{display:block;position:fixed;inset:0;z-index:1040;background:#0000004d;opacity:0;pointer-events:none;transition:opacity .3s ease}.mobile-nav-open #mobile-overlay{opacity:1;pointer-events:auto}#guide{flex-direction:column}#guide-content{width:100%}.content-header{height:200px;padding:24px}.content-header-text{flex-direction:column;gap:8px;font-size:12px}.content-header-title{width:100%}.content-section{padding:24px;gap:24px}.section-text{flex-direction:column;gap:12px}.section-title{font-size:12px}.section-desc{max-width:100%;width:100%;font-size:13px}.section-cards-row{flex-direction:column;gap:12px}.section-resources{justify-content:stretch}.resources-grid{width:100%;grid-template-columns:1fr 1fr;gap:8px}.resource-card{height:160px;padding:16px}.type-overview-grid{grid-template-columns:1fr;gap:12px}.type-overview-card{height:280px}.type-overview-sample{font-size:24px;padding:24px 20px}.type-specimen-row{grid-template-columns:1fr;gap:4px;padding:16px 20px}.type-specimen-row-name{font-size:22px}.type-specimen-row-weight{font-size:22px;text-align:left}.type-scale-row{flex-direction:column;gap:6px;padding:8px 0}.type-scale-meta{width:100%}.type-scale-sample{white-space:normal;overflow:hidden;text-overflow:ellipsis}.type-usage-meta{flex-direction:column;gap:12px}.type-usage-sample{overflow:hidden;word-break:break-word}.color-blocks-row{flex-direction:column;gap:16px}.color-block-swatch{height:160px}.color-shades-row{flex-direction:column;gap:24px}.color-trans-row{flex-direction:column;gap:16px}.color-trans-wrap{padding:16px}.playground-canvas{height:280px}.playground-row{padding:12px 16px;gap:12px;flex-wrap:wrap}.playground-label{width:72px;font-size:12px}.playground-picker-area{height:120px}.icon-feature-bar{padding:12px 16px;flex-wrap:wrap}.content-footer{padding:24px;flex-direction:column;gap:20px}.sn-section,.sn-category{padding:16px 20px}.category-header{font-size:16px}.page-header{font-size:16px;padding:4px 0}.section-link{font-size:15px;padding:2px 0}}button,input{font:inherit}button{color:inherit}button,a,[role=button]{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip-link{position:fixed;left:16px;top:-100px;z-index:4000;background:var(--accent);color:var(--on-accent);padding:12px 20px}.skip-link:focus{top:16px}.category-header,.page-header{border:0;background:none;text-align:left;width:100%;font-family:Supreme,sans-serif}.category-header,.page-header{padding:8px 0}.section-link{opacity:.65;white-space:normal;padding:3px 0}.section-link.active,.page-item.active>.page-header{color:var(--accent-text);opacity:1}.sn-logo img{height:36px;max-width:100%}.sn-logo a{padding:8px 0}.sn-info{line-height:1.5;letter-spacing:.4px}.sn-info .muted{opacity:.65}.sn-download a{min-height:44px;background:var(--accent);color:var(--on-accent);border-radius:12px;font-size:12px;letter-spacing:.2px}.sn-download a:hover{background:#98fbe4;opacity:1}.content-header{background:var(--surface);height:280px}.content-header-text,.section-text{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);column-gap:32px}.content-header-text{align-items:end}.content-header-title{font-family:Supreme,sans-serif;font-size:clamp(40px,5vw,72px);font-weight:500;letter-spacing:-.035em;line-height:1.05;width:100%}.content-header-category{color:var(--muted)}.section-desc{font-size:16px;line-height:1.6;width:100%;max-width:none;color:var(--muted)}.section-desc a{color:var(--accent-text);text-underline-offset:3px}.section-title{max-width:100%;font-size:14px;line-height:1.5;letter-spacing:.02em}.content-footer-col{font-size:12px;opacity:.75}.resources-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.resource-card{background:var(--surface);border:none;border-radius:24px}.resource-card-name{font-size:16px}.resource-card-format{font-size:12px;opacity:.65;line-height:1.5}.resource-card-icon svg{opacity:.75}.section-image{overflow:hidden;border-radius:16px;background:var(--surface)}.logo-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.logo-showcase figure{display:flex;align-items:center;justify-content:center;min-height:360px;padding:56px;background:var(--surface);border-radius:16px}.logo-showcase img{width:min(100%,620px);max-height:260px}.logo-showcase--compact img{width:160px}.logo-showcase--decorative img{max-width:340px;max-height:280px}.playground{border-radius:16px}.playground-logo img{width:100%;height:100%;object-fit:contain}.playground-controls{background:var(--surface)}.playground-swatch{width:32px;height:32px;border-radius:8px}.playground-swatch.active{border-color:var(--accent);outline:1px solid var(--text);outline-offset:2px}.playground-label{opacity:.7}.playground-hex{color:var(--text);font-size:16px;width:92px;min-height:44px}.playground-hex:focus{border-bottom-color:var(--accent)}.playground-toggles{flex-wrap:wrap;gap:8px}.playground-toggle{color:var(--text);opacity:.75;min-height:44px;border-radius:8px;font-size:14px}.playground-toggle:last-child{border-left:.5px solid var(--hairline)}.playground-toggle.active{background:#6cf9d81a;color:var(--text)}.playground-slider input[type=range]{min-height:24px;background:linear-gradient(var(--hairline),var(--hairline)) center / 100% 2px no-repeat}.playground-slider input[type=range]::-webkit-slider-thumb{width:20px;height:20px;background:var(--accent)}.playground-slider-value,.playground-color-name{opacity:.7}.playground-color-dot{width:12px;height:12px;border-radius:50%}.type-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.type-overview-card{background:var(--surface);border-radius:16px;overflow:hidden}.type-overview-card:hover{background:var(--surface-hover)}.type-overview-sample{color:var(--text);font-size:40px}.type-overview-bar{border-color:var(--hairline);flex-wrap:wrap;gap:8px}.type-overview-label{color:var(--text);font-size:14px}.type-overview-role{color:var(--muted);font-size:12px}.type-specimen{background:var(--surface);border-radius:16px;overflow:hidden}.type-specimen-row{border-bottom-color:var(--hairline)}.type-scale-row{overflow-wrap:anywhere}.type-scale-sample{white-space:normal}.type-scale-meta{min-width:120px}.type-scale-info,.type-scale-label,.type-scale-group-header{font-size:14px}.type-usage-sample{overflow-wrap:anywhere}.color-blocks-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.color-block-swatch{border-radius:16px}.color-block-info{flex-wrap:wrap;gap:4px}.color-block-name,.color-block-hex{font-size:14px}.color-block-hex{opacity:.7}.color-shade-item{color:#151518;min-height:44px}.color-shade-item--dark{color:#fff}.color-shade-hex,.color-shade-step{font-size:14px}.cb-label span{color:var(--on-accent)}.color-trans-wrap{background:var(--page);border-radius:16px}.color-trans-col--light{background:#f3f7f7;color:#151518;border-radius:12px}.color-trans-item{min-height:44px}.color-trans-pct,.color-trans-alpha{font-size:14px}.gradient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.gradient-card{background:var(--surface);border-radius:16px;overflow:hidden}.gradient-strip{height:160px}.gradient-card figcaption{padding:20px 24px 8px;display:flex;justify-content:space-between;gap:8px}.gradient-card figcaption strong{font-weight:500}.gradient-card figcaption span,.gradient-card p{color:var(--muted)}.gradient-card p{padding:0 24px 24px;font-size:14px;line-height:1.6}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.mode-card{border-radius:16px;padding:24px;border:1px solid var(--hairline)}.mode-card figcaption{font-size:18px;font-weight:500;margin-bottom:24px}.mode-example{padding:24px;border-radius:16px;display:flex;flex-direction:column;gap:12px}.mode-example strong{font-weight:500;font-size:24px}.mode-action{border-radius:12px;padding:16px;font-weight:500;text-align:center}.mode-card dl{margin-top:24px;font-size:14px}.mode-card dl div{display:flex;justify-content:space-between;gap:8px;padding:6px 0}.mode-card dd{font-variant-numeric:tabular-nums}.font-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.font-links a{display:flex;flex-direction:column;gap:16px;padding:32px;background:var(--surface);border-radius:16px;color:var(--text);text-decoration:none}.font-links a:hover{background:var(--surface-hover)}.font-links strong{font-size:32px;font-weight:500}.font-links span{color:var(--accent-text);font-size:14px}.icon-feature-card{border-radius:16px;background:var(--surface)}.icon-feature-bar{border-color:var(--hairline)}.icon-feature-provider{color:var(--muted)}.icon-feature-link{opacity:.75}#mobile-menu-btn span{background:var(--text)}#mobile-menu-btn,#mobile-logo{min-height:44px;border-radius:12px}#mobile-menu-btn{width:44px}@media(max-width:1000px){.content-section,.content-header{padding:32px}.section-text{gap:32px}.resources-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.type-overview-sample{font-size:32px}.playground-color-indicator{display:none}}@media(max-width:768px){#guide,#guide-content,#side-nav{height:100dvh}.content-header{height:240px;padding:96px 24px 24px}.content-header-text,.section-text{display:flex;flex-direction:column;gap:24px;align-items:flex-start}.content-header-title{width:100%;font-size:48px}.content-section{padding:24px;scroll-margin-top:88px}.section-title{max-width:100%;font-size:14px}.section-desc{width:100%;font-size:16px}.logo-showcase{grid-template-columns:1fr}.logo-showcase figure{min-height:240px;padding:32px}.logo-showcase--decorative img{max-height:200px}.type-overview-grid,.gradient-grid,.mode-grid,.font-links{grid-template-columns:1fr}.color-blocks-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.color-block-swatch{height:140px}.color-block-name{font-size:12px}.playground-toggles{width:100%}.type-overview-sample{font-size:32px}.type-scale-sample{overflow:visible}.page-header,.category-header{min-height:44px}.section-link{min-height:32px;display:flex;align-items:center}}@media(max-width:380px){.color-blocks-row,.resources-grid{grid-template-columns:1fr}.content-header-title{font-size:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.type-specimen-row-name,.type-specimen-row-weight{color:var(--text)}.color-trans-col:not(.color-trans-col--light){background:#151518;color:#fff;padding:16px;border-radius:12px}.brand-radial{overflow:hidden;border-radius:16px;background:var(--surface)}.brand-radial svg{display:block;width:100%;height:auto}.brand-radial figcaption{font-size:14px;color:var(--muted);padding:24px}.original-diagrams{display:grid;gap:24px}.original-diagram{background:var(--surface);border-radius:16px;overflow:hidden}.original-diagram>a{display:block;background:#151518}.original-diagram img{display:block;width:100%;height:auto}.original-diagram figcaption{display:flex;justify-content:space-between;gap:16px;padding:20px 24px;font-size:14px;line-height:1.5}.original-diagram figcaption a{color:var(--muted);text-underline-offset:3px}.original-diagram>.diagram-mobile{display:none}.editorial-paragraph{background:var(--surface);border-radius:16px;padding:clamp(24px,5vw,64px)}.editorial-caption{display:block;font-size:14px;color:var(--muted);margin-bottom:40px}.editorial-paragraph p{font-family:ivypresto-text,serif;font-weight:400;font-size:24px;line-height:1.6;max-width:55ch;margin:0 auto 24px}.editorial-paragraph p:last-child{margin-bottom:0}@media(max-width:768px){.editorial-paragraph p{font-size:20px}.original-diagram>.diagram-desktop{display:none}.original-diagram>.diagram-mobile{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0}.original-diagram .diagram-symbol{width:min(64%,220px)}.original-diagram picture{display:block;padding:24px 0}.original-diagram figcaption{flex-direction:column;gap:6px;padding:16px 20px}}