:root {
  font-family: "Courier New", ui-monospace, monospace;
  color: #30394b;
  background: #f1eedf;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  --ink: #30394b;
  --ink-soft: #637087;
  --muted: #798398;
  --paper: #fffbed;
  --paper-deep: #f7f3e4;
  --canvas: #f1eedf;
  --line: #d9d5c5;
  --green: #a9cf8b;
  --green-dark: #557c56;
  --teal: #8ec9bd;
  --blue: #9ab7d2;
  --lilac: #b9add8;
  --yellow: #f2d783;
  --coral: #e99b85;
  --rose: #e9abb7;
  --shadow: #c8c3b3;
}

* { box-sizing: border-box; }
body { zoom: 1.5; margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #76a77b; outline-offset: 3px; }
.studio-shell { min-height: 100vh; }

.sidebar {
  width: 232px; position: fixed; inset: 0 auto 0 0; z-index: 4;
  padding: 25px 17px 16px; display: flex; flex-direction: column;
  background: #fffbed; border-right: 3px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 4px 39px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 21px; line-height: 1; }
.brand-text { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: -.6px; }
.brand-text small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: 1px; }
.nav-kicker, .section-kicker, .eyebrow, .creative-overline, .audience-kicker { font-size: 8px; font-weight: 700; letter-spacing: 1px; color: var(--muted); }
.nav-kicker { padding: 0 9px 10px; }
.side-nav { display: grid; gap: 7px; }
.nav-link { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; text-decoration: none; color: #69758a; font-size: 10px; font-weight: 700; border: 2px solid transparent; }
.nav-link span { width: 18px; text-align: center; color: #687692; font-size: 16px; }
.nav-link:hover { background: #f6f3e7; border-color: var(--line); }
.nav-link.active { color: var(--ink); background: #e8f0d9; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.nav-link.active span { color: var(--green-dark); }
.sidebar-bottom { margin-top: auto; }
.studio-motto { padding: 15px 13px; margin: 0 2px 15px; background: #f8f3dc; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.studio-motto>span { color: #b4974e; font-size: 18px; }
.studio-motto p { margin: 8px 0 12px; font-size: 10px; font-weight: 700; line-height: 1.65; }
.studio-motto small { color: #84816e; font-size: 7px; letter-spacing: .4px; }
.new-game-button { width: 100%; height: 38px; text-align: left; padding: 0 10px; background: transparent; border: 2px solid transparent; font-size: 9px; font-weight: 700; }
.new-game-button:hover { background: #f3f0e3; border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.new-game-button span { padding-right: 7px; color: #527d57; font-size: 15px; vertical-align: -1px; }
.local-note { margin: 11px 4px 0; color: #7a857b; font-size: 7px; line-height: 1.5; display: flex; align-items: center; gap: 7px; }
.local-note i, .save-indicator i { width: 7px; height: 7px; display: inline-block; background: #7daf6d; box-shadow: 1px 1px 0 var(--ink); }

.main-area { min-height: 100vh; margin-left: 232px; }
.topbar { height: 59px; position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; background: rgba(255, 251, 237, .96); border-bottom: 2px solid var(--ink); }
.crumbs { display: flex; gap: 9px; color: #7b8491; font-size: 9px; }
.crumbs b { color: #bab6a8; }
.crumbs strong { color: var(--ink); }
.topbar-right { display: flex; align-items: center; gap: 9px; font-size: 9px; font-weight: 700; }
.save-indicator { display: flex; align-items: center; gap: 6px; margin-right: 9px; color: #638363; font-size: 8px; }
.save-indicator.unsaved { color: #a65e4e; }
.save-indicator .save-warning { background: var(--coral); }
.top-avatar { width: 26px; height: 26px; display: grid; place-items: center; background: var(--lilac); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.top-studio-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-wrap { max-width: 1500px; margin: 0 auto; padding: 27px 34px 20px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.eyebrow { color: #6b8067; display: flex; align-items: center; gap: 7px; }
.eyebrow i { width: 6px; height: 6px; background: #83a970; box-shadow: 1px 1px 0 var(--ink); }
.page-heading h1 { margin: 9px 0 5px; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -1.3px; }
.page-heading p { margin: 0; color: #768195; font-size: 10px; }
.heading-star { color: #c3a650; font-size: 17px; vertical-align: 3px; }
.milestone-card { min-width: 220px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.milestone-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #627e5e; background: #eaf0d9; border: 1px solid var(--ink); font-size: 15px; }
.milestone-card strong, .milestone-card small { display: block; }
.milestone-card strong { font-size: 9px; }
.milestone-card small { margin-top: 4px; color: #80899a; font-size: 7px; }
.milestone-progress { margin-left: auto; font-size: 13px; font-weight: 900; }
.milestone-progress i { color: #9ba1aa; font-size: 8px; font-style: normal; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; }
.metric-card, .panel { background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.metric-card { min-width: 0; padding: 11px 13px 10px; }
.metric-heading { display: flex; align-items: center; justify-content: space-between; color: #707c90; font-size: 8px; font-weight: 700; }
.metric-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--green-dark); background: #e9f0dc; border: 1px solid var(--ink); font-size: 12px; }
.scope-card .metric-icon { color: #7184aa; background: #e6ecf5; }
.morale-card .metric-icon { color: #a96572; background: #f7e4e5; }
.quality-card .metric-icon { color: #9a8041; background: #f8efd3; }
.metric-value { display: flex; align-items: baseline; gap: 5px; min-width: 0; margin: 7px 0 8px; white-space: nowrap; }
.metric-value strong { font-size: 23px; letter-spacing: -1px; }
.metric-value>span { color: #8d96a3; font-size: 8px; }
.metric-value em { margin-left: auto; overflow: hidden; color: #839080; font-size: 7px; font-style: normal; text-overflow: ellipsis; }
.runway-dots { display: flex; gap: 4px; }
.runway-dot { width: 12px; height: 7px; background: #e3dfd1; border: 1px solid #a6a291; }
.runway-dot.filled { background: #a9cb89; border-color: #5b7d55; }
.meter { height: 7px; overflow: hidden; background: #e7e4d8; border: 1px solid #afb1a3; }
.meter i { width: 50%; height: 100%; display: block; background: #a9ce8d; border-right: 2px solid #557c56; transition: width .25s steps(8, end); }
.scope-card .meter i { background: #a8badc; border-color: #6179a5; }
.morale-card .meter i { background: #e8b6b6; border-color: #aa6978; }
.quality-card .meter i { background: #f1d680; border-color: #a88d45; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(255px, .78fr); align-items: start; gap: 14px; }
.left-column, .right-column { display: grid; min-width: 0; gap: 13px; }
.panel { min-width: 0; }
.creative-panel { overflow: hidden; }
.creative-art { height: 166px; position: relative; overflow: hidden; background: #727fa7; image-rendering: pixelated; }
.art-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#777fa9 0 48%, #9cb6b5 48% 67%, #d3cfaa 67% 100%); }
.moon { position: absolute; top: 17px; right: 19%; color: #fff0ae; font-size: 26px; text-shadow: 2px 2px 0 #596889; }
.star { position: absolute; color: #fff1b6; font-weight: 700; }
.star-a { top: 23px; left: 21%; font-size: 11px; }.star-b { top: 40px; right: 37%; font-size: 8px; }.star-c { top: 16px; left: 45%; font-size: 20px; }
.cloud { position: absolute; height: 7px; background: #bcc5c9; box-shadow: 7px -5px 0 #bcc5c9, 14px 0 0 #bcc5c9, 21px 0 0 #bcc5c9, 28px -5px 0 #bcc5c9; opacity: .82; }
.cloud-a { left: 11%; top: 63px; }.cloud-b { right: 32%; top: 39px; transform: scale(.7); }
.hill { position: absolute; left: 0; right: 0; bottom: 0; height: 69px; clip-path: polygon(0 37%, 9% 37%, 9% 24%, 17% 24%, 17% 15%, 28% 15%, 28% 28%, 39% 28%, 39% 12%, 51% 12%, 51% 28%, 61% 28%, 61% 18%, 73% 18%, 73% 31%, 84% 31%, 84% 13%, 95% 13%, 95% 32%, 100% 32%, 100% 100%, 0 100%); }
.hill-back { bottom: 14px; background: #577b70; opacity: .9; }
.hill-front { height: 52px; background: #385d55; clip-path: polygon(0 16%, 12% 16%, 12% 31%, 24% 31%, 24% 9%, 37% 9%, 37% 27%, 48% 27%, 48% 10%, 62% 10%, 62% 26%, 74% 26%, 74% 5%, 88% 5%, 88% 22%, 100% 22%, 100% 100%, 0 100%); }
.water { position: absolute; right: 0; bottom: 0; width: 43%; height: 19px; background: #78a6a0; clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%, 0 45%); }
.pixel-tree { position: absolute; bottom: 41px; z-index: 1; width: 8px; height: 21px; background: #583f4c; }
.pixel-tree:before { content: ""; position: absolute; width: 26px; height: 19px; top: -15px; left: -9px; background: #a2bd79; box-shadow: 4px -5px 0 #a2bd79, -4px 3px 0 #789a6b; }
.pixel-tree:after { content: ""; position: absolute; width: 5px; height: 4px; top: -11px; left: -3px; background: #d6dc9b; box-shadow: 9px 4px 0 #d6dc9b; }
.tree-a { left: 19%; transform: scale(.85); }.tree-b { right: 16%; transform: scale(1.05); }
.pixel-house { position: absolute; z-index: 1; left: 45%; bottom: 37px; width: 32px; height: 24px; background: #e4b37c; border: 3px solid #51445c; box-shadow: 3px 3px 0 rgba(37, 49, 67, .35); }
.pixel-house:before { content: ""; position: absolute; left: -6px; top: -13px; width: 30px; height: 11px; background: #bc7d78; border: 3px solid #51445c; clip-path: polygon(18% 0, 84% 0, 100% 100%, 0 100%); }
.pixel-house i { position: absolute; width: 7px; height: 11px; left: 10px; bottom: -1px; background: #64546d; border: 1px solid #51445c; }
.art-caption { position: absolute; z-index: 2; left: 17px; bottom: 12px; display: grid; gap: 4px; color: #fff7dc; text-shadow: 2px 2px 0 #344d53; }
.art-caption span { font-size: 7px; letter-spacing: 1px; }.art-caption strong { font-size: 17px; }
.creative-info { padding: 13px 15px 14px; }
.creative-overline { display: flex; align-items: center; justify-content: space-between; font-size: 7px; }
.active-chip { display: flex; align-items: center; gap: 5px; padding: 4px 6px; color: #557852; background: #e6efd9; border: 1px solid #91a97a; font-size: 7px; }
.active-chip i { width: 5px; height: 5px; background: #719663; }
.creative-title-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.creative-title-row h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.7px; }
.creative-title-row p { max-width: 600px; margin: 0; color: #788397; font-size: 8px; line-height: 1.55; }
.edit-brief { width: 28px; height: 28px; flex: 0 0 auto; color: #667990; background: var(--paper); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.edit-brief:hover { background: #edf0df; }
.pillar-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.pillar-chip { padding: 5px 7px; background: #f5efd4; border: 1px solid #c7b874; color: #796d42; font-size: 7px; }
.overall-progress-head { display: flex; justify-content: space-between; margin: 12px 0 5px; color: #69778e; font-size: 8px; }
.overall-progress-head strong { color: #4e7152; }
.overall-progress { height: 8px; background: #e5e1d4; border: 1px solid #9ea08f; }
.overall-progress i { height: 100%; display: block; background: #91bd7c; border-right: 2px solid #456648; transition: width .25s steps(8, end); }
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.area-heading { display: flex; justify-content: space-between; gap: 3px; color: #828b99; font-size: 7px; }.area-heading strong { color: #505f76; }
.area-meter { height: 5px; margin-top: 4px; background: #e7e3d6; }.area-meter i { display: block; height: 100%; background: #9bc484; transition: width .25s steps(6, end); }
.area-meter.engineering i { background: #99b1d7; }.area-meter.content i { background: #dfac9b; }.area-meter.qa i { background: #b9add8; }

.production-panel { padding: 15px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.panel-head h2 { margin: 5px 0 0; font-size: 14px; letter-spacing: -.4px; line-height: 1.35; }
.hito-tag, .phase-count { max-width: 125px; padding: 5px 6px; color: #657456; background: #eff0dc; border: 1px solid #bcc29b; font-size: 7px; line-height: 1.35; text-align: center; }
.event-description { margin: 9px 0 10px; color: #788397; font-size: 8px; line-height: 1.65; }
.event-options { display: grid; gap: 7px; }
.event-option { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 9px; text-align: left; background: #fffdf5; border: 1px solid #ccc9ba; box-shadow: 2px 2px 0 #d1cdbd; }
.event-option:hover { border-color: #76936c; background: #f8f8e9; }
.event-option.selected { background: #e9f0d9; border: 2px solid #506c4e; box-shadow: 2px 2px 0 #506c4e; }
.option-check { width: 17px; height: 17px; flex: 0 0 auto; display: grid; place-items: center; color: #fffbed; background: #dddccc; border: 1px solid #939687; font-size: 9px; }
.selected .option-check { color: #fffbed; background: #66885e; border-color: #354d3b; }
.option-copy { display: grid; gap: 4px; min-width: 0; }.option-copy strong { font-size: 8px; }.option-copy small { color: #81899a; font-size: 7px; line-height: 1.45; }
.option-arrow { margin-left: auto; color: #8c97a3; font-size: 16px; }
.capacity-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; font-size: 8px; font-weight: 700; }
.capacity-pill { padding: 5px 6px; color: #6c7480; background: #f0eee3; border: 1px solid #c7c3b4; font-size: 7px; letter-spacing: .3px; }
.capacity-pill b { color: #466e4e; font-size: 9px; }.capacity-pill b.capacity-over { color: #a45047; }
.capacity-hint { margin: 6px 0 8px; color: #8992a0; font-size: 7px; line-height: 1.45; }
.allocation-list { border-top: 1px solid #dfdccd; }
.allocation-row { min-height: 49px; display: grid; grid-template-columns: 27px minmax(95px, 1fr) 40px 74px; align-items: center; gap: 8px; border-bottom: 1px solid #e8e4d7; }
.role-avatar { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--ink); font-size: 7px; font-weight: 700; }
.role-avatar.design, .crew-avatar.design { background: #f4e3ad; }.role-avatar.engineering, .crew-avatar.engineering { background: #dce6f4; }.role-avatar.art, .crew-avatar.art { background: #f2d9cf; }.role-avatar.qa, .crew-avatar.qa { background: #e7dff1; }
.role-detail { display: grid; gap: 4px; min-width: 0; }.role-detail strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.role-detail strong small { margin-left: 3px; color: #8992a0; font-size: 7px; font-weight: 400; }.role-detail>span { color: #8b93a0; font-size: 6px; }
.role-load-meter { height: 5px; background: #e6e2d5; }.role-load-meter i { height: 100%; display: block; background: #9cbf87; }.allocation-row.locked .role-load-meter i { background: #d1cec2; }
.allocation-stepper { display: flex; align-items: center; justify-content: end; gap: 4px; }
.allocation-stepper button { width: 21px; height: 21px; padding: 0; background: #fffbed; border: 1px solid #888e90; box-shadow: 1px 1px 0 #a4a18f; font-size: 12px; line-height: 1; }
.allocation-stepper button:hover:not(:disabled) { background: #e9f0d9; border-color: #57734f; }
.allocation-stepper button:disabled { color: #b9b9b0; cursor: not-allowed; background: #f0eee6; box-shadow: none; }
.allocation-stepper strong { min-width: 12px; text-align: center; font-size: 9px; }
.production-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #dfdccd; }
.decision-hint { max-width: 250px; color: #899184; font-size: 7px; line-height: 1.5; }
.decision-hint:first-letter { color: #bb9e50; }
.primary-button, .secondary-button { min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 8px; font-weight: 700; }
.primary-button { background: #a9cf8b; border: 2px solid #405542; box-shadow: 3px 3px 0 #405542; }
.primary-button:hover:not(:disabled) { background: #bcdda0; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #405542; }
.primary-button:disabled { color: #92988e; background: #dcdccd; border-color: #9a9d8c; box-shadow: 2px 2px 0 #b8b7a9; cursor: not-allowed; }
.primary-button b { font-size: 13px; }
.secondary-button { background: #fffbed; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.secondary-button:hover { background: #f2efdF; }

.pipeline-panel { padding: 14px 13px 11px; }
.phase-count { white-space: nowrap; }
.pipeline { position: relative; display: grid; gap: 0; margin-top: 12px; }
.pipeline:before { content: ""; position: absolute; top: 17px; bottom: 19px; left: 13px; width: 2px; background: repeating-linear-gradient(to bottom, #c8c5b6 0 3px, transparent 3px 6px); }
.pipeline-step { position: relative; min-height: 45px; display: flex; align-items: center; gap: 9px; padding: 4px 3px; }
.pipeline-marker { width: 23px; height: 23px; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; color: #96998f; background: #e7e4d8; border: 1px solid #9b9d91; font-size: 8px; }
.pipeline-step.done .pipeline-marker { color: #fffbed; background: #7d9a6b; border-color: #445b42; }.pipeline-step.current .pipeline-marker { color: #344653; background: #f3d783; border: 2px solid #475344; box-shadow: 1px 1px 0 #475344; }
.pipeline-copy { display: grid; gap: 3px; }.pipeline-copy strong { font-size: 8px; }.pipeline-copy small { color: #8a93a0; font-size: 7px; }
.pipeline-percent { margin-left: auto; color: #71845e; font-size: 7px; font-weight: 700; }
.pipeline-legend { display: flex; gap: 11px; padding-top: 8px; color: #8b929c; border-top: 1px solid #e7e3d7; font-size: 6px; }
.pipeline-legend span { display: flex; align-items: center; gap: 5px; }.pipeline-legend i { width: 7px; height: 7px; display: inline-block; border: 1px solid #889080; }.legend-done { background: #7d9a6b; }.legend-now { background: #f3d783; }

.crew-panel { padding: 14px 13px 11px; background: #e9efdc; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.crew-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.crew-head h2 { margin: 5px 0 0; font-size: 13px; }
.crew-count { padding: 5px; background: rgba(255,255,255,.6); border: 1px solid #aab29a; color: #728066; font-size: 6px; white-space: nowrap; }
.crew-list { display: grid; gap: 3px; margin: 11px 0; }
.crew-member { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.crew-avatar { width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #46515a; box-shadow: 1px 1px 0 #46515a; font-size: 11px; }
.crew-detail { display: grid; gap: 3px; }.crew-detail strong { font-size: 8px; }.crew-detail small { color: #71806f; font-size: 7px; }
.crew-load { margin-left: auto; color: #71806e; font-size: 6px; text-align: right; }
.crew-foot { padding-top: 9px; border-top: 1px solid #cbd4be; color: #71806e; font-size: 7px; line-height: 1.55; }.crew-foot span { color: #ad6d79; }

.audience-card { padding: 13px; background: #f4e6dc; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.audience-kicker { color: #987b6e; font-size: 7px; }
.audience-people { display: flex; align-items: center; margin: 11px 0 8px; }
.audience-people span, .audience-people b { width: 23px; height: 23px; margin-right: -4px; display: grid; place-items: center; background: #faf1d9; border: 1px solid var(--ink); color: #8d715d; font-size: 11px; }
.audience-people span:nth-child(2) { background: #dce8d1; }.audience-people span:nth-child(3) { background: #e1e5f1; }.audience-people b { z-index: 1; background: #f0d579; font-size: 8px; }
.audience-card>strong { display: block; font-size: 9px; }.audience-card>p { margin: 5px 0 11px; color: #8a7b76; font-size: 7px; line-height: 1.55; }
.expectation-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #8a7c76; font-size: 6px; }.expectation-row strong { color: #8f6d54; font-size: 7px; }
.expectation-meter { height: 5px; background: rgba(255,255,255,.65); border: 1px solid #c6aaa0; }.expectation-meter i { height: 100%; display: block; background: #e5a28e; }
.page-footer { display: flex; justify-content: space-between; gap: 10px; padding: 17px 2px 0; color: #818a96; font-size: 7px; }.page-footer b { color: #bd7f83; }

.modal { width: min(480px, calc(100vw - 26px)); max-width: none; max-height: min(90vh, 800px); overflow: auto; padding: 0; color: var(--ink); background: transparent; border: 0; }
.modal::backdrop { background: rgba(39, 47, 62, .48); backdrop-filter: blur(2px); }
.modal-card { padding: 23px 25px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 rgba(31, 42, 58, .35); }
.modal-mark { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 13px; color: #52744e; background: var(--yellow); border: 2px solid var(--ink); font-size: 20px; }
.modal-card .eyebrow { margin-bottom: 7px; }.modal-card h2 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.5px; }.modal-card>p { margin: 0 0 14px; color: #7a8491; font-size: 8px; line-height: 1.6; }
.modal-card>label, .pillar-fieldset legend { display: block; margin: 11px 0 5px; font-size: 8px; font-weight: 700; }
.modal-card>input, .modal-card>select { width: 100%; height: 34px; padding: 0 9px; background: #fffdf5; border: 1px solid #a8a898; font-size: 9px; }
.pillar-fieldset { margin: 13px 0 0; padding: 0; border: 0; }.pillar-fieldset legend { margin: 0 0 7px; }
.pillar-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pillar-option { min-height: 52px; position: relative; display: grid; grid-template-columns: 18px 1fr; align-content: center; gap: 3px 6px; padding: 7px; text-align: left; background: #fffdf5; border: 1px solid #b9b6a8; }
.pillar-option>span { grid-row: span 2; width: 16px; height: 16px; display: grid; place-items: center; background: #ece9dd; border: 1px solid #9ea08f; font-size: 8px; }.pillar-option strong { font-size: 7px; }.pillar-option small { color: #858d97; font-size: 6px; line-height: 1.4; }
.pillar-option.selected { background: #edf1de; border: 2px solid #5c7754; }.pillar-option.selected>span { color: #fffbed; background: #6c8e62; border-color: #465d43; }
#pillar-hint { display: block; margin-top: 6px; color: #7f8792; font-size: 7px; }
.modal-submit { width: 100%; margin-top: 15px; }.modal-cancel { width: 100%; margin-top: 8px; padding: 8px; color: #727d8d; background: transparent; border: 0; font-size: 8px; }
.modal-cancel:hover { background: #f0eddf; }.modal-cancel[hidden] { display: none; }
.launch-modal { width: min(520px, calc(100vw - 26px)); }.launch-card { text-align: center; padding: 26px; }.launch-art { margin-bottom: 11px; color: #b29448; font-size: 19px; text-shadow: 2px 2px #e9dfbb; }.launch-card .eyebrow { justify-content: center; }.launch-card>p { max-width: 420px; margin: 9px auto 13px; }
.launch-band { display: inline-block; margin: 3px 0 12px; padding: 9px 11px; color: #465f48; background: #eaf0da; border: 2px solid #607752; box-shadow: 2px 2px 0 #607752; font-size: 10px; font-weight: 700; }
.launch-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 11px 0 14px; }.launch-stat { display: grid; gap: 5px; padding: 9px 4px; background: #f3f0e4; border: 1px solid #d5d0bf; }.launch-stat strong { color: #607d5a; font-size: 15px; }.launch-stat strong small { margin-left: 2px; color: #8d948d; font-size: 7px; font-weight: 400; }.launch-stat span { color: #858b92; font-size: 6px; }
.launch-actions { display: grid; gap: 7px; }.launch-actions .primary-button, .launch-actions .secondary-button { width: 100%; }.launch-disclaimer { display: block; margin-top: 11px; color: #9599a0; font-size: 6px; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 10; max-width: calc(100vw - 30px); padding: 11px 13px; color: #fffbed; background: #3d4c4c; border: 2px solid #202d3c; box-shadow: 3px 3px 0 #202d3c; font-size: 8px; line-height: 1.45; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1130px) { .sidebar { width: 196px; padding-inline: 13px; }.main-area { margin-left: 196px; }.page-wrap { padding-inline: 22px; }.topbar { padding-inline: 22px; }.workspace-grid { grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .sidebar { width: 62px; align-items: center; padding-inline: 7px; }.brand { padding: 0 0 30px; }.brand-text, .nav-kicker, .nav-link:not(.active), .studio-motto, .new-game-button, .local-note { display: none; }.side-nav { width: 100%; }.nav-link { justify-content: center; padding: 0; font-size: 0; }.nav-link span { font-size: 17px; }.main-area { margin-left: 62px; }.workspace-grid { grid-template-columns: 1fr; }.right-column { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }.audience-card { grid-column: 1 / -1; }.page-wrap { padding: 22px 18px 17px; }.allocation-row { grid-template-columns: 27px minmax(100px, 1fr) 55px 74px; } }
@media (max-width: 580px) { .sidebar { display: none; }.main-area { margin-left: 0; }.topbar { height: 51px; padding-inline: 13px; }.crumbs { font-size: 7px; }.topbar-right { gap: 6px; }.save-indicator { margin-right: 2px; font-size: 0; }.save-indicator i { width: 7px; height: 7px; }.top-studio-name { max-width: 94px; font-size: 8px; }.page-wrap { padding: 19px 12px 15px; }.page-heading { display: block; }.page-heading h1 { font-size: 21px; }.page-heading p { font-size: 8px; line-height: 1.5; }.milestone-card { min-width: 0; width: max-content; margin-top: 12px; }.metric-grid { gap: 7px; }.metric-card { padding: 9px; }.metric-heading { font-size: 7px; }.metric-value strong { font-size: 20px; }.metric-value em { font-size: 6px; }.metric-icon { width: 19px; height: 19px; }.workspace-grid, .left-column, .right-column { gap: 11px; }.creative-art { height: 143px; }.creative-info { padding: 11px; }.creative-title-row h2 { font-size: 15px; }.area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }.production-panel { padding: 12px; }.panel-head h2 { font-size: 12px; }.event-description { font-size: 7px; }.option-copy strong { font-size: 7px; }.option-copy small { font-size: 6px; }.allocation-row { grid-template-columns: 25px minmax(90px, 1fr) 0 70px; gap: 6px; }.role-load-meter { display: none; }.production-footer { align-items: stretch; flex-direction: column; }.decision-hint { max-width: none; }.production-footer .primary-button { width: 100%; }.right-column { grid-template-columns: 1fr; }.audience-card { grid-column: auto; }.page-footer { flex-wrap: wrap; font-size: 6px; }.page-footer span:nth-child(2) { order: 3; width: 100%; }.pillar-options { grid-template-columns: 1fr; }.modal-card { padding: 18px; }.launch-stats { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

.ad-slot { width: min(calc(100% - 32px), 970px); min-height: 280px; margin: 150px auto 32px; padding: 12px; display: grid; justify-items: center; align-content: start; gap: 10px; color: #72796b; background: #f8f6ee; border: 2px solid #9b9d91; box-shadow: 3px 3px 0 #b4b09f; }
.ad-slot[hidden] { display: none; }
.ad-slot-label { width: 100%; color: #7d8276; font-size: 7px; letter-spacing: .12em; text-align: center; }
.ad-slot ins { width: 100%; min-height: 250px; }