.keyboard-surface{--kbd-inset: 1rem;--key-unit: min(calc(46px * var(--kbd-scale, 1)), calc((100cqw - var(--kbd-inset) * 2) / var(--keyboard-units-x)));--key-gap: calc(var(--key-unit) * .1);position:relative;width:calc(var(--keyboard-units-x) * var(--key-unit) + var(--kbd-inset) * 2);height:calc(var(--keyboard-units-y) * var(--key-unit) + var(--kbd-inset) * 2);max-width:100%;margin:0 auto;border-radius:16px;background:var(--kbd-chassis, rgba(255, 255, 255, .04));border:1px solid var(--kbd-chassis-border, rgba(255, 255, 255, .06));box-shadow:var(--kbd-chassis-shadow, 0 1px 0 rgba(255, 255, 255, .03) inset);transition:width .3s ease,height .3s ease}:root{--kbd-chassis: rgba(255, 255, 255, .04);--kbd-chassis-border: rgba(255, 255, 255, .06);--kbd-chassis-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;--key-bg: rgba(255, 255, 255, .06);--key-text: rgba(255, 255, 255, .75);--key-border: rgba(255, 255, 255, .08);--key-shadow: 0 calc(2px - var(--press-depth, 0px)) 4px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04) inset;--key-hover-bg: rgba(255, 255, 255, .09)}[data-theme=light]{--kbd-chassis: linear-gradient(180deg, #dfdfe3 0%, #c8c8cc 100%);--kbd-chassis-border: rgba(0, 0, 0, .1);--kbd-chassis-shadow: 0 .5px 0 rgba(255, 255, 255, .5) inset, 0 6px 20px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .06), 0 0 0 .5px rgba(0, 0, 0, .04);--key-bg: linear-gradient(180deg, #fefefe 0%, #f4f4f6 100%);--key-text: #2c2c2e;--key-border: rgba(0, 0, 0, .06);--key-shadow: 0 calc(1px - var(--press-depth, 0px)) .5px rgba(0, 0, 0, .18), 0 calc(2px - var(--press-depth, 0px)) 3px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04), 0 .5px 0 rgba(255, 255, 255, .95) inset;--key-hover-bg: linear-gradient(180deg, #ffffff 0%, #f8f8fa 100%)}[data-theme=light] .keyboard-surface{background:var(--kbd-chassis);border-radius:14px}[data-theme=light] .keyboard-key{border-radius:calc(var(--key-unit) * .14)}.keyboard-key{--press-depth: 0px;position:absolute;padding:.35rem .45rem;border:1px solid var(--key-border);border-radius:calc(var(--key-unit) * .16);background:var(--key-bg);color:var(--key-text);box-shadow:var(--key-shadow);display:flex;align-items:center;justify-content:center;transform:translateY(var(--press-depth));transition:transform 80ms cubic-bezier(.2,.8,.3,1),background 80ms ease-out,box-shadow .12s ease-out,border-color .12s ease-out,color 80ms ease-out;cursor:default;-webkit-user-select:none;user-select:none}.keyboard-key:hover{background:var(--key-hover-bg)}.keyboard-key[data-active=true]{--press-depth: 1px;background:var(--accent-bg, rgba(99, 235, 175, .2));border-color:var(--accent-border, rgba(99, 235, 175, .35));color:var(--accent-color, #63ebaf);box-shadow:0 0 12px var(--accent-glow, rgba(99, 235, 175, .12)),0 1px #ffffff0f inset}[data-theme=light] .keyboard-key[data-active=true]{background:var(--accent-bg, rgba(99, 235, 175, .2));box-shadow:0 0 8px var(--accent-glow, rgba(99, 235, 175, .25)),0 0 0 .5px var(--accent-border, rgba(99, 235, 175, .3)),0 .5px #ffffff80 inset}.keyboard-key[data-locked=true]{background:#facc1526;border-color:#facc154d;color:#facc15}[data-theme=light] .keyboard-key[data-locked=true]{background:linear-gradient(180deg,#fef9e7,#fdf0c8);border-color:#c8a01440;color:#8b6914;box-shadow:0 1px 2px #0000000f,0 0 0 .5px #c8a01426,0 .5px #ffffffb3 inset}.keyboard-key__label{font-size:clamp(.48rem,calc(var(--key-unit) * .22),.82rem);font-weight:600;letter-spacing:.02em}.keyboard-key__symbol{position:absolute;font-size:clamp(.5rem,calc(var(--key-unit) * .26),.95rem);font-weight:400;line-height:1}.keyboard-key__word{position:absolute;font-size:clamp(.35rem,calc(var(--key-unit) * .16),.6rem);font-weight:500;opacity:.7;line-height:1;letter-spacing:.01em}.keyboard-key[data-label-layout=mod-left] .keyboard-key__symbol{top:calc(var(--key-unit) * .08);right:calc(var(--key-unit) * .1)}.keyboard-key[data-label-layout=mod-left] .keyboard-key__word{bottom:calc(var(--key-unit) * .08);left:calc(var(--key-unit) * .1)}.keyboard-key[data-label-layout=mod-right] .keyboard-key__symbol{top:calc(var(--key-unit) * .08);left:calc(var(--key-unit) * .1)}.keyboard-key[data-label-layout=mod-right] .keyboard-key__word{bottom:calc(var(--key-unit) * .08);right:calc(var(--key-unit) * .1)}.keyboard-key[data-label-layout=br-mod] .keyboard-key__symbol{top:calc(var(--key-unit) * .08);left:calc(var(--key-unit) * .1)}.keyboard-key[data-label-layout=br-mod] .keyboard-key__word{bottom:calc(var(--key-unit) * .08);right:calc(var(--key-unit) * .1)}.keyboard-key[data-label-layout=bl]{justify-content:flex-start;align-items:flex-end;padding:calc(var(--key-unit) * .08) calc(var(--key-unit) * .1)}.keyboard-key[data-label-layout=br]{justify-content:flex-end;align-items:flex-end;padding:calc(var(--key-unit) * .08) calc(var(--key-unit) * .1)}.keyboard-key__sub{position:absolute;bottom:calc(var(--key-unit) * .06);right:calc(var(--key-unit) * .08);font-size:clamp(.32rem,calc(var(--key-unit) * .14),.52rem);font-weight:500;opacity:.45;line-height:1}:root{--bg: #09090b;--text: #e4e8ef;--text-muted: rgba(255, 255, 255, .5);--text-faint: rgba(255, 255, 255, .35);--surface: rgba(255, 255, 255, .06);--surface-hover: rgba(255, 255, 255, .1);--surface-active: rgba(255, 255, 255, .1);--border: rgba(255, 255, 255, .08);--border-subtle: rgba(255, 255, 255, .06);--card-bg: rgba(255, 255, 255, .03);--card-border: rgba(255, 255, 255, .06);--menu-bg: rgba(20, 20, 24, .95);--menu-border: rgba(255, 255, 255, .1);--menu-shadow: 0 24px 48px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04);--handle-color: rgba(255, 255, 255, .2);--handle-hover: rgba(255, 255, 255, .4);--dot-selected-border: rgba(255, 255, 255, .3);--dot-hover-border: rgba(255, 255, 255, .15);font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}[data-theme=light]{--bg: #ececf0;--text: #1d1d1f;--text-muted: rgba(0, 0, 0, .5);--text-faint: rgba(0, 0, 0, .32);--surface: rgba(0, 0, 0, .04);--surface-hover: rgba(0, 0, 0, .07);--surface-active: rgba(0, 0, 0, .06);--border: rgba(0, 0, 0, .06);--border-subtle: rgba(0, 0, 0, .04);--card-bg: rgba(255, 255, 255, .85);--card-border: rgba(0, 0, 0, .05);--menu-bg: rgba(255, 255, 255, .92);--menu-border: rgba(0, 0, 0, .06);--menu-shadow: 0 8px 32px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04);--handle-color: rgba(0, 0, 0, .15);--handle-hover: rgba(0, 0, 0, .35);--dot-selected-border: rgba(0, 0, 0, .22);--dot-hover-border: rgba(0, 0, 0, .1)}body{margin:0;min-height:100vh;background:#09090b}#root{min-height:100vh}.app-shell{min-height:100vh;box-sizing:border-box;padding:1.25rem 2rem 2rem;display:flex;flex-direction:column;gap:1.25rem;background:var(--bg);color:var(--text)}.app-shell__topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}.app-shell__topbar-left{display:flex;align-items:center;gap:.5rem}.app-shell__topbar-right{display:flex;align-items:center;gap:.75rem}.keylabel-toggle{display:flex;gap:2px;padding:3px;background:var(--surface);border-radius:10px}.keylabel-toggle__btn{padding:.4rem .65rem;border:none;border-radius:8px;background:transparent;color:var(--text-muted);font:inherit;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s ease}.keylabel-toggle__btn:hover{color:var(--text)}.keylabel-toggle__btn[aria-pressed=true]{background:var(--surface-active);color:var(--text);box-shadow:0 1px 3px #0000001a}.layout-switcher{display:flex;gap:2px;background:var(--surface);border-radius:10px;padding:3px}.layout-switcher__btn{padding:.4rem .9rem;border:none;border-radius:8px;background:transparent;color:var(--text-muted);font:inherit;font-size:.8rem;font-weight:500;letter-spacing:.01em;cursor:pointer;transition:all .15s ease}.layout-switcher__btn:hover{color:var(--text)}.layout-switcher__btn[aria-pressed=true]{background:var(--surface-active);color:var(--text);box-shadow:0 1px 3px #00000014}[data-theme=light] .layout-switcher__btn[aria-pressed=true],[data-theme=light] .keylabel-toggle__btn[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #00000014,0 0 0 .5px #0000000a}.settings{position:relative}.settings__trigger{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border);border-radius:10px;box-sizing:border-box;background:var(--card-bg);color:var(--text-muted);cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:0}.settings__trigger:hover{color:var(--text);background:var(--surface-hover)}.settings__gear-icon{transition:transform .2s ease;transform-origin:center}.settings__trigger:hover .settings__gear-icon{transform:rotate(30deg)}.settings__panel{position:absolute;top:calc(100% + 10px);right:0;width:290px;padding:1rem;border:1px solid var(--menu-border);border-radius:16px;background:var(--menu-bg);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);box-shadow:var(--menu-shadow);z-index:100;display:flex;flex-direction:column;gap:.85rem}.settings__section{display:flex;flex-direction:column;gap:.4rem}.settings__label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding-left:.1rem}.settings__sub-section{display:flex;flex-direction:column;gap:.25rem}.settings__sub-label{font-size:.58rem;color:var(--text-muted);padding-left:.1rem}.settings__toggle-row{display:flex;gap:2px;padding:2.5px;background:var(--surface);border-radius:9px}.settings__toggle-btn{flex:1;padding:.35rem .5rem;border:none;border-radius:7px;background:transparent;color:var(--text-muted);font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .12s ease}.settings__toggle-btn:hover{color:var(--text)}.settings__toggle-btn[aria-pressed=true]{background:var(--surface-active);color:var(--text);box-shadow:0 1px 2px #0000000f}[data-theme=light] .settings__toggle-btn[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px #00000014,0 0 0 .5px #0000000a}.settings__color-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.settings__color-dot{width:22px;height:22px;border:2px solid transparent;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .12s ease}.settings__color-dot span{width:14px;height:14px;border-radius:4px;display:block}.settings__color-dot[aria-pressed=true]{border-color:var(--dot-selected-border)}.settings__color-dot:hover{border-color:var(--dot-hover-border)}.settings__color-picker{width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);border-radius:6px;transition:color .12s ease}.settings__color-picker:hover{color:var(--text)}.settings__color-picker input[type=color]{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.settings__scale-row{display:flex;align-items:center;gap:.5rem}.settings__scale-row input[type=range]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer}.settings__scale-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);cursor:pointer}.settings__scale-value{font-size:.68rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:2.2rem;text-align:right}.lang-select{height:34px;padding:.35rem 1.6rem .35rem .6rem;border:1px solid var(--border);border-radius:10px;box-sizing:border-box;background:var(--card-bg);color:var(--text);font:inherit;font-size:.75rem;font-weight:500;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .15s ease}.lang-select--corner{position:fixed;top:.75rem;right:.75rem;z-index:20}.app-shell__topbar-right .lang-select{flex-shrink:0}.lang-select:hover{border-color:var(--text-muted)}.settings__radio-col{display:flex;flex-direction:column;gap:.3rem}.settings__radio{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text);cursor:pointer}.settings__radio input[type=radio]{width:14px;height:14px;margin:0;accent-color:var(--accent-color, #63ebaf);cursor:pointer}.settings__check{display:flex;align-items:flex-start;gap:.55rem;padding:.2rem .1rem 0;cursor:pointer}.settings__check input[type=checkbox]{width:15px;height:15px;margin:.12rem 0 0;accent-color:var(--accent-color, #63ebaf);cursor:pointer;flex:0 0 auto}.settings__check-copy{display:flex;flex-direction:column}.settings__check-desc{font-size:.68rem;color:var(--text-muted);line-height:1.4}.settings__divider{height:1px;background:var(--border);margin:.15rem 0}.settings__links{display:flex;flex-direction:column;gap:.2rem}.settings__link{display:flex;align-items:center;gap:.45rem;padding:.35rem .5rem;border-radius:7px;color:var(--text-muted);text-decoration:none;font-size:.75rem;font-weight:500;transition:all .12s ease}.settings__link:hover{color:var(--text);background:var(--surface-hover)}.settings__link svg{flex-shrink:0}.record-float{position:relative}.record-float__trigger{display:flex;align-items:center;gap:.45rem;height:38px;padding:.4rem .85rem .4rem .65rem;border:1px solid var(--border);border-radius:10px;box-sizing:border-box;background:var(--card-bg);color:var(--text);font:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.record-float__trigger:hover{background:var(--surface-hover);border-color:var(--border)}.record-float__trigger--go{border-color:#22c55e80;background:#22c55e1f;color:#22c55e}.record-float__trigger--go:hover{background:#22c55e33;border-color:#22c55e99}[data-theme=light] .record-float__trigger--go{color:#16a34a;border-color:#16a34a66;background:#16a34a1a}.record-float__trigger:disabled{opacity:.6;cursor:default}.rec-frame{position:fixed;z-index:80;border:2px solid rgba(239,68,68,.6);border-radius:6px;pointer-events:none;box-shadow:0 0 0 3px #ef444414;transition:border-color .2s ease}.rec-frame--active{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441f}.rec-frame__body{position:absolute;inset:6px;cursor:move;pointer-events:auto}.rec-frame__edge{position:absolute;pointer-events:auto}.rec-frame__edge--t{top:-4px;left:8px;right:8px;height:8px;cursor:ns-resize}.rec-frame__edge--b{bottom:-4px;left:8px;right:8px;height:8px;cursor:ns-resize}.rec-frame__edge--l{left:-4px;top:8px;bottom:8px;width:8px;cursor:ew-resize}.rec-frame__edge--r{right:-4px;top:8px;bottom:8px;width:8px;cursor:ew-resize}.rec-frame__corner{position:absolute;width:12px;height:12px;pointer-events:auto;border-radius:2px}.rec-frame__corner:after{content:"";position:absolute;width:8px;height:8px;border:2px solid rgba(239,68,68,.8);border-radius:1px}.rec-frame__corner--tl{top:-6px;left:-6px;cursor:nwse-resize}.rec-frame__corner--tl:after{border-right:none;border-bottom:none;top:2px;left:2px}.rec-frame__corner--tr{top:-6px;right:-6px;cursor:nesw-resize}.rec-frame__corner--tr:after{border-left:none;border-bottom:none;top:2px;right:2px}.rec-frame__corner--bl{bottom:-6px;left:-6px;cursor:nesw-resize}.rec-frame__corner--bl:after{border-right:none;border-top:none;bottom:2px;left:2px}.rec-frame__corner--br{bottom:-6px;right:-6px;cursor:nwse-resize}.rec-frame__corner--br:after{border-left:none;border-top:none;bottom:2px;right:2px}.rec-frame__close{pointer-events:auto;position:absolute;top:-28px;right:0;width:22px;height:22px;border:none;border-radius:6px;background:#ef4444d9;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s ease}.rec-frame__close:hover{background:#dc2626}.rec-frame__badge{position:absolute;top:-24px;left:0;padding:2px 8px;border-radius:4px;background:#ef4444;color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.1em;pointer-events:none;animation:pulse-badge 1.5s ease infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.4}}.record-float__menu{position:absolute;top:calc(100% + 8px);right:0;width:260px;padding:.5rem;border:1px solid var(--menu-border);border-radius:14px;background:var(--menu-bg);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--menu-shadow);z-index:100}.record-float__menu-title{margin:0;padding:.45rem .65rem .3rem;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}.record-float__option{display:flex;flex-direction:column;gap:2px;width:100%;padding:.55rem .65rem;border:none;border-radius:10px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background .12s ease}.record-float__option:hover{background:var(--surface-hover)}.record-float__option-label{font-size:.85rem;font-weight:500}.record-float__option-desc{font-size:.72rem;color:var(--text-faint)}.record-float__error{margin:.4rem .65rem;padding:.4rem .6rem;font-size:.75rem;color:#fca5a5;background:#ef44441a;border-radius:8px}.record-controls{display:flex;align-items:center;gap:.55rem;height:38px;padding:0 .5rem 0 .7rem;border:1px solid rgba(239,68,68,.3);border-radius:10px;box-sizing:border-box;background:#ef444414;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.record-controls__indicator{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:pulse-dot 1.5s ease infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.35}}.record-controls__time{font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;color:#fca5a5;min-width:3.2rem}.record-controls__btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:7px;background:var(--surface);color:var(--text);cursor:pointer;transition:background .12s ease}.record-controls__btn:hover{background:var(--surface-hover)}.record-controls__btn--stop{color:#ef4444}.record-controls__btn--stop:hover{background:#ef444433}.app-shell__center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.app-shell__bottom{width:100%}.info-row{display:flex;gap:.5rem;width:100%;max-width:1100px;margin-top:.75rem}.info-row--anchor{visibility:hidden;pointer-events:none}.info-row__measure{align-self:stretch}.info-row__measure--combo,.info-row>.info-card:first-child{width:12rem;flex-shrink:0;box-sizing:border-box}.info-row__measure--recent,.info-row>.info-card:last-child{flex:1;min-width:0}.info-row>.info-card,.info-row__measure{align-self:stretch}.keyboard-stage{width:100%;max-width:1100px;container-type:inline-size;margin-top:2rem}.draggable-panel{max-width:20rem;position:relative}.draggable-panel--resizable{resize:horizontal;overflow:hidden}.draggable-panel--recent{max-width:none}.draggable-panel>.draggable-panel__handle+.info-card{position:relative}.draggable-panel>.draggable-panel__handle+.info-card h2,.draggable-panel>.draggable-panel__handle+.info-card .info-card__header{padding-right:1.5rem}.draggable-panel__handle{position:absolute;top:.55rem;right:.55rem;z-index:1;display:flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:grab;color:var(--handle-color);transition:color .12s ease;border-radius:4px}.draggable-panel__handle:active{cursor:grabbing;color:var(--handle-hover)}.draggable-panel__handle:hover{color:var(--handle-hover);background:var(--surface)}.info-card{border:1px solid var(--card-border);border-radius:14px;background:var(--card-bg);padding:1rem;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--card-shadow, none)}[data-theme=light]{--card-shadow: 0 2px 12px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .03)}.info-card h2{margin:0 0 .6rem;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}.info-card__header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.draggable-panel--combo .info-card,.info-row>.info-card:first-child{min-height:5.5rem;box-sizing:border-box}.draggable-panel--combo .info-card{height:100%;display:flex;flex-direction:column}.draggable-panel--combo .combo-display__value{flex:1;display:flex;align-items:flex-end}.combo-display__value{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-stream{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.45rem}.recent-stream-card{overflow:hidden}.recent-stream--single-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:.15rem}.recent-stream__item,.recent-stream__empty{flex:0 0 auto;border-radius:7px;background:var(--surface);padding:.3rem .6rem;font-size:.78rem;font-weight:500}.recent-stream__empty{color:var(--text-faint)}button{font:inherit}.info-card__header button{padding:.3rem .65rem;border:1px solid var(--border);border-radius:7px;background:var(--card-bg);color:var(--text-muted);font-size:.72rem;font-weight:500;cursor:pointer;transition:all .12s ease}.info-card__header button:hover{background:var(--surface-hover);color:var(--text)}.onboarding-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--bg);opacity:.97;animation:onboarding-fade-in .4s ease}@keyframes onboarding-fade-in{0%{opacity:0}to{opacity:.97}}.onboarding-card{max-width:420px;text-align:center;padding:2rem}.onboarding-card__title{margin:0 0 .6rem;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}.onboarding-card__desc{margin:0 0 1.5rem;font-size:.85rem;line-height:1.6;color:var(--text-muted)}.onboarding-card__steps{list-style:none;counter-reset:onboarding;padding:0;margin:0 0 1.5rem;display:flex;flex-direction:column;gap:.65rem;text-align:left}.onboarding-card__steps li{counter-increment:onboarding;display:flex;align-items:baseline;gap:.6rem;font-size:.8rem;line-height:1.5;color:var(--text)}.onboarding-card__steps li:before{content:counter(onboarding);flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--accent-bg, rgba(99, 235, 175, .2));color:var(--accent-color, #63ebaf);font-size:.68rem;font-weight:700}.onboarding-card__dismiss{margin:0;font-size:.75rem;color:var(--text-faint);animation:onboarding-pulse 2s ease-in-out infinite}@keyframes onboarding-pulse{0%,to{opacity:1}50%{opacity:.5}}@media(max-width:900px){.app-shell{padding:1rem}.app-shell__topbar{flex-wrap:wrap}.draggable-panel{max-width:16rem}}