:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--page:#f3f2ec;--surface:#fff;--sunk:#eae9e2;--ink:#17181c;--muted:#4a4d55;--line:#80828a;--hairline:#c9c8c0;--accent:#2d3ec7;--accent-ink:#fff;--pass:#1f6e3d;--fail:#b3261e;--warn:#8a5a00;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--s1:.25rem;--s2:.5rem;--s2-5:.75rem;--s3:1rem;--s4:1.5rem;--s5:2.5rem;--radius-control:6px;--radius-card:10px;--radius-chip:999px;--radius:var(--radius-control)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--page:#121317;--surface:#1c1e23;--sunk:#0b0c0f;--ink:#ecebe6;--muted:#a9abb2;--line:#6c6f77;--hairline:#33353b;--accent:#95a1ff;--accent-ink:#12172b;--pass:#6fcf94;--fail:#ff8a80;--warn:#e0a84a}}*,:before,:after{box-sizing:border-box}body{background:var(--page);color:var(--ink);font-family:var(--font);overflow-wrap:anywhere;margin:0;font-size:1rem;line-height:1.5}a{color:var(--accent);text-underline-offset:.15em}h2,h3{margin:0 0 var(--s2);line-height:1.2}h2{letter-spacing:-.01em;font-size:1.5rem;font-weight:600}h3{margin-top:var(--s4);font-size:1.0625rem;font-weight:600}p{margin:0 0 var(--s3)}.muted{color:var(--muted)}.lede{color:var(--muted);max-width:60ch}:focus-visible{outline:.1875rem solid var(--accent);outline-offset:.125rem}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.site-footer{background:var(--surface);padding:var(--s3);gap:var(--s1) var(--s3);border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;align-items:baseline;display:flex}.site-footer p{margin:0}.page-footprint{flex-basis:100%}.page-footprint .mono{font-family:var(--mono);font-size:.875em}:root{--stage-h:max(35vh, 12rem)}@media (height<=40rem){:root{--stage-h:30vh}}html{scroll-padding-top:calc(var(--bar-h,0px) + var(--stage-h) + var(--tabs-h,0px) + var(--s2))}.layout{display:grid}.hero{cursor:pointer;padding:var(--s3);background-repeat:repeat;flex-direction:column;flex:1;justify-content:center;display:flex;overflow:hidden}.stage{top:var(--bar-h,0px);z-index:2;height:var(--stage-h);border-bottom:1px solid var(--line);display:flex;position:sticky}.hero h1{margin:0 0 var(--s2);letter-spacing:-.02em;font-size:1.5rem;font-weight:750;line-height:1.1}.hero p{margin:0;font-size:.875rem;line-height:1.55}.hero-text{max-width:100%}.hero-text.text-off{visibility:hidden}p.hero-plate{inline-size:fit-content}.one-tile{z-index:1;left:0;left:round(down, calc((100% - var(--tile-w)) * .8), var(--tile-w));top:0;top:round(down, calc((100% - var(--tile-h)) * .2), var(--tile-h));width:var(--tile-w);height:var(--tile-h);outline:2px dashed var(--accent);outline-offset:-1px;pointer-events:none;position:absolute}.hero-caption,.hero-actions{z-index:2;bottom:var(--s3);gap:6px;margin:0;display:flex;position:absolute}.hero-caption{left:var(--s3);border-radius:var(--radius-control);background:color-mix(in srgb, var(--surface) 94%, transparent);height:30px;color:var(--ink);font-family:var(--mono);white-space:nowrap;align-items:center;max-width:calc(100% - 7rem);padding:0 10px;font-size:.8125rem;overflow:hidden}.hero-actions{right:var(--s3)}.hero-btn{border-radius:var(--radius-control);background:color-mix(in srgb, var(--surface) 94%, transparent);width:36px;height:36px;color:var(--ink);cursor:pointer;border:0;place-items:center;padding:0;display:grid}.hero-btn[aria-pressed=false]{box-shadow:inset 0 0 0 2px var(--ink)}.stage-use>:not(.use-stage){visibility:hidden}.use-stage{z-index:3;padding:var(--s3);background:var(--sunk);place-items:center;display:grid;position:absolute;inset:0}.stage-use:fullscreen>:not(.use-stage){visibility:visible}.stage:fullscreen>.use-stage{display:none!important}.use-stage .use-it-preview{grid-template-rows:minmax(0,1fr) auto;width:100%;height:100%;display:grid}.use-stage .uip-stage{background:0 0;border-radius:0;height:auto;min-height:0;padding:0}.sheet.sheet-use .use-stage{height:auto}.sheet-use .use-stage .uip-stage{height:220px}.stage:has(>.hero)>.shortcut-hint{right:var(--s3);bottom:calc(var(--s3) + 36px + var(--s2))}.toolbar{z-index:3;box-sizing:border-box;background:var(--surface);border-bottom:1px solid var(--hairline);flex-wrap:wrap;align-items:center;gap:8px;min-height:60px;padding:12px 24px;display:flex;position:sticky;top:0}.bar-make,.bar-stats,.bar-out{align-items:center;gap:8px;min-width:0;display:flex}.bar-make>*,.bar-out>*,.bar-stats>*{flex:none}.bar-stats{margin-inline-start:auto}@media (width<=63.99rem){.bar-stats{margin-inline-start:0}}@media (width<=599.98px){.toolbar{border:0;min-height:0;padding:0}.bar-make,.bar-stats,.bar-out{display:none}.phone-chips{z-index:2;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100% - 112px);display:flex;position:absolute;bottom:12px;left:12px}.phone-chips>*{font-size:12px}.phone-chips .size-badge{background:color-mix(in srgb, var(--surface) 94%, transparent)}.hero-caption{clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden}.hero-actions{bottom:12px;right:12px}}.bar-sep{background:var(--hairline);width:1px;height:24px;margin:0 6px}.toolbar .btn{box-sizing:border-box;white-space:nowrap;gap:6px;height:36px;min-height:36px;padding:0 12px;font-size:14px;font-weight:400}.toolbar .btn.primary{padding:0 14px;font-weight:650}.toolbar .btn.tool-btn{justify-content:center;width:36px;padding:0}.toolbar .btn.tool-btn:disabled{background:0 0}.toolbar .btn.use-it{border-color:var(--ink);background:var(--ink);color:var(--page);padding:0 14px;font-weight:650}.toolbar .btn.use-it:hover{background:var(--muted)}.toolbar .btn.quiet{padding:0 8px}@media (width<=1439.98px){.toolbar{padding-inline:16px}.bar-sep{margin:0}.toolbar .palette-strip .palette-name{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (width<=1535.98px){.out-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.toolbar .btn.quiet{justify-content:center;width:36px;padding:0}}.tool-icon{flex:none}.bar-chip,.size-badge{box-sizing:border-box;height:28px;font-family:var(--mono);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 10px;font-size:13px;display:inline-flex}.bar-chip.ok{color:var(--pass);background:color-mix(in srgb, var(--pass) 12%, var(--surface));font-weight:600}.bar-chip.bad{color:var(--fail);background:color-mix(in srgb, var(--fail) 12%, var(--surface));font-weight:600}.grade-chip{--chip-ink:#fff;--chip-warn:var(--warn);width:22px;height:22px;color:var(--chip-ink);border-radius:50%;flex:none;place-items:center;font-size:.75rem;font-weight:700;line-height:1;display:inline-grid}@media (prefers-color-scheme:dark){.grade-chip{--chip-ink:var(--page)}}.grade-chip.good{background:var(--pass)}.grade-chip.mid{background:var(--chip-warn)}.grade-chip.pending{background:var(--hairline)}.grade-chip.high{background:var(--fail)}.size-badge{background:var(--sunk);cursor:default;gap:8px;min-width:14.5em;padding:0 10px 0 3px;position:relative}.size-text{align-items:center;gap:8px;display:inline-flex}.size-badge .grade-chip{font-family:var(--font)}.size-tip{z-index:20;width:max-content;max-width:min(22rem,100vw - 2rem);padding:var(--s1) var(--s2);border:1px solid var(--line);background:var(--surface);white-space:normal;text-align:start;border-radius:.375rem;font-size:.875rem;display:none;position:absolute;top:calc(100% + .25rem);right:0}.size-line,.size-badge:hover>.size-tip,.size-badge:focus-visible>.size-tip{display:block}.size-badge.tip-off>.size-tip{display:none}.hint{margin:0}kbd{font-family:var(--mono);border:1px solid var(--line);border-radius:.25rem;padding:0 .3em;font-size:.875em}.controls{gap:var(--s3);padding:var(--s3);min-width:0;display:grid}.controls:has(>.tabs){gap:0;padding:0}.tabs{top:calc(var(--bar-h,0px) + var(--stage-h));z-index:1;background:var(--page);border-bottom:1px solid var(--hairline);padding:0 var(--s3);flex-wrap:nowrap;gap:2px;font-size:.9375rem;display:flex;position:sticky;overflow-x:auto}.tab{min-height:48px;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;flex:none;align-items:center;gap:6px;padding:0 14px;display:flex}.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink);font-weight:650}.tab:focus-visible{outline-offset:-.1875rem}.tabpanel{min-width:0;padding:var(--s4) var(--s3);gap:20px;display:grid}.tabpanel .panel{border-color:var(--hairline)}.shortcut{gap:var(--s1);display:grid}.link-btn{font:inherit;color:var(--accent);text-underline-offset:.15em;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}@media (width>=64rem){html{scroll-padding-top:calc(var(--bar-h,0px) + var(--tabs-h,0px) + var(--s4))}.layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.stage{z-index:0;height:calc(100vh - var(--bar-h,0px));border-bottom:0;border-right:1px solid var(--line)}.stage:has(>.hero){border-right-color:var(--hairline)}.hero-caption,.hero-actions{bottom:calc(var(--s3) + var(--head-h,0px))}.stage:has(>.hero)>.shortcut-hint{bottom:calc(var(--s3) + 36px + var(--s2) + var(--head-h,0px))}.use-stage{padding:4rem var(--s5) calc(var(--s5) + var(--head-h,0px))}:is(.stage:fullscreen>.hero-caption,.stage:fullscreen>.hero-actions){bottom:var(--s3)}.stage:has(>.hero):fullscreen>.shortcut-hint{bottom:calc(var(--s3) + 36px + var(--s2))}.hero{padding:var(--s5)}.hero-text.hero-plate{inline-size:100%}.hero h1{margin-bottom:10px;font-size:2.25rem}.hero p{font-size:1rem}.controls{padding:var(--s4);gap:var(--s4)}.controls:has(>.tabs){gap:0;padding:0}.tabs{top:var(--bar-h,0px);flex-wrap:wrap;padding:0 28px;overflow-x:visible}.tabpanel{padding:var(--s4) 28px;gap:20px}}@media (width<=599.98px){:root{--stage-h:270px}html{scroll-padding-top:calc(150px + var(--s2))}.layout{grid-template-rows:270px auto}.stage{border-bottom:0;height:270px;top:-120px}.stage:after{content:"";z-index:4;background:linear-gradient(var(--hairline), var(--hairline)) center 8px / 40px 4px no-repeat, var(--surface);clip-path:inset(-24px 0 0);pointer-events:none;border-radius:16px 16px 0 0;height:12px;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -2px 12px #17181c14}.stage:fullscreen:after{display:none}.phone-chips,.hero-actions{bottom:22px}.stage-compact .phone-chips{top:calc(var(--strip-top,120px) + 6px);bottom:auto;left:auto;right:6px}.stage-compact .phone-chips .size-badge{display:none}.controls{background:var(--surface);align-content:start;min-height:calc(100dvh - 150px)}.layout:has(>.stage-use){grid-template-rows:none}.tabs{background:var(--surface);border-bottom:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 16px 0;font-size:14px;display:grid;position:static;overflow:visible}.tab{min-height:40px;color:var(--ink);border:1px solid var(--line);border-radius:8px;justify-content:center;padding:0 6px}.tab[aria-selected=true]{color:var(--surface);background:var(--ink);border-color:var(--ink)}.tab:focus-visible{outline-offset:2px}.tabpanel{padding:12px 16px var(--s4)}}@supports (animation-timeline:scroll()){@media (width<=599.98px) and (prefers-reduced-motion:no-preference){.stage:not(.stage-use){--strip-top:0px;animation:linear both stage-shrink;animation-timeline:scroll(root);animation-range:var(--head-h,56px) calc(var(--head-h,56px) + 120px);top:0}.stage:fullscreen{animation:none}}}@keyframes stage-shrink{to{height:150px}}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--s4) var(--s3);min-width:0}@media (width>=40rem){.panel{padding:var(--s4)}}.btn{min-height:2.75rem;padding:0 var(--s3);font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{background:var(--sunk)}.btn[aria-pressed=true]{background:var(--sunk);box-shadow:inset 0 0 0 2px var(--ink)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn:disabled{cursor:default;background:var(--sunk);color:var(--muted);border-style:dashed}.field{gap:var(--s1);margin-bottom:var(--s3);display:grid}.field label{justify-content:space-between;gap:var(--s2);font-weight:600;display:flex}.field output{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400}input[type=range]{width:100%;accent-color:var(--accent);min-height:1.75rem}input[type=text],input[type=number]{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s1) var(--s2);min-width:0;min-height:2.75rem}input[aria-invalid=true]{border:2px solid var(--fail)}.error{color:var(--fail);margin:var(--s1) 0 0;font-size:.875rem}fieldset{border:0;min-width:0;margin:0;padding:0}legend{margin-bottom:var(--s2);padding:0;font-weight:600}legend .muted{font-weight:400}.color-grid{gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start;display:grid}.roles{gap:var(--s3);display:grid}.roles .field{margin:0}.role-row{align-items:center;gap:var(--s2);display:flex}.picker{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;block-size:2.75rem;inline-size:3rem;padding:.125rem}.hex-label{color:var(--muted)}.hex{font-family:var(--mono);width:7.5rem}.chips{gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap;display:flex}.chip{border:1px solid var(--line);cursor:pointer;border-radius:50%;place-items:center;block-size:2.25rem;inline-size:2.25rem;padding:0;display:grid}.chip[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.chip:disabled{cursor:not-allowed;background-image:linear-gradient(to top right,#0000 45%,#fff 45% 48%,#000 48% 52%,#fff 52% 55%,#0000 55%);transform:scale(.7)}.plate-group{gap:var(--s3);display:grid}.plate-group legend{margin-bottom:var(--s2)}.plate-group .field{margin:0}.radios{gap:var(--s1);display:grid}.radio{align-items:center;gap:var(--s2);cursor:pointer;min-height:2.75rem;display:flex}.radio input{block-size:1.25rem;inline-size:1.25rem;accent-color:var(--accent);flex:none;margin:0}.field:has(input:disabled) label{color:var(--muted)}.hint-text{color:var(--muted);margin:0;font-size:.875rem}.parallax-demo{scroll-timeline:--fp-demo y;border:1px solid var(--line);height:220px;margin-block:var(--s2);overflow:auto}.parallax-demo>.fp-pattern{height:900px}.heading-line{margin:0 0 var(--s3)}.heading-line>span:not(.badge-label){white-space:nowrap;flex:none}.adjusted{color:var(--muted);margin:0;font-size:.9375rem}.adjusted:empty,.pattern-warn:empty{display:none}.pattern-warn{gap:var(--s2);margin:0 0 var(--s3);color:var(--fail);align-items:baseline;font-weight:600;display:flex}.warn-icon{border:1.5px solid;border-radius:.2rem;flex:none;place-items:center;block-size:1.25rem;inline-size:1.25rem;font-size:.75rem;display:inline-grid}.chip-mark,.selected-mark{background:var(--ink);block-size:1.125rem;inline-size:1.125rem;color:var(--surface);border-radius:50%;place-items:center;font-size:.75rem;line-height:1;display:inline-grid}.contrast{background:var(--sunk);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}.contrast h3{margin-top:0}.ratio{margin:0 0 var(--s2);font-variant-numeric:tabular-nums;line-height:1}.ratio-num{letter-spacing:-.03em;font-size:clamp(3rem,9vw,4.5rem);font-weight:700}.ratio-unit{color:var(--muted);margin-left:.1em;font-size:1.5rem}.badges{margin:0 0 var(--s3);gap:var(--s1);padding:0;list-style:none;display:grid}.badge{align-items:baseline;gap:var(--s2);font-weight:600;display:flex}.badge-label{color:var(--ink);font-weight:400}.badge.pass{color:var(--pass)}.badge.fail{color:var(--fail)}.badge-icon{border:1.5px solid;border-radius:50%;align-self:center;place-items:center;block-size:1.25rem;inline-size:1.25rem;font-size:.75rem;display:inline-grid}.badge.fail .badge-icon{border-radius:.2rem}.surfaces,.stats{margin:0 0 var(--s3);gap:var(--s1);display:grid}.surfaces div,.stats div{justify-content:space-between;gap:var(--s2);border-bottom:1px solid var(--line);padding-bottom:var(--s1);display:flex}dt{color:var(--muted)}dd{font-variant-numeric:tabular-nums;text-align:right;margin:0;font-weight:600}.surfaces .info dd{color:var(--muted);font-weight:400}.tag{border:1px solid var(--line);border-radius:var(--radius-chip);white-space:nowrap;padding:0 .4em;font-size:.8125rem}.note{font-size:.9375rem}.fixes{gap:var(--s2);flex-wrap:wrap;display:flex}.fix-msg{margin:var(--s2) 0;font-size:.9375rem}.fix-msg:empty{margin:0}.links{color:var(--muted);margin:0;font-size:.9375rem}.palettes{gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,9rem),1fr));margin:0;padding:0;list-style:none;display:grid}.palette{inline-size:100%;font:inherit;color:var(--ink);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s1);cursor:pointer;gap:var(--s1);display:grid}.palette:hover{background:var(--sunk)}.palette[aria-pressed=true]{border:2px solid var(--ink);padding:calc(var(--s1) - 1px)}.swatches{outline:1px solid var(--line);border-radius:.2rem;block-size:2.5rem;display:flex;overflow:hidden}.swatches span{flex:1}.palette-name{align-items:center;gap:var(--s1);padding:0 var(--s1) var(--s1);font-size:.875rem;display:flex}.palette[aria-pressed=true] .palette-name{font-weight:700}.gallery{margin-bottom:var(--s4)}.family-h{margin:var(--s3) 0 var(--s2)}.family-h .muted{font-weight:400}.kinds{gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,6.5rem),1fr));display:grid}.kind{gap:var(--s1);padding:var(--s1);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;display:grid}.kind-tile{outline:1px solid var(--line);border-radius:.2rem;block-size:5rem}.kind-name{text-align:center;font-size:.875rem}.kind:has(input:checked){border:2px solid var(--ink);padding:calc(var(--s1) - 1px)}.kind:has(input:checked) .kind-name{font-weight:700}.kind:has(input:checked) .kind-name:before{content:"✓ "}.kind:has(input:focus-visible){outline:.1875rem solid var(--accent);outline-offset:.125rem}.fields{gap:0 var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));display:grid}.fields>*{min-width:0}.fields select{max-width:100%}.seed-row{gap:var(--s2);display:flex}.seed-row input{flex:1}.icon-btn{justify-content:center;min-width:2.75rem;padding:0}input[type=number]{appearance:textfield}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.surfaces dd{white-space:nowrap}.stats div{flex-wrap:wrap}.out-actions{align-items:center;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap;display:flex}.copy-status{font-weight:600}.out-note{margin:var(--s2) 0 0;font-size:.9375rem}.code{background:var(--sunk);border:1px solid var(--line);border-radius:var(--radius);max-height:14rem;padding:var(--s3);font-family:var(--mono);white-space:pre-wrap;word-break:break-all;margin:0;font-size:.8125rem;overflow:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.image-notes{margin:0 0 var(--s3);padding-left:var(--s4);font-size:.9375rem}.drop{gap:var(--s2);padding:var(--s3);margin-bottom:var(--s2);border:2px dashed var(--line);border-radius:var(--radius);background:var(--sunk);cursor:pointer;display:grid}.drop.dragging{border-color:var(--accent)}.drop:has(input:focus-visible){outline:.1875rem solid var(--accent);outline-offset:.125rem}.drop-title{font-weight:600}.drop input{font:inherit;color:var(--ink);max-width:100%}.error:empty{display:none}select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s1) var(--s2);max-width:100%;min-height:2.75rem}.image-source-note{padding:var(--s2) var(--s3);border-left:.25rem solid var(--accent);background:var(--sunk)}.field:has(input:disabled) input{opacity:.6;cursor:not-allowed}.patchwork{gap:var(--s3);margin-block:var(--s3);display:grid}.patchwork .field{margin:0}.cell-list{gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));margin:0;padding:0;list-style:none;display:grid}.cell-list li{gap:var(--s1);display:grid}.cell-list select{inline-size:100%;min-inline-size:0}.patchwork .btn{justify-self:start}.stage:fullscreen{width:100vw;height:100vh;max-height:none;position:relative}:is(.stage:fullscreen>.hero,.stage:fullscreen>.wall){width:100%;height:100%;min-height:100vh}@media (hover:none){.shortcut-switch{display:none}}.drop,.drop>*{box-sizing:border-box;min-width:0;max-width:100%}.drop input[type=file]{width:100%}.one-tile.accent-editor{z-index:3;pointer-events:auto;touch-action:none;cursor:default;overflow:visible}.accent-editor-outline{fill:none;stroke:var(--ink);stroke-width:1px;stroke-dasharray:3 2;pointer-events:none}.accent-editor-outline.selected{stroke:var(--accent);stroke-width:3px;stroke-dasharray:none}.accent-editor-hit{fill:#0000;stroke:#0000;stroke-linejoin:round;cursor:grab;outline:none}.accent-editor-hit:active{cursor:grabbing}.btn.secondary{color:var(--ink);background:var(--surface);border-color:var(--line)}.btn.quiet{background:0 0;border-color:#0000}.btn.quiet:hover:not(:disabled){background:0 0;text-decoration:underline}.btn:is(.primary,.secondary,.quiet):disabled{cursor:default;background:var(--sunk);color:var(--muted);border-color:var(--line);border-style:dashed;text-decoration:none}.btn:focus-visible,.ui-switch-track:focus-visible,.ui-segmented-option:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.ui-switch{align-items:center;column-gap:var(--s2);grid-template-columns:auto 1fr;display:grid}.ui-switch-track{box-sizing:border-box;background:var(--sunk);border:1px solid var(--muted);cursor:pointer;border-radius:999px;width:2.75rem;height:1.5rem;padding:0;position:relative}.ui-switch-thumb{background:var(--muted);border-radius:50%;width:calc(1.5rem - 6px);height:calc(1.5rem - 6px);transition:transform .15s;position:absolute;top:2px;left:2px}.ui-switch-track[aria-checked=true]{background:var(--accent);border-color:var(--accent)}.ui-switch-track[aria-checked=true] .ui-switch-thumb{background:var(--accent-ink);transform:translate(1.25rem)}.ui-switch-track:hover:not(:disabled){border-color:var(--ink)}.ui-switch-track:disabled{cursor:default;border-style:dashed;border-color:var(--muted);background:var(--sunk)}.ui-switch-track:disabled .ui-switch-thumb{background:var(--line)}.ui-switch-label{cursor:pointer}.ui-switch-track:disabled+.ui-switch-label{cursor:default;color:var(--muted)}.ui-switch-hint{color:var(--muted);grid-column:2;margin:0}.ui-segmented{gap:var(--s1);display:grid}.ui-segmented-group{border:1px solid var(--line);border-radius:var(--radius);width:fit-content;display:inline-flex}.ui-segmented-option{min-width:1.5rem;min-height:1.5rem;padding:0 var(--s3);font:inherit;color:var(--ink);background:var(--surface);cursor:pointer;border:0}.ui-segmented-option+.ui-segmented-option{border-left:1px solid var(--line)}.ui-segmented-option:hover:not(:disabled){background:var(--sunk)}.ui-segmented-option[aria-checked=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}.ui-segmented-option:first-child{border-radius:var(--radius) 0 0 var(--radius)}.ui-segmented-option:last-child{border-radius:0 var(--radius) var(--radius) 0}.ui-segmented-option:focus-visible{position:relative}.ui-segmented-option:disabled{cursor:default;color:var(--muted);background:var(--sunk)}@media (pointer:coarse){.ui-segmented-option{min-width:2.75rem;min-height:2.75rem}.ui-switch-track:before{content:"";position:absolute;inset:-10px -2px}}@media (prefers-reduced-motion:reduce){.ui-switch-thumb{transition:none}}.ui-file-drop{justify-items:start;gap:var(--s2);min-width:0;padding:var(--s3);margin-bottom:var(--s2);border:2px dashed var(--line);border-radius:var(--radius-card);background:var(--sunk);display:grid;position:relative}.ui-file-drop.dragging{border-color:var(--accent);background:var(--surface)}.ui-file-drop-label{overflow-wrap:anywhere;font-weight:600}.ui-file-drop-note{color:var(--muted);margin:0;font-size:.9375rem}.use-it-panel{gap:var(--s4);align-items:start;display:grid}@media (width>=48rem){.use-it-panel{grid-template-columns:minmax(16rem,1fr) minmax(0,1.25fr)}.use-it-left{top:var(--s3);position:sticky}}.use-it-panel.use-it-solo{grid-template-columns:minmax(0,1fr)}.use-it-steps{gap:var(--s4);min-width:0;display:grid}.use-it-step{gap:var(--s2-5);border:0;min-width:0;margin:0;padding:0;display:grid}.use-it-step legend,.use-it-get{margin:0 0 var(--s2-5);letter-spacing:-.01em;padding:0;font-size:1.375rem;font-weight:700}.use-it-dests{gap:var(--s2-5);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}@media (width<=70rem){.use-it-dests{grid-template-columns:repeat(2,minmax(0,1fr))}}.use-it-dest{min-height:1.5rem;padding:var(--s2-5);color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);cursor:pointer;align-content:start;gap:2px;font-size:.9375rem;display:grid;position:relative}.use-it-dest:hover{border-color:var(--line)}.use-it-dest:has(:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.use-it-hint{color:var(--muted);font-size:.875rem}.use-it-presets{grid-template-columns:repeat(auto-fill, minmax(max(16rem, calc(50% - var(--s2))), 1fr));gap:var(--s2);display:grid}.use-it-preset{align-items:center;gap:var(--s2-5);min-height:1.5rem;padding:var(--s2-5) var(--s3);color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-control);cursor:pointer;display:flex}.use-it-preset:hover{border-color:var(--line)}.use-it-preset:has(:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.use-it-preset input{width:1.125rem;height:1.125rem;accent-color:var(--ink);flex:none;margin:0}:is(.use-it-dest:has(:focus-visible),.use-it-preset:has(:focus-visible)){outline:3px solid var(--accent);outline-offset:2px}.use-it-preset input:focus-visible{outline:none}.use-it-px{color:var(--muted);font-family:var(--mono);white-space:nowrap;margin-left:auto;font-size:.9375rem}.use-it-custom{align-items:end;gap:var(--s2);flex-wrap:wrap;display:flex}.use-it-custom label{gap:var(--s1);font-size:.875rem;display:grid}.use-it-custom input{width:7rem;min-height:1.5rem;padding:var(--s1) var(--s2);font:inherit;font-family:var(--mono);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control)}.use-it-switch{margin-top:var(--s2);grid-template-columns:auto auto 1fr}.use-it-switch .ui-switch-hint{grid-column:3}.use-it-switch .ui-switch-hint:before{content:"· "}.use-it-actions{gap:var(--s2-5);flex-wrap:wrap;display:flex}.btn.use-it-action,.btn.use-it-qr{gap:var(--s2);min-height:3.25rem;padding:0 var(--s4);font-size:1.125rem}.btn.use-it-action{color:var(--page);background:var(--ink);border-color:var(--ink)}.btn.use-it-action:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 85%, var(--page))}.btn.use-it-qr{font-weight:400}.btn.use-it-qr[aria-disabled=true]{cursor:not-allowed}.use-it-icon{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:1.125rem;height:1.125rem}.use-it-note,.use-it-howto{max-width:40rem;color:var(--muted);margin:0;line-height:1.5}.use-it-note:empty{display:none}@media (pointer:coarse){.use-it-dest,.use-it-preset,.use-it-custom input{min-height:2.75rem}}.ui-section.panel{padding:0}.ui-section>summary{min-height:52px;padding:8px var(--s3);cursor:pointer;flex-wrap:wrap;align-items:center;gap:4px 10px;list-style:none;display:flex}.ui-section>summary::-webkit-details-marker{display:none}.ui-section>summary:focus-visible{outline:.1875rem solid var(--ink);outline-offset:-.1875rem;border-radius:var(--radius-card)}.ui-section .fold-title{margin:0;font-size:16px;font-weight:700}.ui-section .fold-sum{min-width:0;font-family:var(--mono);color:var(--muted);flex:1;font-size:13px}.ui-section .fold-mark{margin-left:auto;transition:transform .15s}.ui-section[open] .fold-mark{transform:rotate(90deg)}@media (prefers-reduced-motion:reduce){.ui-section .fold-mark{transition:none}}.ui-section>.fold-body{min-width:0;padding:0 var(--s3) var(--s4)}@media (width>=40rem){.ui-section>summary{padding-inline:var(--s4)}.ui-section>.fold-body{padding:0 var(--s4) var(--s4)}}.use-it-density{justify-items:start;gap:var(--s1);display:grid}.rl-line,.cp-box,.cp-details{display:none}.rl-item{display:contents}@media (width<=599.98px){.cp-main.panel{background:0 0;border:0}.cp-main>summary,.cp-main .lede,.cp-main .contrast>h3,.cp-main .contrast>.ratio,.cp-main .contrast>.badges,.cp-main .fixes .btn:disabled{display:none}.cp-main>.fold-body{padding:0}.cp-main .color-grid{flex-direction:column;align-items:stretch;gap:12px;display:flex}.cp-main .roles,.cp-main .contrast{display:contents}.cp-main .contrast>*{order:2;margin:0}.cp-main .fix-msg:empty,.cp-main .pattern-warn:empty,.cp-main .adjusted:empty{display:none}.cp-main .fixes:not(:has(.btn:enabled)){display:none}.rl-item{border:1px solid var(--hairline);border-block-width:0 1px;display:block}.roles>.rl-item:first-child{border-radius:var(--radius-card) var(--radius-card) 0 0;border-top-width:1px}.rl-item:has(+.adjusted){border-radius:0 0 var(--radius-card) var(--radius-card)}.rl-item+.rl-item{margin-top:-12px}.rl-item:not(.open)>:not(.rl-line){display:none}.rl-item.open>:not(.rl-line){margin:0 12px 12px}.rl-item .role>legend{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.rl-line{align-items:center;min-width:0;display:flex}.rl-head{min-width:0;min-height:52px;color:inherit;font:inherit;text-align:start;background:0 0;border:0;flex:1;align-items:center;gap:10px;padding:4px 0 4px 12px;display:flex}.rl-head:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.rl-swatch{width:32px;height:32px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);border-radius:6px;flex:none}.rl-text{flex-direction:column;min-width:0;display:flex}.rl-name{white-space:nowrap;font-size:14px;font-weight:600}.rl-hex{white-space:nowrap;font-family:var(--mono);color:var(--muted);font-size:12px}.rl-dots{flex:none;padding-right:1px;display:flex}.rl-dot{background:0 0;border:0;place-items:center;width:32px;height:44px;padding:0;display:grid}.rl-dot>span{width:22px;height:22px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);border-radius:5px}.rl-dot[aria-pressed=true]>span{outline:2px solid var(--ink);outline-offset:1px}.rl-dot:disabled{cursor:not-allowed}.rl-dot:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.cp-box{border-radius:var(--radius-card);background:var(--sunk);order:1;align-items:center;gap:10px;padding:14px;display:flex}.cp-box-ratio{flex-direction:column;margin:0;display:flex}.cp-box-label{color:var(--muted);font-size:12px}.cp-box-num{font-family:var(--mono);letter-spacing:-.02em;font-size:34px;font-weight:700;line-height:1.15}.cp-box-num>span{color:var(--muted);font-size:18px}.cp-box-lines{white-space:nowrap;flex:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;font-size:13px;font-weight:600;list-style:none;display:grid}.cp-box-lines .pass{color:var(--pass)}.cp-box-lines .fail{color:var(--fail)}.cp-details{border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--ink);font:inherit;border-radius:8px;order:3;justify-content:space-between;align-items:center;padding:0 14px;font-size:14px;display:flex}.cp-details[aria-expanded=true]>span{transform:rotate(90deg)}.cp-main .cp-more{order:4}:is(.cp-main:has(.cp-details[aria-expanded=false]) .cp-more,.cp-main:has(.cp-details[aria-expanded=false])~.ui-section){display:none}}.use-it-phones{gap:var(--s1);font-size:.875rem;display:grid}.use-it-phone-row{align-items:center;gap:var(--s2);flex-wrap:wrap;display:flex}.use-it-phone-row select{max-width:100%;min-height:2.25rem}.use-it-phone-row .use-it-px{margin-left:0}.sheet.qr-dialog{border-radius:16px;width:min(100% - 32px,22rem);height:fit-content;margin:auto;inset:0}.qr-code{background:#fff;justify-self:center;width:240px;height:240px}.qr-code svg{width:240px;height:240px;display:block}.qr-text{margin:0;font-size:.875rem}.qr-link{gap:var(--s1);font-size:.875rem;display:grid}.qr-link input{min-width:0;padding:var(--s1) var(--s2);font:inherit;font-family:var(--mono);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);font-size:.8125rem}.qr-dialog .btn{justify-content:center}.accent-shapes .fold-body{gap:var(--s3);display:grid}.accent-shape-grid{gap:var(--s2);border:0;grid-template-columns:repeat(4,minmax(0,1fr));min-width:0;margin:0;padding:0;display:grid}.accent-shape-grid legend{margin-bottom:var(--s1);grid-column:1/-1;padding:0}.accent-shape{justify-content:center;align-items:center;gap:var(--s1);min-width:0;min-height:64px;padding:var(--s1);font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);cursor:pointer;flex-direction:column;font-size:.8125rem;display:flex}.accent-shape[aria-pressed=true]{border:2px solid var(--accent);font-weight:600}.accent-shape:disabled{cursor:default;opacity:.5}.accent-shape:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.accent-snap .ui-segmented-option{font-family:var(--mono);font-size:.8125rem}.accent-vary{gap:var(--s3);margin-top:var(--s3);display:grid}.accent-vary h3{margin:0;font-size:1rem}.accent-vary p{margin:0}.v-applies{margin-block:var(--s3) var(--s1)}.v-applies .ui-segmented-option{min-height:44px;padding-inline:1.125rem}.accent-edit{gap:var(--s2,8px);flex-wrap:wrap;align-items:center;display:flex}.accent-edit .hint-text{flex-basis:100%;margin:0}.loupe{gap:var(--s3,12px);margin-block:var(--s2,8px) var(--s3,12px);flex-wrap:wrap;align-items:flex-start;display:flex}.loupe-view{max-inline-size:100%;border:1px solid var(--border,currentColor);flex:none;height:auto}.loupe-view path,.loupe-thumb path,.loupe-marker{vector-effect:non-scaling-stroke}.loupe-exact{stroke:#9aa0a6;stroke-width:1px}.loupe-rounded{stroke-width:2px;stroke-opacity:.85;stroke-linejoin:round;stroke-linecap:round}.loupe-thin{stroke-width:1px}.loupe-side{flex:10rem;min-inline-size:0}.loupe-thumb{touch-action:none;cursor:crosshair;border:1px solid var(--border,currentColor);display:block}.loupe-marker{stroke:#e8590c;stroke-width:2px}.loupe-readout,.loupe-note{margin:var(--s2,8px) 0 0}@media (width<=599px){.loupe{flex-direction:column}}.site-header{box-sizing:border-box;background:var(--page);border-bottom:1px solid var(--hairline);align-items:center;gap:20px;min-width:0;min-height:56px;padding:0 24px;display:flex}.site-header p{margin:0}.brand{letter-spacing:-.01em;white-space:nowrap;align-items:center;gap:10px;font-size:17px;font-weight:750;display:flex}.brand .logo{width:28px;height:28px}.tool-switch{background:var(--sunk);border-radius:8px;flex-shrink:0;gap:2px;padding:3px;display:flex}.tool-switch a{box-sizing:border-box;height:32px;color:var(--muted);white-space:nowrap;border-radius:6px;justify-content:center;align-items:center;padding:0 14px;font-size:14px;text-decoration:none;display:flex}.tool-switch a:hover{color:var(--ink)}.tool-switch a[aria-current=page]{background:var(--surface);color:var(--ink);font-weight:650;box-shadow:0 1px 2px #0000001f}.tool-switch a:focus-visible,.keys-btn:focus-visible,.repo-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tagline{min-width:0;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:14px;overflow:hidden}.keys-btn{border:1px solid var(--line);width:32px;height:32px;color:var(--ink);font-family:var(--mono);cursor:pointer;background:0 0;border-radius:6px;flex-shrink:0;margin-inline-start:auto;padding:0;font-size:14px}.keys-btn:hover{background:var(--sunk)}.repo-link{color:var(--ink);white-space:nowrap;font-size:14px}.repo-link:hover{color:var(--accent)}@media (pointer:coarse){.keys-btn{width:44px;height:44px}}@media (width<=799.98px){.tagline{display:none}}@media (width<=599.98px){.site-header{gap:10px;padding-inline:12px}.brand-name{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.tool-switch{flex:1;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.tool-switch a{height:34px;padding:0 4px}.tool-switch .label-long,.repo-link{display:none}.keys-btn{margin-inline-start:0}}.key-help{max-width:min(32rem,100vw - 2rem);max-height:calc(100dvh - 2rem);padding:var(--s3);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px}.key-help::backdrop{background:#0006}.key-help h2{margin:0 0 var(--s2);font-size:1.125rem}.key-help table{width:100%;margin-bottom:var(--s3);border-collapse:collapse}.key-help th,.key-help td{border-top:1px solid var(--line);text-align:start;vertical-align:top;padding:.25rem .5rem .25rem 0}.key-help th{white-space:nowrap;font-weight:400}.key-help .key-help-close{margin:var(--s3) 0 0;text-align:end}.uip-caption{margin-top:var(--s2);text-align:center;justify-items:center;gap:2px;display:grid}.uip-detail{color:var(--muted);font-family:var(--mono);font-size:.9375rem}.use-it-preview{min-width:0;margin:0}.uip-stage{height:34rem;padding:var(--s4);background:var(--sunk);border-radius:var(--radius-card);place-items:center;display:grid;container-type:size}@media (width<=47.99rem){.uip-stage{height:15rem}}.uip-screen{background-repeat:repeat;position:relative;overflow:hidden}.uip-phone,.uip-call,.uip-paper,.uip-slide,.uip-browser{width:min(100cqw, calc(100cqh * var(--ar)));aspect-ratio:var(--ar)}.uip-phone{box-sizing:border-box;padding:calc(.03 * min(100cqw, 100cqh * var(--ar)));box-shadow:0 0 0 1px var(--line);background:#17181c;border-radius:14%/6.5%;container-type:inline-size}.uip-phone .uip-screen{border-radius:12%/5.6%;height:100%}.uip-fade{position:absolute;inset:0}.uip-clock{font:800 min(24cqw, 5rem) / 1 var(--font);letter-spacing:-.02em;white-space:nowrap;justify-items:center;display:grid;position:absolute;inset:9% 0 auto}.uip-date{letter-spacing:0;margin-bottom:.2em;font-size:.26em;font-weight:600}.uip-laptop{width:min(100cqw, calc(88cqh * var(--ar)));justify-items:center;display:grid}.uip-lid{box-sizing:border-box;background:#1a1a1a;border-radius:10px 10px 0 0;width:84%;padding:2.5% 2.5% 3%}.uip-lid .uip-screen{aspect-ratio:var(--ar)}.uip-base{background:linear-gradient(#c9cbd1,#8e9097);border-radius:0 0 12px 12px/0 0 8px 8px;width:100%;height:.75rem}.uip-browser{background:var(--surface);border:1px solid var(--line);border-radius:8px;grid-template-rows:auto 1fr;display:grid;overflow:hidden}.uip-bar{background:var(--sunk);border-bottom:1px solid var(--hairline);align-items:center;gap:5px;padding:6px 8px;display:flex}.uip-bar i{background:var(--line);border-radius:50%;width:8px;height:8px}.uip-url{background:var(--surface);border-radius:999px;flex:1;height:10px;margin-left:8px}.uip-page{grid-template-columns:100%;min-height:0;display:grid}.uip-page.uip-hero{background:repeating-linear-gradient(to bottom, transparent 0 14px, var(--hairline) 14px 20px) 50% 88% / 70% 22% no-repeat;align-content:start}.uip-page.uip-hero .uip-screen{aspect-ratio:5/2}.uip-page .uip-screen{place-items:center;display:grid}.uip-text{width:50%;color:var(--ink);background:var(--surface);border-radius:6px;gap:6px;padding:6% 7%;display:grid;box-shadow:0 2px 8px #0003}.uip-text span,.uip-title span{background:var(--hairline);border-radius:3px;height:6px}.uip-text span:last-child{width:70%}.uip-call{border:6px solid #202124;border-radius:10px;overflow:hidden}.uip-call .uip-screen,.uip-paper .uip-screen,.uip-slide .uip-screen{height:100%}.uip-person{fill:#3c4043;width:60%;height:80%;position:absolute;bottom:0;left:20%}.uip-name{color:#fff;background:#0009;border-radius:4px;padding:1px 6px;font-size:.75rem;position:absolute;bottom:8px;left:8px}.uip-shirt{aspect-ratio:1;width:min(100cqw,100cqh);position:relative}.uip-shirt .uip-screen{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.uip-outline{fill:none;stroke:var(--ink);stroke-width:1px;stroke-linejoin:round;position:absolute;inset:0}.uip-game{aspect-ratio:1;grid-template-columns:repeat(3,1fr);gap:2px;width:min(100cqw,100cqh);display:grid}.uip-game .uip-screen{aspect-ratio:1}.uip-paper{width:min(100cqw, calc(100cqh * var(--ar)));background:#fff;box-shadow:0 3px 12px #00000040}.uip-slide{border:1px solid var(--line);overflow:hidden;box-shadow:0 3px 12px #0003}.uip-title{color:var(--ink);background:color-mix(in srgb, var(--surface) 88%, transparent);gap:6px;padding:5% 7%;font-size:clamp(.75rem,6cqh,1.5rem);display:grid}.uip-title span{width:40%}.palette-strip{box-sizing:border-box;border:1px solid var(--line);background:var(--surface);border-radius:6px;align-items:center;gap:2px;min-width:0;height:36px;padding:0 2px;font-size:13px;display:inline-flex}.palette-strip .swatches{border-radius:3px;display:inline-flex;overflow:hidden}.palette-strip .swatch{width:14px;height:16px}.palette-strip .palette-name{text-overflow:ellipsis;white-space:nowrap;max-width:10rem;overflow:hidden}.icon-btn{min-width:1.75rem;min-height:1.75rem;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;place-items:center;padding:0;font-size:1.125rem;line-height:1;display:inline-grid}.icon-btn:hover{background:var(--sunk)}@media (width<=599.98px){.palette-strip .palette-name{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.palette-strip .swatch{width:10px}}.palette-strip .swatches{outline:none;block-size:16px}.palette-strip .palette-name{padding:0 6px;display:inline}.palette-strip .icon-btn{background:0 0;border:0;border-radius:4px;width:30px;min-width:0;height:30px;min-height:0;font-size:16px}.palette-strip .icon-btn:hover{background:var(--sunk)}.palette-strip .dice{display:inline-grid}.icon-btn{-webkit-user-select:none;user-select:none}@media (prefers-reduced-motion:no-preference){.palette-strip .swatches{animation:.28s ease-out pal-pop}.palette-strip .dice{animation:.35s ease-out dice-roll;display:inline-block}.icon-btn:active{transform:scale(.96)}}@keyframes pal-pop{0%{opacity:.4;transform:scale(.8)}}@keyframes dice-roll{0%{transform:rotate(-180deg)scale(.7)}}.sponsor{justify-content:space-between;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--accent);border-radius:var(--radius);color:var(--ink);flex-basis:100%;display:flex}.sponsor p{margin:0}.sponsor .sponsor-btn{color:var(--page)}.sponsor .sponsor-btn:hover{background:var(--accent);text-decoration:underline}@media (width<=480px){.sponsor{text-align:center;flex-direction:column;align-items:stretch}.sponsor .sponsor-btn{justify-content:center}}.bottom-bar{display:none}@media (width>=600px){.phone-only{display:none!important}}@media (width<=599.98px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}.bottom-bar{z-index:5;grid-template-columns:var(--bar-cols,1.6fr 1fr 1fr 1fr 1.6fr);padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--hairline);gap:8px;display:grid;position:fixed;inset:auto 0 0}.bottom-bar>*{box-sizing:border-box;border:1px solid var(--ink);background:var(--surface);min-width:0;height:52px;min-height:52px;color:var(--ink);font:inherit;white-space:nowrap;text-align:center;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:6px;margin:0;padding:0 4px;font-size:14px;font-weight:650;line-height:1.1;display:flex}.bottom-bar>select{appearance:none;font-weight:400}.bottom-bar>:disabled{border-style:dashed;border-color:var(--line);color:var(--muted);cursor:default}.bottom-bar>.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.bottom-bar>.primary:disabled{opacity:.5}.bottom-bar>.ink{border-color:var(--ink);background:var(--ink);color:var(--page)}.bottom-bar>:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.bar-swatches{border-radius:4px;grid-template-columns:1fr 1fr;width:22px;height:22px;display:grid;overflow:hidden}}.sheet{box-sizing:border-box;background:var(--surface);width:100%;max-width:100%;max-height:85dvh;color:var(--ink);border:0;border-radius:16px 16px 0 0;margin:0;padding:0;inset:auto 0 0}.sheet::backdrop{background:#0006}.sheet-body{padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));gap:12px;display:grid}.sheet-handle{background:var(--line);border-radius:2px;justify-self:center;width:40px;height:4px}.sheet-head{justify-content:space-between;align-items:center;display:flex}.sheet-head h2{margin:0;font-size:1.125rem}.sheet-close{background:var(--sunk);width:44px;height:44px;color:var(--ink);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;font-size:22px;display:grid}.sheet-close:focus-visible,.sheet .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sheet .palette-strip{height:52px;padding:0 4px;display:flex}.sheet .palette-strip .swatches{block-size:28px}.sheet .palette-strip .swatch{width:24px;height:28px}.sheet .palette-strip .palette-name{clip-path:none;flex:1;width:auto;height:auto;font-size:15px;position:static}.sheet .palette-strip .icon-btn{width:44px;height:44px}.sheet-more{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sheet-more h3{color:var(--muted);grid-column:1/-1;margin:4px 0 0;font-size:.8125rem;font-weight:600}.sheet-more .btn{justify-content:center;min-height:44px}.sheet-status{min-height:1.25em;color:var(--muted);margin:0;font-size:.875rem}.sheet.sheet-use{overscroll-behavior:contain;max-height:92dvh;box-shadow:0 -4px 20px #17181c33}.sheet-use::backdrop{background:#17181c66}.sheet-use .sheet-handle{width:36px}.sheet-use .sheet-head h2{font-size:1.25rem}.sheet-use .use-stage{z-index:auto;border-radius:10px;height:200px;padding:8px;position:relative;inset:auto}.sheet-use .use-it-panel,.sheet-use .studio-use{min-width:0}