:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0b0b0d; color: #f2f2f4; }

.drawer-gate { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; background: #0b0b0d; }
.drawer-gate h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.drawer-gate p { max-width: 360px; margin: -7px 0 0; color: #99999f; font-size: 14px; }
.twitch-login { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 15px; border-radius: 2px; background: #9147ff; color: white; text-decoration: none; font-size: 14px; font-weight: 600; }
.twitch-login:hover { background: #7d35e8; }

.drawer-studio { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.drawer-toolbar { z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px; overflow-x: auto; background: #111114; border-bottom: 1px solid #2b2b30; }
.drawer-profile { display: flex; align-items: center; gap: 8px; min-width: max-content; padding-right: 4px; }
.drawer-profile img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #242428; }
.drawer-profile span { display: grid; line-height: 1.15; }
.drawer-profile strong { font-size: 12px; font-weight: 600; }
.drawer-profile small { color: #85858c; font-size: 10px; }

.drawer-tool-group, .drawer-controls { display: flex; align-items: center; gap: 2px; min-width: max-content; }
.drawer-tool-group { padding: 0 10px; border-inline: 1px solid #2b2b30; }
.drawer-toolbar button, .drawer-toolbar select { min-height: 34px; border: 0; border-radius: 2px; padding: 0 10px; background: transparent; color: #bdbdc3; }
.drawer-toolbar button:hover, .drawer-toolbar select:hover { background: #1d1d21; color: #fff; }
.drawer-tool-group button { display: grid; place-items: center; width: 36px; padding: 0; font-size: 14px; }
.drawer-tool-group button.is-active { background: #2a2038; color: #c8a4ff; box-shadow: inset 0 -2px #9147ff; }
.drawer-controls { margin-left: auto; gap: 8px; }
.drawer-controls > label { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 6px; color: #898990; font-size: 10px; }
.drawer-controls input[type=range] { width: 82px; accent-color: #9147ff; }
.drawer-controls output { color: #d4d4d8; font-variant-numeric: tabular-nums; }
.drawer-controls select { border-bottom: 1px solid #3a3a40; background: #111114; }
.drawer-toggle { display: flex !important; gap: 6px !important; padding: 0 4px; color: #bdbdc3 !important; }

.drawer-color-advanced { position: relative; }
.drawer-color-advanced summary { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 8px; border-radius: 2px; cursor: pointer; list-style: none; color: #bdbdc3; font-size: 11px; }
.drawer-color-advanced summary:hover, .drawer-color-advanced[open] summary { background: #1d1d21; color: #fff; }
.drawer-color-advanced summary::-webkit-details-marker { display: none; }
#drawer-color-swatch { width: 18px; height: 18px; border: 1px solid #ffffff30; border-radius: 2px; background: #ff5a36; }
.drawer-color-advanced > div { position: fixed; z-index: 60; top: 57px; right: 12px; display: grid; gap: 10px; width: min(280px, calc(100vw - 24px)); padding: 12px; border: 1px solid #35353b; border-radius: 2px; background: #141417; }
.drawer-color-advanced > div label { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; color: #99999f; font-size: 11px; }
.drawer-color-advanced input[type=color] { width: 100%; height: 32px; border: 0; border-radius: 0; padding: 0; background: #141417; }
.drawer-color-advanced input[type=text] { min-width: 0; width: 100%; height: 32px; border: 0; border-bottom: 1px solid #414147; border-radius: 0; padding: 0 4px; background: transparent; color: white; }
.drawer-color-advanced input[type=range] { width: 100%; accent-color: #9147ff; }

.drawer-workspace { display: grid; place-items: center; min-height: 0; padding: 20px; overflow: hidden; background: #08080a; }
.drawer-canvas-frame { position: relative; width: min(100%, calc((100dvh - 98px) * var(--drawer-aspect-number, 1.7777778))); aspect-ratio: 16 / 9; overflow: hidden; outline: 1px solid #303036; background: var(--scene-background, #0000); touch-action: none; }
.drawer-canvas-frame canvas, .drawer-canvas-frame .media-layer, .drawer-pointers { position: absolute; inset: 0; width: 100%; height: 100%; }
.drawer-pointers { z-index: 30; pointer-events: none; }
.drawer-pointer { position: absolute; transform: translate(-4px, -4px); transition: left 60ms linear, top 60ms linear; color: var(--pointer, #ff5a36); }
.drawer-pointer i { filter: drop-shadow(0 1px 1px #000); }
.drawer-pointer span { display: block; margin: -1px 0 0 10px; padding: 2px 5px; border-radius: 2px; background: #27272c; color: white; font-size: 10px; font-weight: 600; white-space: nowrap; }

@media (max-width: 900px) {
  .drawer-toolbar { min-height: 52px; gap: 7px; padding: 7px 8px; }
  .drawer-profile { position: sticky; left: 0; z-index: 2; padding-right: 7px; background: #111114; }
  .drawer-profile span { display: none; }
  .drawer-tool-group { padding: 0 6px; }
  .drawer-controls { gap: 4px; }
  .drawer-controls > label > span, .drawer-color-advanced summary b { display: none; }
  .drawer-workspace { padding: 8px; }
  .drawer-canvas-frame { width: min(100%, calc((100dvh - 68px) * var(--drawer-aspect-number, 1.7777778))); }
  .drawer-color-advanced > div { top: 51px; right: 8px; }
}