:root{font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;color:#e4f1fb;background:#08131f;--panel:#102539;--line:#32516b;--muted:#a7becf;--accent:#55e5ba}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 900px 400px at 65% 0,#133957 0,transparent 70%),#08131f}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:#86eac8}header{border-bottom:1px solid #254056;background:#0a1c2dfa}header .container{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:67px}header nav{display:flex;gap:17px;flex-wrap:wrap}header nav a{font-size:12px;text-decoration:none;color:#c3ddea;font-weight:700}.brand{color:#fff;text-decoration:none;font-size:26px;font-weight:900;letter-spacing:-1.5px}.brand span{color:#43dda9}.brand b{color:#ed6c8f}.container{width:min(1390px,calc(100% - 32px));margin:0 auto}.intro{padding:35px 0 25px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;color:#7ce6c8;font-size:11px;font-weight:850}.intro h1{font-size:clamp(29px,4.2vw,49px);line-height:1.14;letter-spacing:-.04em;margin:8px 0 10px}.intro p{max-width:860px;color:#b3cedb;margin:0;line-height:1.7}.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:26px 0}.tile{border:1px solid #35536a;border-radius:17px;background:linear-gradient(145deg,#13354a,#0d253b);padding:25px;color:#e7f7fc;text-decoration:none;display:flex;flex-direction:column;min-height:185px;gap:9px;transition:transform .15s,border-color .15s}.tile:hover{transform:translateY(-3px);border-color:#61c9ab}.tile .emoji{font-size:34px}.tile strong{font-size:18px}.tile small{color:#b5ccdc;font-size:13px;line-height:1.6}.tile span.open{margin-top:auto;color:#6ce7c0;font-weight:800}.surface{background:#102539;border:1px solid var(--line);border-radius:16px;padding:18px}.workspace{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr) minmax(230px,285px);gap:14px;align-items:start}.stack{display:grid;gap:14px}.surface h2{font-size:15px;margin:0 0 13px}.surface h3{font-size:13px;margin:12px 0 8px}.surface p,.note{color:var(--muted);font-size:12px;line-height:1.55}.buttons{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0}.buttons button,.btn,.upload{border:1px solid #477083;background:#183c51;color:#e9f9ff;border-radius:9px;padding:9px 12px;text-decoration:none;font-size:12px;font-weight:800}.buttons button:hover,.btn:hover,.upload:hover{border-color:#73e8c5}.buttons .primary,.btn.primary{background:#17836f;border-color:#2cae94;color:#fff}button:disabled{opacity:.5;cursor:not-allowed}.btn.block{display:block;width:100%;text-align:center}.field{display:grid;gap:4px;margin:9px 0;font-size:12px;color:#c6dce7}.field input,.field select,.field textarea{width:100%;min-width:0;border:1px solid #4c6d81;background:#0c2538;border-radius:8px;padding:8px;color:white}.field input[type=color]{padding:1px;height:35px}.field input[type=file]{padding:6px;font-size:11px}.dims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.stage{position:relative;border:1px solid #355f78;border-radius:13px;min-height:480px;background:#0c1d2c;overflow:hidden}.stage canvas{display:block;width:100%;height:100%;touch-action:none}.stage-three{height:clamp(460px,64vh,760px)}.stage-svg{height:clamp(460px,66vh,790px)}.stage-svg svg{display:block;width:100%;height:100%;touch-action:none;background-color:#0d2635;background-image:linear-gradient(#173449 1px,transparent 1px),linear-gradient(90deg,#173449 1px,transparent 1px);background-size:24px 24px;cursor:crosshair}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.toolbar button{border:1px solid #53748a;background:#173448;border-radius:9px;padding:9px 10px;color:#e1f4ff;font-size:12px}.toolbar button.active{background:#0e786c;border-color:#6ce7c0}.count{font-size:26px;font-weight:850;color:#64e8c3}.scroll-list{list-style:none;padding:0;margin:0;max-height:315px;overflow:auto}.scroll-list li{border-bottom:1px solid #2c4b5e;padding:7px 3px;display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12px}.scroll-list li button{background:#22425b;border:1px solid #506b83;color:#fff;border-radius:7px;padding:5px 8px}.scroll-list li.selected{background:#16454d}.tag{display:inline-block;font-size:11px;border:1px solid #347766;color:#84eac9;padding:5px 9px;border-radius:99px}.warning{border-left:3px solid #e3a357;padding:11px;background:#392d20;color:#f3d29c;border-radius:7px;font-size:12px;line-height:1.6}.status{min-height:30px;color:#b0ecca;background:#104035;border-radius:8px;padding:9px;font-size:12px}.center{text-align:center}.divider{border:0;border-top:1px solid #355269;margin:17px 0}.mini{font-size:11px;color:#a3c0cd}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.steps>div{padding:15px;background:#112e43;border:1px solid #365269;border-radius:12px}.steps p{color:#bdd2db;font-size:12px}.action-rows{display:flex;gap:10px;flex-wrap:wrap}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.tabs a{padding:9px 12px;background:#133246;color:#b9e9df;border:1px solid #366578;border-radius:9px;font-size:12px;text-decoration:none}footer{padding:26px 0;color:#9bb5c3;font-size:12px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #87eccd;outline-offset:2px}@media(max-width:1120px){.workspace{grid-template-columns:minmax(230px,290px) minmax(0,1fr)}.workspace>.stack:last-child{grid-column:1/-1;grid-template-columns:1fr 1fr}.tiles{grid-template-columns:repeat(2,1fr)}}@media(max-width:710px){header .container{display:block;padding:13px 0}header nav{gap:11px;margin-top:8px}.workspace{grid-template-columns:1fr}.workspace>.stack:last-child{grid-column:auto;grid-template-columns:1fr}.tiles{grid-template-columns:1fr}.intro{padding:26px 0 13px}.surface{padding:13px}.stage-three,.stage-svg{height:480px}.steps{grid-template-columns:1fr}}
@media print{header,.intro p,.toolbar,.buttons,.stack:not(.print-area),footer,.no-print,.warning{display:none!important}body{background:#fff;color:#111}main,.container,.workspace,.surface{margin:0;padding:0;display:block;width:100%;max-width:none;box-shadow:none;border:0;color:#111;background:white}.stage,.stage-svg{background:#fff;border:0;height:auto}.stage-svg svg{background:white;max-height:none;height:auto}svg text{fill:#111!important}}
/* Premium engineering product design system — visual-only overrides */
:root{--premium-bg:#081625;--premium-panel:#10283c;--premium-ink:#eef7ff;--premium-border:#36556a;--premium-muted:#a9c1d0;--premium-green:#73e8c4;color-scheme:dark}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse 1000px 470px at 10% -10%,#1e4a60 0,transparent 70%),radial-gradient(ellipse 600px 500px at 95% 25%,#112b48 0,transparent 70%),#091825;color:var(--premium-ink);-webkit-font-smoothing:antialiased}
header{background:#091b2ce8;backdrop-filter:blur(18px);border-color:#35536a66}
header .container{min-height:78px}
header nav a{padding:10px 13px;border-radius:10px;border:1px solid transparent;color:#bfd7e5;transition:background .16s,border-color .16s}
header nav a:hover{background:#1e4153;border-color:#3c6873;color:#fff;text-decoration:none}
.brand{letter-spacing:-1.8px;font-size:29px}
.intro{padding:38px 0 28px}
.intro h1{font-weight:870;letter-spacing:-.055em;font-size:clamp(37px,4.9vw,62px);line-height:1.08;color:#f2fdff;max-width:1050px;margin:12px 0}
.intro p{max-width:950px;font-size:14px;line-height:1.7;color:#b1cbd9}
.eyebrow{font-size:10px;color:#83e9cb}
.tabs{padding:0 0 5px;margin-bottom:16px}
.tabs a{padding:10px 14px;background:#152e43;border-color:#426379;border-radius:10px;font-weight:760;transition:background .17s,border-color .17s}
.tabs a:hover{background:#1a4e53;border-color:#55bbab}
.surface{background:linear-gradient(156deg,#173449 0%,#10283b 100%);border:1px solid #34566e;border-radius:20px;padding:clamp(15px,2vw,24px);box-shadow:0 18px 46px #020c1b2c}
.surface h2{font-size:17px;font-weight:850;letter-spacing:-.03em;color:#eef8ff;margin:0 0 16px}
.surface h3{letter-spacing:-.02em;font-weight:800;color:#cbe8e9}
.surface p,.mini{line-height:1.7}
.field{font-size:12px;color:#d1e4ed;font-weight:680;letter-spacing:.015em}
.field input,.field textarea,.field select{background:#0b2437;border:1px solid #43657a;min-height:42px;border-radius:10px;padding:10px;color:#f2faff;transition:border-color .17s,box-shadow .17s}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid #6edebc;outline-offset:1px;box-shadow:0 0 0 4px #55b3a317}
.buttons{gap:8px;margin:13px 0}.buttons button,.btn,.upload,.toolbar button{border-radius:10px;padding:11px 13px;min-height:39px;font-size:12px;font-weight:760;transition:transform .16s,border-color .16s,background .16s}
.buttons button:hover:not(:disabled),.btn:hover,.toolbar button:hover:not(:disabled){transform:translateY(-1px);border-color:#7deec9}
.buttons .primary,.btn.primary,.toolbar button.active{background:linear-gradient(115deg,#147b7e,#1e997f);border-color:#47bda8;color:#effff9}
.stage{border:1px solid #416c80;border-radius:15px;box-shadow:inset 0 0 36px #09152155;overflow:hidden}
.stage-three{min-height:520px}.stage-svg{min-height:520px}
.stage-three canvas,.stage-svg svg{border-radius:14px}
.warning{background:#332a25;border-left:3px solid #e3ae75;border-radius:11px;padding:14px 16px;color:#e9cda8;line-height:1.65}
.status{background:#103f43;color:#abe9d5;border:1px solid #2b716a;padding:12px 15px;border-radius:11px;font-size:12px}
.scroll-list{max-height:400px}.scroll-list li{border-color:#2d4e61;padding:10px 6px}
.scroll-list li button{padding:8px 11px;border-radius:8px;font-weight:760}
.scroll-list li.selected{background:#1a4850;border-radius:8px}
.tag{background:#143c43;border-color:#34796f;padding:6px 10px;font-weight:700}
.tile{background:radial-gradient(circle at 88% 12%,#236b7329,transparent 47%),linear-gradient(150deg,#1a4254 0%,#112b3d 100%);border:1px solid #3a6278;border-radius:21px;min-height:236px;padding:28px;box-shadow:0 17px 40px #04101a40;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.tile:after{content:"";position:absolute;right:-30px;top:-60px;width:130px;height:130px;border:1px solid #7bdcc82e;border-radius:50%;pointer-events:none}
.tile:hover{transform:translateY(-5px);box-shadow:0 27px 48px #04131b77;border-color:#74d6bc}
.tile .emoji{font-size:37px;background:linear-gradient(130deg,#3b8292,#1b525f);border:1px solid #4b9b95;width:64px;height:64px;border-radius:17px;display:grid;place-items:center;color:#cbf8eb}
.tile strong{font-size:21px;letter-spacing:-.035em}.tile small{font-size:13px;line-height:1.7;max-width:280px}
.tile span.open{padding-top:18px;font-size:12px;letter-spacing:.025em;color:#83f1d0}
.studio-hub .intro{padding:61px 0 36px}.studio-hub .intro h1{font-size:clamp(45px,5.5vw,76px);max-width:980px}
.studio-hub .intro>p:last-child{font-size:16px;max-width:800px}
.studio-hub .tiles{margin:28px 0 29px;gap:19px}
.studio-hub .surface{margin-bottom:18px}
.studio-hub .steps>div{background:#133348;border:1px solid #406174;border-radius:14px;padding:22px}
.studio-hub .steps p{font-size:13px}
.workspace{gap:16px}.workspace>.stack{gap:16px}
.studio-cad .workspace{grid-template-columns:minmax(260px,315px) minmax(0,1fr) minmax(250px,290px)}
.studio-cad .surface h2:before,.studio-circuits .surface h2:before{content:"";display:inline-block;width:7px;height:7px;background:#64dcbc;border-radius:50%;margin-right:9px;vertical-align:3px}
.studio-circuits .stage-svg{box-shadow:0 8px 35px #03172455}
.studio-circuits .stage-svg svg{background-image:linear-gradient(#25425691 1px,transparent 1px),linear-gradient(90deg,#25425691 1px,transparent 1px);background-size:20px 20px}
@media(min-width:1121px){.studio-cad .workspace>.stack:nth-child(2) .stage-three{height:clamp(500px,67vh,810px)}}
@media(max-width:1120px){.studio-cad .workspace{grid-template-columns:minmax(240px,300px) minmax(0,1fr)}}
@media(max-width:710px){header .container{padding:13px 0}header nav a{padding:7px 9px}.intro{padding:27px 0 19px}.intro h1{font-size:36px}.tile{min-height:195px;padding:21px}.studio-cad .workspace{grid-template-columns:1fr}.surface{padding:16px}.stage-three,.stage-svg{height:500px}.studio-hub .intro{padding-top:34px}.studio-hub .intro h1{font-size:42px}}
/* Architectural light theme restricted to floor plan page. Tool event hooks stay untouched. */
body.studio-floor{color-scheme:light;background:radial-gradient(ellipse 1100px 440px at 30% -8%,#e6f2f6,transparent 71%),linear-gradient(180deg,#fbfdff,#f2f6fa);color:#173149}
.studio-floor header{background:#ffffffeb;border-color:#dbe7ef;box-shadow:0 5px 25px #29496110}
.studio-floor .brand{color:#172f48}.studio-floor header nav a{color:#395a70}.studio-floor header nav a:hover{background:#e9f4f1;border-color:#c6e5dc;color:#0d6c5e}
.studio-floor .intro h1{color:#132d43}.studio-floor .eyebrow{color:#137d75}.studio-floor .intro p{color:#5c7386}
.studio-floor .surface{background:#fff;color:#243c50;border:1px solid #dde8ef;box-shadow:0 18px 50px #11344c13}
.studio-floor .surface h2{color:#19354d}.studio-floor .surface h3{color:#345069}.studio-floor .surface p,.studio-floor .mini{color:#597288}
.studio-floor .field{color:#304c62}.studio-floor .field input,.studio-floor .field select,.studio-floor .field textarea{background:#f6f9fc;color:#19364a;border:1px solid #c9d9e3}
.studio-floor .buttons button,.studio-floor .btn,.studio-floor .upload,.studio-floor .toolbar button{background:#edf5f8;color:#244d64;border:1px solid #c8dce6}
.studio-floor .buttons .primary,.studio-floor .btn.primary,.studio-floor .toolbar button.active{background:linear-gradient(110deg,#126f88,#168d7e);color:white;border-color:#137b79}
.studio-floor .stage{background:#0e2c3a;border:1px solid #c0d4dd}
.studio-floor .status{background:#e5f6ef;color:#13694f;border-color:#b9e4d3}
.studio-floor .warning{background:#fff4e6;color:#794f28;border-color:#d7a676}
.studio-floor .scroll-list li{border-color:#e0e8f0}.studio-floor .scroll-list li button{background:#ecf4f9;color:#23485c;border:1px solid #cbdce7}
.studio-floor .scroll-list li.selected{background:#e5f5f1}.studio-floor .count{color:#16816a}.studio-floor .tag{background:#e8f5f2;color:#136d60;border-color:#b1ddd0}.studio-floor footer{color:#698294}
@media print{body,body.studio-floor{background:white!important;color:black!important}header,.intro,.tabs,.toolbar,.buttons,footer{box-shadow:none!important}body.studio-floor .surface{box-shadow:none!important;border:0!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile,.buttons button,.toolbar button{transition:none!important}}

.tile .emoji svg{width:37px;height:37px;display:block;stroke:currentColor}
