.guide-page{background:radial-gradient(rgba(154,163,160,.07) 1px,transparent 1.4px) 0 0 / 26px 26px,var(--carbon)}.guide-main{position:relative;z-index:1}.g-hero{padding-top:150px;padding-bottom:clamp(40px,7vh,80px)}.g-hero h1{font-size:clamp(46px,9vw,128px);margin-top:14px;margin-left:-.04em}.g-lede{max-width:62ch;margin-top:24px;font-size:clamp(13px,1.5vw,15px);line-height:1.8;color:var(--ash);font-variation-settings:"wdth" 87.5}.g-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);max-width:1180px}@media(max-width:860px){.g-cols{grid-template-columns:1fr}}.g-col p{font-size:14.5px;line-height:1.85;color:var(--ash);font-variation-settings:"wdth" 87.5;margin-bottom:16px}.g-col strong,.g-col b{color:var(--signal);font-weight:600}.g-col em{font-style:normal;color:var(--lime)}.g-col code,.g-note code,.g-list code{font-family:var(--fm);font-size:.86em;color:var(--signal);background:var(--carbon-3);padding:1px 6px;border:1px solid var(--ash-line)}.g-h3{font-size:17px;letter-spacing:.03em;margin-bottom:12px;color:var(--signal)}.g-note{max-width:74ch;margin-top:28px;font-family:var(--fm);font-size:11px;line-height:1.9;letter-spacing:.04em;color:var(--ash-dim);text-transform:uppercase}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:44px}@media(max-width:860px){.swatches{grid-template-columns:repeat(2,1fr)}}.swatch{border:1px solid var(--ash-line-2);background:#0b0e0fd9;padding:12px;font-family:var(--fm)}.swatch .chip{height:74px;margin-bottom:12px}.swatch b{display:block;font-family:var(--fd);font-variation-settings:"wdth" 118;font-weight:700;color:var(--signal);text-transform:uppercase;font-size:13px;letter-spacing:.04em}.swatch span{font-size:10px;letter-spacing:.1em;color:var(--ash-dim);text-transform:uppercase}.specimen{border:1px solid var(--ash-line-2);background:#090c0dd9;padding:clamp(20px,3.4vw,40px)}.spec-label{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}.spec-line{font-family:var(--fd);font-size:clamp(26px,5vw,54px);line-height:1.12;color:var(--signal);text-transform:uppercase;white-space:nowrap;overflow:hidden}.spec-mono{font-family:var(--fm);font-size:clamp(12px,1.8vw,16px);color:var(--ash);letter-spacing:.04em;overflow-x:auto;white-space:nowrap}.demo-wrap{border:1px solid var(--ash-line-2);background:#07090ae6;margin-bottom:46px}.demo-canvas{position:relative;height:clamp(280px,44vh,430px)}.demo-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.demo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 16px;border-top:1px solid var(--ash-line)}.demo-hint{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim)}.demo-btns{display:flex;flex-wrap:wrap;gap:8px}.demo-btns button{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);border:1px solid var(--ash-line-2);padding:7px 12px;transition:all .15s var(--snap)}.demo-btns button:hover{border-color:var(--lime);color:var(--lime)}.demo-btns button.on{background:var(--lime);color:var(--carbon);border-color:var(--lime)}.code-block{margin-top:34px;border:1px solid var(--ash-line-2);background:#090c0d;max-width:880px}.code-block figcaption{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);padding:10px 16px;border-bottom:1px solid var(--ash-line)}.code-block pre{padding:18px 16px;overflow-x:auto}.code-block code{font-family:var(--fm);font-size:11.5px;line-height:1.85;color:var(--ash)}.g-list{list-style:none;display:grid;gap:12px}.g-list li{font-size:14px;line-height:1.75;color:var(--ash);font-variation-settings:"wdth" 87.5;padding-left:18px;position:relative}.g-list li:before{content:"▸";position:absolute;left:0;color:var(--lime);font-family:var(--fm);font-size:11px;top:4px}.diary{display:grid;gap:0;max-width:980px}.d-row{display:grid;grid-template-columns:110px 1fr;gap:clamp(16px,3vw,40px);padding:26px 0;border-bottom:1px solid var(--ash-line)}.d-row:first-child{border-top:1px solid var(--ash-line)}.d-row .d-n{font-family:var(--fm);font-size:11px;letter-spacing:.18em;color:var(--lime)}.d-row p{font-size:14px;line-height:1.8;color:var(--ash);font-variation-settings:"wdth" 87.5}@media(max-width:640px){.d-row{grid-template-columns:1fr;gap:8px}}.g-credit{padding-bottom:clamp(80px,12vh,140px)}.credit-line{font-family:var(--fd);font-variation-settings:"wdth" 112;font-weight:640;font-size:clamp(20px,3vw,34px);line-height:1.3;color:var(--signal);text-transform:uppercase;max-width:22ch}.credit-line strong{color:var(--lime);font-weight:700}.credit-links{margin-top:32px;display:flex;flex-direction:column;gap:10px;font-family:var(--fm);font-size:12px;letter-spacing:.08em}.credit-links a{color:var(--ash);width:fit-content;border-bottom:1px solid var(--ash-line-2);padding-bottom:2px;transition:color .15s var(--snap),border-color .15s var(--snap)}.credit-links a:hover{color:var(--lime);border-color:var(--lime)}.guide-footer{background:transparent;border-top:1px solid var(--ash-line)}@media(max-width:900px){.guide-main section{padding-top:68px;padding-bottom:68px}.g-hero{padding-top:118px;padding-bottom:40px}.code-block code{font-size:10.5px;line-height:1.7}.demo-canvas{height:clamp(240px,36vh,340px)}}@media(max-width:640px){.guide-main section{padding-top:48px;padding-bottom:48px}.g-hero{padding-top:100px;padding-bottom:30px}.code-block{margin-top:22px}.code-block code{font-size:9.5px;line-height:1.6}.demo-canvas{height:200px}.sec-head{margin-bottom:28px}.g-col p,.d-row p{font-size:13.5px;line-height:1.75;margin-bottom:12px}.g-list li{font-size:13px;line-height:1.65}.code-block pre{padding:12px}.code-block code{font-size:10px;line-height:1.65}.swatch .chip{height:48px}.spec-line{font-size:6.9vw;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 99%);mask-image:linear-gradient(90deg,#000 78%,transparent 99%)}.d-row{padding:16px 0}.demo-canvas{height:240px}.g-note{margin-top:18px}}