/* Example-only chrome: the macOS window + toolbar around the SuperSplit surface.
   None of this is part of the library — it shows how an app wraps SuperSplit. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(120% 120% at 50% -10%, #fdfdfe 0%, #eceef2 55%, #e4e6ec 100%);
  color: #1d1d1f;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.stage { width: min(1180px, 96vw); display: flex; flex-direction: column; gap: 14px; }

.window {
  position: relative;
  height: min(78vh, 820px); min-height: 460px;
  background: #fff;
  border-radius: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 0.5px 0 0 rgba(255,255,255,0.7) inset, 0 22px 60px -18px rgba(20,24,40,0.42), 0 8px 18px -10px rgba(20,24,40,0.30);
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
}

.titlebar {
  height: 52px; flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: linear-gradient(#fff, #fafbfc);
  border-bottom: 0.5px solid rgba(0,0,0,0.07);
  position: relative; z-index: 5;
}
.lights { display: flex; gap: 8px; }
.light { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.12) inset; }
.light.close { background: #fe5f57; }
.light.min   { background: #febc2e; }
.light.max   { background: #28c840; }
.title { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; margin-left: 6px; }

.toolbar { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.toolgroup { display: flex; align-items: center; gap: 2px; padding: 3px; background: #f1f2f5; border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06) inset; }
.tbtn {
  width: 32px; height: 28px; display: grid; place-items: center;
  border: none; background: transparent; border-radius: 7px; color: #3c4150; cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, transform 0.08s ease;
}
.tbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tbtn:hover { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.tbtn:active { transform: scale(0.92); }
.tbtn[disabled] { opacity: 0.3; pointer-events: none; }

/* the SuperSplit mount point */
.canvas { flex: 1 1 auto; position: relative; min-height: 0; background: linear-gradient(#fff, #fcfcfd); }

/* the big number shown inside each demo pane (via renderPane) */
.demo-num {
  font-size: clamp(20px, 6cqmin, 40px);
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--ss-num, #8a8f99); opacity: 0.82;
  user-select: none; pointer-events: none;
}

.hint { text-align: center; font-size: 12.5px; color: #80838c; letter-spacing: -0.005em; }
.hint b { color: #595c66; font-weight: 650; }