@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --bg: #11111b;
  --panel: #191923;
  --panel-raised: #1d1d29;
  --line: #2b2b39;
  --text: #f4f2fa;
  --muted: #89889a;
  --purple: #a78bfa;
  --purple-bright: #b29bff;
  --green: #85d8a1;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
button, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 2; display: flex; flex-direction: column;
  width: 246px; padding: 26px 17px 16px; background: #15151f; border-right: 1px solid #252531;
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 48px 5px; font: 700 19px "Space Grotesk", sans-serif; letter-spacing: -.7px; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(145deg, #b09aff, #8164e8); color: #171222; font-size: 18px; }
.brand-mark { font: 700 20px "Space Grotesk", sans-serif; }
.sidebar-label { padding: 0 10px; color: #737283; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 31px; padding: 11px 10px; border: 1px solid #363243; border-radius: 8px; background: #211f2c; color: #ddd5f4; text-align: left; font-size: 13px; cursor: pointer; transition: border-color .18s, background .18s; }
.nav-item:hover { border-color: #7561a5; background: #282437; }
.nav-icon { color: var(--purple); font-size: 20px; line-height: 15px; }
.recent-label { margin-bottom: 12px; }
.project-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.empty-projects { padding: 4px 10px; color: #777687; font-size: 12px; }
.project-list button { overflow: hidden; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #aaa8b8; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; cursor: pointer; }
.project-list button:hover { background: #22222d; color: #f2effa; }
.sidebar-spacer { flex: 1; min-height: 26px; }
.sidebar-note { position: relative; margin: 0 1px 15px; padding: 16px 13px 13px; border: 1px solid #343044; border-radius: 10px; background: linear-gradient(145deg, #252235, #1c1b28); }
.sparkle { color: #c2aaff; font-size: 17px; }
.sidebar-note p { margin: 10px 0 8px; color: #c3bdcf; font-size: 12px; line-height: 1.7; }
.sidebar-note strong { color: #f0eafe; font-weight: 600; }
.note-caption { color: #898497; font-size: 10px; }
.sidebar-footer { display: flex; align-items: center; gap: 8px; padding: 11px 8px 2px; color: #9a99a7; font-size: 11px; }
.status-dot, .model-dot, .language-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #78d69a; box-shadow: 0 0 9px #78d69a55; }

.main-content { min-height: 100vh; margin-left: 246px; }
.topbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 5.5%; border-bottom: 1px solid #252531; background: #11111bf2; backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #8f8d9d; font-size: 12px; }
.breadcrumb strong { color: #e5e3ec; font-weight: 500; }
.crumb-divider { color: #545363; }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.auth-control { display: flex; align-items: center; gap: 8px; }
#auth-status { max-width: 150px; overflow: hidden; color: #908e9d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#google-signin[hidden], #signout-button[hidden] { display: none; }
.auth-setup-link { color: #c4abff; font-size: 10px; white-space: nowrap; }
.auth-setup-link:hover { color: #eee8ff; }
.auth-setup-link[hidden] { display: none; }
.signout-button { padding: 7px 10px; border: 1px solid #34313f; border-radius: 6px; background: #20202b; color: #cbc9d4; font-size: 10px; cursor: pointer; }
.signout-button:hover { border-color: #74619f; color: #eee8ff; }
.model-badge { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #34313f; border-radius: 20px; color: #c7bfd9; font-size: 11px; }
.model-dot { width: 6px; height: 6px; flex-basis: 6px; background: #baa2ff; box-shadow: 0 0 8px #a78bfa77; }
.help-link { color: #a09eae; font-size: 12px; }
.help-link:hover { color: var(--purple-bright); }
.workspace { max-width: 1020px; margin: 0 auto; padding: 59px 6.5% 24px; }
.welcome { margin: 0 0 32px; }
.eyebrow, .step-label { color: #a891e8; font-size: 10px; font-weight: 700; letter-spacing: 1.35px; }
.eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; }
.eyebrow span { font-size: 13px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font: 600 clamp(33px, 4.3vw, 48px)/1.14 "Space Grotesk", sans-serif; letter-spacing: -1.9px; }
h1 span, .how-intro h2 span { color: #a78bfa; }
.intro { margin-bottom: 0; color: #a4a1b0; font-size: 14px; line-height: 1.65; }
.builder-card, .output-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.builder-card { padding: 22px 23px 17px; }
.card-heading, .output-heading { display: flex; align-items: center; justify-content: space-between; }
.card-heading { margin-bottom: 18px; }
.step-label { display: block; margin-bottom: 6px; color: #89839c; font-size: 9px; letter-spacing: 1.2px; }
.card-heading h2, .output-heading h2 { margin-bottom: 0; font: 600 17px "Space Grotesk", sans-serif; letter-spacing: -.35px; }
.private-label { color: #868493; font-size: 10px; }
.private-label span { margin-right: 4px; color: #a98ef7; }
#game-prompt { display: block; width: 100%; min-height: 119px; resize: vertical; padding: 14px 15px; border: 1px solid #343442; border-radius: 8px; outline: none; background: #14141e; color: #eeeaf6; font-size: 13px; line-height: 1.7; transition: border-color .18s, box-shadow .18s; }
#game-prompt::placeholder { color: #757383; }
#game-prompt:focus { border-color: #866cd0; box-shadow: 0 0 0 3px #a78bfa1c; }
.prompt-meta { display: flex; justify-content: space-between; margin-top: 7px; color: #777584; font-size: 10px; }
.generation-mode { display: block; width: 100%; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #353442; border-radius: 7px; outline: none; background: #20202b; color: #d9d4e5; font-size: 12px; }
.generation-mode:focus { border-color: #866cd0; box-shadow: 0 0 0 3px #a78bfa1c; }
.idea-starters { margin-top: 15px; }
.idea-starters-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #a6a3b1; font-size: 10px; }
.idea-starters-heading span:first-child { color: #ded9eb; font-weight: 600; }
.idea-starters-heading span:last-child { color: #777584; }
.suggestion-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.suggestion-chip { padding: 7px 10px; border: 1px solid #353442; border-radius: 6px; background: #20202b; color: #c4c1cf; font-size: 10px; cursor: pointer; transition: all .18s; }
.suggestion-chip:hover { border-color: #74619f; background: #282438; color: #eee8ff; }
.suggestion-chip[aria-pressed="true"] { border-color: #8067bd; background: #30283f; color: #e7dcff; box-shadow: inset 0 0 0 1px #8067bd55; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid #2a2a36; }
.free-hint { color: #908e9d; font-size: 10px; }
.free-hint span { margin-right: 4px; color: #a78bfa; }
.generate-button { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 154px; padding: 10px 13px; border: 0; border-radius: 7px; background: linear-gradient(105deg, #9b7cf0, #8063d6); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: filter .18s, transform .18s; }
.generate-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.generate-button:disabled { opacity: .72; cursor: wait; }
.button-icon { font-size: 12px; }
.button-arrow { margin-left: 5px; font-size: 16px; line-height: 10px; }
.map-wizard { margin-top: 19px; padding: 20px; border: 1px solid #393348; border-radius: 12px; background: linear-gradient(145deg, #211f2d, #191923 72%); }
.map-wizard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.map-wizard-heading h2 { margin: 0 0 6px; font: 600 17px "Space Grotesk", sans-serif; letter-spacing: -.35px; }
.map-wizard-heading p { margin: 0; color: #9693a2; font-size: 11px; line-height: 1.6; }
.map-wizard-mark { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #52466e; border-radius: 9px; background: #29243a; color: #c8b4ff; font-size: 20px; }
.map-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 17px 0; padding: 0; list-style: none; }
.map-steps li { display: grid; grid-template-columns: 25px minmax(0, 1fr); column-gap: 7px; align-items: center; min-width: 0; padding: 9px 8px; border: 1px solid #34313f; border-radius: 7px; background: #191923; }
.map-steps li > span { grid-row: span 2; color: #b7a1f6; font: 600 10px "Space Grotesk", sans-serif; }
.map-steps strong { overflow: hidden; color: #ddd9e8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.map-steps small { overflow: hidden; color: #858291; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.map-library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.map-library-heading > div { display: grid; gap: 4px; }
.map-library-heading strong { color: #e4e0ec; font-size: 11px; }
.map-library-heading span { color: #898695; font-size: 9px; }
.map-library-heading a { color: #bda8f3; font-size: 9px; white-space: nowrap; }
.map-library-heading a:hover { color: #eee8ff; text-decoration: underline; }
.map-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 17px; }
.map-template-card { overflow: hidden; min-width: 0; padding: 7px; border: 1px solid #34313f; border-radius: 8px; background: #191923; color: inherit; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.map-template-card:hover { transform: translateY(-1px); border-color: #706091; background: #211f2c; }
.map-template-card[aria-pressed="true"] { border-color: #9d82df; background: #292438; box-shadow: 0 0 0 1px #9d82df55; }
.map-template-card > strong, .map-template-card > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-template-card > strong { margin-top: 7px; color: #e0dbea; font-size: 10px; }
.map-template-card > small { margin-top: 4px; color: #898695; font-size: 8px; }
.map-preview { display: block; overflow: hidden; height: 78px; border: 1px solid #ffffff12; border-radius: 5px; background: #11111b; }
.map-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.map-template-card:hover .map-preview img { transform: scale(1.05); }
.map-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.map-field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; color: #d4d0df; font-size: 10px; font-weight: 600; }
.map-field select, .map-field textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #353442; border-radius: 6px; outline: none; background: #14141e; color: #dedbe7; font: 400 10px/1.5 "DM Sans", sans-serif; }
.map-field select:focus, .map-field textarea:focus { border-color: #866cd0; box-shadow: 0 0 0 3px #a78bfa1c; }
.map-field textarea { resize: vertical; }
.map-field textarea::placeholder { color: #757383; }
.map-gameplay { align-content: start; }
.map-gameplay legend { margin-bottom: 7px; color: #d4d0df; font-size: 10px; font-weight: 600; }
.map-gameplay label { display: flex; align-items: center; gap: 7px; color: #aaa7b5; font-size: 10px; font-weight: 400; }
.map-gameplay input { accent-color: #a78bfa; }
.map-wizard-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #302d3b; }
.map-wizard-footer p { max-width: 440px; margin: 0; color: #888594; font-size: 9px; line-height: 1.55; }
.map-generate-button { min-width: 170px; }
.output-card { margin-top: 20px; padding: 18px 20px 12px; }
.output-heading { gap: 10px; margin-bottom: 13px; }
.output-title-group { flex: 1; }
.output-actions { display: flex; align-items: center; gap: 8px; }
.language-tag, .icon-button { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #343440; border-radius: 6px; background: #20202b; color: #cbc9d4; font-size: 10px; }
.language-tag { padding: 7px 10px; color: #aaa7b5; }
.language-dot { width: 6px; height: 6px; flex-basis: 6px; background: #e5bd77; box-shadow: none; }
.icon-button { cursor: pointer; }
.icon-button:hover:not(:disabled) { border-color: #6f5b9b; color: #e8ddff; }
.icon-button:disabled { opacity: .43; cursor: not-allowed; }
.icon-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.code-window { overflow: hidden; border: 1px solid #30303c; border-radius: 8px; background: #13131c; }
.code-toolbar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-bottom: 1px solid #292934; background: #191923; color: #8c8999; font: 10px "DM Sans", sans-serif; }
.window-dots { display: flex; gap: 4px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #55515e; }
.window-dots i:first-child { background: #db7777; }
.window-dots i:nth-child(2) { background: #d5b56e; }
.window-dots i:nth-child(3) { background: #7cb78e; }
.code-toolbar-spacer { flex: 1; }
.placement-tag { padding: 4px 7px; border: 1px solid #343442; border-radius: 4px; color: #9e9bab; font-size: 9px; }
.code-content { overflow: auto; min-height: 220px; max-height: 560px; }
.map-result { margin-top: 14px; padding: 14px; border: 1px solid #343144; border-radius: 9px; background: #191923; }
.map-result[hidden] { display: none; }
.map-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.map-result-heading h3 { margin: 0; font: 600 15px "Space Grotesk", sans-serif; }
.map-result-count { padding: 6px 8px; border: 1px solid #353442; border-radius: 20px; color: #c3b3e9; font-size: 9px; white-space: nowrap; }
.map-result-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(170px, .8fr); gap: 12px; }
.map-viewport { overflow: hidden; border: 1px solid #30303c; border-radius: 7px; background: #11131d; }
.map-viewport svg { display: block; width: 100%; min-height: 160px; }
.map-viewport > span { display: block; padding: 7px 9px; border-top: 1px solid #292934; color: #777584; font-size: 8px; letter-spacing: .4px; }
.map-result-details { padding: 11px; border: 1px solid #302e3a; border-radius: 7px; background: #16161f; }
.map-result-details > strong { color: #ded9eb; font-size: 10px; }
.map-result-details ul { display: grid; gap: 7px; margin: 10px 0; padding: 0; list-style: none; }
.map-result-details li { display: flex; align-items: flex-start; gap: 6px; color: #aaa7b5; font-size: 9px; line-height: 1.4; }
.map-result-details li::before { content: "✓"; color: #85d8a1; }
.map-result-details p { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid #302e3a; color: #858392; font-size: 8px; line-height: 1.5; }
.studio-handoff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: center; margin-top: 10px; }
.studio-handoff > div { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px; border: 1px solid #302e3a; border-radius: 6px; }
.studio-handoff > div > span { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: #2d2740; color: #cbb8ff; font-size: 8px; }
.studio-handoff p { min-width: 0; margin: 0; }
.studio-handoff strong, .studio-handoff small { display: block; }
.studio-handoff strong { color: #d9d4e5; font-size: 8px; }
.studio-handoff small { margin-top: 3px; color: #858392; font-size: 8px; line-height: 1.35; }
.studio-handoff > a { color: #bda8f3; font-size: 8px; white-space: nowrap; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; color: #9693a2; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 12px; border: 1px solid #393446; border-radius: 11px; background: #211f2c; color: #b49aff; font: 600 14px "Space Grotesk", sans-serif; }
.empty-state strong { margin-bottom: 6px; color: #c5c2ce; font-size: 12px; font-weight: 500; }
.empty-state span { color: #797786; font-size: 10px; line-height: 1.7; }
.code-block { margin: 0; padding: 15px 17px 19px; color: #d7d3e1; font: 11px/1.75 Consolas, "Courier New", monospace; white-space: pre; tab-size: 4; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 220px; color: #aaa5bc; font-size: 12px; }
.spinner { width: 15px; height: 15px; border: 2px solid #413b51; border-top-color: #b39bff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-message { padding: 10px 13px; border-top: 1px solid #4b3034; background: #271c21; color: #f3a8ad; font-size: 11px; line-height: 1.5; }
.revision-panel { margin-top: 13px; padding: 12px; border: 1px solid #343144; border-radius: 8px; background: #1b1a26; }
.revision-panel[hidden] { display: none; }
.revision-panel label { display: block; margin-bottom: 8px; color: #e5e0ef; font-size: 11px; font-weight: 600; }
.revision-controls { display: flex; gap: 8px; }
.revision-controls input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid #353442; border-radius: 6px; outline: none; background: #14141e; color: #eeeaf6; font: inherit; font-size: 11px; }
.revision-controls input:focus { border-color: #866cd0; box-shadow: 0 0 0 3px #a78bfa1c; }
.revision-controls input::placeholder { color: #757383; }
.revision-button { padding: 9px 12px; border: 1px solid #66548f; border-radius: 6px; background: #342b4a; color: #e8dcff; font-size: 10px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.revision-button:hover:not(:disabled) { border-color: #a78bfa; background: #403458; }
.revision-button:disabled { opacity: .55; cursor: wait; }
.revision-panel p { margin: 8px 0 0; color: #898695; font-size: 10px; line-height: 1.5; }
.disclaimer { margin: 9px 2px 0; color: #777584; font-size: 9px; line-height: 1.5; }

.how-section { display: grid; grid-template-columns: .9fr 1.5fr; gap: 27px; align-items: center; margin: 48px 0 0; padding: 25px 0 27px; border-top: 1px solid #292934; }
.how-intro h2 { margin: 8px 0 0; font: 600 19px/1.4 "Space Grotesk", sans-serif; letter-spacing: -.5px; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.how-step { min-width: 0; }
.how-number { color: #a58ae9; font: 600 10px "Space Grotesk", sans-serif; }
.how-step h3 { margin: 7px 0 5px; font-size: 11px; font-weight: 600; }
.how-step p { margin-bottom: 0; color: #858392; font-size: 10px; line-height: 1.55; }
.plugin-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; margin: 14px 0 25px; padding: 22px; border: 1px solid #343144; border-radius: 11px; background: radial-gradient(ellipse at 5% 0%, #302945 0, #211f2b 42%, #1a1a25 100%); }
.plugin-copy h2 { margin: 8px 0 9px; font: 600 21px/1.35 "Space Grotesk", sans-serif; letter-spacing: -.55px; }
.plugin-copy h2 span { color: #a78bfa; }
.plugin-copy p { max-width: 340px; margin-bottom: 15px; color: #a19eae; font-size: 11px; line-height: 1.7; }
.plugin-download { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #66548f; border-radius: 7px; background: #342b4a; color: #e8dcff; font-size: 11px; font-weight: 600; transition: background .18s, border-color .18s; }
.plugin-download:hover { border-color: #a78bfa; background: #403458; }
.plugin-download span { color: #c5adff; font-size: 15px; }
.plugin-install { align-self: center; padding: 14px 15px; border: 1px solid #393744; border-radius: 8px; background: #17172099; }
.install-heading { display: flex; align-items: center; gap: 8px; color: #e8e5f0; font-size: 11px; }
.install-mark { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #594b78; border-radius: 6px; color: #c4abff; font: 600 9px "Space Grotesk", sans-serif; }
.plugin-install ol { display: grid; gap: 7px; margin: 12px 0 10px; padding-left: 29px; color: #a4a1b0; font-size: 10px; line-height: 1.55; }
.plugin-install li::marker { color: #a78bfa; }
.plugin-install strong { color: #ded9eb; font-weight: 600; }
.plugin-install code { color: #cbb8ff; font-size: 10px; }
.install-note { margin: 0; padding-top: 9px; border-top: 1px solid #34313c; color: #84818f; font-size: 9px; line-height: 1.6; }
.page-footer { padding-top: 15px; border-top: 1px solid #292934; color: #696878; font-size: 9px; text-align: center; }
.page-footer span { padding: 0 4px; color: #a48ae9; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 5; max-width: min(360px, calc(100vw - 32px)); padding: 11px 15px; border: 1px solid #423956; border-radius: 8px; background: #252132; color: #e8defe; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (min-width: 1400px) { .workspace { padding-top: 68px; } }
@media (max-width: 1000px) {
  .sidebar { width: 210px; }
  .main-content { margin-left: 210px; }
  .workspace { padding-right: 5%; padding-left: 5%; }
  .how-section { grid-template-columns: 1fr; gap: 20px; }
  .plugin-section { grid-template-columns: 1fr 1fr; gap: 16px; padding: 17px; }
  .map-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-handoff { grid-template-columns: 1fr; }
  .studio-handoff > a { padding: 4px 2px; }
}
@media (max-width: 720px) {
  .sidebar { position: static; width: auto; height: auto; padding: 13px 17px; border-right: 0; border-bottom: 1px solid #252531; }
  .brand { margin: 0; }
  .sidebar-label, .nav-item, .recent-label, .project-list, .sidebar-spacer, .sidebar-note, .sidebar-footer { display: none; }
  .main-content { margin-left: 0; }
  .topbar { height: 54px; padding: 0 18px; }
  .topbar-right { gap: 11px; }
  #auth-status { max-width: 92px; font-size: 9px; }
  .model-badge { padding: 5px 8px; font-size: 10px; }
  .help-link { font-size: 10px; }
  .workspace { padding: 39px 17px 21px; }
  .welcome { margin-bottom: 25px; }
  h1 { font-size: clamp(35px, 10vw, 43px); }
  .intro { max-width: 410px; font-size: 13px; }
  .builder-card { padding: 18px 15px 14px; }
  .map-wizard { padding: 16px 13px; }
  .map-library-heading { align-items: flex-start; flex-direction: column; }
  .map-options { grid-template-columns: 1fr; gap: 11px; }
  .map-result-layout { grid-template-columns: 1fr; }
  .map-wizard-footer { align-items: stretch; flex-direction: column; }
  .map-generate-button { width: 100%; }
  .card-heading { align-items: flex-start; gap: 8px; }
  .private-label { max-width: 125px; line-height: 1.5; text-align: right; }
  #game-prompt { min-height: 130px; }
  .form-footer { align-items: flex-start; }
  .free-hint { max-width: 125px; padding-top: 4px; line-height: 1.5; }
  .generate-button { min-width: 142px; }
  .output-card { padding: 16px 12px 11px; }
  .output-heading { align-items: flex-start; }
  .output-actions { flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
  .language-tag, .icon-button { padding: 6px 7px; font-size: 9px; }
  .revision-controls { align-items: stretch; flex-direction: column; }
  .code-content { min-height: 190px; }
  .empty-state, .loading-state { min-height: 190px; }
  .code-block { padding: 12px; font-size: 10px; }
  .how-section { margin-top: 37px; }
  .how-steps { gap: 11px; }
  .how-step p { font-size: 9px; }
  .plugin-section { grid-template-columns: 1fr; gap: 18px; margin-top: 5px; padding: 17px 15px; }
  .plugin-copy h2 { font-size: 20px; }
}
@media (max-width: 400px) {
  .breadcrumb { gap: 6px; font-size: 10px; }
  .topbar { padding: 0 12px; }
  .topbar-right { gap: 7px; }
  .model-badge { font-size: 9px; }
  .suggestion-row { gap: 6px; }
  .suggestion-chip { padding: 7px 8px; font-size: 9px; }
  .idea-starters-heading { font-size: 9px; }
  .language-tag { display: none; }
  .how-steps { grid-template-columns: 1fr; }
  .how-step { display: grid; grid-template-columns: 27px 1fr; column-gap: 4px; }
  .how-step h3 { margin: 0 0 3px; }
  .how-step p { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}