@font-face{font-family:Host Grotesk;font-weight:300;font-display:swap;src:url(/type-grid/assets/host-grotesk-latin-300-normal-C1ePwUkb.woff2) format("woff2")}@font-face{font-family:Host Grotesk;font-weight:400;font-display:swap;src:url(/type-grid/assets/host-grotesk-latin-400-normal-qDxuE_yq.woff2) format("woff2")}@font-face{font-family:Host Grotesk;font-weight:500;font-display:swap;src:url(/type-grid/assets/host-grotesk-latin-500-normal-B7155YqD.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-weight:400;font-display:swap;src:url(/type-grid/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2) format("woff2")}@font-face{font-family:IBM Plex Mono;font-weight:500;font-display:swap;src:url(/type-grid/assets/ibm-plex-mono-latin-500-normal-DSY6xOcd.woff2) format("woff2")}:root,:host{--font-sans: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--danger: #b3261e;--r-pill: 999px;--r-panel: 36px;--r-card: 28px;--r-field: 20px;--r-small: 14px;--r-thumb: 8px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 20px;--s-6: 24px;--s-7: 28px;--s-8: 32px;--s-9: 48px;--s-10: 64px;--s-11: 88px;--t-small: 13px;--t-meta: 14px;--t-body: 16px;--t-lede: 18px;--t-title: 22px;--t-display: 44px;--ease: cubic-bezier(.22, .7, .2, 1);--fast: .15s;--slow: .4s;--accent-ground: #e9f6d5;--accent: #95bb46;--accent-deep: #4a6203;color-scheme:light}[data-hue=rose]{--accent-ground: #feebec;--accent: #fa7f91;--accent-deep: #923144}[data-hue=coral]{--accent-ground: #feece7;--accent: #fa8467;--accent-deep: #92361f}[data-hue=apricot]{--accent-ground: #feedde;--accent: #ed9235;--accent-deep: #814800}[data-hue=butter]{--accent-ground: #f9f1cf;--accent: #c9a90c;--accent-deep: #695701}[data-hue=lime]{--accent-ground: #e9f6d5;--accent: #95bb46;--accent-deep: #4a6203}[data-hue=mint]{--accent-ground: #dff9e9;--accent: #40c786;--accent-deep: #056940}[data-hue=aqua]{--accent-ground: #dcf9f8;--accent: #03c3c3;--accent-deep: #026565}[data-hue=sky]{--accent-ground: #e3f3fe;--accent: #3cb5fe;--accent-deep: #045e8c}[data-hue=periwinkle]{--accent-ground: #ecefff;--accent: #93a3ff;--accent-deep: #454e9f}[data-hue=lilac]{--accent-ground: #f8eaff;--accent: #ce8ceb;--accent-deep: #733d89}:root,:host,.twh,[data-hue]{--paper: #efefef;--surface: #ffffff;--ink: #1c1c1c;--text-2: rgba(20, 20, 20, .72);--text-3: #666666;--text-4: #8a8a8a;--fill: rgba(20, 20, 20, .05);--fill-hover: rgba(20, 20, 20, .09);--line: rgba(20, 20, 20, .1);--line-soft: rgba(20, 20, 20, .07);--glass: rgba(255, 255, 255, .58);--glass-strong: rgba(255, 255, 255, .8);--glass-blur: blur(28px) saturate(170%);--glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .95);--shadow-1: 0 1px 2px rgba(20, 20, 20, .06), 0 2px 8px rgba(20, 20, 20, .04);--shadow-2: 0 2px 4px rgba(20, 20, 20, .03), 0 28px 64px -16px rgba(20, 20, 20, .2);--glow: color-mix(in srgb, var(--accent) 55%, transparent);--glow-soft: color-mix(in srgb, var(--accent-ground) 90%, transparent);--backdrop: radial-gradient(52% 44% at 88% 6%, var(--glow), transparent 72%), radial-gradient(60% 50% at 4% 100%, var(--glow-soft), transparent 70%), var(--paper);--primary: var(--accent-ground);--primary-hover: color-mix(in srgb, var(--accent-ground) 78%, var(--accent));--on-primary: var(--accent-deep);--accent-strong: var(--accent-deep);--highlight: rgba(255, 255, 255, .6)}[data-mode=light]{--paper: #f4f4f4;--glass: #fbfbfb;--glass-strong: #ffffff;--glass-blur: none;--glass-edge: inset 0 0 0 1px rgba(20, 20, 20, .06);--backdrop: var(--paper)}[data-mode=dark]{--paper: #121212;--surface: #424242;--ink: #f2f2f2;--text-2: rgba(255, 255, 255, .72);--text-3: #a3a3a3;--text-4: #7a7a7a;--fill: rgba(255, 255, 255, .07);--fill-hover: rgba(255, 255, 255, .12);--line: rgba(255, 255, 255, .12);--line-soft: rgba(255, 255, 255, .08);--danger: #ff8a80;--glass: #1c1c1c;--glass-strong: rgba(255, 255, 255, .09);--glass-blur: none;--glass-edge: inset 0 0 0 1px rgba(255, 255, 255, .07);--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);--shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 64px -16px rgba(0, 0, 0, .7);--backdrop: radial-gradient(52% 44% at 88% 6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%), var(--paper);--primary: color-mix(in srgb, var(--accent) 26%, #1c1c1c);--primary-hover: color-mix(in srgb, var(--accent) 36%, #1c1c1c);--on-primary: var(--accent-ground);--accent-strong: var(--accent);--highlight: rgba(255, 255, 255, .06);color-scheme:dark}.twh,:where(.twh) *,:where(.twh) *:before,:where(.twh) *:after{box-sizing:border-box}.twh{margin:0;min-height:100%;background:var(--backdrop);background-attachment:fixed;color:var(--ink);font-family:var(--font-sans);font-size:var(--t-body);font-weight:300;line-height:1.45;letter-spacing:.02em;-webkit-font-smoothing:antialiased}:where(.twh) h1,:where(.twh) h2,:where(.twh) h3{margin:0;font-weight:400;letter-spacing:.02em;line-height:1.35}:where(.twh) h1{font-size:var(--t-title)}:where(.twh) h2{font-size:var(--t-lede)}:where(.twh) h3{font-size:var(--t-body)}:where(.twh) p{margin:0}:where(.twh) a{color:inherit;text-underline-offset:3px}:where(.twh) button,:where(.twh) input,:where(.twh) select,:where(.twh) textarea{font:inherit;color:inherit;letter-spacing:inherit}:where(.twh) button{cursor:pointer}:where(.twh) :focus{outline:none}:where(.twh) :focus-visible{outline:2px solid var(--ink);outline-offset:2px}:where(.twh) ::placeholder{color:var(--text-4)}.twh [hidden]{display:none!important}.lede{font-size:var(--t-lede);line-height:1.5}.hint{color:var(--text-3);font-size:var(--t-meta)}.display{font-size:var(--t-display);font-weight:300;line-height:1;letter-spacing:-.03em}.label{font-size:15px;font-weight:500;letter-spacing:-.02em}.meta{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:0;color:var(--text-3)}.error{color:var(--danger);font-size:var(--t-meta)}.stack{display:flex;flex-direction:column;gap:var(--s-4)}.stack-tight{display:flex;flex-direction:column;gap:var(--s-2)}.row{display:flex;align-items:center;gap:var(--s-2)}.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}.popup{width:360px;min-height:200px;display:flex;flex-direction:column}.popup-head{display:flex;align-items:center;justify-content:space-between;padding:var(--s-5) var(--s-5) var(--s-3) var(--s-6)}.popup-body{flex:1;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-2) var(--s-4) var(--s-4)}.popup-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-1) var(--s-6) var(--s-5)}.more{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0;color:var(--text-3);text-decoration:none}.more:hover{color:var(--ink)}.more .logo{display:block;flex:none;color:currentColor}.glass{background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--shadow-2)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.glass{background:var(--glass-strong)}}.page{width:min(40rem,calc(100% - 2 * var(--s-7)));margin:0 auto;padding:var(--s-10) 0 var(--s-11)}.page-wide{width:min(72rem,calc(100% - 2 * var(--s-7)))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border:0;border-radius:var(--r-pill);background:var(--glass-strong);box-shadow:var(--shadow-1);color:var(--ink);font-weight:400;text-decoration:none;white-space:nowrap;transition:background var(--fast) ease,box-shadow var(--fast) ease,opacity var(--fast) ease}.btn:hover{background:var(--surface)}.btn:disabled{opacity:.55;cursor:default}.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:inset 0 1px 0 var(--highlight)}.btn-primary:hover{background:var(--primary-hover)}.btn-large{min-height:52px;padding:0 var(--s-6)}.btn-block{width:100%}.btn-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--glass-strong);box-shadow:var(--shadow-1);color:var(--ink);transition:background var(--fast) ease,transform var(--fast) var(--ease)}.btn-icon:hover{background:var(--surface)}.btn-icon:active{transform:scale(.94)}.btn-icon-quiet{background:transparent;box-shadow:none;color:var(--text-3)}.btn-icon-quiet:hover{background:var(--fill);color:var(--ink)}.btn-link{padding:0;border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}.field{display:flex;flex-direction:column;gap:var(--s-2)}.field>span{font-size:var(--t-meta);color:var(--text-2)}.input,.textarea,.select{width:100%;min-height:48px;padding:12px 18px;border:0;border-radius:var(--r-field);background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--ink);transition:box-shadow var(--fast) ease,background var(--fast) ease}.textarea{resize:vertical;line-height:1.45}.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:0;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--accent-strong)}.search{border-radius:var(--r-pill);padding:0 22px}.segmented{display:inline-flex;width:max-content;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--fill)}.segmented button{height:34px;padding:0 14px;border:0;border-radius:var(--r-pill);background:transparent;font-size:15px}.segmented button[aria-pressed=true]{background:var(--surface);box-shadow:var(--shadow-1)}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{height:36px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--fill);font-size:var(--t-meta);transition:background var(--fast) ease}.chip:hover{background:var(--fill-hover)}.chip[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}.switch{position:relative;flex:none;width:46px;height:28px;border:0;border-radius:var(--r-pill);background:var(--fill-hover);transition:background var(--fast) ease}.switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--fast) var(--ease)}.switch[aria-checked=true]{background:var(--accent-strong)}.switch[aria-checked=true]:after{transform:translate(18px)}.card{padding:var(--s-6);border-radius:var(--r-card);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-edge),var(--shadow-1)}.card-raised{background:var(--glass-strong);box-shadow:var(--glass-edge),var(--shadow-2)}.bloom{position:relative;overflow:hidden;border-radius:var(--r-card);background:radial-gradient(circle at 50% 58%,var(--accent) 0,color-mix(in srgb,var(--accent) 45%,var(--accent-ground)) 32%,var(--accent-ground) 72%);color:var(--accent-deep)}.list{list-style:none;margin:0;padding:0}.list>li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft)}.list>li:first-child{border-top:1px solid var(--line-soft)}.swatch{width:28px;height:28px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-soft)}.kbd{font-family:var(--font-mono);font-size:12px;padding:2px 6px;border-radius:6px;background:var(--fill)}.dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent)}.empty{padding:var(--s-9) var(--s-4);text-align:center}.empty h2{margin-bottom:var(--s-2)}.empty p{color:var(--text-3)}.toast{position:fixed;left:50%;bottom:var(--s-5);transform:translate(-50%);padding:12px var(--s-5);border-radius:var(--r-pill);background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--ink);font-size:var(--t-meta);box-shadow:var(--glass-edge),var(--shadow-2)}.accent-tile{display:grid;place-items:center;border-radius:var(--r-card);background:var(--accent-ground);color:var(--accent-deep)}@media(prefers-reduced-motion:reduce){.twh *,.twh *:before,.twh *:after{transition:none!important;animation:none!important}}html,.twh{height:100%}.app{display:flex;flex-direction:column;gap:var(--s-5);min-height:100%;padding:var(--s-6) var(--s-7)}.title{font-size:calc(var(--t-title) + var(--s-2));font-weight:400;letter-spacing:-.02em;line-height:1.1}.head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex:none}.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none}.brand .logo{display:block;color:var(--ink)}.brand:hover .hint{color:var(--ink)}.layout{flex:1;display:grid;grid-template-columns:minmax(14rem,16rem) minmax(0,1fr) minmax(19rem,21rem);gap:var(--s-5);min-height:0}.letters{display:flex;flex-direction:column;gap:var(--s-5);min-height:0;padding:var(--s-5);overflow-y:auto;scrollbar-width:thin}.letter-group .tiles{margin-top:var(--s-2)}.fold-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none}.fold-head::-webkit-details-marker{display:none}.fold-chevron{flex:none;color:var(--text-3);transition:transform var(--fast) ease,color var(--fast) ease}.fold-head:hover .fold-chevron{color:var(--ink)}.fold:not([open]) .fold-chevron{transform:rotate(-90deg)}.fold-body{margin-top:var(--s-3)}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--s-1)}.tile{display:grid;place-items:center;height:52px;padding:var(--s-2) var(--s-1);border:0;border-radius:var(--r-small);background:transparent;color:var(--ink);transition:background var(--fast) ease}.tile:hover{background:var(--fill)}.tile[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}.tile svg{display:block;width:100%;height:100%}.tile-empty{color:var(--text-4);font-size:var(--t-meta)}.tile[aria-pressed=true] .tile-empty{color:var(--on-primary)}.work{display:flex;flex-direction:column;gap:var(--s-5);min-height:0;min-width:0}.stage{flex:1;display:flex;flex-direction:column;min-height:22rem;padding:var(--s-5) var(--s-6);border-radius:var(--r-panel)}.stage-head{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}.stage-head>.row{flex-wrap:wrap;justify-content:center}.letter-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-2);width:100%}.letter-title:before{content:""}.letter-title .hint{justify-self:start}.stage-tools{gap:var(--s-3)}.current{min-width:1.4em;font-size:var(--t-display);font-weight:300;line-height:1;letter-spacing:-.03em;text-align:center}.canvas{position:relative;flex:1;min-height:0}.canvas svg{position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}.stage-foot{text-align:center}.metrics .rule{stroke:var(--line);stroke-width:1}.metrics .rule-baseline{stroke:var(--accent);stroke-width:1.5}.metrics .rule-side{stroke:var(--line-soft)}.metrics .rule-label{fill:var(--text-3);font-family:var(--font-sans);font-size:var(--t-small);font-weight:300;letter-spacing:.02em;text-anchor:end;dominant-baseline:middle}.cell-guides{color:var(--line)}.mass{color:var(--ink)}.stepper{display:flex;align-items:center;gap:var(--s-2)}.stepper .btn-icon{width:32px;height:32px;font-size:var(--t-body)}.stepper .btn-icon:disabled{opacity:.4;cursor:default}.stepper-value{min-width:2.5em;text-align:center;color:var(--ink);font-size:var(--t-meta)}.btn-icon:disabled{opacity:.4;cursor:default}.tester{flex:none;padding:var(--s-5) var(--s-6)}.tester .fold-body{gap:var(--s-3)}.tester-input{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}.tester-input .textarea{flex:1 1 16rem}.tester .textarea{min-height:0;max-height:8rem;field-sizing:content;resize:vertical}.size{gap:var(--s-3)}.size .range{width:9rem}.proof{max-height:11rem;overflow-y:auto;scrollbar-width:thin}.proof svg{display:block;fill:var(--ink)}.proof .missing{fill:none;stroke:var(--line);stroke-width:1}.controls{display:flex;flex-direction:column;gap:var(--s-6);min-height:0;padding:var(--s-5) var(--s-6);overflow-y:auto;scrollbar-width:thin}.metrics-list>li{padding:var(--s-2) 0}.downloads{display:flex;flex-wrap:wrap;gap:var(--s-2)}.project-reset{flex-wrap:wrap;gap:var(--s-4)}.project-reset .btn-link{font-size:var(--t-meta);color:var(--text-2)}.range{width:100%;height:20px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}.range::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-pill);background:var(--fill-hover)}.range::-moz-range-track{height:4px;border-radius:var(--r-pill);background:var(--fill-hover)}.range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px;border:0;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-1);-webkit-appearance:none;appearance:none}.range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-1)}.range:focus-visible{outline:0}.range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:2px}.range:focus-visible::-moz-range-thumb{outline:2px solid var(--ink);outline-offset:2px}.pay{padding:0;border:0;background:transparent;color:var(--ink);max-width:calc(100vw - 2 * var(--s-4))}.pay::backdrop{background:color-mix(in srgb,var(--paper) 55%,transparent)}.pay-panel{display:flex;flex-direction:column;gap:var(--s-4);width:28rem;max-width:100%;padding:var(--s-7);border-radius:var(--r-panel)}.pay-panel p{color:var(--text-2)}.license-row .input{flex:1;min-width:0}.license-row .btn{flex:none}.upgrade-price{display:flex;align-items:baseline;gap:var(--s-3)}.upgrade-amount{font-size:var(--t-title);font-weight:400;letter-spacing:-.02em;line-height:1}.pay-panel .upgrade-bundle{color:var(--text-3)}.upgrade-bundle a{color:inherit;text-underline-offset:3px}.toast{z-index:10}@media(max-width:64rem){.app{padding:var(--s-5) var(--s-4)}.layout{grid-template-columns:minmax(0,1fr)}.work{order:1}.letters{order:2;max-height:22rem}.controls{order:3;overflow:visible}.stage{min-height:70vh;padding:var(--s-4)}.head .brand .hint{display:none}}@media(min-width:64.01rem){.app{height:100dvh;overflow:hidden}}