.editor{background:var(--surface-base);height:100dvh;color:var(--text-primary);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) 380px;display:grid;overflow:hidden}@media (max-width:960px){.editor{grid-template-rows:auto 46dvh minmax(0,1fr);grid-template-columns:1fr}}.canvas-pane{background:radial-gradient(90% 70% at 50% 18%, #16161f 0%, var(--surface-base) 68%);min-height:0;position:relative;container-type:size}.panel{min-height:0;padding:var(--p-space-6) var(--p-space-4) var(--p-space-12);border-left:1px solid var(--edge-subtle);background:var(--surface-raised);scrollbar-width:thin;overflow-y:auto}@media (max-width:960px){.panel{border-left:0;border-top:1px solid var(--edge-subtle)}}.group{margin-bottom:var(--p-space-6);border-radius:var(--p-radius-lg);background:var(--surface-overlay);box-shadow:inset 0 0 0 1px var(--edge-subtle), inset 0 1px 0 color-mix(in oklab, var(--p-ink-0) 6%, transparent), 0 8px 20px -14px #000000b3}.group>header{align-items:baseline;gap:var(--p-space-2);padding:var(--p-space-6) var(--p-space-4) var(--p-space-3);display:flex}.group>header h2{font-family:var(--font-display), sans-serif;letter-spacing:-.01em;margin:0;font-size:.9375rem;font-weight:700}.group>header p{color:var(--text-muted);text-align:right;flex:1;margin:0;font-size:.75rem}.group>div{gap:var(--p-space-6);padding:var(--p-space-2) var(--p-space-4) var(--p-space-6);display:grid}.choices{gap:var(--p-space-2);grid-template-columns:repeat(auto-fit,minmax(96px,1fr));display:grid}.choice{border-radius:var(--p-radius-md);background:color-mix(in oklab, var(--p-ink-0) 4%, transparent);color:var(--text-secondary);font:inherit;text-align:left;cursor:pointer;transition:background var(--p-dur-2) var(--p-ease-out), box-shadow var(--p-dur-2) var(--p-ease-out), color var(--p-dur-2) var(--p-ease-out);border:0;gap:.5rem;padding:.625rem;font-size:.75rem;font-weight:600;display:grid;box-shadow:inset 0 0 0 1px #0000}.choice:hover{background:color-mix(in oklab, var(--p-ink-0) 8%, transparent);color:var(--text-primary)}.choice[aria-pressed=true]{background:color-mix(in oklab, var(--accent) 16%, transparent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text-primary)}.choice[disabled]{opacity:.4;cursor:not-allowed}.swatch{border-radius:5px;height:22px;display:flex;overflow:hidden}.swatch i{flex:1}.matball{aspect-ratio:1;background:radial-gradient(circle at 32% 28%,#fff 0%,#cfcfe0 22%,#4c4c62 78%,#22222e 100%);border-radius:50%}.matball[data-material=matte]{background:radial-gradient(circle at 34% 30%,#b9b9c8 0%,#8a8a9c 46%,#3a3a4a 100%)}.matball[data-material=metal]{background:conic-gradient(from 210deg,#f2f2f7,#6c6c80,#eaeaf2,#55556a,#f2f2f7)}.matball[data-material=glass]{background:radial-gradient(circle at 30% 26%,#fff 0%,#ffffff59 30%,#78c8ff59 70%,#3c508c99 100%)}.matball[data-material=toon]{background:conic-gradient(from 180deg,#e8e8f2 0deg 120deg,#9a9ab0 120deg 240deg,#5a5a70 240deg 360deg)}.control{gap:.625rem;display:grid}.control>header{justify-content:space-between;align-items:baseline;font-size:.8125rem;display:flex}.control>header span:first-child{color:var(--text-secondary)}.control output{font-variant-numeric:tabular-nums;color:var(--text-primary);font-size:.75rem}.slider-root{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;height:20px;display:flex;position:relative}.slider-track{background:color-mix(in oklab, var(--p-ink-0) 12%, transparent);border-radius:999px;flex:1;height:4px;position:relative}.slider-range{background:var(--accent);border-radius:999px;height:100%;position:absolute}.slider-thumb{background:var(--text-primary);cursor:grab;width:16px;height:16px;transition:transform var(--p-dur-1) var(--p-ease-out);border-radius:50%;display:block;box-shadow:0 2px 6px #00000080}.slider-thumb:hover{transform:scale(1.12)}.slider-thumb:active{cursor:grabbing}.slider-thumb:focus-visible{box-shadow:var(--focus-ring);outline:none}.segments{gap:.375rem;display:grid}.segment{border-radius:var(--p-radius-sm);grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:.625rem;padding:.375rem;font-size:.8125rem;display:grid}.segment:hover{background:color-mix(in oklab, var(--p-ink-0) 5%, transparent)}.segment input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:7px;width:26px;height:26px;padding:0}.segment input[type=color]::-webkit-color-swatch-wrapper{padding:0}.segment input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}.segment span:first-of-type{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.segment output{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:.75rem}.sharebar{left:var(--p-space-4);right:var(--p-space-4);bottom:var(--p-space-4);align-items:center;gap:var(--p-space-3);padding:.5rem .5rem .5rem var(--p-space-4);background:color-mix(in oklab, var(--p-ink-950) 72%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--edge-subtle);border-radius:999px;grid-template-columns:minmax(0,1fr) auto;display:grid;position:absolute}.sharebar code{font-family:var(--font-mono), ui-monospace, monospace;color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.6875rem;overflow:hidden}.sharebar button{background:var(--accent);color:var(--text-on-accent);font:inherit;cursor:pointer;transition:background var(--p-dur-2) var(--p-ease-out);border:0;border-radius:999px;padding:.5rem 1rem;font-size:.8125rem;font-weight:600}.sharebar button:hover{background:var(--accent-hover)}.warn{color:var(--p-warning-500)}.data{gap:var(--p-space-2);display:grid}.data-scroll{border-radius:var(--p-radius-md);background:color-mix(in oklab, var(--p-ink-950) 45%, transparent);max-height:44vh;box-shadow:inset 0 0 0 1px var(--edge-subtle);scrollbar-width:thin;overflow:auto}.data table{border-collapse:separate;border-spacing:0;width:100%;font-size:.8125rem}.data thead th{z-index:1;background:var(--surface-overlay);box-shadow:inset 0 -1px 0 var(--edge-subtle);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:left;white-space:nowrap;padding:.375rem .25rem;font-size:.6875rem;font-weight:600;position:sticky;top:0}.data thead th.corner{z-index:2;padding-left:.625rem;left:0}.data tbody th{z-index:1;background:color-mix(in oklab, var(--p-ink-950) 45%, var(--surface-overlay));text-align:left;padding:0 .25rem 0 .625rem;font-weight:400;position:sticky;left:0}.data td{padding:0}.data input{width:100%;min-width:62px;color:var(--text-primary);font:inherit;font-variant-numeric:tabular-nums;background:0 0;border:0;padding:.4375rem .375rem}.data tbody th input{min-width:96px;color:var(--text-secondary)}.data input:focus-visible{background:color-mix(in oklab, var(--accent) 16%, transparent);box-shadow:inset 0 0 0 1px var(--accent);border-radius:var(--p-radius-sm);outline:none}.data thead th{vertical-align:middle}.data thead th>div{align-items:center;gap:.125rem;display:flex}.data thead input{letter-spacing:.06em;text-transform:uppercase;min-width:48px;color:var(--text-secondary);padding:.125rem .25rem;font-size:.6875rem;font-weight:600}.data .gutter{width:26px}.kill{border-radius:var(--p-radius-sm);width:20px;height:20px;color:var(--text-muted);font:inherit;cursor:pointer;opacity:0;transition:opacity var(--p-dur-1) var(--p-ease-out);background:0 0;border:0;padding:0;font-size:.875rem;line-height:1}.data thead .kill{opacity:.45}.data tr:hover .kill,.data th:hover .kill,.kill:focus-visible{opacity:1}.kill:hover{background:color-mix(in oklab, var(--p-danger-500) 22%, transparent);color:var(--text-primary)}.data-actions{gap:var(--p-space-2);display:flex}.data-actions button{border-radius:var(--p-radius-sm);background:color-mix(in oklab, var(--p-ink-0) 6%, transparent);color:var(--text-secondary);font:inherit;cursor:pointer;transition:background var(--p-dur-2) var(--p-ease-out);border:0;padding:.3125rem .625rem;font-size:.75rem;font-weight:600}.data-actions button:hover{background:color-mix(in oklab, var(--p-ink-0) 12%, transparent);color:var(--text-primary)}.data-hint,.data-notice{color:var(--text-secondary);margin:0;font-size:.75rem;line-height:1.5}.data-notice{border-radius:var(--p-radius-sm);background:color-mix(in oklab, var(--accent) 12%, transparent);color:var(--text-secondary);padding:.4375rem .625rem}.linky{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}.undo{margin-right:var(--p-space-2);gap:2px;display:flex}.undo button{border-radius:var(--p-radius-sm);width:26px;height:26px;color:var(--text-primary);font:inherit;cursor:pointer;transition:background var(--p-dur-2) var(--p-ease-out), color var(--p-dur-2) var(--p-ease-out);background:0 0;border:0;padding:0;font-size:1.0625rem;line-height:1}.undo button:hover:not(:disabled){background:color-mix(in oklab, var(--p-ink-0) 8%, transparent);color:var(--text-primary)}.undo button:disabled{opacity:.45;cursor:default}.readout{text-align:center;pointer-events:none;place-content:center;gap:.15em;line-height:1;display:grid;position:absolute;inset:0;transform:translateY(-4%)}.readout b{font-size:min(4rem, calc(46cqmin / var(--chars,6)));letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--text-primary);font-weight:700;display:block}.readout small{color:var(--text-muted);margin-top:.35em;font-size:max(.62rem,.3em);font-weight:500;display:block}.control .numeric{width:100%;padding:var(--p-space-2) var(--p-space-3);border:1px solid var(--edge-subtle);border-radius:var(--p-radius-2);background:var(--surface-sunken);color:var(--text-primary);font:inherit;font-variant-numeric:tabular-nums}.control .numeric:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.control header output.warn{color:var(--p-amber-400,#ffd166);font-weight:500}.savebar{align-items:center;gap:var(--p-space-2);margin-left:var(--p-space-3);display:flex}.savebar button,.savebar-link{border:1px solid var(--edge-subtle);color:var(--text-secondary);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border-radius:999px;padding:.3125rem .75rem;font-size:.8125rem;text-decoration:none}.savebar-link{margin-left:var(--p-space-3)}.savebar button:hover:not(:disabled),.savebar-link:hover{border-color:var(--accent);color:var(--text-primary)}.savebar button:disabled{opacity:.55;cursor:not-allowed}.savebar-live{color:var(--text-secondary);white-space:nowrap;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;display:inline-flex}.savebar-live i{background:var(--accent);border-radius:50%;width:6px;height:6px}.savebar-error{max-width:16rem;color:var(--p-amber-400,#ffd166);font-size:.75rem;line-height:1.35}.volumine-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fffffff2;font-size:calc(.8125rem * var(--volumine-label-scale,1));font-variant-numeric:tabular-nums;background:#10101894;border-radius:.5em;flex-direction:column;gap:.05em;padding:.3em .6em;line-height:1.3;display:flex;box-shadow:inset 0 0 0 1px #ffffff1a}.volumine-label[data-side=left]{text-align:right;align-items:flex-end}.volumine-label b{font-weight:600}.volumine-label span{opacity:.68;font-size:.88em}.volumine-leader-casing{stroke:#0006;stroke-width:3.5px;stroke-linecap:round;stroke-linejoin:round}.volumine-leader{stroke:#ffffffd9;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round}.volumine-label[data-state=dim]{opacity:.4}.volumine-label[data-state=on]{opacity:1;box-shadow:inset 0 0 0 1px #ffffff3d}.volumine-leader[data-state=dim],.volumine-leader-casing[data-state=dim]{opacity:.25}.volumine-label,.volumine-leader,.volumine-leader-casing{transition:opacity .14s,box-shadow .14s}.preview-tip{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;background:#101018d1;border-radius:10px;align-items:baseline;gap:8px;padding:6px 11px;font-size:.8125rem;display:flex;position:absolute;bottom:68px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000073,inset 0 0 0 1px #ffffff17}.preview-tip b{font-weight:600}.preview-tip span{opacity:.62}.volumine-legend{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fffffff2;font-size:calc(.8125rem * var(--volumine-label-scale,1));font-variant-numeric:tabular-nums;scrollbar-width:thin;background:#10101894;border-radius:.6em;gap:.3em;max-height:calc(100% - 24px);padding:.55em .75em;line-height:1.3;display:grid;position:absolute;top:12px;left:12px;overflow-y:auto;box-shadow:inset 0 0 0 1px #ffffff1a}.volumine-legend>div{white-space:nowrap;align-items:center;gap:.5em;display:flex}.volumine-legend i{border-radius:50%;flex:none;width:.7em;height:.7em}.volumine-legend b{font-weight:600}.volumine-legend span{opacity:.68;margin-left:auto;padding-left:.75em;font-size:.9em}.panel-brand{color:var(--text-primary);text-decoration:none}.panel-nav{padding-left:var(--p-space-3);color:var(--text-secondary);white-space:nowrap;padding-left:0;font-size:.8125rem;text-decoration:none;position:relative}.panel-nav:hover{color:var(--text-primary)}.topbar{align-items:center;gap:var(--p-space-4);min-height:52px;padding:0 var(--p-space-4);border-bottom:1px solid var(--edge-subtle);background:var(--surface-raised);grid-column:1/-1;display:flex}.topbar-left,.topbar-right{align-items:center;gap:var(--p-space-3);min-width:0;display:flex}.topbar-right{gap:var(--p-space-2);margin-left:auto}.topbar-sep{color:var(--text-muted);font-size:.9375rem}.topbar .panel-brand{transform:translateY(.15em)}.topbar-warn{color:var(--p-amber-400,#ffd166);white-space:nowrap;font-size:.75rem}.chart-title{border-radius:var(--p-radius-sm);min-width:0;max-width:26ch;color:var(--text-primary);font-family:var(--font-display), sans-serif;letter-spacing:-.01em;text-overflow:ellipsis;background:0 0;border:1px solid #0000;flex:0 auto;margin:0;padding:.25rem .5rem;font-size:.9375rem;font-weight:600;transition:background .14s,border-color .14s}.chart-title:hover{border-color:var(--edge-subtle)}.chart-title::placeholder{color:var(--text-muted);font-weight:500}.chart-title:focus{background:var(--surface-sunken)}@media (max-width:640px){.topbar{gap:var(--p-space-2)}.topbar-sep,.panel-nav{display:none}}.chart-title[data-missing]{background:#e5678a1a;background:lab(60.5135% 52.2761 6.07219/.1);border-color:#e5678a}.chart-title[data-missing]::placeholder{color:#e5678a}