@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0c1110;
  --panel: #151c1b;
  --panel-2: #1b2422;
  --line: rgba(217, 228, 221, 0.11);
  --line-strong: rgba(217, 228, 221, 0.2);
  --text: #edf0eb;
  --muted: #8d9a95;
  --orange: #e9823d;
  --orange-pale: #ffb36f;
  --mint: #8cc8a8;
  --cream: #e9d8b5;
  --red: #e26450;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Manrope", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.app-shell { height: 100vh; min-height: 680px; display: grid; grid-template-rows: 70px 1fr; }
.topbar { position: relative; z-index: 5; display: grid; grid-template-columns: 300px 1fr 300px; align-items: center; border-bottom: 1px solid var(--line); background: rgba(13,18,17,.95); padding: 0 20px; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; width: max-content; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(233,130,61,.5); background: rgba(233,130,61,.1); clip-path: polygon(13% 0,100% 0,100% 87%,87% 100%,0 100%,0 13%); }
.brand-mark svg { width: 27px; fill: none; stroke: var(--orange); stroke-width: 2; }
.brand strong { font-size: 14px; letter-spacing: .11em; display: block; }
.brand small { font: 8px var(--mono); letter-spacing: .15em; color: var(--muted); display: block; margin-top: 2px; }
.mode-switch { justify-self: center; display: flex; height: 100%; }
.mode { min-width: 116px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #6f7b77; text-transform: uppercase; font: 500 11px var(--mono); letter-spacing: .12em; cursor: pointer; transition: .2s ease; }
.mode span { color: #4f5b57; margin-right: 7px; }
.mode.active { color: var(--text); border-color: var(--orange); background: linear-gradient(to top, rgba(233,130,61,.08), transparent 70%); }
.mode.active span { color: var(--orange); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 15px; }
.sync-state { display: flex; gap: 7px; align-items: center; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }
.sync-state i, .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.credits { height: 34px; display: flex; gap: 8px; align-items: center; padding: 0 12px; border: 1px solid var(--line); background: #111817; }
.credits span { color: var(--orange); font: 12px var(--mono); }.credits strong { font: 11px var(--mono); }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #52615c; background: #25302d; font: 600 10px var(--mono); cursor: pointer; }

.workspace { min-height: 0; display: grid; grid-template-columns: 260px minmax(510px, 1fr) 292px; }
.panel { min-height: 0; background: var(--panel); }
.mission-panel { padding: 24px 20px 18px; display: flex; flex-direction: column; border-right: 1px solid var(--line); overflow-y: auto; }
.eyebrow-row, .section-label { display: flex; justify-content: space-between; align-items: center; }
.eyebrow { color: var(--orange); font: 500 9px var(--mono); letter-spacing: .16em; }
.difficulty { color: var(--cream); font: 14px var(--mono); }
.mission-number { margin-top: 27px; color: #697571; font: 8px var(--mono); letter-spacing: .14em; }
.mission-panel h1 { font-size: clamp(32px, 3.1vw, 47px); line-height: .91; letter-spacing: -.055em; margin: 9px 0 14px; }
.mission-copy { font-size: 11px; color: #a8b2ae; line-height: 1.65; margin: 0 0 17px; }
.briefing-image { height: 135px; overflow: hidden; border: 1px solid var(--line); position: relative; clip-path: polygon(0 0,94% 0,100% 12%,100% 100%,0 100%); }
.briefing-image svg { width: 100%; height: 100%; display: block; filter: saturate(.75); }
.briefing-image span { position: absolute; left: 9px; bottom: 8px; padding: 4px 6px; background: rgba(8,13,12,.8); font: 7px var(--mono); letter-spacing: .14em; color: var(--cream); }
.objectives { margin-top: 21px; }
.section-label { color: #697571; font: 500 8px var(--mono); letter-spacing: .14em; margin-bottom: 7px; }
.section-label span { color: #9ca7a3; }
.objective { min-height: 36px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 9px; color: #aab3b0; transition: .3s; }
.objective b { color: #63706c; font: 8px var(--mono); }
.check { width: 13px; height: 13px; display: grid; place-items: center; border: 1px solid #52605b; }
.objective.complete { color: #dce2de; }.objective.complete .check { border-color: var(--mint); background: rgba(140,200,168,.14); }.objective.complete .check:after { content: "✓"; color: var(--mint); font-size: 9px; }.objective.complete b { color: var(--mint); }
.brief-button { margin-top: auto; min-height: 38px; border: 1px solid var(--line); background: transparent; color: #abb5b1; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }.brief-button span { color: var(--orange); margin-right: 8px; }

.build-stage { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: #101716; }
.build-stage:before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 52% 42%, rgba(102,131,123,.15), transparent 46%), linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; }
.stage-toolbar { position: absolute; z-index: 3; top: 14px; left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.stage-toolbar > * { pointer-events: auto; }
.tool-cluster { height: 34px; display: flex; background: rgba(18,25,23,.93); border: 1px solid var(--line); box-shadow: 0 6px 30px rgba(0,0,0,.2); }
.tool { width: 34px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #77847f; cursor: pointer; }.tool:hover,.tool.active { color: var(--cream); background: rgba(255,255,255,.05); }.tool-cluster > span { width: 5px; border-right: 1px solid var(--line); }
.view-status { display: flex; align-items: center; gap: 8px; color: #88948f; font: 8px var(--mono); letter-spacing: .12em; }.view-status kbd { font: inherit; padding: 6px 8px; color: #65706c; background: rgba(18,25,23,.93); border: 1px solid var(--line); }
#buildCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#buildCanvas.dragging { cursor: grabbing; }
.stage-hint { position: absolute; z-index: 3; top: 62px; left: 50%; transform: translateX(-50%); width: 234px; min-height: 53px; display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: 7px; padding: 8px 8px 8px 11px; background: rgba(29,39,36,.95); border: 1px solid rgba(233,130,61,.26); box-shadow: 0 12px 32px rgba(0,0,0,.25); transition: .25s; }
.stage-hint.hidden { opacity: 0; transform: translate(-50%,-8px); pointer-events: none; }.hint-icon { color: var(--orange); font-size: 20px; }.stage-hint p { margin: 0; font-size: 8px; color: #899691; line-height: 1.5; }.stage-hint p b { color: #dbe1dd; font-size: 9px; }.stage-hint button { border:0;background:transparent;color:#67736f;cursor:pointer;align-self:start; }
.axis-widget { position: absolute; right: 19px; bottom: 133px; width: 54px; height: 52px; font: 7px var(--mono); }.axis-widget span { position:absolute;width:6px;height:6px;border-radius:50%;background:#bec7c3;left:24px;top:23px; }.axis-widget i { position:absolute;font-style:normal }.axis-widget .z { color:#7bbd9c; left:25px; top:0 }.axis-widget .z:after { content:"";position:absolute;width:1px;height:20px;background:#7bbd9c;left:3px;top:9px }.axis-widget .x { color:#e77f5c; right:0; bottom:3px }.axis-widget .x:before { content:"";position:absolute;width:24px;height:1px;background:#e77f5c;right:9px;bottom:4px;transform:rotate(-22deg);transform-origin:right }.axis-widget .y { color:#6e94c3; left:0; bottom:3px }
.parts-dock { position: absolute; z-index: 4; height: 105px; bottom: 12px; left: 14px; right: 14px; display: flex; align-items: stretch; gap: 1px; padding: 7px; background: rgba(17,24,22,.96); border: 1px solid var(--line); box-shadow: 0 -8px 35px rgba(0,0,0,.18); }
.dock-label { width: 58px; flex:0 0 58px; display:flex; flex-direction:column; justify-content:center; padding-left:5px; font:500 8px var(--mono);letter-spacing:.1em;color:#a1aba7}.dock-label small{font-size:6px;color:#596560;margin-top:4px}
.part-card { min-width: 132px; flex:1 1 145px; display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr;align-items:center;text-align:left;position:relative;border:1px solid transparent;background:#19211f;cursor:pointer;padding:8px;transition:.2s;overflow:hidden}.part-card:hover{background:#202b28;border-color:rgba(233,130,61,.3);transform:translateY(-2px)}.part-card>span:nth-child(2){min-width:0}.part-card b{font-size:8px;display:block;white-space:nowrap}.part-card small{display:block;font:6.5px var(--mono);color:#68746f;margin-top:4px;white-space:nowrap}.part-card em{position:absolute;right:5px;top:5px;font:7px var(--mono);color:#73807b;font-style:normal}
.part-visual{position:relative;width:42px;height:52px;display:block}.wheel-visual{border:5px solid #2e3835;border-radius:50%;box-shadow:inset 0 0 0 2px #707b77;transform:rotateY(35deg)}.wheel-visual i{position:absolute;inset:10px;border-radius:50%;border:2px solid #bb7d4e}.motor-visual{width:37px;height:31px;margin:auto;background:#b46b3b;border:2px solid #d48a50;transform:skewY(-7deg)}.motor-visual:before{content:"";position:absolute;left:-7px;top:7px;width:7px;height:16px;background:#596662}.motor-visual i{position:absolute;right:-8px;top:11px;width:8px;height:7px;background:#8f9b96}.brace-visual{height:15px;margin-top:17px;border:4px solid #8d9994;transform:rotate(-32deg)}.brace-visual i,.brace-visual:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#1a2321;top:1px}.brace-visual i{left:2px}.brace-visual:after{right:2px}
.add-part{width:69px;flex:0 0 69px;border:1px dashed #46534f;background:transparent;color:#697570;cursor:pointer}.add-part:hover{border-color:var(--orange);color:var(--orange)}.add-part span{display:block;font-size:19px;font-weight:300}.add-part small{font:6px var(--mono);text-transform:uppercase}

.inspector-panel { padding: 22px 17px 14px; display:flex;flex-direction:column;border-left:1px solid var(--line);overflow-y:auto; }
.inspector-header{display:flex;justify-content:space-between}.inspector-header h2{font-size:16px;margin:5px 0 0;letter-spacing:-.02em}.inspector-header button{border:0;background:transparent;color:#697570;cursor:pointer}
.health-card{margin-top:18px;padding:14px;background:#111817;border:1px solid var(--line)}.health-score{display:flex;align-items:center;gap:11px}.score-ring{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) 0 82%,#28322f 82%);position:relative}.score-ring:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#111817}.score-ring span{position:relative;font:500 14px var(--mono)}.health-score strong{font:500 8px var(--mono);letter-spacing:.12em}.health-score p{font-size:8px;color:#74817c;margin:4px 0 0}.health-bars{margin-top:13px;display:grid;gap:7px}.health-bars label{display:grid;grid-template-columns:55px 1fr 20px;align-items:center;gap:7px;color:#77837e;font:7px var(--mono)}.health-bars i{height:3px;background:#2a3431}.health-bars i b{height:100%;width:var(--value);display:block;background:#8faaa0;transition:.4s}.health-bars em{font-style:normal;text-align:right;color:#aab4b0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-top:0}.stat-grid>div{padding:11px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:65px}.stat-grid>div:nth-child(even){border-right:0}.stat-grid>div:nth-last-child(-n+2){border-bottom:0}.stat-grid span{display:block;font:6px var(--mono);letter-spacing:.12em;color:#67736f}.stat-grid strong{font:500 14px var(--mono);display:block;margin-top:7px}.stat-grid strong small{font-size:7px;color:#798580}.stat-grid i{font:6.5px var(--mono);font-style:normal;color:#606c68;display:block;margin-top:3px}.stat-grid i.good{color:var(--mint)}
.issue-card{display:grid;grid-template-columns:25px 1fr;gap:7px;margin-top:12px;padding:11px;background:rgba(226,100,80,.07);border:1px solid rgba(226,100,80,.24);transition:.3s}.issue-card.resolved{background:rgba(140,200,168,.07);border-color:rgba(140,200,168,.24)}.issue-icon{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--red);color:var(--red);font:10px var(--mono)}.resolved .issue-icon{border-color:var(--mint);color:var(--mint)}.issue-card strong{font:500 7px var(--mono);letter-spacing:.12em;color:#cf8c80}.resolved strong{color:var(--mint)}.issue-card p{font-size:8px;line-height:1.45;color:#88938f;margin:5px 0}.issue-card button{border:0;padding:0;background:transparent;color:var(--orange);font:7px var(--mono);text-transform:uppercase;cursor:pointer}
.materials-section{margin-top:14px}.material-row{display:grid;grid-template-columns:20px 1fr 27px;gap:8px;align-items:center;min-height:37px;border-bottom:1px solid rgba(255,255,255,.05)}.material-swatch{width:14px;height:14px;border:1px solid rgba(255,255,255,.15)}.aluminum{background:linear-gradient(135deg,#63726f,#afb8b5,#56645f)}.rubber{background:#272e2c}.steel{background:linear-gradient(135deg,#394743,#71807b)}.material-row b{font-size:7.5px;display:block}.material-row small{font:6px var(--mono);color:#697570;display:block;margin-top:3px}.material-row em{font:7px var(--mono);font-style:normal;color:#75817d;text-align:right}
.test-button{margin-top:auto;min-height:51px;border:0;background:var(--orange);color:#17110d;display:grid;grid-template-columns:31px 1fr 30px;align-items:center;text-align:left;padding:7px 11px;cursor:pointer;clip-path:polygon(0 0,96% 0,100% 20%,100% 100%,0 100%);transition:.2s}.test-button:hover{background:#f39450;transform:translateY(-1px)}.test-button.running{background:var(--mint)}.play-icon{width:25px;height:25px;border-radius:50%;border:1px solid rgba(0,0,0,.35);display:grid;place-items:center;font-size:9px}.test-button b{font:700 10px var(--mono);letter-spacing:.1em;display:block}.test-button small{font:6px var(--mono);opacity:.65}.test-button kbd{font:7px var(--mono);background:rgba(0,0,0,.12);padding:4px}

dialog{color:var(--text)}dialog::backdrop{background:rgba(4,7,6,.72);backdrop-filter:blur(5px)}.smart-dialog,.design-dialog{width:min(520px,calc(100% - 28px));padding:0;border:1px solid #4d5a55;background:#17201e;box-shadow:0 30px 90px rgba(0,0,0,.55)}dialog[open]{animation:dialogIn .22s ease-out}@keyframes dialogIn{from{opacity:0;transform:translateY(12px) scale(.98)}}dialog form{padding:22px}.dialog-top{display:grid;grid-template-columns:38px 1fr 24px;gap:11px;align-items:center}.smart-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--orange);font-size:18px;background:rgba(233,130,61,.1);border:1px solid rgba(233,130,61,.3)}.dialog-top small{font:8px var(--mono);letter-spacing:.14em;color:var(--orange)}.dialog-top h2{font-size:20px;margin:3px 0 0;letter-spacing:-.035em}.dialog-top>button{align-self:start;border:0;background:transparent;color:#75817d;font-size:19px;cursor:pointer}.smart-dialog form>p{font-size:10px;color:#8f9a96;margin:15px 0}.connection-options{display:grid;gap:7px}.connection-options>button{min-height:70px;position:relative;display:grid;grid-template-columns:64px 1fr;align-items:center;text-align:left;border:1px solid var(--line);background:#121917;cursor:pointer;padding:7px 13px}.connection-options>button:hover{border-color:var(--orange);background:#1c2724}.connection-options b{font-size:11px;display:block}.connection-options small{font:7px var(--mono);color:#6e7a75}.connection-options em{position:absolute;right:9px;top:9px;font:6px var(--mono);font-style:normal;color:var(--mint);letter-spacing:.12em}.connection-art{width:53px;height:45px;position:relative;display:block}.connection-art:before{content:"";position:absolute;left:4px;top:19px;width:43px;height:7px;background:#66736f}.connection-art i{position:absolute;left:17px;top:7px;width:29px;height:29px;border-radius:50%;border:6px solid #2f3936;box-shadow:inset 0 0 0 2px #aa7046}.rotating-art:after{content:"↻";position:absolute;left:0;top:3px;color:var(--mint);font-size:14px}.powered-art:after{content:"⚡";position:absolute;left:1px;top:4px;color:var(--orange);font-size:13px}.fixed-art:after{content:"×";position:absolute;left:2px;top:5px;color:#94a09b}.dialog-note{display:grid;grid-template-columns:25px 1fr;gap:8px;margin-top:13px;padding:10px;background:rgba(140,200,168,.06);border-left:2px solid var(--mint)}.dialog-note span{color:var(--mint)}.dialog-note p{font-size:8px;line-height:1.5;color:#7f8c87;margin:0}.dialog-note b{color:#bac3bf}
.part-studio{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:18px}.sketch-surface{height:245px;position:relative;display:grid;place-items:center;overflow:hidden;background:#101715;border:1px solid var(--line)}.sketch-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(132,169,156,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(132,169,156,.08) 1px,transparent 1px);background-size:16px 16px}.plate-shape{position:relative;width:138px;height:75px;border:2px solid var(--orange);background:rgba(233,130,61,.08);transform:skewY(-4deg)}.plate-shape i{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid var(--orange)}.plate-shape i:nth-child(1){left:10px;top:10px}.plate-shape i:nth-child(2){right:10px;top:10px}.plate-shape i:nth-child(3){left:10px;bottom:10px}.plate-shape i:nth-child(4){right:10px;bottom:10px}.sketch-surface>span,.sketch-surface>b{position:absolute;font:7px var(--mono);color:var(--mint);font-weight:400}.sketch-surface>span{bottom:62px}.sketch-surface>b{right:35px;transform:rotate(-90deg)}.studio-controls{display:flex;flex-direction:column;gap:14px}.studio-controls label{font:7px var(--mono);text-transform:uppercase;color:#78847f}.studio-controls select{width:100%;margin-top:6px;padding:8px;background:#101715;border:1px solid var(--line);color:#c8d0cc;font:8px var(--mono)}.studio-controls label>div{display:flex;align-items:center;gap:8px;margin-top:8px}.studio-controls input{width:90px;accent-color:var(--orange)}.studio-controls output{font:8px var(--mono);color:#d5dcd8}.method>span,.quote>span{display:block;font:7px var(--mono);color:#78847f;margin-bottom:6px}.method button{width:100%;padding:7px;border:1px solid var(--line);background:#101715;color:#83908a;text-align:left;font:8px var(--mono);cursor:pointer}.method button.selected{border-color:var(--orange);color:var(--orange)}.quote{margin-top:auto}.quote strong{font:500 17px var(--mono);display:block}.quote small{font:7px var(--mono);color:#6f7b76}.manufacture-button{width:100%;height:42px;margin-top:15px;border:0;background:var(--orange);color:#16110e;font:700 9px var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.manufacture-button span{float:right;margin-right:8px}
.toast{position:fixed;z-index:30;left:50%;bottom:22px;transform:translate(-50%,90px);opacity:0;display:flex;align-items:center;gap:9px;min-width:270px;padding:10px 14px;background:#e9eee9;color:#15201c;box-shadow:0 18px 50px rgba(0,0,0,.4);transition:.32s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast>span{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#78ad91;color:white}.toast p{margin:0;font-size:9px}.toast small{display:block;font:7px var(--mono);color:#5a6963;margin-top:2px}

@media (max-width: 1080px) {.workspace{grid-template-columns:220px minmax(480px,1fr) 260px}.topbar{grid-template-columns:240px 1fr 240px}.mode{min-width:92px}.part-card:nth-of-type(3){display:none}.mission-panel{padding-left:15px;padding-right:15px}.inspector-panel{padding-left:12px;padding-right:12px}}
@media (max-width: 850px) {body{overflow:auto}.app-shell{min-height:100dvh;height:auto;grid-template-rows:60px auto}.topbar{position:sticky;top:0;grid-template-columns:1fr auto;padding:0 12px}.brand small,.sync-state,.credits{display:none}.mode-switch{position:fixed;z-index:10;bottom:0;left:0;right:0;height:58px;background:#111817;border-top:1px solid var(--line)}.mode{flex:1}.top-actions{grid-column:2}.workspace{display:flex;flex-direction:column}.mission-panel{height:118px;min-height:118px;padding:13px 18px;display:block}.mission-number{display:none}.mission-panel h1{font-size:28px;line-height:1;margin:11px 0 0}.mission-panel h1 br{display:none}.mission-panel h1 br:after{content:" ";}.mission-copy{display:none}.briefing-image,.objectives,.brief-button{display:none}.build-stage{height:calc(100dvh - 230px);min-height:570px;order:1}.mission-panel{order:0}.inspector-panel{order:2;min-height:620px}.parts-dock{overflow-x:auto}.dock-label{display:none}.part-card{min-width:145px}.stage-hint{top:58px}.test-button{margin-bottom:64px}.part-studio{grid-template-columns:1fr}.sketch-surface{height:190px}}
@media (max-width: 520px) {.top-actions .avatar{display:none}.brand strong{font-size:12px}.build-stage{min-height:530px}.parts-dock{height:92px}.part-card{min-width:132px}.add-part{min-width:64px}.axis-widget{bottom:115px}.smart-dialog form,.design-dialog form{padding:15px}.connection-options>button{min-height:63px}.part-studio{max-height:60dvh;overflow-y:auto}}

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