*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #111418;--bg-card: #191d24;--bg-code: #0d1017;--bg-demo: #1e2330;--text: #c8cfe0;--text-dim: #6b7280;--text-faint: #3d4451;--accent: #60a5fa;--accent-dim: #1e3a5f;--green: #4ade80;--green-dim: #14532d;--amber: #fbbf24;--amber-dim: #451a03;--red: #f87171;--border: #252b36;--border-subtle: #1c2028;--font-mono: "JetBrains Mono", "SF Mono", monospace;--font-display: "Lora", Georgia, serif;--font-body: "Crimson Pro", Georgia, serif}body{font-family:var(--font-mono);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}.page{max-width:780px;margin:0 auto;padding:3rem 2rem 6rem}.back{display:inline-block;font-size:.75rem;color:var(--text-dim);text-decoration:none;margin-bottom:3rem;transition:color .2s}.back:hover{color:var(--accent)}.page-header{margin-bottom:4rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}.page-eyebrow{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:1rem}.page-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);font-weight:400;font-style:italic;line-height:1.2;margin-bottom:1rem;color:var(--text)}.page-intro{font-family:var(--font-body);font-size:1.0625rem;font-weight:300;color:var(--text-dim);line-height:1.7;max-width:520px}.experiment{margin-bottom:4rem}.experiment-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.experiment-title{font-size:.8rem;font-weight:500;color:var(--text);letter-spacing:.02em}.experiment-title code{color:var(--accent)}.support-badge{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .5rem;border-radius:2px;flex-shrink:0;white-space:nowrap}.support-good{color:var(--green);background:#4ade8014;border:1px solid rgba(74,222,128,.2)}.support-partial{color:var(--amber);background:#fbbf2414;border:1px solid rgba(251,191,36,.2)}.support-new{color:var(--accent);background:#60a5fa14;border:1px solid rgba(96,165,250,.2)}.experiment-desc{font-family:var(--font-body);font-size:.9375rem;font-weight:300;color:var(--text-dim);line-height:1.7;margin-bottom:1.25rem;max-width:560px}.demo{background:var(--bg-demo);border:1px solid var(--border);border-radius:4px;padding:1.5rem;margin-bottom:1rem;position:relative}.demo-label{font-size:.75rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}.code-block{background:var(--bg-code);border:1px solid var(--border-subtle);border-radius:4px;padding:1.25rem;overflow-x:auto;margin-bottom:0}.code-block code{font-family:var(--font-mono);font-size:.75rem;line-height:1.8;color:var(--text-dim);display:block}.tok-prop{color:#93c5fd}.tok-val{color:#86efac}.tok-sel{color:#f9a8d4}.tok-at{color:#c084fc}.tok-num{color:#fdba74}.tok-com{color:#3d4451;font-style:italic}.tok-str{color:#6ee7b7}.dinkus{text-align:center;padding:2rem 0;font-size:.75rem;color:var(--text-faint);letter-spacing:.5em}.footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:baseline;font-size:.75rem;color:var(--text-dim)}.footer a{color:var(--text-dim);text-decoration:none;transition:color .2s}.footer a:hover{color:var(--accent)}.design-notes{margin-top:3rem}.design-notes summary{font-size:.75rem;color:var(--text-dim);cursor:pointer;text-transform:uppercase;letter-spacing:.08em;list-style:none;transition:color .2s}.design-notes summary::-webkit-details-marker{display:none}.design-notes summary:before{content:"+ "}.design-notes[open] summary:before{content:"- "}.design-notes summary:hover{color:var(--accent)}.design-notes .notes-content{margin-top:1.5rem;display:grid;gap:1.25rem}.design-notes .note-item h4{font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}.design-notes .note-item p{font-family:var(--font-body);font-size:.9375rem;color:var(--text-dim);line-height:1.7;font-weight:300}@media(max-width:640px){.page{padding:2rem 1.25rem 4rem}.experiment-header,.footer{flex-direction:column;gap:.5rem}}.starting-style-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;min-height:2rem}.starting-style-list li{background:var(--bg-card);border:1px solid var(--border);border-radius:3px;padding:.6rem .9rem;font-size:.75rem;color:var(--text);display:flex;justify-content:space-between;align-items:center;transition:opacity .4s ease,transform .4s ease}.starting-style-list li .remove-btn{background:none;border:none;color:var(--text-faint);cursor:pointer;font-family:var(--font-mono);font-size:.75rem;padding:.1rem .3rem;transition:color .2s}.starting-style-list li .remove-btn:hover{color:var(--red)}.demo-controls{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}.btn{font-family:var(--font-mono);font-size:.75rem;padding:.4rem .9rem;border-radius:3px;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);transition:color .2s,border-color .2s,background .2s}.btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}.btn-primary{color:var(--accent);border-color:#60a5fa4d;background:var(--accent-dim)}.textwrap-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}@media(max-width:600px){.textwrap-grid{grid-template-columns:1fr}}.textwrap-cell{background:var(--bg-card);border:1px solid var(--border);border-radius:3px;padding:1rem}.textwrap-label{font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem}.textwrap-sample{font-family:var(--font-display);font-size:.9375rem;font-weight:400;line-height:1.4;color:var(--text)}.wrap-none{text-wrap:wrap}.wrap-balance{text-wrap:balance}.wrap-pretty{text-wrap:pretty}.has-form{background:var(--bg-card);border:1px solid var(--border);border-radius:3px;padding:1.25rem;display:grid;gap:.75rem}.has-form:has(input:placeholder-shown) .has-submit{opacity:.35;pointer-events:none}.has-form:has(input:not(:placeholder-shown)){border-color:#60a5fa4d}.has-form:has(input:not(:placeholder-shown)) .has-submit{opacity:1;pointer-events:auto;color:var(--accent);border-color:#60a5fa66;background:var(--accent-dim)}.has-form input{font-family:var(--font-mono);font-size:.75rem;padding:.5rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text);outline:none;transition:border-color .2s}.has-form input:focus{border-color:#60a5fa66}.has-form input::placeholder{color:var(--text-faint)}.has-submit{font-family:var(--font-mono);font-size:.75rem;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:3px;color:var(--text-dim);cursor:pointer;transition:opacity .2s,color .2s,border-color .2s,background .2s;width:fit-content}.has-hint{font-size:.75rem;color:var(--text-faint)}.field-sizing-demo{display:grid;gap:1rem}.field-label{font-size:.75rem;color:var(--text-dim);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.06em}.field-fixed{font-family:var(--font-mono);font-size:.8rem;padding:.6rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text);width:100%;resize:none;height:4rem;outline:none}.field-auto{font-family:var(--font-mono);font-size:.8rem;padding:.6rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text);width:100%;resize:none;outline:none;field-sizing:content;min-height:2.5rem;transition:border-color .2s}.field-auto:focus,.field-fixed:focus{border-color:#60a5fa66}.field-auto::placeholder,.field-fixed::placeholder{color:var(--text-faint)}.scroll-items{display:grid;gap:.75rem}.scroll-item{background:var(--bg-card);border:1px solid var(--border);border-radius:3px;padding:1rem 1.25rem;display:flex;gap:1rem;align-items:center;animation:slide-in linear both;animation-timeline:view();animation-range:entry 0% entry 30%}@keyframes slide-in{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.scroll-item{animation:none}}.scroll-item-icon{font-size:1.25rem;flex-shrink:0}.scroll-item-text strong{display:block;font-size:.75rem;color:var(--text);margin-bottom:.2rem}.scroll-item-text span{font-size:.75rem;color:var(--text-dim)}.ft-controls{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}.ft-label{font-size:.75rem;color:var(--text-dim);white-space:nowrap;min-width:10rem}.ft-slider{flex:1;-webkit-appearance:none;appearance:none;background:var(--border);height:2px;border-radius:1px;outline:none;cursor:pointer}.ft-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-demo);transition:transform .1s}.ft-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.ft-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-demo)}.ft-comparison{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:500px){.ft-comparison{grid-template-columns:1fr}}.ft-cell{background:var(--bg-card);border:1px solid var(--border);border-radius:3px;padding:1rem}.ft-cell-label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem}.ft-cell.is-fluid .ft-cell-label{color:var(--accent)}.ft-sample{font-family:var(--font-display);font-weight:400;line-height:1.3;color:var(--text);margin-bottom:.75rem}.ft-size-badge{font-size:.75rem;color:var(--text-faint)}.ft-size-badge .ft-px{color:var(--green)}.coming-soon{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;overflow:hidden}.coming-soon-item{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-subtle)}.coming-soon-item:last-child{border-bottom:none}.coming-soon-name{font-size:.75rem;color:var(--accent);margin-bottom:.35rem}.coming-soon-desc{font-family:var(--font-body);font-size:.9rem;color:var(--text-dim);line-height:1.6;font-weight:300;margin-bottom:.75rem}.coming-soon-code{font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim);background:var(--bg-code);padding:.75rem 1rem;border-radius:3px;line-height:1.8}.experiment{opacity:0;transform:translateY(6px);animation:fadeUp .5s ease-out forwards}.experiment:nth-child(1){animation-delay:.05s}.experiment:nth-child(2){animation-delay:.1s}.experiment:nth-child(3){animation-delay:.15s}.experiment:nth-child(4){animation-delay:.2s}.experiment:nth-child(5){animation-delay:.25s}.experiment:nth-child(6){animation-delay:.3s}.experiment:nth-child(7){animation-delay:.35s}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.experiment{opacity:1;transform:none;animation:none}}