@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Morph Interactive Drag-and-Drop Stage */
:root {
  --w-disc: #1A1C22;
  --w-disc-line: rgba(255, 255, 255, 0.08);
  --w-tile: #2A2D35;
  --w-tile-line: rgba(255, 255, 255, 0.06);
  --w-centre: #141619;
  --w-centre-line: rgba(255, 255, 255, 0.08);
  --w-text: #EEF0F3;
  --w-subtle: #A9AEB8;
  --w-dot: rgba(238, 240, 243, 0.28);
  --w-mark: #12A58E;
  --w-accent: #0B6E69;
  --w-accent-hi: #16A394;
  --w-shadow: rgba(0, 0, 0, 0.5);
  --w-panel: #1F2127;
  --w-panel-line: rgba(255, 255, 255, 0.10);
  --w-desk: #111317;
  --w-window: #1B1D22;
  --w-window-2: #24272D;
  --w-menubar: rgba(22, 24, 29, 0.92);
  --radius-panel: 16px;
  --tide: #12A58E;
  --tide-700: #0B6E69;
  --tide-300: #2DD4B4;
  --accent-mark: #2DD4B4;
  --font-app: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --border: #2A2E37;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.stage {
  position: relative;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--w-desk);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: var(--font-app);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  outline: none;
  width: 100%;
  margin-top: 2rem;
}
/* Line icons: stroked in the text color (site.css isn't loaded on this page). */
.stage .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stage .icon [fill="currentColor"] { fill: currentColor; }
.stage .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.menubar {
  display: flex; align-items: center; gap: 18px;
  height: 28px; padding: 0 14px;
  background: var(--w-menubar); border-bottom: 1px solid var(--w-panel-line);
  color: var(--w-text); font-size: 12.5px;
}
.menubar-app { font-weight: 700; }
.menubar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.menubar-right .mono { font-family: var(--font-app); }
.menubar-mark { width: 15px; height: 15px; color: var(--w-text); }

.desk {
  position: relative;
  height: clamp(520px, 52vw, 660px);
  padding: 32px;
  background-color: var(--w-desk);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M17 13h3.5a6 6 0 0 0 6 6v8.5a2 2 0 0 1-2 2H17a2 2 0 0 1-2-2V15a2 2 0 0 1 2-2z' fill='%23F2F3F5' fill-opacity='0.06' transform='rotate(-8 21 21)'/%3E%3C/svg%3E");
}

.explorer {
  position: relative;
  width: min(620px, 56%);
  height: calc(100% - 56px);
  background: var(--w-window);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--w-panel-line), 0 2px 4px rgba(0, 0, 0, 0.2), 0 16px 40px -12px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--w-text);
}
.explorer-bar { display: flex; align-items: center; gap: 18px; height: 42px; padding: 0 16px; font-size: 13px; border-bottom: 1px solid var(--w-panel-line); font-weight: 700; }
.traffic { display: flex; gap: 8px; }
.traffic i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.traffic i:nth-child(2) { background: #FEBC2E; }
.traffic i:nth-child(3) { background: #28C840; }
.explorer-body { display: flex; flex: 1; min-height: 0; }
.explorer-side { width: 150px; padding: 14px 8px; border-right: 1px solid var(--w-panel-line); font-size: 13px; display: grid; align-content: start; gap: 2px; list-style: none; margin: 0; }
.explorer-side li { padding: 5px 10px; border-radius: 6px; color: var(--w-text); }
.explorer-side li.side-head { padding: 2px 10px 4px; color: var(--w-subtle); font-size: 11px; font-weight: 700; }
.explorer-side li.is-on { background: var(--w-tile); font-weight: 600; }
.explorer-files { flex: 1; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); align-content: start; gap: 6px; overflow: auto; }

.file {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px 10px;
  border: 1px solid transparent; border-radius: 6px;
  background: none; cursor: grab;
  font-size: 12px; color: var(--w-text);
  transition: background-color 120ms ease, opacity 160ms ease;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.file:hover { background: var(--w-window-2); }
.file:focus-visible { outline: 2px solid var(--w-mark); outline-offset: 0; }
.file.is-dragging { opacity: 0.4; background: color-mix(in srgb, var(--tide) 12%, transparent); border-color: color-mix(in srgb, var(--tide) 45%, transparent); }
.file.is-selected { background: color-mix(in srgb, var(--tide) 10%, transparent); border-color: color-mix(in srgb, var(--tide) 35%, transparent); }
.file-name { max-width: 100%; text-align: center; overflow-wrap: anywhere; line-height: 1.3; font-family: var(--font-app); }

.file-page, .page-tile {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 54px;
  color: var(--w-text);
  --bite: 12px;
  --page: var(--w-window);
}
.file-page::before, .page-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: 6px;
  background: radial-gradient(circle var(--bite) at 100% 0, transparent calc(var(--bite) - 1px), var(--w-tile-line) calc(var(--bite) - 0.5px), var(--page) var(--bite));
  box-shadow: inset 0 0 0 1px var(--w-tile-line);
  -webkit-mask: radial-gradient(circle calc(var(--bite) - 1px) at 100% 0, transparent 98%, #000 100%);
  mask: radial-gradient(circle calc(var(--bite) - 1px) at 100% 0, transparent 98%, #000 100%);
}
.file-page .icon, .page-tile .icon { position: relative; z-index: 1; width: 20px; height: 20px; stroke-width: 1.6; }
.file-new .file-page::after, .page-tile.done::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: calc(var(--bite) - 2px); height: calc(var(--bite) - 2px);
  background: var(--accent-mark);
  border-radius: 0 3px 0 100%;
}
.file-new .file-name { color: var(--w-text); font-weight: 600; }

.overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.overlay.is-open { pointer-events: auto; }
.overlay.is-attract { pointer-events: none; }
.overlay.is-attract .wheel-wrap, .overlay.is-attract .panel { pointer-events: auto; }
.wheel-wrap { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.wheel-wrap svg { width: 100%; height: 100%; overflow: visible; }
.wheel-svg { letter-spacing: normal; line-height: normal; }

.panel, .island, .result-card, .ghost { position: absolute; left: 0; top: 0; }
.panel {
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  background: var(--w-panel);
  box-shadow: 0 0 0 1px var(--w-panel-line), 0 4px 16px -4px rgba(0, 0, 0, 0.4);
  font-size: 12px; color: var(--w-text); white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 120ms ease, visibility 0s 120ms;
}
.overlay.is-open .panel { opacity: 1; visibility: visible; transition: opacity 120ms ease; }
.panel.is-empty { display: none; }
.panel-tab { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 13px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-family: var(--font-app); font-size: 12px; font-weight: 600; color: var(--w-text); }
.panel-tab kbd { font: 700 11px var(--font-app); opacity: 0.5; }
.panel-tab:hover { background: var(--w-tile); }
.panel-tab.is-on { background: var(--w-accent); color: #fff; }
.panel-tab.is-on kbd { opacity: 0.85; }

.result-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  min-width: 320px; max-width: 92%;
  padding: 10px 16px 10px 10px;
  background: var(--w-panel); border-radius: 8px;
  box-shadow: 0 0 0 1px var(--w-panel-line), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  color: var(--w-text); font-size: 13px;
  opacity: 0; transition: opacity 120ms ease;
}
.result-card.is-on { opacity: 1; }
.card-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: var(--w-tile); }
.card-icon .icon { width: 16px; height: 16px; stroke-width: 1.8; }
.card-text { display: grid; line-height: 1.35; min-width: 0; }
.card-text strong { font-weight: 600; }
.card-text .mono { font-size: 12px; color: var(--w-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-size { color: var(--w-subtle); font-size: 12px; white-space: nowrap; align-self: start; padding-top: 1px; }

.island {
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; height: 40px; padding: 0 16px 0 6px;
  border-radius: 999px; background: var(--w-panel);
  box-shadow: 0 0 0 1px var(--w-panel-line), 0 6px 20px -6px rgba(0, 0, 0, 0.5);
  color: var(--w-text); font-size: 13px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s 200ms;
}
.island.is-on { opacity: 1; visibility: visible; transition: opacity 160ms ease; }
.island-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--w-tile); flex: none; }
.island-mark .icon { width: 15px; height: 15px; stroke-width: 1.8; }
.island-mark.is-done { background: var(--w-accent); color: #fff; }
.island-mark.is-done .icon { stroke-width: 2.4; }
.island-bar { width: 72px; height: 4px; border-radius: 2px; background: var(--w-tile); overflow: hidden; margin-left: auto; }
.island-bar span { display: block; height: 100%; width: 100%; background: var(--w-mark); transform-origin: left; animation: progress 900ms var(--ease-out) forwards; }
@keyframes progress { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }

.ghost {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 6px;
  background: var(--w-panel); color: var(--w-text);
  box-shadow: 0 0 0 1px var(--w-panel-line), 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  font-size: 12px; white-space: nowrap;
  opacity: 0; transition: opacity 120ms ease;
  z-index: 3;
}
.ghost.is-on { opacity: 1; }
.ghost .icon { width: 14px; height: 14px; stroke-width: 1.8; }

.stage-keys { position: absolute; left: 32px; bottom: 24px; z-index: 6; display: flex; gap: 8px; }
.keycap {
  flex: none; width: auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--w-panel-line);
  border-radius: 8px;
  background: var(--w-window-2);
  box-shadow: 0 3px 0 #0A0B0D;
  color: var(--w-text);
  font: 600 13px/1 var(--font-app);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease, background-color 120ms ease, border-color 120ms ease;
}
.keycap kbd { font: 700 15px/1 var(--font-app); color: var(--tide-300); }
.stage-keys.is-ready .keycap { border-color: color-mix(in srgb, var(--tide) 55%, transparent); }
.stage-keys.is-ready .keycap:first-child { animation: nudge 1.4s ease-in-out infinite; }
.keycap.is-down, .keycap:active { transform: translateY(3px); box-shadow: 0 0 0 #0A0B0D; background: color-mix(in srgb, var(--tide) 22%, var(--w-window)); }
@keyframes nudge { 0%, 100% { box-shadow: 0 3px 0 #0A0B0D, 0 0 0 0 color-mix(in srgb, var(--tide) 40%, transparent); } 50% { box-shadow: 0 3px 0 #0A0B0D, 0 0 0 6px color-mix(in srgb, var(--tide) 0%, transparent); } }

.hint {
  position: absolute; right: 32px; bottom: 28px; z-index: 4;
  max-width: min(520px, calc(100% - 540px));
  padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--w-window) 92%, transparent);
  box-shadow: 0 0 0 1px var(--w-panel-line);
  color: var(--w-text); font-size: 13px; text-align: center; line-height: 1.35;
}

.stage-note { margin-top: 14px; font-size: 0.875rem; color: var(--ink-soft); text-align: center; }

/* The SVG wheel itself */
.wheel-plate { fill: none; }
.wheel-shadow-stop { stop-color: var(--w-shadow); }
.tile-base { fill: #141518; }
.tile-line { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.tile-accent { stop-color: var(--w-accent); }
.tile-accent-hi { stop-color: var(--w-accent-hi); }
.tile-label { color: color-mix(in srgb, var(--w-text), #FFFFFF calc(var(--hot, 0) * 100%)); fill: currentColor; font: 700 12px var(--font-app); }
.tile.is-dim .tile-label { color: color-mix(in srgb, var(--w-text) 38%, transparent); }
.tile-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile-icon [fill="currentColor"] { fill: currentColor; }
.wheel-centre-disc { fill: #141518; }
.wheel-centre-line { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.wheel-main { fill: var(--w-text); font: 600 15px var(--font-app); }
.wheel-detail { fill: var(--w-subtle); font: 400 12px var(--font-app); }

@media (max-width: 900px) {
  .explorer { width: 100%; height: 100%; }
  .explorer-side { display: none; }
  .desk { padding: 16px; height: 500px; }
  .menubar span:not(.menubar-app):not(.menubar-right) { display: none; }
  .stage-keys { left: 16px; bottom: 16px; }
  .keycap span { display: none; }
  .hint { right: 16px; max-width: calc(100% - 240px); }
}
@media (max-width: 600px) {
  .explorer-files { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); padding: 10px; gap: 2px; }
  .file { padding: 8px 2px; font-size: 11px; }
  /* No keyboard here: the bar under the wheel switches wheels. */
  .stage-keys { display: none; }
  .hint { font-size: 11px; padding: 6px 10px; bottom: 12px; left: 12px; right: 12px; max-width: none; text-align: center; }
  .overlay.is-open ~ .hint { display: none; }
  .panel-tab { padding: 0 10px; }
  .panel-tab kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-keys.is-ready .keycap:first-child { animation: none; }
  .island-bar span { animation-duration: 1ms; }
}