:root{--pg-paper:#F3F4F8;--pg-ink:#0A0B10;--pg-dark:#07080C;--pg-mute:#959AAD;--pg-mute-l:#5B6072;--pg-blue:#3A4BFF;--pg-lime:#D2FF00;--pg-line:rgba(10,11,16,.14);--pg-line-d:rgba(243,244,248,.14);--pg-disp:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--pg-body:"Newsreader",Georgia,serif;--pg-mono:"JetBrains Mono",ui-monospace,monospace;--pg-g:clamp(16px,4vw,64px);--pg-gap:clamp(16px,2vw,32px)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:0;background:var(--pg-dark);color:var(--pg-paper);font:400 18px/1.5 var(--pg-body);-webkit-font-smoothing:antialiased}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--pg-blue);outline-offset:3px}.pg-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.pg-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--pg-g);background:#07080cdb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--pg-line-d)}.pg-mark{font:800 15px/1 var(--pg-disp);letter-spacing:.02em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.pg-mark span{font-size:.6em;vertical-align:top;margin-left:1px}.pg-nav{display:flex;gap:clamp(12px,3vw,32px)}.pg-nav a{font:500 12px/1 var(--pg-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;color:var(--pg-mute)}.pg-nav a:hover{color:var(--pg-paper)}.pg-k{margin:0 0 20px;font:500 12px/1.3 var(--pg-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pg-mute)}.pg-k span{color:var(--pg-lime);margin-right:.6em}.tl .pg-k span{color:var(--pg-blue)}.pg-h1{margin:0;font:800 clamp(64px,17.5vw,300px)/.82 var(--pg-disp);font-variation-settings:"wdth" 80;letter-spacing:-.055em;text-transform:uppercase;overflow-wrap:anywhere}.pg-dot{color:var(--pg-lime)}.pg-h2{margin:0;max-width:16ch;font:750 clamp(38px,6.4vw,104px)/.92 var(--pg-disp);font-variation-settings:"wdth" 85;letter-spacing:-.04em;text-wrap:balance}.pg-sub,.pg-lede{max-width:38ch;margin:24px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--pg-mute)}.pg-fine{margin:24px 0 0;max-width:62ch;font:400 12px/1.6 var(--pg-mono);color:var(--pg-mute)}.pg-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);margin-bottom:clamp(32px,5vw,72px)}.pg-head .pg-k{grid-column:1/-1}.pg-head .pg-h2{grid-column:1/9}.pg-head .pg-sub{grid-column:9/13;align-self:end;margin:0}.pg-intro{padding:clamp(56px,12vw,180px) var(--pg-g) clamp(48px,8vw,120px)}.pg-intro-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);margin-top:clamp(32px,5vw,64px);align-items:end}.pg-intro .pg-lede{grid-column:1/7;margin:0}.pg-idx{grid-column:8/13;list-style:none;margin:0;padding:0;border-top:1px solid var(--pg-line-d)}.pg-idx a{display:flex;align-items:center;gap:16px;min-height:64px;border-bottom:1px solid var(--pg-line-d);text-decoration:none;font:700 clamp(20px,2.2vw,30px)/1 var(--pg-disp);letter-spacing:-.02em;transition:padding .25s ease,color .25s ease}.pg-idx a span{font:500 12px/1 var(--pg-mono);color:var(--pg-mute);letter-spacing:.1em}.pg-idx a i{margin-left:auto;font-style:normal;color:var(--pg-lime)}@media(hover:hover){.pg-idx a:hover{padding-left:10px;color:var(--pg-lime)}}.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid currentColor;border-radius:999px;background:none;font:600 13px/1 var(--pg-disp);letter-spacing:.01em;cursor:pointer;transition:background .2s,color .2s}.pg-btn-p{background:var(--pg-ink);border-color:var(--pg-ink);color:var(--pg-paper)}@media(hover:hover){.pg-btn:hover{background:var(--pg-ink);color:var(--pg-paper)}.pg-btn-p:hover{background:var(--pg-blue);border-color:var(--pg-blue)}}.pg-toast{min-height:1.4em;margin:10px 0 0;font:500 12px/1.4 var(--pg-mono);color:var(--pg-blue)}.tl{background:var(--pg-paper);color:var(--pg-ink);padding:clamp(64px,9vw,140px) var(--pg-g)}.tl .pg-sub,.tl .pg-fine{color:var(--pg-mute-l)}.tl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);row-gap:24px;align-items:start}.tl-stage{grid-column:1/9;position:sticky;top:76px;min-height:min(62vh,640px);display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,3vw,48px);background:var(--tl-bg,#F3F4F8);color:var(--tl-fg,#0A0B10);border:1px solid var(--pg-line);border-radius:4px;overflow:hidden;transition:background .3s,color .3s}.tl-spec{display:block;width:100%;min-height:1.2em;margin:0;padding:0;border:0;background:transparent;color:inherit;resize:none;overflow:hidden;font-family:Fraunces,serif;font-size:140px;line-height:.95;letter-spacing:-.02em;overflow-wrap:anywhere;caret-color:var(--pg-blue);outline:none}.tl-spec:focus-visible{outline:1px dashed currentColor;outline-offset:8px}.tl-meta{margin:20px 0 0;font:500 11px/1.3 var(--pg-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.62}.tl-ctl{grid-column:9/13;display:flex;flex-direction:column;gap:6px}.tl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-top:1px solid var(--pg-line)}.tl-l,.tl-sl label{font:500 11px/1.2 var(--pg-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pg-mute-l)}.tl-select{flex:1;max-width:220px;min-height:44px;padding:0 34px 0 12px;border:1px solid var(--pg-line);border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230A0B10'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;font:600 16px/1 var(--pg-disp);cursor:pointer}.tl-pre{align-items:flex-start;flex-direction:column;justify-content:center;padding:10px 0;gap:8px}.tl-chips{display:flex;flex-wrap:wrap;gap:6px}.tl-chips button{min-height:36px;padding:0 12px;border:1px solid var(--pg-line);border-radius:999px;background:none;font:500 13px/1 var(--pg-disp);cursor:pointer}.tl-chips button[aria-pressed=true]{background:var(--pg-ink);border-color:var(--pg-ink);color:var(--pg-paper)}.tl-sl{border-top:1px solid var(--pg-line);padding:10px 0 2px}.tl-sl label{display:flex;justify-content:space-between;gap:12px}.tl-sl output{color:var(--pg-ink);font-variant-numeric:tabular-nums}.tl-note{margin:0;padding:12px 0;border-top:1px solid var(--pg-line);font:400 12px/1.4 var(--pg-mono);color:var(--pg-mute-l)}input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;margin:0;background:none;cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:2px;background:currentColor;opacity:1;border-radius:2px}input[type=range]::-moz-range-track{height:2px;background:currentColor;border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;background:var(--pg-blue);border:3px solid var(--pg-paper);box-shadow:0 0 0 1px var(--pg-blue)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--pg-blue);border:3px solid var(--pg-paper);box-shadow:0 0 0 1px var(--pg-blue)}input[type=range]:focus-visible{outline-offset:0}.tl-axes .tl-sl:first-child{border-top-color:var(--pg-blue)}.tl-sw2{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-top:1px solid var(--pg-line)}.tl-sw2 input{width:44px;height:26px;-webkit-appearance:none;appearance:none;border-radius:99px;background:var(--pg-line);position:relative;cursor:pointer;transition:background .2s}.tl-sw2 input:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}.tl-sw2 input:checked{background:var(--pg-blue)}.tl-sw2 input:checked:after{transform:translate(18px)}.tl-seg{display:flex;border:1px solid var(--pg-line);border-radius:999px;overflow:hidden}.tl-seg button{min-width:44px;min-height:40px;border:0;background:none;font:600 14px/1 var(--pg-disp);cursor:pointer}.tl-seg button+button{border-left:1px solid var(--pg-line)}.tl-seg button[aria-checked=true]{background:var(--pg-ink);color:var(--pg-paper)}.tl-colors{gap:8px;justify-content:flex-start}.tl-sw{display:flex;align-items:center;gap:8px;flex:1;min-height:44px;cursor:pointer}.tl-sw input{width:32px;height:32px;padding:0;border:1px solid var(--pg-line);border-radius:50%;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;overflow:hidden}.tl-sw input::-webkit-color-swatch-wrapper{padding:0}.tl-sw input::-webkit-color-swatch{border:0;border-radius:50%}.tl-sw input::-moz-color-swatch{border:0;border-radius:50%}.tl-sw span{display:flex;flex-direction:column;gap:3px;font:500 10px/1 var(--pg-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pg-mute-l)}.tl-sw b{font-weight:600;color:var(--pg-ink);letter-spacing:.04em}.tl-swap{width:44px;height:44px;border:1px solid var(--pg-line);border-radius:50%;background:none;font-size:18px;cursor:pointer}.tl-act{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;border-top:1px solid var(--pg-line)}.tl-css{border-top:1px solid var(--pg-line);padding-top:10px}.tl-css summary{min-height:36px;display:flex;align-items:center;font:500 11px/1 var(--pg-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pg-mute-l);cursor:pointer}.tl-css pre{margin:6px 0 0;padding:14px;background:var(--pg-ink);color:var(--pg-paper);font:400 12px/1.6 var(--pg-mono);white-space:pre-wrap;word-break:break-word;border-radius:4px}.cl{background:var(--pg-dark);padding:clamp(64px,9vw,140px) var(--pg-g)}.cl .pg-k span{color:var(--pg-lime)}.cl .tl-l{color:var(--pg-mute)}.cl-pals{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;border:0}.cl-pals legend{float:left;width:100%;margin-bottom:12px}.cl-pals label{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 16px 0 8px;border:1px solid var(--pg-line-d);border-radius:999px;font:600 14px/1 var(--pg-disp);cursor:pointer;transition:border-color .2s,background .2s}.cl-pals input{position:absolute;opacity:0;width:1px;height:1px}.cl-pals label.on{background:var(--pg-paper);border-color:var(--pg-paper);color:var(--pg-dark)}.cl-pals label:has(input:checked){background:var(--pg-paper);border-color:var(--pg-paper);color:var(--pg-dark)}.cl-pals label:has(input:focus-visible){outline:2px solid var(--pg-blue);outline-offset:3px}.cl-chip{display:flex}.cl-chip i{width:16px;height:32px;border:1px solid rgba(128,128,128,.35)}.cl-chip i:first-child{border-radius:16px 0 0 16px}.cl-chip i:last-child{border-radius:0 16px 16px 0}.cl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pg-gap);row-gap:24px;align-items:start}.cl-canvas{grid-column:1/9;position:relative;overflow:hidden;padding:clamp(18px,3vw,44px);min-height:min(68vh,620px);display:flex;flex-direction:column;gap:clamp(14px,2vw,26px);background:var(--cl-bg);color:var(--cl-fg);border-radius:4px;transition:background .45s ease,color .45s ease}.cl-canvas *{transition:background-color .45s ease,color .45s ease,border-color .45s ease}.cl-nav{display:flex;align-items:center;gap:clamp(10px,2vw,24px);padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--cl-fg) 22%,transparent);font:600 13px/1 var(--pg-disp)}.cl-nav b{margin-right:auto;font-weight:800;font-size:15px}.cl-pill{padding:8px 14px;border-radius:999px;background:var(--cl-fg);color:var(--cl-bg)}.cl-k{margin:clamp(8px,2vw,24px) 0 0;font:500 11px/1 var(--pg-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}.cl-hl{position:relative;z-index:1;margin:0;font:800 clamp(44px,8vw,128px)/.86 var(--pg-disp);font-variation-settings:"wdth" 78;letter-spacing:-.05em}.cl-hl em{font-family:"Fraunces",var(--pg-body);font-style:italic;font-weight:400;letter-spacing:-.03em;color:var(--cl-ac)}.cl-cols{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(14px,2vw,28px);align-items:end}.cl-p{margin:0;max-width:36ch;font:400 clamp(15px,1.3vw,18px)/1.5 var(--pg-body)}.cl-card{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--cl-bg);border:1px solid color-mix(in srgb,var(--cl-fg) 28%,transparent);border-radius:4px}.cl-tag{align-self:flex-start;padding:5px 9px;border-radius:999px;background:var(--cl-ac);color:var(--cl-on);font:600 10px/1 var(--pg-mono);letter-spacing:.1em;text-transform:uppercase}.cl-ln{height:8px;border-radius:4px;background:color-mix(in srgb,var(--cl-fg) 20%,transparent)}.cl-ln.s{width:62%}.cl-in{padding:9px 10px;border:1px solid color-mix(in srgb,var(--cl-fg) 35%,transparent);border-radius:4px;font:400 12px/1 var(--pg-mono);opacity:.75}.cl-btns{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}.cl-b1,.cl-b2{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;font:700 14px/1 var(--pg-disp)}.cl-b1{background:var(--cl-ac);color:var(--cl-on)}.cl-b2{border:1.5px solid var(--cl-fg)}.cl-orb{position:absolute;right:-8%;top:18%;width:min(46%,380px);aspect-ratio:1;border-radius:50%;background:var(--cl-ac);opacity:.9;mix-blend-mode:normal;transition:background-color .45s ease}.cl-ctl{grid-column:9/13;display:flex;flex-direction:column}.cl-roles{border-top:1px solid var(--pg-line-d)}.cl-role{display:grid;grid-template-columns:1fr 44px auto;align-items:center;gap:12px;min-height:60px;border-bottom:1px solid var(--pg-line-d)}.cl-role label{font:500 11px/1 var(--pg-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pg-mute)}.cl-role input{width:44px;height:44px;padding:0;border:1px solid var(--pg-line-d);border-radius:50%;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;overflow:hidden}.cl-role input::-webkit-color-swatch-wrapper{padding:0}.cl-role input::-webkit-color-swatch{border:0;border-radius:50%}.cl-role input::-moz-color-swatch{border:0;border-radius:50%}.cl-hex{min-width:96px;min-height:40px;padding:0 12px;border:1px solid var(--pg-line-d);border-radius:999px;background:none;font:600 13px/1 var(--pg-mono);letter-spacing:.04em;cursor:copy}@media(hover:hover){.cl-hex:hover{background:var(--pg-paper);color:var(--pg-dark)}}.cl-ratio{margin:18px 0 0;font:500 12px/1.6 var(--pg-mono);color:var(--pg-paper)}.cl-ratio b{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;background:var(--pg-lime);color:var(--pg-dark);font-weight:700}.cl-ratio b.no{background:#ff5a4e;color:#fff}.cl-pers{margin:10px 0 0;font:italic 400 20px/1.35 var(--pg-body);color:var(--pg-mute)}.cl .tl-act{border-top-color:var(--pg-line-d);margin-top:18px}.cl .pg-btn-p{background:var(--pg-lime);border-color:var(--pg-lime);color:var(--pg-dark)}@media(hover:hover){.cl .pg-btn:hover{background:var(--pg-paper);color:var(--pg-dark)}}.cl .pg-toast{color:var(--pg-lime)}.pg-foot{padding:clamp(64px,10vw,160px) var(--pg-g) 32px;border-top:1px solid var(--pg-line-d)}.pg-foot .pg-h2{max-width:18ch}.pg-links{list-style:none;margin:clamp(32px,5vw,64px) 0 0;padding:0;border-top:1px solid var(--pg-line-d)}.pg-links a{display:flex;align-items:center;justify-content:space-between;min-height:clamp(64px,8vw,104px);border-bottom:1px solid var(--pg-line-d);text-decoration:none;font:700 clamp(24px,4vw,56px)/1 var(--pg-disp);letter-spacing:-.03em;transition:color .25s,padding .25s}.pg-links i{font-style:normal;color:var(--pg-mute)}.pg-links .pg-go{color:var(--pg-lime)}@media(hover:hover){.pg-links a:hover{color:var(--pg-lime);padding-left:12px}}.pg-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:40px 0 0;font:500 11px/1.4 var(--pg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pg-mute)}.pg-legal a{min-height:24px}@media(max-width:1024px){.pg-head .pg-h2{grid-column:1/-1}.pg-head .pg-sub{grid-column:1/-1;margin-top:20px}.tl-stage,.cl-canvas{grid-column:1/-1;position:relative;top:auto}.tl-stage{position:sticky;top:64px;z-index:5;min-height:0;max-height:46vh;overflow:auto;box-shadow:0 10px 24px -18px #0a0b1080}.tl-ctl,.cl-ctl{grid-column:1/-1}.tl-ctl{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--pg-gap);row-gap:0}.tl-ctl>.tl-pre,.tl-ctl>.tl-act,.tl-ctl>.tl-css,.tl-ctl>.pg-toast,.tl-ctl>.tl-axes,.tl-ctl>.tl-colors{grid-column:1/-1}.tl-axes{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--pg-gap)}.pg-intro .pg-lede{grid-column:1/-1}.pg-idx{grid-column:1/-1;margin-top:32px}}@media(max-width:640px){body{font-size:17px}.pg-nav a:nth-child(-n+2){display:none}.tl-stage{min-height:34vh;max-height:44vh}.tl-ctl,.tl-axes,.cl-cols{grid-template-columns:1fr}.cl-canvas{min-height:0}.cl-orb{width:58%;top:30%;right:-22%}.cl-pals label{padding-right:12px;font-size:13px}.cl-role{grid-template-columns:1fr 44px auto}.tl-select{max-width:none}}@media(prefers-reduced-motion:reduce){.tl-stage,.cl-canvas,.cl-canvas *,.pg-idx a,.pg-links a{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/45/assets/sc-playground.css.map */