:root{--bg:#e7e6e3;--surface:#f3f2ef;--surface-2:#ebeae6;--ink:#1b1b19;--ink-2:#3a3a37;--muted:#6b6a65;--line:#d4d2cc;--line-strong:#bdbbb4;--focus:#1b1b19;--danger:#b3261e;--ok:#2f6b3a;--warn:#8a5a00;--plate:#e7e6e3;--plate-opacity:.86;--shadow:0 1px 2px #0000000a, 0 4px 16px #0000000a;--sans:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;--display:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"Geist Mono", ui-monospace, Menlo, monospace;--w-thin:200;--w-light:300;--w-reg:400;--w-med:500;--w-semi:600;--w-bold:800;--r-sm:8px;--r:12px;--r-lg:18px;--gutter:32px;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--shadow-lg:0 1px 1px #0000000a, 0 8px 24px #00000014, 0 24px 64px #00000014;--topbar-h:60px;--tabbar-h:0px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#191918;--surface:#222221;--surface-2:#2a2a28;--ink:#ecebe6;--ink-2:#cfcdc6;--muted:#9a988f;--line:#363532;--line-strong:#4a4945;--focus:#ecebe6;--danger:#f2877f;--ok:#86c795;--warn:#e4b45a;--plate:#191918;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#191918;--surface:#222221;--surface-2:#2a2a28;--ink:#ecebe6;--ink-2:#cfcdc6;--muted:#9a988f;--line:#363532;--line-strong:#4a4945;--focus:#ecebe6;--danger:#f2877f;--ok:#86c795;--warn:#e4b45a;--plate:#191918;--shadow:none;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body{margin:0}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit}img{max-width:100%;display:block}h1,h2,h3{margin:0;line-height:1.15}p{margin:0}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}main:focus{outline:none}.mono{font-family:var(--mono);font-size:12px}.skip{background:var(--ink);color:var(--bg);border-radius:var(--r-sm);z-index:100;padding:8px 12px;position:absolute;top:8px;left:-999px}.skip:focus{left:8px}.topbar{z-index:20;padding:12px max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:saturate(1.2)blur(10px);backdrop-filter:saturate(1.2)blur(10px);border-bottom:1px solid var(--line);align-items:center;gap:24px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;align-items:center;gap:8px;font-size:17px;font-weight:700;text-decoration:none;display:flex}.mainnav{flex:1;gap:4px;display:flex}.mainnav a{color:var(--muted);border-radius:999px;padding:6px 12px;font-weight:500;text-decoration:none;transition:color .15s,background .15s}@media (hover:hover) and (pointer:fine){.mainnav a:hover{color:var(--ink)}}.mainnav a.active{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}.topbar-tools{align-items:center;gap:8px;display:flex}.btn{border:1px solid var(--line-strong);border-radius:var(--r-sm);white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:6px;padding:7px 13px;font-size:14px;font-weight:500;line-height:1.2;text-decoration:none;transition:border-color .15s,background .15s,opacity .15s;display:inline-flex}@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){border-color:var(--ink)}}.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}@media (hover:hover) and (pointer:fine){.btn.primary:hover:not(:disabled){opacity:.88}}.btn.ghost{color:var(--muted);border-color:#0000}@media (hover:hover) and (pointer:fine){.btn.ghost:hover:not(:disabled){color:var(--ink);border-color:var(--line)}.btn.danger:hover:not(:disabled){color:var(--danger)}}.btn.small{padding:4px 9px;font-size:13px}.btn.big{padding:11px 18px;font-size:15px}.btn:disabled,.btn.disabled{opacity:.4;pointer-events:none}.icon-btn{border:1px solid var(--line-strong);border-radius:var(--r-sm);background:0 0;flex:none;place-items:center;width:34px;height:34px;font-size:16px;line-height:1;display:inline-grid}@media (hover:hover) and (pointer:fine){.icon-btn:hover:not(:disabled){border-color:var(--ink)}}.icon-btn:disabled{opacity:.35}.icon-btn.ghost{border-color:#0000}@media (hover:hover) and (pointer:fine){.icon-btn.ghost:hover{border-color:var(--line)}}.icon-btn.tiny{width:26px;height:26px;font-size:13px}.link-btn{text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:500;text-decoration:underline}.text-input,.select{border:1px solid var(--line-strong);background:var(--bg);border-radius:var(--r-sm);min-width:0;padding:7px 10px;font-size:14px}.text-input{width:100%}.select.small{padding:3px 6px;font-size:12px}.segmented{background:var(--surface-2);border-radius:var(--r);flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.segmented button{color:var(--muted);background:0 0;border:0;border-radius:7px;padding:6px 12px;font-size:13px;font-weight:500}.segmented button.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line), var(--shadow)}input[type=range]{accent-color:var(--ink);width:100%;min-width:0}.row{align-items:center;gap:8px;display:flex}.row.wrap{flex-wrap:wrap}.hint{color:var(--muted);font-size:13px}.hint.center,.center{text-align:center}.note{background:var(--surface-2);border-radius:var(--r-sm);color:var(--ink-2);margin-bottom:12px;padding:10px 12px;font-size:13px}.empty{color:var(--muted);padding:6px 0;font-size:14px}.empty.big{text-align:center;padding:48px 0;font-size:16px}.page{max-width:1320px;padding:36px var(--gutter) 72px;margin:0 auto}.page.narrow{max-width:760px}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;display:flex}.display{font-family:var(--display);font-weight:var(--w-thin);letter-spacing:-.01em;font-size:clamp(34px,5vw,56px);line-height:1.02}.lead{color:var(--ink-2);max-width:62ch;margin-top:10px;font-size:17px}.kicker{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-size:12px;font-weight:600}.center-block{flex-direction:column;align-items:center;gap:24px;padding-top:96px;display:flex}.page-loading{min-height:60vh}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px}.card-head{justify-content:space-between;align-items:center;gap:12px;min-height:24px;margin-bottom:12px;display:flex}.card-head h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700}.card-meta{text-align:right;font-size:13px;font-weight:500}.card h3{margin:16px 0 8px;font-size:13px;font-weight:600}.star-fig{margin:0}.star{aspect-ratio:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;display:block}.star .cell{stroke:var(--bg);stroke-width:1.2px;stroke-linejoin:round;transition:opacity .25s}.star.pickable .cell{cursor:pointer}.star.rotatable{cursor:grab}.star.rotatable .cell{cursor:pointer}.star.dragging,.star.dragging .cell{cursor:grabbing}.cell-hover{fill:none;stroke:var(--focus);stroke-width:3px;stroke-linejoin:round;pointer-events:none;opacity:0;transition:opacity .12s}.star-fig{position:relative}.star-tip{pointer-events:none;background:var(--ink);color:var(--bg);font:500 12px/1 var(--mono);white-space:nowrap;opacity:0;z-index:2;border-radius:7px;padding:7px 9px;transition:opacity .12s;position:absolute;top:0;left:0}.plate-knob{cursor:grab;touch-action:none}.knob-hit{fill:#0000}.knob{fill:var(--focus);stroke:var(--surface);stroke-width:3px}.star-plate{fill:var(--star-plate,var(--plate));fill-opacity:var(--plate-opacity);pointer-events:none}.star-disk,.star-markers{pointer-events:none}.star-disk .plate-knob{pointer-events:auto}.plate-edge{fill:none;stroke:var(--line-strong);stroke-width:2px}.plate-line{fill:none;stroke:var(--focus);stroke-width:1.5px;stroke-dasharray:4 5;opacity:.5}.marker-halo{fill:var(--surface);stroke:var(--focus);stroke-width:2.5px}.marker-dot{stroke:#00000026;stroke-width:1px}.marker-extra{stroke:var(--surface);stroke-width:4px;paint-order:stroke}.home .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:48px;min-height:min(76vh,760px);display:grid}.hero .lead{margin:20px 0 28px}.hero-strip{border-radius:999px;max-width:320px;height:10px;margin:36px 0 8px;display:flex;overflow:hidden}.hero-strip span{flex:1;transition:background .5s}.hero-star{justify-self:end;width:100%;max-width:620px}.studio{max-width:1320px;padding:24px var(--gutter) 72px;grid-template-columns:minmax(0,1fr) 420px;align-items:start;gap:32px;margin:0 auto;display:grid}.studio-stage{position:sticky;top:76px}.studio-stage .star-fig{max-width:min(760px,100dvh - 340px);margin:0 auto}.studio-panel{flex-direction:column;gap:16px;min-width:0;display:flex}.key-input{align-items:flex-start;gap:8px;display:flex}.swatch-picker{border-radius:var(--r-sm);cursor:pointer;flex:none;width:38px;height:38px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001f}.swatch-picker input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.hex-field{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.hex-field input{border:1px solid var(--line-strong);background:var(--bg);border-radius:var(--r-sm);width:100%;height:38px;font-family:var(--mono);text-transform:uppercase;padding:0 10px;font-size:14px}.hex-field input[aria-invalid=true]{border-color:var(--danger)}.field-error{color:var(--danger);font-size:12px}.key-input .icon-btn,.key-input .btn{height:38px}.key-input .icon-btn{width:38px}.disks{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.disk-btn{border:1px solid var(--line);border-radius:var(--r);color:var(--muted);background:0 0;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 2px 6px;font-size:11px;transition:border-color .15s,color .15s,background .15s;display:flex}.disk-btn span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}@media (hover:hover) and (pointer:fine){.disk-btn:hover{color:var(--ink);border-color:var(--line-strong)}}.disk-btn[aria-checked=true]{color:var(--ink);border-color:var(--ink);background:var(--bg)}.why{color:var(--ink-2);min-height:3em;margin:12px 0 4px;font-size:13px}.rings{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.ring-btn{aspect-ratio:1;border:0;border-radius:8px;box-shadow:inset 0 0 0 1px #0000001a}.ring-btn[aria-checked=true]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--focus)}.slider,.inline-range{grid-template-columns:auto 1fr 3.2em;align-items:center;gap:12px;margin-top:14px;font-size:13px;display:grid}.slider output,.inline-range output{font-family:var(--mono);text-align:right;font-size:12px}.slider+.hint{margin-top:6px}.mini-tools{flex:none;align-items:center;gap:4px;display:flex}.values{gap:0;margin:0;display:grid}.values-row{grid-template-columns:46px minmax(0,1fr);align-items:center;display:grid}.values dt{color:var(--muted);font:10px/20px var(--mono);letter-spacing:.03em}.values dd{min-width:0;margin:0}.value-btn{font:12px/20px var(--mono);text-overflow:ellipsis;white-space:nowrap;text-align:left;background:0 0;border:0;border-radius:4px;max-width:calc(100% + 8px);margin:0 -4px;padding:0 4px;overflow:hidden}@media (hover:hover) and (pointer:fine){.value-btn:hover{background:var(--surface-2)}}.value-btn.strong{font-size:13px;font-weight:500}.card>.row{margin-top:14px}.dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--r);text-align:center;color:var(--muted);padding:28px 16px;font-size:14px;transition:background .15s,border-color .15s}.dropzone.over{background:var(--surface-2);border-color:var(--ink)}.image-result{grid-template-columns:120px minmax(0,1fr);gap:14px;display:grid}.image-preview{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.image-preview img{border-radius:var(--r-sm);object-fit:cover;width:120px;max-height:180px}.image-colors .inline-range{margin-top:0}.share-bar{border-radius:999px;height:12px;margin:12px 0;display:flex;overflow:hidden}.share-bar span{min-width:3px}.extracted{flex-direction:column;gap:6px;margin:0 0 12px;padding:0;list-style:none;display:flex}.extracted li{grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.extracted-chip{border:0;border-radius:6px;width:30px;height:30px;box-shadow:inset 0 0 0 1px #0000001f}.extracted-meta{flex-direction:column;min-width:0;font-size:13px;line-height:1.3;display:flex}.extracted-meta strong{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.extracted-meta .mono{color:var(--muted);font-size:11px}.export-row{flex-wrap:wrap;gap:8px;display:flex}.export-row .select{flex:200px}.code{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);font:12px/1.5 var(--mono);white-space:pre;max-height:220px;margin:10px 0 0;padding:10px 12px;overflow:auto}.library{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.lib-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}.lib-strip{height:96px;display:flex}.lib-strip span{flex:1}.lib-body{flex-direction:column;gap:6px;padding:14px 16px 16px;display:flex}.lib-body h2{font-size:17px;font-weight:600}.lib-body .sub{color:var(--muted);margin-bottom:6px;font-size:13px}.toast{background:var(--ink);color:var(--bg);border-radius:var(--r-sm);opacity:0;pointer-events:none;z-index:50;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100vw - 32px);padding:9px 16px;font-size:13px;font-weight:500;transition:opacity .18s,transform .18s;position:fixed;bottom:24px;left:50%;overflow:hidden;transform:translate(-50%,16px)}.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%)}.toast{align-items:center;gap:14px;display:flex}.toast-action{color:inherit;text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:700;text-decoration:underline}@media (width<=1080px){.studio{grid-template-columns:1fr}.studio-stage{position:static}.studio-stage .star-fig{max-width:640px}.home .hero{grid-template-columns:1fr;gap:24px;min-height:0}.hero-star{grid-row:1;justify-self:center;max-width:520px}}@media (width<=760px){:root{--gutter:16px}.topbar{padding:10px var(--gutter);flex-wrap:wrap;gap:8px 12px}.mainnav{scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);flex-basis:100%;order:3;overflow-x:auto}.mainnav a{white-space:nowrap;padding:5px 10px;font-size:14px}.brand{flex:1}.page{padding-top:24px}.studio{gap:20px;padding-top:16px}.image-result{grid-template-columns:1fr}.image-preview{flex-direction:row;align-items:center}.image-preview img{width:88px;max-height:88px}}@media (width<=420px){.disks{gap:6px}.disk-btn svg{width:32px;height:32px}.disk-btn{font-size:10px}.key-input{flex-wrap:wrap}.hex-field{flex-basis:calc(100% - 92px)}.key-input .btn{flex:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.try-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px;margin-bottom:24px;display:grid}.try-stage{min-width:0;position:sticky;top:76px}.try-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.check,.radio{cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.check input,.radio input{accent-color:var(--ink);margin:0}.preview{background:var(--surface-2);border-radius:var(--r-lg);justify-content:center;align-items:center;min-height:420px;padding:28px;display:flex}.try-panel{flex-direction:column;gap:16px;display:flex}.prop-bar{border-radius:var(--r-sm);height:28px;display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px #00000014}.prop-bar span{transition:flex-grow .2s}.try-panel .slider{grid-template-columns:7.5em 1fr 3em}.try-panel .slider span{font-size:12px}.role-list,.role-assign{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.role-list li,.role-assign li{grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;display:grid}.role-chip{border-radius:6px;width:26px;height:26px;box-shadow:inset 0 0 0 1px #0000001f}.role-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vision-list{flex-direction:column;gap:10px;display:flex}.vision-strip{border-radius:3px;flex:none;width:60px;height:14px;display:inline-flex;overflow:hidden}.vision-strip i{flex:1}.contrast-card .hint{margin-bottom:12px}.contrast-card .hint:last-child{margin:12px 0 0}.matrix-wrap{overflow-x:auto}.matrix{border-collapse:separate;border-spacing:6px;margin:-6px}.matrix th{padding:0;font-weight:400}.matrix .corner{color:var(--muted);text-align:left;white-space:nowrap;flex-direction:column;padding-right:6px;font-size:11px;display:flex}.matrix-head{border-radius:4px;width:88px;height:18px;display:block;box-shadow:inset 0 0 0 1px #0000001a}.matrix tbody th .matrix-head{width:18px;height:76px}.matrix td{vertical-align:top;width:88px;padding:0}.matrix td.same{background:repeating-linear-gradient(45deg, transparent 0 6px, var(--line) 6px 7px);border-radius:var(--r-sm)}.sample{border-radius:var(--r-sm);place-items:center;height:44px;font-size:20px;font-weight:600;display:grid;box-shadow:inset 0 0 0 1px #00000014}.ratio{justify-content:space-between;align-items:center;gap:4px;margin-top:4px;display:flex}.ratio .mono{font-size:11px}.badge{white-space:nowrap;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700}.badge-AAA,.badge-AA{background:color-mix(in srgb, var(--ok) 16%, transparent);color:var(--ok)}.badge-AA18{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}.badge-fail{background:color-mix(in srgb, var(--danger) 14%, transparent);color:var(--danger)}.fix{margin-top:2px;font-size:12px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lay{background:var(--c-dom);color:var(--c-text);font-family:var(--sans);width:100%;position:relative;overflow:hidden;box-shadow:0 8px 30px #0000001f}.lay-frame{width:100%;container-type:inline-size}.frame-slide,.frame-thumbnail{max-width:880px}.frame-poster{width:min(440px,100%)}.frame-app{width:300px}.lay-slide{aspect-ratio:16/9;grid-template-columns:calc(100% - var(--p-sec) * .9) calc(var(--p-sec) * .9);border-radius:6px;display:grid}.slide-main{flex-direction:column;gap:2.2cqw;padding:7cqw 5cqw 5cqw 6cqw;display:flex}.slide-kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--c-acc);font-size:1.5cqw;font-weight:700}.slide-title{font-family:var(--display);font-weight:var(--w-thin);letter-spacing:-.03em;max-width:16ch;font-size:4.6cqw;line-height:1.05}.slide-bullets{flex-direction:column;gap:1.2cqw;margin:1cqw 0 0;padding:0;font-size:1.8cqw;list-style:none;display:flex}.slide-bullets li{align-items:center;gap:1.2cqw;display:flex}.slide-bullets li:before{content:"";background:var(--c-acc);border-radius:50%;flex:none;width:1cqw;height:1cqw}.slide-side{background:var(--c-sec);align-items:flex-end;padding:6cqw 3cqw 7cqw;display:flex}.slide-chart{align-items:flex-end;gap:1.2cqw;width:100%;height:60%;display:flex}.slide-chart span{background:var(--c-on-sec);opacity:.35;border-radius:.5cqw .5cqw 0 0;flex:1}.slide-chart span.hi{background:var(--c-acc);opacity:1}.slide-accent{height:1.2cqw;width:calc(var(--p-acc) * 4);background:var(--c-acc);position:absolute;bottom:0;left:0}.lay-thumb{aspect-ratio:16/9;border-radius:12px}.thumb-shape{width:min(48cqw, calc(var(--f-sec) * 150cqw));aspect-ratio:1;background:var(--c-sec);border-radius:50%;position:absolute;top:50%;right:5cqw;translate:0 -50%}.thumb-copy{z-index:1;max-width:48cqw;position:absolute;top:50%;left:6cqw;translate:0 -50%}.thumb-tag{background:var(--c-acc);color:var(--c-on-acc);letter-spacing:.06em;border-radius:1cqw;margin-bottom:2cqw;padding:.6cqw 1.6cqw;font-size:2.4cqw;font-weight:800;display:inline-block}.thumb-title{letter-spacing:-.02em;font-size:8.4cqw;font-weight:800;line-height:.98}.thumb-title .hl{color:var(--c-acc)}.thumb-dots{gap:1cqw;display:flex;position:absolute;bottom:5cqw;left:6cqw}.thumb-dots span{background:var(--c-text);opacity:.25;border-radius:50%;width:2cqw;height:2cqw}.thumb-dots span:first-child{opacity:1;background:var(--c-acc)}.lay-poster{aspect-ratio:1/1.414;border-radius:4px;flex-direction:column;justify-content:space-between;padding:9cqw;display:flex}.poster-sun{width:min(66cqw, calc(var(--f-sec) * 220cqw));aspect-ratio:1;background:var(--c-sec);border-radius:50%;position:absolute;top:30%;left:50%;translate:-50% -50%}.poster-copy{margin-top:auto;position:relative}.poster-kicker{letter-spacing:.14em;text-transform:uppercase;color:var(--c-acc);margin-bottom:2cqw;font-size:3.4cqw;font-weight:700}.poster-title{font-family:var(--display);font-weight:var(--w-thin);letter-spacing:-.03em;font-size:15cqw;line-height:.92}.poster-foot{border-top:.4cqw solid;justify-content:space-between;gap:4cqw;margin-top:6cqw;padding-top:3cqw;font-size:3.4cqw;display:flex;position:relative}.poster-date{background:var(--c-acc);color:var(--c-on-acc);padding:0 1.6cqw;font-weight:600}.lay-app{border-radius:36px;flex-direction:column;gap:14px;height:600px;padding:18px 20px;display:flex;box-shadow:0 0 0 8px #111,0 16px 40px #00000040}.app-status{justify-content:space-between;align-items:center;font-size:13px;font-weight:600;display:flex}.app-avatar{background:var(--c-sec);border-radius:50%;width:30px;height:30px}.app-hello{font-family:var(--display);font-size:30px;line-height:1.05;font-weight:var(--w-thin);letter-spacing:-.03em;margin-top:6px}.app-card{background:var(--c-sec);color:var(--c-on-sec);min-height:calc(var(--f-sec) * 420px);border-radius:20px;flex-direction:column;gap:4px;padding:18px;display:flex}.app-card-label{opacity:.75;font-size:12px}.app-card-num{letter-spacing:-.01em;font-size:26px;font-weight:700}.app-card-line{background:var(--c-acc);height:4px;width:calc(var(--p-acc) * 4);border-radius:2px;margin-top:auto}.app-cta{background:var(--c-acc);color:var(--c-on-acc);cursor:default;border:0;border-radius:14px;padding:13px;font-size:15px;font-weight:600}.app-list{flex-direction:column;gap:12px;margin:0;padding:0;font-size:14px;list-style:none;display:flex}.app-list li{grid-template-columns:30px 1fr auto;align-items:center;gap:10px;display:grid}.app-ico{background:var(--c-sec);border-radius:10px;width:30px;height:30px}.app-amt{font-family:var(--mono);opacity:.8;font-size:12px}@media (width<=1080px){.try-grid{grid-template-columns:1fr}.try-stage{position:static}}@media (width<=760px){.preview{min-height:0;padding:14px}.frame-app{width:260px}.lay-app{height:540px}}.progress{flex-direction:column;gap:6px;min-width:220px;display:flex}.progress-text{color:var(--muted);font-size:13px}.progress-bar{background:var(--line);border-radius:999px;height:6px;overflow:hidden}.progress-bar i{background:var(--ink);height:100%;transition:width .3s;display:block}.lessons{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.lesson-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);flex-direction:column;gap:6px;height:100%;padding:18px;text-decoration:none;transition:border-color .15s,transform .2s;display:flex}@media (hover:hover) and (pointer:fine){.lesson-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}}.lesson-card.done{border-color:var(--line-strong)}.lesson-art{border-radius:var(--r);height:64px;margin-bottom:8px;display:flex;overflow:hidden}.lesson-art i{flex:1}.lesson-num{color:var(--muted);font-size:12px}.lesson-num b{color:var(--ok);font-weight:600}.lesson-card h2{font-family:var(--display);font-weight:var(--w-thin);letter-spacing:-.03em;font-size:23px}.lesson-card p{color:var(--ink-2);font-size:14px}.back{color:var(--muted);margin-bottom:20px;font-size:14px;text-decoration:none;display:inline-block}@media (hover:hover) and (pointer:fine){.back:hover{color:var(--ink)}}.lesson .lead{margin-bottom:28px}.lesson-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:40px;display:grid}.lesson-text{flex-direction:column;gap:16px;max-width:62ch;font-size:16px;line-height:1.65;display:flex}.takeaways{border-left:3px solid var(--ink);margin-top:8px;padding:4px 0 4px 18px}.takeaways h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-size:11px;font-weight:700}.takeaways ul{flex-direction:column;gap:6px;margin:0;padding-left:18px;font-size:15px;display:flex}.lesson-lab{position:sticky;top:76px}.try-line{color:var(--ink-2);margin-bottom:16px;font-size:14px}.lesson-foot{border-top:1px solid var(--line);flex-direction:column;gap:24px;margin-top:40px;padding-top:24px;display:flex}.lesson-nav{grid-template-columns:1fr 1fr;gap:16px;display:grid}.nav-card{border:1px solid var(--line);border-radius:var(--r);flex-direction:column;gap:2px;padding:12px 16px;text-decoration:none;display:flex}@media (hover:hover) and (pointer:fine){.nav-card:hover{border-color:var(--line-strong)}}.nav-card span{color:var(--muted);font-size:12px}.nav-card.right{text-align:right;grid-column:2}.demo{flex-direction:column;gap:14px;display:flex}.demo h3{margin:8px 0 0}.demo-controls{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.demo-controls .slider{flex:220px;margin:0}.demo-star{width:100%;max-width:460px;margin:0 auto}.demo-star.small{max-width:300px}.mondrian{aspect-ratio:4/3;border-radius:var(--r-sm);grid-template-rows:1.3fr 1fr .8fr;grid-template-columns:2fr 1fr 1.4fr;display:grid;overflow:hidden}.mondrian .m0{grid-row:span 2}.mondrian .m3{grid-column:span 2}.mondrian .m6{grid-column:span 1}.hue-row{border-radius:var(--r-sm);grid-template-columns:repeat(12,1fr);height:56px;display:grid;overflow:hidden}.hue-row span{transition:background .3s}.match{flex-direction:column;gap:12px;display:flex}.match-pair{border-radius:var(--r);grid-template-columns:1fr 1fr;gap:0;display:grid;overflow:hidden}.match-pair figure{flex-direction:column;margin:0;display:flex}.match-pair span{height:120px}.match-pair figcaption{color:var(--muted);text-align:center;background:var(--surface);padding-top:6px;font-size:12px}.result{font-size:14px;font-weight:500}.slider.wide{grid-template-columns:auto 1fr auto;margin:0}.landscape{border-radius:var(--r);width:100%;height:auto;display:block}.landscape *{transition:fill .2s}.hue-picker{flex-wrap:wrap;gap:4px;display:flex}.hue-picker button{border:0;border-radius:50%;width:26px;height:26px;box-shadow:inset 0 0 0 1px #0000001f}.hue-picker button[aria-checked=true]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--focus)}.comp-pair{border-radius:var(--r);grid-template-columns:1fr 1fr 1fr;gap:4px;height:120px;display:grid;overflow:hidden}.comp-pair span{transition:background .15s}.after{align-items:center;gap:16px;display:flex}.after-box{border-radius:var(--r-sm);flex:none;place-items:center;width:180px;height:180px;display:grid;box-shadow:inset 0 0 0 1px #0000001a}.after-box i{background:#111;border-radius:50%;width:8px;height:8px}.after-side{flex-direction:column;align-items:flex-start;gap:8px;font-size:14px;display:flex}.simul{border-radius:var(--r);grid-template-columns:1fr 1fr;height:220px;display:grid;position:relative;overflow:hidden}.simul>div{place-items:center;display:grid}.simul span{width:72px;height:72px}.simul .bridge{height:16px;position:absolute;top:calc(50% - 8px);left:25%;right:25%}.sat-compare{grid-template-columns:1fr 1fr;gap:12px;display:grid}.sat-frame{aspect-ratio:4/3;border-radius:var(--r);place-items:center;transition:background .2s;display:grid}.sat-frame span{aspect-ratio:1;width:36%}.sat-steps{border-radius:var(--r-sm);grid-template-columns:repeat(5,1fr);height:44px;display:grid;overflow:hidden}.extent{border-radius:var(--r);height:160px;display:flex;overflow:hidden}.extent span{transition:flex-grow .2s}.harmony-show{grid-template-columns:240px 1fr;align-items:center;gap:20px;display:grid}.harmony-show h3{font-family:var(--display);font-weight:var(--w-thin);letter-spacing:-.03em;margin:0 0 6px;font-size:26px}.harmony-show p{color:var(--ink-2);font-size:14px}.harmony-show .hero-strip{margin:14px 0}@media (width<=1080px){.lesson-grid{grid-template-columns:1fr}.lesson-lab{position:static}}@media (width<=560px){.harmony-show{grid-template-columns:1fr}.after{flex-direction:column;align-items:flex-start}.lesson-nav{grid-template-columns:1fr}.nav-card.right{grid-column:1}}.btn,.icon-btn,.disk-btn,.ring-btn,.segmented button,.hue-picker button,.palette-chip,.extracted-chip{transition-property:transform,border-color,background-color,color,opacity,box-shadow;transition-duration:.16s;transition-timing-function:cubic-bezier(.23,1,.32,1)}.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.disk-btn:active,.ring-btn:active,.segmented button:active,.hue-picker button:active,.palette-chip:active,.extracted-chip:active{transform:scale(.97)}@media (pointer:coarse){.icon-btn,.icon-btn.tiny{width:44px;height:44px}.btn.small{min-height:40px}.hue-picker{gap:8px}.hue-picker button{width:36px;height:36px}.select.small{min-height:40px}}.seg-mini{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.seg-mini button,.seg-mini a{min-width:34px;height:28px;color:var(--muted);transition:background-color .16s var(--ease-out), color .16s var(--ease-out);background:0 0;border:0;border-radius:999px;place-items:center;padding:0 9px;font-size:12px;font-weight:600;text-decoration:none;display:inline-grid}.seg-mini.icons button{width:30px;min-width:30px;padding:0}.seg-mini button[aria-checked=true],.seg-mini a[aria-current=true]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line), 0 1px 2px #00000014}@media (hover:hover) and (pointer:fine){.seg-mini button:hover,.seg-mini a:hover{color:var(--ink)}}.tabbar{display:none}.stage-bar{justify-content:center;align-items:center;gap:16px;margin-top:8px;display:flex}.stage-title{flex-direction:column;align-items:center;min-width:160px;line-height:1.25;display:flex}.stage-title strong{font-family:var(--display);font-weight:var(--w-thin);letter-spacing:-.03em;font-size:24px}.stage-title span{color:var(--muted);font-size:13px}.studio-stage:focus{outline:none}.studio-stage:focus-visible .star{outline:2px solid var(--focus);outline-offset:6px;border-radius:50%}.kbd-hint{text-align:center;color:var(--muted);margin-top:10px;font-size:12px}kbd{min-width:20px;height:20px;font:500 11px var(--mono);color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;place-items:center;margin:0 1px;padding:0 5px;display:inline-grid}.inspector{padding:0}.insp-sec{padding:16px}.insp-sec+.insp-sec{border-top:1px solid var(--line)}.insp-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.insp-head h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700}.insp-head span{font-size:13px;font-weight:500}.disk-row{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.disk-row .disk-btn{aspect-ratio:1;border-radius:var(--r-sm);background:0 0;border-color:#0000;justify-content:center;padding:0}.disk-row .disk-btn[aria-checked=true]{background:var(--bg);border-color:var(--ink)}@media (hover:hover) and (pointer:fine){.disk-row .disk-btn:hover{background:var(--surface-2)}}.inspector .why{min-height:0;margin:12px 0 0}.harmony .card-head{margin-bottom:14px}.hbars{flex-direction:column;gap:10px;display:flex}.hbar{border-radius:var(--r);align-items:stretch;min-height:84px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000014}.hbar-main{min-width:0;color:inherit;text-align:left;background:0 0;border:0;flex-direction:column;flex:1;justify-content:flex-end;gap:2px;padding:14px 16px;display:flex}.hbar-main strong{text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.hbar-main .mono{opacity:.8;font-size:12px}.tag{font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#1b1b19;background:#ffffffe6;border-radius:5px;padding:2px 6px;position:absolute;top:10px;left:12px}.hbar-tools{align-items:center;gap:4px;padding:0 10px;display:flex}.on-color{width:36px;height:36px;color:inherit;transition:background-color .16s var(--ease-out), transform .16s var(--ease-out), opacity .16s var(--ease-out);background:#ffffff29;border:0;border-radius:999px;place-items:center;display:grid}.hbar[data-ink=dark] .on-color{background:#00000014}.on-color:active:not(:disabled){transform:scale(.94)}.on-color:disabled{opacity:.3}@media (hover:hover) and (pointer:fine){.hbar-tools{opacity:0;transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);transform:translate(6px)}.hbar:hover .hbar-tools,.hbar:focus-within .hbar-tools{opacity:1;transform:none}.on-color:hover:not(:disabled){background:#ffffff4d}.hbar[data-ink=dark] .on-color:hover:not(:disabled){background:#00000029}}.hbar-values summary{cursor:pointer;color:var(--muted);align-items:center;gap:4px;padding:6px 2px 0;font-size:12px;list-style:none;display:inline-flex}.hbar-values summary::-webkit-details-marker{display:none}.hbar-values summary svg{transition:transform .16s var(--ease-out)}.hbar-values[open] summary svg{transform:rotate(180deg)}.hbar-values .values{padding:6px 2px 2px}.dock{z-index:30;left:50%;bottom:calc(16px + var(--tabbar-h) + env(safe-area-inset-bottom));background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:saturate(1.4)blur(16px);border:1px solid var(--line);border-radius:var(--r-lg);width:min(1256px,100vw - 32px);box-shadow:var(--shadow-lg);position:fixed;translate:-50%}.dock-inner{align-items:center;gap:16px;padding:10px 10px 10px 14px;display:flex}.dock-main{flex:1;align-items:center;gap:14px;min-width:0;display:flex}.dock-name{border-radius:var(--r-sm);text-overflow:ellipsis;background:0 0;border:0;flex:none;width:170px;margin-left:-8px;padding:6px 8px;font-size:14px;font-weight:600}@media (hover:hover) and (pointer:fine){.dock-name:hover,.dock-name:focus{background:var(--bg);outline:none}}.dock-name::placeholder{color:var(--muted);opacity:1}.dock-empty{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.dock-chips{scrollbar-width:none;gap:6px;min-width:0;margin:0;padding:4px;list-style:none;display:flex;overflow-x:auto}.dock-chips::-webkit-scrollbar{display:none}.dock-chip{width:40px;height:40px;transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out);border:0;border-radius:10px;flex:none;position:relative;box-shadow:inset 0 0 0 1px #0000001a}.dock-chip[aria-selected=true]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--focus)}.dock-chip:active{transform:scale(.94)}@media (hover:hover) and (pointer:fine){.dock-chip:hover{transform:translateY(-2px)}}.dock-role{font:700 8px var(--sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;opacity:.85;max-width:36px;position:absolute;bottom:3px;left:50%;overflow:hidden;translate:-50%}.dock-actions{flex:none;align-items:center;gap:6px;display:flex}.dock-sel{border-top:1px solid var(--line);align-items:center;gap:12px;padding:10px 14px 12px;display:flex}.dock-sel-chip{border-radius:8px;flex:none;width:28px;height:28px;box-shadow:inset 0 0 0 1px #0000001a}.dock-sel-name{flex-direction:column;flex:1;min-width:0;line-height:1.2;display:flex}.dock-sel-name .mono{font-size:13px}.dock-sel-name span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.dock-sel-tools{gap:4px;display:flex}@media (hover:hover) and (pointer:fine){.icon-btn.danger:hover:not(:disabled){color:var(--danger);border-color:var(--danger)}}.studio,.page.try{padding-bottom:160px}.dialog{border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);opacity:1;width:min(880px,100vw - 32px);max-height:min(720px,100dvh - 48px);transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), overlay .2s allow-discrete, display .2s allow-discrete;border:0;padding:0;transform:none}@starting-style{.dialog[open]{opacity:0;transform:scale(.97)translateY(6px)}}.dialog:not([open]){opacity:0;transition-duration:.12s;transform:scale(.98)}.dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .2s var(--ease-out), overlay .2s allow-discrete, display .2s allow-discrete;background:#00000052}@starting-style{.dialog[open]::backdrop{opacity:0}}.dialog-body{max-height:inherit;flex-direction:column;gap:16px;padding:20px;display:flex}.dialog-head{justify-content:space-between;align-items:center;display:flex}.dialog-head h2{font-family:var(--display);font-weight:var(--w-thin);letter-spacing:-.03em;font-size:28px}.export-grid{grid-template-columns:220px minmax(0,1fr);gap:20px;min-height:0;display:grid}.format-list{flex-direction:column;gap:2px;display:flex}.format-item{text-align:left;border-radius:var(--r-sm);color:var(--ink-2);background:0 0;border:0;padding:9px 12px;font-size:14px;transition:background-color .12s}.format-item[aria-checked=true]{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}@media (hover:hover) and (pointer:fine){.format-item:hover{background:var(--surface-2)}}.format-preview{flex-direction:column;gap:12px;min-width:0;display:flex}.format-preview .code{max-height:300px;margin:0}.export-strip{border-radius:var(--r-sm);height:44px;display:flex;overflow:hidden}.export-strip span{flex:1}.ase-list{flex-direction:column;gap:6px;max-height:300px;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.ase-list li{grid-template-columns:22px 1fr auto;align-items:center;gap:10px;font-size:13px;display:grid}.ase-list i{border-radius:6px;width:22px;height:22px}.ase-list code{font:12px var(--mono);color:var(--muted)}.toast{top:calc(var(--topbar-h) + 12px);box-shadow:var(--shadow-lg);transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);border-radius:999px;padding:9px 18px;bottom:auto;transform:translate(-50%,-8px)}.toast.show{transform:translate(-50%)}@view-transition{navigation:auto}::view-transition-old(root){animation-duration:.18s;animation-timing-function:var(--ease-out)}::view-transition-new(root){animation-duration:.18s;animation-timing-function:var(--ease-out)}@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}::view-transition-old(*){animation:none!important}::view-transition-new(*){animation:none!important}}@media (width<=760px){:root{--tabbar-h:64px;--topbar-h:56px}.topbar .mainnav{display:none}.topbar{flex-wrap:nowrap}.tabbar{z-index:40;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:saturate(1.3)blur(14px);border-top:1px solid var(--line);grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.tabbar a{color:var(--muted);transition:color .16s var(--ease-out);flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:11px;font-weight:500;text-decoration:none;display:flex}.tabbar a.active{color:var(--ink)}.tabbar a:active svg{transform:scale(.92)}.tabbar svg{transition:transform .16s var(--ease-out)}body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}.dock{width:calc(100vw - 16px);bottom:calc(8px + var(--tabbar-h) + env(safe-area-inset-bottom));border-radius:16px}.dock-inner{flex-wrap:wrap;gap:8px;padding:8px}.dock-main{flex-basis:100%;gap:8px}.dock-name{width:110px;margin-left:0;font-size:13px}.dock-actions{flex:1;justify-content:flex-end}.dock-actions .lbl{display:none}.dock-actions .btn{width:44px;height:44px;padding:0}.dock-chip{width:36px;height:36px}.dock-sel{flex-wrap:wrap;padding:8px}.dock-sel-tools{justify-content:space-between;width:100%}.studio,.page.try{padding-bottom:200px}.export-grid{grid-template-columns:1fr}.format-list{scrollbar-width:none;flex-direction:row;overflow-x:auto}.format-item{white-space:nowrap}.dialog-body{overflow:auto}.seg-mini button,.seg-mini a{min-width:36px;height:32px}.seg-mini.icons button{width:34px}}.dock-more-btn{display:none}.sheet{inset:auto 8px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px) 8px;border:1px solid var(--line);background:var(--surface);width:auto;color:var(--ink);box-shadow:var(--shadow-lg);opacity:1;transition:opacity .18s var(--ease-out), transform .18s var(--ease-out), overlay .18s allow-discrete, display .18s allow-discrete;border-radius:16px;flex-direction:column;gap:2px;margin:0;padding:8px;transform:none}.sheet:popover-open{display:flex}@starting-style{.sheet:popover-open{opacity:0;transform:translateY(8px)}}.sheet-field{color:var(--muted);flex-direction:column;gap:6px;padding:8px 8px 12px;font-size:12px;display:flex}.sheet-item{text-align:left;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;min-height:48px;padding:0 12px;font-size:15px;display:flex}.sheet-item:active:not(:disabled){background:var(--surface-2)}.sheet-item.danger{color:var(--danger)}.sheet-item:disabled{opacity:.4}@media (width<=760px){.dock-more-btn{display:inline-grid}.desk-only,.dock-name{display:none!important}.dock-inner{flex-wrap:nowrap}.dock-main{flex-basis:auto}.dock-actions{flex:none;gap:2px}.dock-actions .btn,.dock-actions .icon-btn,.dock-sel-tools .icon-btn{width:40px;height:40px}.kbd-hint{display:none}}@media (pointer:coarse){.kbd-hint{display:none}}.card .star-fig,.lesson-lab .star-fig{--star-plate:var(--surface)}.display b,.display strong,.thin-bold b,.stage-title b,.lesson-card h2 b,.dialog-head h2 b{font-weight:var(--w-bold);letter-spacing:-.035em}.display{letter-spacing:-.04em;line-height:.98}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);height:100%;transition:border-color .16s var(--ease-out), transform .2s var(--ease-out);flex-direction:column;gap:6px;padding:14px 14px 20px;text-decoration:none;display:flex}@media (hover:hover) and (pointer:fine){.tool-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}}.tool-card:active{transform:scale(.99)}.tool-art{border-radius:var(--r);height:120px;margin-bottom:10px;display:flex;overflow:hidden}.tool-art i{flex:1}.tool-card h2{font-size:26px;font-weight:var(--w-thin);letter-spacing:-.03em;padding:0 4px}.tool-card h2 b{font-weight:var(--w-bold)}.tool-card p{color:var(--ink-2);padding:0 4px;font-size:14px}.tool-head{margin:8px 0 28px}.page.tool-page{padding-bottom:160px}@media (width<=760px){.page.tool-page{padding-bottom:200px}.tool-grid{grid-template-columns:1fr}}.method-bar{flex-direction:column;align-items:center;gap:8px;margin-bottom:8px;display:flex}.method-why{color:var(--muted);text-align:center;max-width:56ch;min-height:2.8em;font-size:13px}.wheel .wcell{stroke:var(--bg);stroke-width:.8px}.wheel.pickable .wcell{cursor:pointer}.studio-stage .star-fig{max-width:min(720px,100dvh - 400px)}@media (width<=1080px){.studio-stage .star-fig{max-width:640px}}.wheels-rows{flex-direction:column;gap:14px;display:flex}.wheels-row{grid-template-columns:150px minmax(0,1fr) auto;align-items:center;gap:14px;display:grid}.wheels-head{flex-direction:column;line-height:1.25;display:flex}.wheels-head strong{font-weight:var(--w-semi)}.wheels-head span{color:var(--muted);font-size:12px}.wheels-strip{border-radius:var(--r-sm);height:56px;display:flex;overflow:hidden}.wheels-strip span{flex:1;align-items:flex-end;min-width:0;padding:6px 8px;display:flex}.wheels-strip code{font:500 11px var(--mono);text-overflow:ellipsis;overflow:hidden}@media (width<=560px){.wheels-row{grid-template-columns:1fr;gap:8px}}.home-sec{margin:72px 0 24px}.sec-head{margin-bottom:24px}.row-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.sec-title{font-size:clamp(30px,4vw,48px)}.methods{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.method-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);--star-plate:var(--surface);transition:border-color .16s var(--ease-out), transform .2s var(--ease-out);flex-direction:column;gap:16px;padding:20px;text-decoration:none;display:flex}@media (hover:hover) and (pointer:fine){.method-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}}.method-card:active{transform:scale(.99)}.method-visual{pointer-events:none;width:100%;max-width:280px;margin:0 auto}.method-foot{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.method-foot h3{font-size:20px;font-weight:var(--w-semi);letter-spacing:-.01em;margin-bottom:4px}.method-foot p{color:var(--ink-2);font-size:13px}.method-pair{flex:none;display:flex}.method-pair i{width:22px;height:22px;box-shadow:0 0 0 2px var(--surface);border-radius:50%}.method-pair i+i{margin-left:-6px}.tool-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-grid.compact .tool-art{height:84px}.tool-card h3{font-size:24px;font-weight:var(--w-thin);letter-spacing:-.03em;padding:0 4px}.tool-card h3 b{font-weight:var(--w-bold)}.pill-link{border:1px solid var(--line);font-size:14px;font-weight:var(--w-med);transition:border-color .16s var(--ease-out);border-radius:999px;align-items:center;gap:8px;margin-top:20px;padding:10px 16px;text-decoration:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.pill-link:hover{border-color:var(--ink)}}.lesson-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.lesson-chip{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);height:100%;transition:border-color .16s var(--ease-out);flex-direction:column;gap:10px;padding:16px;text-decoration:none;display:flex}@media (hover:hover) and (pointer:fine){.lesson-chip:hover{border-color:var(--line-strong)}}.lesson-chip .mono{color:var(--muted)}.lesson-chip strong{font-size:18px;font-weight:var(--w-thin);letter-spacing:-.02em;line-height:1.15}.lesson-chip strong b{font-weight:var(--w-bold)}@media (width<=1080px){.methods,.tool-grid.compact,.lesson-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=640px){.methods,.tool-grid.compact,.lesson-row{grid-template-columns:1fr}.home-sec{margin-top:48px}}.empty-state{text-align:center;color:var(--ink-2);flex-direction:column;align-items:center;gap:20px;padding:64px 16px;display:flex}.empty-art{align-items:flex-end;gap:0;height:110px;display:flex}.empty-art i{width:56px;height:90px;box-shadow:0 0 0 3px var(--bg), var(--shadow-lg);border-radius:12px;margin:0 -6px}.center-row{justify-content:center}.dock-item{transition:transform .16s var(--ease-out);flex:none;position:relative}.dock-item.dragging{z-index:2}.dock-item.dragging .dock-chip{box-shadow:0 0 0 2px var(--surface), var(--shadow-lg);cursor:grabbing;transform:scale(1.08)}.dock-chips.is-dragging .dock-chip{cursor:grabbing}@media (hover:hover) and (pointer:fine){.dock-chip{cursor:grab}}.chip-x{z-index:1;background:var(--ink);width:20px;height:20px;box-shadow:0 0 0 2px var(--surface);opacity:0;transition:opacity .14s var(--ease-out), transform .14s var(--ease-out), background-color .14s var(--ease-out);border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:-7px;right:-7px;transform:scale(.85)}.chip-x:before{content:"";position:absolute;inset:-4px -4px 4px 4px}.dock-item:hover .chip-x,.dock-item:focus-within .chip-x,.dock-chip[aria-selected=true]+.chip-x{opacity:1;transform:scale(1)}.chip-x:hover{background:var(--danger)}.chip-x:active{transform:scale(.9)}@media (pointer:coarse){.chip-x{opacity:1;width:16px;height:16px;top:-5px;right:-5px;transform:scale(1)}.chip-x svg{width:9px;height:9px}.chip-x:before{inset:-8px -8px 2px 2px}}.dock-chips.is-dragging .chip-x{opacity:0}.dock-add-item{flex:none;align-items:center;display:flex}.dock-add{border:1.5px dashed var(--line-strong);width:40px;height:40px;color:var(--muted);transition:border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out);background:0 0;border-radius:10px;place-items:center;display:grid}.dock-add:active{transform:scale(.94)}@media (hover:hover) and (pointer:fine){.dock-add:hover{border-color:var(--ink);color:var(--ink)}}.dock-add-input{border:1px solid var(--ink);background:var(--bg);width:220px;height:40px;font:13px var(--mono);border-radius:10px;padding:0 10px}.dock-add-input:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent);outline:none}.dock-empty-item{flex:1;align-items:center;min-width:0;display:flex}@media (width<=760px){.dock-add{width:36px;height:36px}.dock-add-input{width:170px;height:36px}.dock-empty-item{display:none}}.lib-color{min-width:0;transition:flex-grow .2s var(--ease-out);border:0;flex:1;justify-content:center;align-items:flex-end;padding:0 0 8px;display:flex}.lib-color span{font:500 11px var(--mono);opacity:0;transition:opacity .14s var(--ease-out);white-space:nowrap}@media (hover:hover) and (pointer:fine){.lib-color:hover{flex-grow:2.2}.lib-color:hover span{opacity:1}}.lib-name{width:100%;font:inherit;border-radius:var(--r-sm);text-overflow:ellipsis;background:0 0;border:0;margin:-2px -6px;padding:2px 6px}.lib-name:hover,.lib-name:focus{background:var(--bg);outline:none}.lib-name::placeholder{color:var(--muted);opacity:1}.dock-chips{gap:10px;padding:9px 9px 5px 4px}.chip-x svg{color:var(--bg)}.match-hero{grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:center;gap:48px;display:grid}.match-intro{flex-direction:column;min-width:0;display:flex}.match-intro .lead{margin-bottom:24px}.chooser{flex-direction:column;gap:16px;padding:16px;display:flex}.chooser .swatch-picker{width:44px;height:44px}.chooser .hex-field input,.chooser .key-input .btn,.chooser .key-input .icon-btn{height:44px}.chooser .key-input .icon-btn{width:44px}.privacy{margin-top:12px}.quick-label{color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:600}.quick-label span{font-weight:400}.quick{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.quick button{border:1px solid var(--line);background:var(--bg);white-space:nowrap;height:34px;transition:border-color .14s var(--ease-out), transform .14s var(--ease-out);border-radius:999px;align-items:center;gap:7px;padding:0 12px 0 5px;font-size:13px;font-weight:500;display:inline-flex}.quick i{border-radius:50%;flex:none;width:24px;height:24px;box-shadow:inset 0 0 0 1px #00000024}.quick button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.quick button:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.quick button:hover{border-color:var(--line-strong)}}.photo-strip{border-top:1px solid var(--line);align-items:center;gap:12px;padding-top:14px;display:flex}.photo-strip img{object-fit:cover;border-radius:var(--r-sm);flex:none;width:64px;height:64px}.photo-colors{flex:1;min-width:0}.photo-colors ul{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.photo-chip{border:0;border-radius:50%;width:34px;height:34px;box-shadow:inset 0 0 0 1px #00000024}.photo-chip[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink)}.match-star .star-fig,.match-star svg{width:100%;height:auto}.match-results{margin-top:56px}.results-title{font-family:var(--display);font-weight:var(--w-semi);letter-spacing:-.025em;align-items:flex-start;gap:12px;margin-bottom:20px;font-size:clamp(22px,2.6vw,30px);display:flex}.results-chip{border-radius:50%;flex:none;width:28px;height:28px;margin-top:.12em;box-shadow:inset 0 0 0 1px #00000024}.match-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin:0 0 14px;padding:0;list-style:none;display:grid}.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);flex-direction:column;display:flex;overflow:hidden}.mcard-swatches{flex-direction:column;height:232px;display:flex}.mswatch{text-align:left;min-height:0;transition:filter .14s var(--ease-out);border:0;flex:1;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;display:flex}.mswatch-name{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:600;display:inline-flex;overflow:hidden}.mswatch .mono{opacity:.86;flex:none}.mswatch-tag{letter-spacing:.06em;text-transform:uppercase;opacity:.9;border:1px solid;border-radius:999px;padding:2px 6px;font-size:10px;font-weight:700}.mswatch:active{filter:brightness(.94)}@media (hover:hover) and (pointer:fine){.mswatch:hover{filter:brightness(1.04)}}.mcard-body{flex-direction:column;flex:1;gap:6px;padding:14px 16px 16px;display:flex}.mcard-body h3{letter-spacing:-.015em;font-size:18px;font-weight:700}.mcard-body p{color:var(--ink-2);font-size:14px;line-height:1.45}.mcard-actions{flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px;display:flex}.mcard-actions .btn{height:36px;padding:0 12px;font-size:14px}.share-dialog{width:min(760px,100vw - 32px);max-height:min(820px,100dvh - 32px)}.share-dialog .dialog-body{overflow:auto}.share-dialog .dialog-body:focus{outline:none}.share-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start;gap:24px;display:grid}.share-preview{aspect-ratio:4/5;border-radius:var(--r);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);place-items:center;margin:0;display:grid;overflow:hidden}.share-preview.story{aspect-ratio:9/16;justify-self:center;max-height:520px}.share-preview img{object-fit:contain;width:100%;height:100%}.share-actions{flex-direction:column;gap:10px;display:flex}.share-actions .segmented{align-self:flex-start;margin-bottom:4px}.share-actions .btn.big{justify-content:flex-start;height:48px}.share-actions .row{flex-wrap:wrap}.share-actions .row .btn{flex:auto;height:40px}.share-codes{color:var(--muted);word-break:break-all}.settings-pop{position-anchor:auto;inset:auto;top:calc(var(--topbar-h) + 4px);right:max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter)));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);width:min(320px,100vw - 24px);color:var(--ink);box-shadow:var(--shadow-lg);opacity:1;transition:opacity .16s var(--ease-out), transform .16s var(--ease-out), overlay .16s allow-discrete, display .16s allow-discrete;flex-direction:column;gap:10px;margin:0;padding:14px;display:none;transform:none}.settings-pop:popover-open{display:flex}.sheet{display:none}.no-popover .settings-pop.is-open,.no-popover .sheet.is-open{z-index:60;display:flex;position:fixed}@starting-style{.settings-pop:popover-open{opacity:0;transform:translateY(-4px)}}.settings-label{color:var(--muted);font-size:12px;font-weight:600}.settings-pop .seg-mini{align-self:flex-start}.switch-row{border-top:1px solid var(--line);cursor:pointer;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:4px;padding-top:12px;display:flex}.switch-row span{flex-direction:column;gap:2px;display:flex}.switch-row strong{font-size:14px}.switch-row small{color:var(--muted);font-size:12px;line-height:1.4}.switch{appearance:none;background:var(--line-strong);cursor:pointer;width:42px;height:26px;transition:background-color .16s var(--ease-out);border-radius:999px;flex:none;margin:0;position:relative}.switch:after{content:"";background:var(--surface);width:20px;height:20px;transition:translate .18s var(--ease-out);border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0003}.switch:checked{background:var(--ink)}.switch:checked:after{translate:16px}.shared-strip{border-radius:var(--r-lg);min-height:320px;box-shadow:var(--shadow);display:flex;overflow:hidden}.shared-color{text-align:left;border:0;flex-direction:column;flex:1;justify-content:flex-end;gap:4px;min-width:0;padding:16px;display:flex}.shared-color strong{font-size:15px}.shared-name{margin-top:14px;font-size:17px;font-weight:600}.shared-actions{margin-top:24px}@media (width<=760px){.tabbar{grid-template-columns:repeat(var(--tabs,5), 1fr)}.dock.is-empty{display:none}.dock-actions .btn.with-label{width:auto;padding:0 12px}.dock-actions .btn.with-label .lbl{display:inline}.match-hero{grid-template-columns:minmax(0,1fr);gap:0}.match-star{display:none}.match-intro .lead{margin-bottom:16px}.chooser{margin:0 calc(var(--gutter) * -1);border-left:0;border-right:0;border-radius:0}.quick-wrap{margin:0 -16px}.quick-wrap .quick-label{padding:0 16px}.quick{scrollbar-width:none;flex-wrap:nowrap;padding:0 16px;overflow-x:auto}.quick::-webkit-scrollbar{display:none}.match-results{margin-top:32px}.match-grid{grid-template-columns:minmax(0,1fr)}.mcard-swatches{height:208px}.share-grid{grid-template-columns:minmax(0,1fr)}.share-preview{justify-self:center;width:auto;height:42dvh;max-height:42dvh}.shared-strip{flex-direction:column;min-height:0}.shared-color{flex-direction:row;justify-content:space-between;align-items:center;min-height:64px}.settings-pop{right:12px;top:calc(var(--topbar-h) + 4px)}}@media (width<=1080px) and (width>=761px){.match-hero{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px}}