*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;touch-action:none;-webkit-tap-highlight-color:transparent}:root{--tb-surface: oklch(.99 .003 250);--tb-surface-2: oklch(.965 .004 250);--tb-ink: oklch(.24 .01 250);--tb-ink-2: oklch(.42 .01 250);--tb-ink-3: oklch(.62 .008 250);--tb-line: oklch(.9 .005 250);--tb-line-2: oklch(.82 .007 250);--tb-accent: oklch(.68 .13 215);--tb-accent-ink: oklch(.22 .06 215);--tb-accent-soft: oklch(.95 .04 215);--tb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);--tb-shadow-md: 0 6px 14px rgba(15, 23, 42, .1), 0 2px 4px rgba(15, 23, 42, .06);--tb-shadow-lg: 0 18px 38px rgba(15, 23, 42, .18), 0 4px 10px rgba(15, 23, 42, .08);--tb-r-sm: 6px;--tb-r-md: 10px;--tb-r-lg: 14px}.toolbar-topleft,.toolbar-top,.toolbar-utils{font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:"cv11","ss01"}.toolbar-topleft{position:absolute;top:16px;left:16px;z-index:5;-webkit-user-select:none;user-select:none}.toolbar-topleft .tb-slot{display:inline-flex;position:relative}.toolbar-top{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:5;-webkit-user-select:none;user-select:none}.tb-row-main{display:flex;flex-direction:row;align-items:flex-start;gap:8px}.tb-select-standalone{display:inline-flex;margin-top:7px;position:relative}.tb-row-design.expandable{padding:6px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-r-lg);box-shadow:var(--tb-shadow-md)}.toolbar-utils{position:absolute;bottom:18px;right:18px;display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-r-lg);box-shadow:var(--tb-shadow-md);z-index:5}.tb-slot{position:relative}.tb-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:var(--tb-r-md);color:var(--tb-ink);cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease,transform 80ms ease}.tb-btn:hover:not(:disabled){background:var(--tb-surface-2);border-color:var(--tb-line)}.toolbar-topleft .tb-btn,.tb-select-standalone .tb-btn{background:var(--tb-surface-2);border-color:var(--tb-line)}.tb-btn:active{transform:scale(.97)}.tb-btn:disabled{color:var(--tb-ink-3);cursor:not-allowed}.tb-btn.active{background:var(--tb-accent);color:#fff;border-color:var(--tb-accent);box-shadow:0 0 0 1px var(--tb-accent) inset,0 1px 2px #08334440}.tb-btn.active:before{content:"";position:absolute;left:-9px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--tb-accent)}.tb-btn.open:not(.active){background:var(--tb-accent-soft);color:var(--tb-accent-ink);border-color:color-mix(in oklch,var(--tb-accent) 35%,var(--tb-line))}.tip{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%) translateY(3px);opacity:0;pointer-events:none;background:var(--tb-ink);color:#fff;padding:3px 7px;border-radius:4px;font-size:10.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:opacity .12s ease,transform .12s ease;box-shadow:var(--tb-shadow-md);z-index:100}.tip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--tb-ink)}.tip-show{opacity:1;transform:translate(-50%) translateY(0)}.tip-hint{background:#ffffff21;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.04em}.tb-readout{display:flex;flex-direction:row;align-items:center;gap:8px;padding:6px 12px;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:999px;box-shadow:var(--tb-shadow-sm);font-size:11px;font-weight:500;color:var(--tb-ink-2)}.tb-readout-dot{width:6px;height:6px;border-radius:50%;background:var(--tb-accent);box-shadow:0 0 0 3px color-mix(in oklch,var(--tb-accent) 25%,transparent)}.tb-grid{display:grid;grid-template-columns:repeat(3,44px);grid-auto-rows:min-content;column-gap:6px;row-gap:0}.grid-cell{position:relative;width:44px;height:44px}.parent-cell.expanded:not(.active){background:var(--tb-accent-soft);color:var(--tb-accent-ink);border-color:color-mix(in oklch,var(--tb-accent) 35%,var(--tb-line));box-shadow:0 0 0 1px color-mix(in oklch,var(--tb-accent) 35%,var(--tb-line)) inset}.sub-row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,44px);column-gap:6px;overflow:hidden;transition:max-height .22s cubic-bezier(.2,.7,.2,1),opacity .16s ease,margin-top .22s ease,padding-top .22s ease,border-top-color .22s ease;border-top:1px solid transparent}.sub-row.open{overflow:visible}.sub-empty{width:44px;height:44px}.flyout{position:absolute;left:calc(100% + 14px);top:0;background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-r-md);padding:6px;min-width:260px;box-shadow:var(--tb-shadow-lg);z-index:20;animation:tb-popin .14s cubic-bezier(.2,.7,.2,1)}.flyout-arrow{position:absolute;left:-6px;top:22px;width:10px;height:10px;background:var(--tb-surface);border-top:1px solid var(--tb-line);border-left:1px solid var(--tb-line);transform:rotate(-45deg)}.flyout-title{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tb-ink-3);padding:6px 8px 4px}.flyout-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;background:transparent;border:none;border-radius:8px;cursor:pointer;color:var(--tb-ink);text-align:left;font-family:inherit}.flyout-item:hover{background:var(--tb-surface-2)}.flyout-icon{width:36px;height:36px;display:grid;place-items:center;background:var(--tb-surface-2);border:1px solid var(--tb-line);border-radius:8px;color:var(--tb-ink);flex-shrink:0}.flyout-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.flyout-name{font-size:13px;font-weight:500}.flyout-desc{font-size:11px;color:var(--tb-ink-3)}@keyframes tb-popin{0%{opacity:0;transform:translate(-8px) scale(.97)}to{opacity:1;transform:translate(0) scale(1)}}.tb-context{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.tb-ctx-btn{padding:8px 14px;border:none;border-radius:var(--tb-r-md);cursor:pointer;font-weight:600;font-size:12px;font-family:inherit;color:#fff;box-shadow:var(--tb-shadow-sm);transition:filter .12s ease,transform 80ms ease}.tb-ctx-btn:hover{filter:brightness(1.08)}.tb-ctx-btn:active{transform:scale(.97)}.tb-count{font-size:11px;font-weight:500;color:var(--tb-ink-2);background:var(--tb-surface);border:1px solid var(--tb-line);padding:4px 10px;border-radius:999px;box-shadow:var(--tb-shadow-sm)}.tb-panel{background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-r-md);box-shadow:var(--tb-shadow-sm);padding:8px 10px;min-width:150px;max-width:190px}.tb-panel-label{font-size:11px;font-weight:600;color:var(--tb-ink-2);margin-bottom:6px}.tb-panel input[type=range]{width:100%;cursor:pointer}.tb-height-row{display:flex;gap:6px}.tb-height-row .tb-ctx-btn{flex:1;padding:6px 12px}.tb-color-row{display:flex;gap:6px;margin-bottom:8px}.tb-swatch{width:24px;height:24px;border-radius:6px;cursor:pointer;padding:0;border:2px solid transparent}.tb-swatch.selected{border-color:var(--tb-ink)}