.bd-hero{position:relative;overflow:hidden}.bd-hero:before{content:"";z-index:0;pointer-events:none;background-image:var(--grain);opacity:.12;background-size:160px 160px;position:absolute;inset:0;-webkit-mask:linear-gradient(#000 0 62%,#0000);mask:linear-gradient(#000 0 62%,#0000)}.bd-hero .frame{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:56px;min-height:600px;padding:80px 32px 88px;display:grid}.bd-hero h1{font:var(--h1-weight) clamp(56px, 6.2vw, 90px)/.98 var(--display);letter-spacing:var(--h1-track);color:var(--ink);margin:0}.bd-hero h1>span{display:block}.bd-soft{color:color-mix(in srgb, var(--ink) 48%, var(--page))}.bd-lead{max-width:30em;color:var(--soft);margin:28px 0 38px;font-size:19px;line-height:1.55}.bd-art{aspect-ratio:1;-webkit-user-select:none;user-select:none;justify-self:end;width:min(100%,470px);position:relative}.bd-art canvas{width:calc(100% - 30px);height:calc(100% - 30px);position:absolute;top:30px;left:30px}.bd-rule-x,.bd-rule-y{position:absolute}.bd-rule-x{background:repeating-linear-gradient(90deg, var(--rail) 0 1px, transparent 1px 8px) left bottom / 100% 6px no-repeat, repeating-linear-gradient(90deg, var(--rail) 0 1px, transparent 1px 40px) left bottom / 100% 12px no-repeat;height:20px;top:0;left:30px;right:0}.bd-rule-y{background:repeating-linear-gradient(180deg, var(--rail) 0 1px, transparent 1px 8px) right top / 6px 100% no-repeat, repeating-linear-gradient(180deg, var(--rail) 0 1px, transparent 1px 40px) right top / 12px 100% no-repeat;width:20px;top:30px;bottom:0;left:0}.bd-art-lab{font:500 11.5px/1 var(--mono);color:var(--soft);margin:0;position:absolute;bottom:-28px;right:0}.bd-index{z-index:6;background:color-mix(in srgb, var(--nav) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);position:sticky;top:55px}.bd-index .frame{height:52px;padding:0 32px;display:flex;position:relative}.bd-index .frame:after{content:"";pointer-events:none;background:repeating-linear-gradient(90deg, var(--rail) 0 1px, transparent 1px 8px) left bottom / 100% 6px no-repeat;height:6px;position:absolute;bottom:0;left:32px;right:32px}.bd-index a{font:500 12.5px/1 var(--mono);color:var(--soft);flex:1;align-items:center;gap:8px;padding:0 0 4px 12px;text-decoration:none;transition:color .2s;display:flex;position:relative}.bd-index a:before{content:"";background:var(--rail);width:1px;height:18px;position:absolute;bottom:0;left:0}.bd-index a b{color:var(--rail);font-weight:500}.bd-index a:hover,.bd-index a.on{color:var(--ink)}.bd-index a.on b{color:var(--magenta)}.bd-index a:focus-visible{outline:2px solid var(--magenta-press);outline-offset:-4px;border-radius:4px}.bd-ind{background:var(--magenta);pointer-events:none;width:0;height:3px;transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1);position:absolute;bottom:-1px;left:0}.bd-sec{border-bottom:1px solid var(--hair);scroll-margin-top:118px;position:relative}.bd-sec .frame.ruled{padding:104px 32px}.bd-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:48px;margin-bottom:48px;display:grid}.bd-sec h2{font:var(--h1-weight) 56px/1.04 var(--display);letter-spacing:var(--h1-track);color:var(--ink);margin:0}.bd-head p{max-width:34em;color:var(--body);margin:0;font-size:17px;line-height:1.6}.bd-sec h3{font:700 20px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}.bd-label{font:500 12.5px/1 var(--mono);color:var(--magenta-press);margin:0 0 14px}.bd-card{border:1px solid var(--hair);background:#fff;border-radius:14px;overflow:hidden}.bd-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.bd-plate{-webkit-user-select:none;user-select:none;place-items:center;height:280px;padding:28px;transition:background-color .35s,color .35s;display:grid;position:relative}.bd-plate[data-on=black]{background:var(--page);color:#0b0d10}.bd-plate[data-on=plum]{background:var(--page);color:var(--ink)}.bd-plate[data-on=white]{background:var(--ink);color:#fff}.bd-plate[data-on=raspberry]{color:var(--magenta);background:#fff}.bd-plate svg{fill:currentColor;width:74%;height:auto;display:block}.bd-plate .bd-is-mark{width:auto;height:82%}.bd-lockup{aspect-ratio:1478/479;width:74%;-webkit-mask:var(--lk) center / contain no-repeat;-webkit-mask:var(--lk) center / contain no-repeat;mask:var(--lk) center / contain no-repeat;background:currentColor;display:block}.bd-tile-foot{border-top:1px solid var(--hair);gap:12px;padding:16px 18px 18px;display:grid}.bd-tile-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.bd-tile-foot b{font:600 15px/1.2 var(--sans);color:var(--ink)}.bd-tile-foot small{font:500 11.5px/1.3 var(--mono);color:var(--soft)}.bd-chips{gap:6px;display:flex}.bd-chip{border:1px solid var(--rail);background:var(--c);cursor:pointer;border-radius:50%;width:22px;height:22px;padding:0}.bd-chip[aria-pressed=true]{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--magenta);border-color:#0000}.bd-chip:focus-visible{outline:2px solid var(--magenta-press);outline-offset:3px}.bd-dl{gap:6px;display:flex}.bd-dl button{border:1px solid var(--hair);cursor:pointer;height:30px;font:600 12px/1 var(--mono);color:var(--ink);background:#fff;border-radius:8px;align-items:center;gap:6px;padding:0 11px;transition:border-color .2s,color .2s;display:inline-flex}.bd-dl button:hover{border-color:var(--magenta);color:var(--magenta-press)}.bd-dl button:focus-visible{outline:2px solid var(--magenta-press);outline-offset:2px}.bd-dl svg{width:12px;height:12px}.bd-rules{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;margin-top:20px;display:grid}.bd-space{background:repeating-linear-gradient(135deg, var(--hair) 0 1px, transparent 1px 7px), var(--page);-webkit-user-select:none;user-select:none;place-items:center;height:320px;display:grid}.bd-cs{padding:var(--x,24px);background:var(--page);outline:1px dashed var(--magenta);color:var(--ink);position:relative}.bd-cs svg{fill:currentColor;width:clamp(170px,19vw,280px);height:auto;display:block}.bd-cs i{width:var(--x,24px);height:var(--x,24px);font:600 11px/1 var(--mono);color:var(--magenta-press);background:color-mix(in srgb, var(--magenta) 12%, transparent);place-items:center;font-style:normal;display:grid;position:absolute}.bd-cs i.t{top:0;left:50%;translate:-50%}.bd-cs i.b{bottom:0;left:50%;translate:-50%}.bd-cs i.l{top:50%;left:0;translate:0 -50%}.bd-cs i.r{top:50%;right:0;translate:0 -50%}.bd-card-copy{border-top:1px solid var(--hair);padding:18px 20px 20px}.bd-card-copy p{color:var(--body);margin:0;font-size:15px;line-height:1.55}.bd-sizes{background:var(--page);height:320px;color:var(--ink);-webkit-user-select:none;user-select:none;justify-content:center;align-items:flex-end;gap:40px;padding:0 24px 64px;display:flex}.bd-sizes figure{justify-items:center;gap:12px;margin:0;display:grid}.bd-sizes svg{height:var(--h);fill:currentColor;width:auto;display:block}.bd-sizes figcaption{font:500 11.5px/1 var(--mono);color:var(--soft)}.bd-donts{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px;display:grid}.bd-dont{text-align:left;cursor:pointer;width:100%;font:inherit;padding:0;display:block}.bd-dont .bd-plate{background:var(--page);height:190px;color:var(--ink);overflow:hidden}.bd-dont svg{width:70%;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .6s,color .6s}.bd-dont.stretch:not(.corrected) svg{transform:scaleX(1.42)scaleY(.8)}.bd-dont.recolor:not(.corrected) svg{color:#0070f3}.bd-dont.tilt:not(.corrected) svg{transform:rotate(-12deg)}.bd-dont.fx:not(.corrected) svg{filter:drop-shadow(5px 6px 0 var(--magenta)) drop-shadow(0 0 10px #d81b7a8c)}.bd-dont-foot{border-top:1px solid var(--hair);justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;display:flex}.bd-dont-foot b{font:600 14.5px/1.3 var(--sans);color:var(--ink)}.bd-dont-foot span{font:500 11px/1 var(--mono);color:var(--soft);background:#f6f1f8;border-radius:999px;flex:none;padding:4px 8px;transition:background-color .3s,color .3s}.bd-dont.corrected .bd-dont-foot span{background:var(--magenta);color:var(--on-accent)}.bd-dont:focus-visible{outline:2px solid var(--magenta-press);outline-offset:3px}.closing.bd-closing .cl-sub a{color:var(--cl-head);-webkit-text-decoration:underline 2px var(--cl-acc);text-decoration:underline 2px var(--cl-acc);text-underline-offset:4px;transition:text-underline-offset .2s}.closing.bd-closing .cl-sub a:hover{text-underline-offset:2px}.closing.bd-closing .cl-sub a:focus-visible{outline:2px solid var(--cl-acc);outline-offset:3px;border-radius:3px}.bd-ratio{border:1px solid var(--hair);-webkit-user-select:none;user-select:none;border-radius:14px;height:76px;margin-bottom:20px;display:flex;overflow:hidden}.bd-ratio span{font:500 11.5px/1.2 var(--mono);white-space:nowrap;align-items:flex-end;padding:10px 12px;display:flex;overflow:hidden}.bd-swatches{gap:16px;display:grid}.bd-swatches.main{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}.bd-swatches.more{grid-template-columns:repeat(6,minmax(0,1fr))}.bd-sw{border:1px solid var(--hair);cursor:pointer;text-align:left;width:100%;font:inherit;background:#fff;border-radius:14px;flex-direction:column;padding:0;transition:border-color .2s,transform .2s;display:flex;overflow:hidden}.bd-sw:hover{border-color:var(--rail);transform:translateY(-2px)}.bd-sw:focus-visible{outline:2px solid var(--magenta-press);outline-offset:3px}.bd-sw>i{background:var(--c);border-bottom:1px solid var(--hair);height:96px;display:block}.bd-swatches.main .bd-sw>i{height:170px}.bd-sw-info{gap:4px;padding:12px 14px 14px;display:grid}.bd-sw b{font:600 15px/1.2 var(--sans);color:var(--ink)}.bd-sw code{font:500 12px/1.3 var(--mono);color:var(--soft)}.bd-sw em{color:var(--body);font-size:13px;font-style:normal;line-height:1.4}.bd-sw .bd-copy{font:500 11px/1 var(--mono);color:var(--magenta-press);justify-self:start;margin-top:4px}.bd-swatches.more .bd-sw em{display:none}.bd-type{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;display:grid}.bd-spec{flex-direction:column;gap:22px;padding:30px;display:flex}.bd-spec-top{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.bd-aa{font:700 120px/.85 var(--display);letter-spacing:-.05em;color:var(--ink)}.bd-aa.mono{font:500 96px/.85 var(--mono);letter-spacing:-.02em}.bd-spec-name{text-align:right}.bd-spec-name b{font:700 22px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink);display:block}.bd-spec-name small{font:500 12px/1.4 var(--mono);color:var(--soft)}.bd-sample{font:var(--h1-weight) 44px/1.02 var(--display);letter-spacing:var(--h1-track);color:var(--ink);margin:0}.bd-sample.mono{font:500 22px/1.35 var(--mono);letter-spacing:0}.bd-glyphs{color:var(--body);overflow-wrap:anywhere;margin:0;font-size:16px;line-height:1.6}.bd-glyphs.mono{font:400 14px/1.6 var(--mono)}.bd-glyphs span{display:block}.bd-glyphs i{color:var(--ink);opacity:calc(clamp(0, var(--p,0) * (var(--n) + 2) - var(--i), 2) / 2);font-style:normal}.bd-glyphs.done i{opacity:1;color:color-mix(in srgb, var(--ink) calc(clamp(0, var(--p,1) * (var(--n) + 14) - var(--i), 14) / 14 * 100%), color-mix(in srgb, var(--ink) 34%, #fff))}.bd-spec .rl-more{color:var(--ink);align-self:flex-start;font-size:15px}.bd-scale{margin-top:20px}.bd-scale li{border-top:1px solid var(--hair);grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:20px;padding:16px 22px;display:grid}.bd-scale li:first-child{border-top:0}.bd-scale span{min-width:0;color:var(--ink);overflow-wrap:anywhere}.bd-scale code{font:500 12px/1.3 var(--mono);color:var(--soft);white-space:nowrap}.bd-scale ul{margin:0;padding:0;list-style:none}.bd-cursor{color:#e3cdd9;--cl-head:#fbe3ef;background:#3a2440;border-bottom:0}.bd-cursor .frame.ruled{border-color:#f5c9df38}.bd-cursor h2{color:var(--cl-head)}.bd-cursor .bd-head p{color:#e3cdd9}.bd-cursor .bd-label{color:#f56aa8}.bd-cursor .sc-code{color:#fbe3ef6b}.bd-cursor .sc-code.ok{color:inherit}.bd-cursor .sc-code.ok.flash{color:#f56aa8}.bd-cur-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;display:grid}.bd-cur-rules{gap:14px;margin:0;padding:0;list-style:none;display:grid}.bd-cur-rules li{color:#e3cdd9;grid-template-columns:18px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.5;display:grid}.bd-cur-rules svg{color:#f56aa8;width:18px;height:18px;margin-top:3px}.bd-cur-art{cursor:pointer;-webkit-user-select:none;user-select:none;background:#442b4b;border:1px solid #f5c9df38;border-radius:16px;height:420px;position:relative;overflow:hidden}.bd-cur-art canvas{position:absolute;top:50%;left:50%}.bd-cur-tag{background:var(--magenta);font:600 13px/1 var(--mono);color:#fff;border-radius:6px;padding:4px 9px;position:absolute}.bd-cur-ring{opacity:0;pointer-events:none;border:2px solid #f56aa8;border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;position:absolute}.bd-cps{font:600 11px/1 var(--mono);letter-spacing:.04em;color:#fbe3ef8f;pointer-events:none;opacity:0;background:#3a2440b8;border:1px solid #f5c9df38;border-radius:8px;align-items:baseline;gap:7px;padding:7px 11px;transition:opacity .25s,transform .25s;display:inline-flex;position:absolute;bottom:14px;right:14px;transform:translateY(4px)}.bd-cps.on{opacity:1;transform:none}.bd-cps b{min-width:2ch;font:600 20px/1 var(--mono);letter-spacing:0;color:#fbe3ef;text-align:right;font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce){.bd-cps{transition:none;transform:none}}.bd-words{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px;display:grid}.bd-pad{padding:26px 28px 28px}.bd-names{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.bd-name{border:1px solid var(--hair);background:var(--page);height:46px;font:700 21px/1 var(--display);letter-spacing:-.035em;color:var(--ink);cursor:default;border-radius:10px;align-items:center;gap:8px;padding:0 16px;display:inline-flex}.bd-name.ok{border-color:var(--magenta);background:#fff}.bd-name.ok svg{width:16px;height:16px;color:var(--magenta)}.bd-name.bad{color:var(--soft);-webkit-text-decoration:line-through 2px var(--magenta);text-decoration:line-through 2px var(--magenta);cursor:pointer;transition:color .3s}.bd-name.bad.corrected{color:var(--ink);border-color:var(--magenta);background:#fff;text-decoration:none}.bd-name:focus-visible{outline:2px solid var(--magenta-press);outline-offset:3px}.bd-note{color:var(--soft);margin:18px 0 0;font-size:14px;line-height:1.55}.bd-slogan{font:var(--h1-weight) 38px/1.05 var(--display);letter-spacing:var(--h1-track);color:var(--ink);margin:0}.bd-boiler{color:var(--body);margin:0 0 16px;font-size:16px;line-height:1.6}.bd-copybtn{border:1px solid var(--hair);cursor:pointer;height:32px;font:600 12.5px/1 var(--mono);color:var(--ink);background:#fff;border-radius:8px;align-items:center;gap:7px;padding:0 12px;transition:border-color .2s,color .2s;display:inline-flex}.bd-copybtn:hover{border-color:var(--magenta);color:var(--magenta-press)}.bd-copybtn:focus-visible{outline:2px solid var(--magenta-press);outline-offset:2px}.bd-copybtn svg{width:13px;height:13px}.bd-voice{margin-top:20px}.bd-voice .wk-ticks{margin:0}@media (max-width:1100px){.bd-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bd-tiles>:last-child{grid-column:1/-1}.bd-swatches.more{grid-template-columns:repeat(3,minmax(0,1fr))}.bd-donts{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:980px){.bd-hero .frame{grid-template-columns:minmax(0,1fr);gap:48px;min-height:0;padding:56px 16px 72px}.bd-art{justify-self:center;width:min(100%,380px)}.bd-index .frame{scrollbar-width:none;padding:0 16px;overflow-x:auto}.bd-index .frame:after{left:16px;right:16px}.bd-index a{flex:none;padding-right:22px}.bd-sec .frame.ruled{padding:72px 16px}.bd-head,.bd-rules,.bd-type,.bd-cur-grid,.bd-words{grid-template-columns:minmax(0,1fr);gap:20px}.bd-head{gap:16px;margin-bottom:32px}.bd-sec h2{font-size:40px}.bd-cur-art{height:340px}}@media (max-width:600px){.bd-plate{height:220px}.bd-space,.bd-sizes{height:260px}.bd-tiles,.bd-donts,.bd-swatches.main{grid-template-columns:minmax(0,1fr)}.bd-swatches.more{grid-template-columns:repeat(2,minmax(0,1fr))}.bd-aa{font-size:88px}.bd-aa.mono{font-size:72px}.bd-sample{font-size:34px}.bd-sizes{gap:22px}.bd-scale li{grid-template-columns:minmax(0,1fr);gap:6px}}@media (prefers-reduced-motion:reduce){.bd-plate,.bd-dont svg,.bd-dont-foot span,.bd-sw,.bd-ind,.bd-name.bad{transition:none}.bd-glyphs i,.bd-glyphs.done i{opacity:1;color:var(--ink)}}
