.btn--blue{color:var(--paper)}.btn--blue:before{background:var(--blue)}.btn--blue:hover{color:var(--ink)}.btn--blue:hover:before{background:var(--pink)}button.btn{cursor:pointer}code{white-space:nowrap;font-family:var(--mono);background:var(--fog);padding:.1em .35em;font-size:.88em}.bs-hero{background:var(--blue);min-height:78svh;color:var(--paper);display:flex;position:relative;overflow:hidden}.bs-hero__inner{z-index:1;padding:calc(var(--nav-h) + 72px) var(--pad) clamp(56px, 8vh, 96px);pointer-events:none;justify-items:start;gap:28px;margin-top:auto;display:grid;position:relative}.bs-hero__title{font-family:var(--display);letter-spacing:-.05em;font-size:clamp(54px,min(10vw,17svh),200px);font-weight:800;line-height:.86}.bs-hero__lead{color:#f6f6f3e6;max-width:52ch;font-size:clamp(17px,1.4vw,21px)}.bs-layout{padding-inline:var(--pad);grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,4vw,80px);display:grid}.bs-toc{align-self:start;gap:18px;padding-top:clamp(72px,8vw,120px);display:grid;position:sticky;top:96px}.bs-toc ol{border-top:1px solid var(--line);display:grid}.bs-toc a{border-bottom:1px solid var(--line);color:#0b0b148c;transition:color .3s, padding .5s var(--ease);align-items:baseline;gap:12px;padding:10px 0;font-weight:500;text-decoration:none;display:flex}.bs-toc a span{font-family:var(--mono);font-size:11px}.bs-toc a:hover{color:var(--ink)}.bs-toc a[aria-current=true]{color:var(--ink);box-shadow:inset 4px 0 0 var(--blue);padding-left:10px}.bs-content{min-width:0}.bs-sec{border-bottom:1px solid var(--line);padding-block:clamp(72px,8vw,128px)}.bs-sec__head{gap:22px;margin-bottom:clamp(36px,4vw,64px);display:grid}.bs-lead{color:#0b0b14bf;max-width:62ch;font-size:clamp(17px,1.35vw,20px)}.bs-text{color:#0b0b14cc;max-width:64ch;margin-bottom:28px}.bs-note{color:#0b0b149e;max-width:60ch;font-size:14px}.bs-h3{font-family:var(--display);letter-spacing:-.035em;margin:clamp(40px,4vw,64px) 0 18px;font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.05}.bs-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);display:grid}.bs-split p{color:#0b0b14cc;max-width:52ch}.bs-statement{max-width:22ch;font-family:var(--display);letter-spacing:-.04em;margin-bottom:32px;font-size:clamp(28px,3.2vw,52px);font-weight:700;line-height:1.02}.bs-rules{border-top:1px solid var(--ink);grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:40px;display:grid}.bs-rules li{border-bottom:1px solid var(--line);align-content:start;gap:8px;padding:22px 24px 28px 0;display:grid}.bs-rules li:nth-child(odd){border-right:1px solid var(--line);padding-right:32px}.bs-rules li:nth-child(2n){padding-left:32px}.bs-rules span{font-family:var(--mono);color:var(--blue);font-size:12px}.bs-rules h3{font-family:var(--display);letter-spacing:-.035em;font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.05}.bs-rules p{color:#0b0b14bf;max-width:40ch}.bs-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.bs-logo-tile{aspect-ratio:16/9;background:var(--bg);color:var(--fg);outline:1px solid var(--line);outline-offset:-1px;grid-template-rows:1fr auto;display:grid}.bs-logo-tile .logo{place-self:center;width:44%}.bs-logo-tile figcaption{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;padding:12px 16px;font-size:12px;display:flex}.bs-logo-tile figcaption span{color:var(--pink)}.bs-clearspace{background:var(--fog);justify-items:center;gap:12px;padding:40px;display:grid}.bs-clearspace__box{outline:1.5px dashed var(--blue);color:var(--ink);padding:50px 60px;position:relative}.bs-clearspace__box .logo{outline:1px solid #2b2bff59;width:clamp(180px,22vw,300px)}.bs-clearspace figcaption{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:12px}.bs-clearspace figcaption span{color:var(--blue);font-weight:500}.bs-donts{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.bs-donts p{color:#0b0b14bf;margin-top:10px;font-size:14px}.bs-dont{aspect-ratio:4/3;background:var(--blue);color:var(--paper);place-items:center;display:grid;position:relative;overflow:hidden}.bs-dont .logo{width:62%}.bs-dont:after{content:"";background:var(--pink);height:3px;position:absolute;inset:50% -10% auto;transform:rotate(-13deg)}.bs-dont[data-dont=rotate] .logo{rotate:-18deg}.bs-dont[data-dont=stretch] .logo{scale:1.35 .7}.bs-dont[data-dont=pink]{background:var(--ink)}.bs-dont[data-dont=pink] .logo{color:var(--pink)}.bs-dont[data-dont=busy]{background:url(/media/oreo-vignett.jpg) 50%/cover}.bs-swatches{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.6fr);gap:12px;display:grid}.bs-swatch{background:var(--c);min-height:300px;color:var(--t);text-align:left;outline:1px solid var(--line);outline-offset:-1px;transition:translate .5s var(--ease);flex-direction:column;gap:10px;padding:18px;display:flex}.bs-swatch:hover{translate:0 -6px}.bs-swatch__name{font-family:var(--display);letter-spacing:-.03em;font-size:24px;font-weight:700}.bs-swatch__vals{font-family:var(--mono);letter-spacing:.04em;font-size:12px}.bs-swatch__role{opacity:.85;margin-top:auto;font-size:14px;line-height:1.4}.bs-swatch--small .bs-swatch__name{font-size:18px}.bs-copied{min-height:1.5em;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--blue);margin-top:10px;font-size:12px}.bs-ratio{outline:1px solid var(--line);outline-offset:-1px;height:64px;margin-bottom:10px;display:flex}.bs-ratio span{flex:var(--w);background:var(--c);color:var(--t);font-family:var(--mono);white-space:nowrap;align-items:flex-end;padding:10px;font-size:12px;display:flex;overflow:hidden}.bs-contrast{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.bs-pair{outline:1px solid var(--line);outline-offset:-1px;grid-template-rows:auto auto;display:grid}.bs-pair__sample{background:var(--b);color:var(--f);font-family:var(--display);letter-spacing:-.03em;align-items:center;gap:12px;padding:18px;font-size:26px;font-weight:700;display:flex}.bs-pair__sample small{font-family:var(--sans);letter-spacing:0;font-size:15px;font-weight:400}.bs-pair__meta{background:var(--paper);font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;justify-content:space-between;gap:10px;padding:10px 14px;font-size:12px;display:flex}.bs-pair__meta b{font-weight:500}.bs-pair__meta i{color:#0b0b14a6;font-style:normal}.bs-pair__meta i.is-no{color:#b0124a}.bs-families{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.bs-family{outline:1px solid var(--line);outline-offset:-1px;grid-template-rows:auto 1fr;gap:18px;padding:22px;display:grid}.bs-family__specimen{letter-spacing:-.04em;font-size:clamp(88px,9vw,150px);line-height:.9}.bs-family--syne{background:var(--ink);color:var(--paper)}.bs-family--syne .bs-family__specimen{font-family:var(--display);font-weight:800}.bs-family--geist .bs-family__specimen{font-family:var(--sans);font-weight:500}.bs-family--mono{background:var(--blue);color:var(--paper)}.bs-family--mono .bs-family__specimen{font-family:var(--mono);letter-spacing:-.02em;font-weight:400}.bs-family h3{font-family:var(--display);letter-spacing:-.03em;font-size:28px;font-weight:700}.bs-family__role{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;opacity:.75;margin:4px 0 12px;font-size:12px}.bs-family p:last-child{opacity:.85;font-size:15px}.bs-scale{border-top:1px solid var(--ink)}.bs-scale li{border-bottom:1px solid var(--line);grid-template-columns:170px minmax(0,1fr);align-items:baseline;gap:20px;padding:18px 0;display:grid}.bs-scale__meta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#0b0b1499;font-size:11px;line-height:1.5}.bs-scale__sample{overflow-wrap:break-word;min-width:0}.bs-tester{background:var(--blue);color:var(--paper);gap:24px;padding:clamp(20px,3vw,40px);display:grid}.bs-tester>*{min-width:0}.bs-tester__controls{flex-wrap:wrap;align-items:end;gap:16px 28px;display:flex}.bs-tester__controls>label{min-width:0;max-width:100%;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;gap:6px;font-size:12px;display:grid}.bs-tester input[type=text]{border:1.5px solid var(--paper);width:min(360px,100%);min-height:44px;color:var(--paper);font:400 16px var(--sans);background:0 0;padding:0 12px}.bs-tester input[type=range]{width:180px;accent-color:var(--pink)}.bs-tester fieldset{align-items:center;gap:6px;display:flex}.bs-tester legend{float:left;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;margin-right:10px;font-size:12px}.bs-tester fieldset label{cursor:pointer;position:relative}.bs-tester fieldset input{opacity:0;cursor:pointer;position:absolute;inset:0}.bs-tester fieldset span{border:1.5px solid var(--paper);min-width:52px;min-height:40px;font:500 14px var(--mono);place-items:center;transition:background .3s,color .3s;display:inline-grid}.bs-tester fieldset input:checked+span{background:var(--paper);color:var(--blue)}.bs-tester fieldset input:focus-visible+span{outline:2px solid var(--pink);outline-offset:3px}.bs-tester__out{font-family:var(--display);font-weight:var(--tw,800);font-size:min(calc(var(--ts,96) * 1px), 12vw);letter-spacing:-.045em;overflow-wrap:break-word;min-height:1em;line-height:.9}.bs-dos{border-top:1px solid var(--line);gap:0;margin-top:32px;display:grid}.bs-dos li{border-bottom:1px solid var(--line);max-width:80ch;padding:14px 0 14px 34px;position:relative}.bs-dos li:before{width:22px;height:22px;font:500 13px/1 var(--mono);place-items:center;display:grid;position:absolute;top:13px;left:0}.bs-dos .is-do:before{content:"✓";background:var(--blue);color:var(--paper)}.bs-dos .is-dont:before{content:"×";background:var(--ink);color:var(--pink)}.bs-angle{background:var(--fog);padding:clamp(20px,3vw,40px)}.bs-angle svg{width:100%;height:auto;display:block}.bs-angle__v{stroke:#0b0b1459;stroke-width:8px;stroke-dasharray:30 24}.bs-angle__s{stroke:var(--pink);stroke-width:18px}.bs-angle__arc{fill:none;stroke:var(--blue);stroke-width:10px}.bs-angle__label{font-family:var(--display);fill:var(--blue);font-size:150px;font-weight:800}.bs-angle figcaption{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;margin-top:14px;font-size:12px}.bs-elements{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.bs-el{align-content:start;gap:8px;display:grid}.bs-el h4{font-family:var(--display);letter-spacing:-.03em;margin-top:8px;font-size:22px;font-weight:700}.bs-el p{color:#0b0b14bf;font-size:14.5px}.bs-el__demo{aspect-ratio:4/3;background:var(--fog);place-items:center;display:grid;overflow:hidden}.bs-el__demo--blue{background:var(--blue);color:var(--paper)}.bs-el__demo--cut{background:var(--fog);padding:0}.bs-el__demo--cut img{object-fit:cover;clip-path:polygon(0 0,100% 0,78% 100%,0 100%);width:100%;height:100%;transition:clip-path .8s var(--ease)}.bs-el:hover .bs-el__demo--cut img{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.bs-el__demo--pat{background:repeating-linear-gradient(77deg, var(--ink) 0 2px, transparent 2px 14px), var(--fog)}.bs-el:hover .bs-el__demo--pat{animation:1.6s linear infinite drift}.bs-fieldlab{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;display:grid}.bs-fieldlab__stage{background:var(--blue);min-height:420px;position:relative;overflow:hidden}.bs-fieldlab__modes{border-top:1px solid var(--ink);align-content:start;display:grid}.bs-fieldlab__modes button{border-bottom:1px solid var(--line);text-align:left;transition:padding .5s var(--ease);gap:2px;padding:12px 0 12px 18px;display:grid;position:relative}.bs-fieldlab__modes b{font-family:var(--display);letter-spacing:-.03em;font-size:20px;font-weight:700}.bs-fieldlab__modes span{color:#0b0b14b3;font-size:14px}.bs-fieldlab__modes button:before{content:"";background:var(--blue);width:6px;height:20px;transform:skewX(var(--skew)) scaleY(0);transition:transform .4s var(--ease);position:absolute;top:16px;left:2px}.bs-fieldlab__modes button[aria-checked=true]{padding-left:26px}.bs-fieldlab__modes button[aria-checked=true]:before{transform:skewX(var(--skew)) scaleY(1)}.bs-motion{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;display:grid}.bs-curve{background:var(--ink);color:var(--paper);justify-items:center;gap:12px;padding:28px;display:grid}.bs-curve svg{width:min(100%,260px);overflow:visible}.bs-curve__axis{stroke:#f6f6f34d;stroke-width:1px;fill:none}.bs-curve__handle{stroke:#f6f6f359;stroke-width:1px;stroke-dasharray:3 4;fill:none}.bs-curve__line{stroke:var(--pink);stroke-width:3px;fill:none}.bs-curve__dot{fill:var(--paper)}.bs-curve code{color:var(--paper);background:0 0}.bs-durations{border-top:1px solid var(--ink);display:grid}.bs-durations li{border-bottom:1px solid var(--line);grid-template-columns:130px 100px 1fr;align-items:baseline;gap:12px;padding:18px 0;display:grid}.bs-durations b{font-family:var(--display);white-space:nowrap;letter-spacing:-.04em;font-size:26px;font-weight:800}.bs-durations span{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--blue);font-size:12px}.bs-durations p{color:#0b0b14bf}.bs-play{background:var(--fog);grid-template-columns:minmax(0,1.6fr) auto;align-items:center;gap:24px;margin-top:12px;padding:clamp(20px,3vw,36px);display:grid}.bs-play__stage{align-items:center;height:clamp(140px,14vw,200px);display:flex;position:relative;overflow:hidden}.bs-play__word{font-family:var(--display);letter-spacing:-.05em;padding-right:.2em;font-size:clamp(34px,7vw,120px);font-weight:800;line-height:.9}.bs-play__buttons{justify-items:start;gap:14px;display:grid}.bs-play__stage.is-reveal .bs-play__word{animation:p-reveal 1.1s var(--ease) both}@keyframes p-reveal{0%{transform:skewY(7deg)}}.bs-play__stage.is-cut .bs-play__word{animation:p-cut 1.1s var(--ease) both}@keyframes p-cut{0%{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%)}to{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}}.bs-play__stage.is-swap .bs-play__word{animation:p-swap .6s var(--ease) both}@keyframes p-swap{0%{opacity:0;translate:0 18px}}.bs-voice{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.bs-voice li{outline:1px solid var(--line);outline-offset:-1px;align-content:start;gap:10px;padding:22px;display:grid}.bs-voice h3{font-family:var(--display);letter-spacing:-.03em;align-items:baseline;gap:12px;margin-bottom:6px;font-size:22px;font-weight:700;display:flex}.bs-voice h3 span{font-family:var(--mono);color:var(--blue);font-size:12px;font-weight:400}.bs-say,.bs-avoid{grid-template-columns:52px 1fr;align-items:baseline;gap:10px;padding:12px 14px;display:grid}.bs-say{background:var(--blue);color:var(--paper);font-family:var(--display);letter-spacing:-.025em;font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.15}.bs-avoid{background:var(--fog);color:#0b0b1499;-webkit-text-decoration:line-through #0b0b1466;text-decoration:line-through #0b0b1466}.bs-say b,.bs-avoid b{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:500;text-decoration:none;display:inline-block}.bs-say b{color:var(--pink)}.bs-words{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);display:grid}.bs-wordlist{font-family:var(--display);letter-spacing:-.03em;font-size:clamp(20px,1.8vw,28px);font-weight:600;line-height:1.3}.bs-wordlist--avoid{color:#0b0b1473;text-decoration:line-through;text-decoration-thickness:1px}.bs-app{background:var(--fog);margin-bottom:16px;padding:clamp(20px,3vw,36px)}.bs-app__head{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px;display:flex}.bs-app__head .bs-h3{margin:0}.bs-app__size{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#0b0b1499;font-size:12px}.bs-app__controls{flex-wrap:wrap;align-items:center;gap:12px 24px;margin-bottom:16px;display:flex}.bs-app__canvas{background:var(--paper);box-shadow:0 1px 0 var(--line);position:relative}.bs-app__canvas canvas{width:100%;height:auto;display:block}.bs-app__foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;display:flex}.bs-app__row{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);align-items:start;gap:clamp(20px,3vw,40px);display:grid}.bs-app__form{align-content:start;justify-items:start;gap:16px;display:grid}.bs-app__form>label{width:100%;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;gap:6px;font-size:12px;display:grid}.bs-app__form input,.bs-app__form textarea{border:1.5px solid var(--ink);background:var(--paper);width:100%;min-height:44px;color:var(--ink);font:400 16px/1.4 var(--sans);text-transform:none;letter-spacing:0;resize:vertical;border-radius:0;padding:10px 12px}.bs-app__form input:focus-visible,.bs-app__form textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.bs-app__buttons{flex-wrap:wrap;gap:14px;display:flex}.bs-app__canvas--post{max-width:480px}.bs-cards{gap:16px;display:grid}.bs-app__canvas--card{box-shadow:0 10px 30px #0b0b141f}.bs-seg{flex-wrap:wrap;gap:4px;display:inline-flex}.bs-seg button{isolation:isolate;min-height:38px;font:500 14px var(--sans);padding:0 14px;transition:color .3s;position:relative}.bs-seg button:before{content:"";z-index:-1;border:1.5px solid var(--ink);transform:skewX(var(--skew));transition:background .3s;position:absolute;inset:0}.bs-seg button[aria-checked=true]{color:var(--paper)}.bs-seg button[aria-checked=true]:before{background:var(--ink)}.bs-check{cursor:pointer;align-items:center;gap:8px;font-size:14px;display:inline-flex}.bs-check input{width:18px;height:18px;accent-color:var(--blue)}.bs-safe{border:2px dashed var(--pink);pointer-events:none;background:#ff9ecf2e;display:none;position:absolute}.bs-safe--company{aspect-ratio:1;border-radius:6px;width:10%;top:58%;left:2%}.bs-safe--personal{aspect-ratio:1;border-radius:50%;width:19%;top:55%;left:3%}.show-safe-company .bs-safe--company,.show-safe-personal .bs-safe--personal{display:block}.bs-app__canvas--banner{margin-bottom:40px}.bs-app__row--avatar{grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr)}.bs-avatars{flex-wrap:wrap;align-items:end;gap:24px;display:flex}.bs-avatars figure{justify-items:center;gap:10px;display:grid}.bs-avatars figcaption{font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#0b0b1499;font-size:11px}.bs-app__canvas--avatar{width:clamp(120px,14vw,200px)}.bs-app__canvas--avatar.is-round{border-radius:50%;overflow:hidden}.bs-app__canvas--fav{width:32px}.bs-signature{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}.bs-sig__label{margin-bottom:14px}.bs-sig__preview{background:#fff;padding:24px;overflow-x:auto}@media (width<=1080px){.bs-layout{grid-template-columns:1fr}.bs-toc{display:none}.bs-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.bs-swatch{min-height:220px}.bs-contrast,.bs-elements,.bs-donts{grid-template-columns:repeat(2,minmax(0,1fr))}.bs-fieldlab{grid-template-columns:1fr}.bs-fieldlab__stage{min-height:320px}.bs-app__row,.bs-app__row--avatar{grid-template-columns:1fr}}@media (width<=760px){.bs-hero__title{font-size:12vw}.bs-rules{grid-template-columns:1fr}.bs-rules li:nth-child(n){border-right:0;padding:20px 0 24px}.bs-logos,.bs-split,.bs-families,.bs-contrast,.bs-motion,.bs-voice,.bs-words{grid-template-columns:1fr}.bs-donts{grid-template-columns:1fr 1fr}.bs-elements{grid-template-columns:1fr}.bs-scale li{grid-template-columns:1fr;gap:6px}.bs-durations li{grid-template-columns:auto 1fr}.bs-durations p{grid-column:1/-1}.bs-play{grid-template-columns:1fr}.bs-play__buttons{flex-wrap:wrap;display:flex}.bs-clearspace{padding:24px 12px}.bs-clearspace__box{padding:32px 36px}.bs-clearspace__box .logo{width:150px}}@media (prefers-reduced-motion:reduce){.bs-play__stage .bs-play__word{animation:none!important}.bs-curve__dot{display:none}}