/* A single tactile language: soft edges, precise icons, quiet movement. */
:root{--ease-out:cubic-bezier(.22,.8,.24,1);--ease-settle:cubic-bezier(.2,.75,.24,1);--press-time:110ms;--surface-time:190ms}
button{position:relative;isolation:isolate;transition:transform var(--press-time) var(--ease-out),border-color var(--surface-time) ease,box-shadow var(--surface-time) ease,color var(--surface-time) ease,background-color var(--surface-time) ease;transform-origin:center;user-select:none;-webkit-user-select:none}
button:active{transform:none;background-color:transparent}
button:after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;background:radial-gradient(ellipse at var(--press-x,50%) var(--press-y,50%),color-mix(in srgb,var(--ui-accent) 15%,transparent),transparent 82%);opacity:0;pointer-events:none;transition:opacity 180ms ease}
button.is-pressed,button:active:not(:disabled){transform:translateY(.6px) scale(.975)}
button.is-pressed:after,button:active:not(:disabled):after{opacity:1}
button:disabled{cursor:default;transform:none;opacity:.28}
button:disabled:after{display:none}
button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
button svg{stroke-width:1.55;vector-effect:non-scaling-stroke}
.icon-button{border:1px solid color-mix(in srgb,var(--ui-line) 78%,transparent);border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--ui-chrome) 88%,white 12%),color-mix(in srgb,var(--ui-chrome) 70%,transparent));box-shadow:inset 0 1px 0 #ffffff70,0 2px 5px #172a2310;flex-shrink:0}
.icon-button svg{width:21px;height:21px}.top-tools{gap:6px}.top .icon-button{width:42px;height:42px}.icon-button:disabled{border-color:transparent;background:transparent;box-shadow:none}
.panel .chip,.panel .tabs button,.panel .chips button,.panel .target-tabs button,.tools button,.theme-choice,.settings-grid button{border-color:color-mix(in srgb,var(--ui-line) 85%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--ui-glass) 85%,transparent),color-mix(in srgb,var(--ui-chrome) 55%,transparent));box-shadow:inset 0 1px 0 #ffffff4d,0 1px 3px #172a2305;font-weight:450;letter-spacing:.15px}
.panel .chip.on,.panel .tabs button.on,.panel .chips button.on,.panel .target-tabs button.on,.tools button.on,.theme-choice.on{border-color:color-mix(in srgb,var(--ui-accent) 68%,var(--ui-line));background:linear-gradient(140deg,color-mix(in srgb,var(--ui-tint) 90%,var(--ui-chrome)),color-mix(in srgb,var(--ui-tint) 46%,var(--ui-chrome)));box-shadow:inset 0 1px 0 #ffffff68,0 2px 5px #172a2309;color:var(--ui-ink)}
.panel .chip svg,.quick-actions svg,.settings-grid svg{width:17px;height:17px;stroke-width:1.55}
.primary{min-height:46px;border:1px solid color-mix(in srgb,var(--ui-accent) 80%,var(--ui-line));border-radius:16px;background:linear-gradient(140deg,color-mix(in srgb,var(--ui-accent) 87%,white),var(--ui-accent));box-shadow:inset 0 1px 0 #ffffff3d,0 4px 10px #172a2315;letter-spacing:.35px;font-weight:500}
.primary:active{background-color:var(--ui-accent)}.primary:after{background:linear-gradient(130deg,#ffffff28,transparent)}
.appearance-switch{transition:background-color .18s,border-color .18s,transform .11s}.appearance-switch.on{border-color:color-mix(in srgb,var(--ui-accent) 65%,var(--ui-line));background:color-mix(in srgb,var(--ui-tint) 65%,var(--ui-glass))}
.theme-orb{width:18px;height:18px;box-shadow:inset 0 0 0 .75px #182b231a,0 1px 2px #182b230a}.theme-choice.on{box-shadow:inset 0 0 0 .5px var(--ui-accent),inset 0 1px 0 #ffffff55}
.settings-grid button{min-height:46px;border-radius:16px;padding:10px;gap:9px}
.example-link,.text-link{border-radius:10px}.example-link{padding-left:7px;padding-right:7px}.example-link:after,.text-link:after{background:color-mix(in srgb,var(--ui-accent) 8%,transparent)}
.study-card .effect-card{border-radius:16px;border-color:transparent;box-shadow:none;background:transparent;padding:5px;transition:transform .13s var(--ease-out),border-color .18s,background-color .18s}
.study-card .effect-card.on{border-color:color-mix(in srgb,var(--ui-accent) 58%,var(--ui-line));background:color-mix(in srgb,var(--ui-tint) 50%,transparent)}
.study-card canvas{border:1px solid #ffffff30;box-shadow:0 2px 6px #172a2310}.effect-card strong{font-weight:500}.color{transition:transform .11s var(--ease-out),box-shadow .18s}.color.on{box-shadow:0 0 0 2px var(--ui-accent),inset 0 0 0 1px #ffffff30}
.slider-row input[type=range]{cursor:pointer}.slider-row input[type=range]::-webkit-slider-thumb{transition:box-shadow .15s,transform .15s}.slider-row input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 0 0 1px var(--ui-accent),0 0 0 5px color-mix(in srgb,var(--ui-accent) 10%,transparent)}
.nav{position:relative;isolation:isolate}.nav button,.nav button.on{z-index:1;background:transparent!important;box-shadow:none!important;min-width:0;border-radius:18px;transition:color .19s,transform .11s var(--ease-out)}
.nav button svg{width:21px;height:21px;stroke-width:1.45}.nav button.on svg{stroke-width:1.7}.nav button span{font-size:10px;font-weight:450;letter-spacing:.5px}
.nav-pill{position:absolute;left:0;top:0;z-index:0;border:1px solid color-mix(in srgb,var(--ui-accent) 14%,transparent);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--ui-tint) 88%,transparent),color-mix(in srgb,var(--ui-tint) 40%,transparent));box-shadow:inset 0 1px 0 #ffffff64,0 1px 4px #172a2306;pointer-events:none;transition:transform 200ms var(--ease-settle),opacity 130ms ease;will-change:auto}
.panel-enter>:not(.panel-head){animation:none!important}.panel{scroll-behavior:auto}.panel-head h1{font-weight:530;letter-spacing:.75px}.panel-head .icon-button{border-radius:13px}
.app{transition:grid-template-rows 260ms var(--ease-settle)}.app.typing,.app.keyboard{transition:none}
.example-dialog{border-radius:28px;border-color:color-mix(in srgb,var(--ui-line) 75%,transparent);padding:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--ui-chrome) 94%,white),var(--ui-chrome));box-shadow:inset 0 1px 0 #ffffff73,0 24px 80px #0a1d2340}
.example-head{padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--ui-line) 65%,transparent)}.example-head h2{font-weight:500;font-size:15px;line-height:1.5}.example-gallery img{border:1px solid color-mix(in srgb,var(--ui-line) 55%,transparent)}
dialog[open]::backdrop{animation:veil-in 180ms ease both}dialog.dialog-closing::backdrop{animation:veil-out 120ms ease both}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes veil-out{from{opacity:1}to{opacity:0}}
#toast{transition:opacity 170ms ease,transform 220ms var(--ease-out);transform:translateX(-50%) translateY(7px) scale(.98)}#toast.on{transform:translateX(-50%) translateY(0) scale(1)}
[data-theme=ink] .icon-button,[data-theme=ink] .panel .chip,[data-theme=ink] .panel .tabs button,[data-theme=ink] .settings-grid button,[data-theme=ink] .theme-choice{box-shadow:inset 0 1px 0 #ffffff0b,0 2px 5px #0000000c}
[data-theme=ink] .nav-pill{box-shadow:inset 0 1px 0 #ffffff10;background:linear-gradient(135deg,#405b56,#304944)}
[data-theme=ink] .example-dialog{background:linear-gradient(145deg,#293b3c,var(--ui-chrome));box-shadow:inset 0 1px 0 #ffffff15,0 24px 80px #0006}
@media(hover:hover) and (pointer:fine){button:not(:disabled):hover{border-color:color-mix(in srgb,var(--ui-accent) 60%,var(--ui-line))}.icon-button:not(:disabled):hover,.chip:hover,.theme-choice:hover{box-shadow:inset 0 1px 0 #ffffff60,0 3px 9px #172a2310}}
@media(max-width:359px){.top-tools{gap:4px}.top .icon-button{width:38px;height:40px}.top .icon-button svg{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.app,button,.nav-pill,#toast,.appearance-switch{transition:none!important}button.is-pressed,button:active:not(:disabled){transform:none}dialog[open]::backdrop,dialog.dialog-closing::backdrop{animation:none!important}}