:root{color-scheme:dark;--bg:#0c1310;--panel:#141e18;--line:#2d3a2f;--ink:#eef0e6;--muted:#9ca99e;--accent:#d5b77a;--green:#b5ccad;--danger:#ed9f91;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 55% 15%,#26372a66,transparent 55%),var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer;border:1px solid var(--line);background:#202c23;color:var(--ink);padding:11px 14px;border-radius:7px;transition:background .18s,border-color .18s,transform .18s}button:hover:enabled{background:#2d3c2e;border-color:#75866b}button:active:enabled{transform:translateY(1px)}button:disabled{opacity:.38;cursor:not-allowed}button.active{color:var(--accent);border-color:#998353;background:#413b263f}.primary{background:var(--accent);color:#182218;font-weight:700;border-color:var(--accent)}.primary:hover:enabled{background:#e6ca91}.danger{background:#5f3029;border-color:#a35e50;color:#ffe6dc}.subtle{background:transparent}a{color:var(--green);text-decoration:none}header{min-height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:18px 3%;gap:20px}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);font-size:15px;font-weight:700;letter-spacing:2px}.brandmark{display:grid;place-items:center;width:43px;height:43px;background:#c2ac75;color:#142019;font:700 32px Georgia,serif;transform:rotate(-4deg);border-radius:4px}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:1.6px;margin-top:6px}.header-actions{display:flex;align-items:center;gap:10px}.badge{font-size:9px;letter-spacing:1.4px;border:1px solid #65745c;padding:8px 10px;border-radius:4px;color:var(--green)}.portal{font-size:11px;padding:5px}.eyebrow{font-size:9px;letter-spacing:1.6px;color:var(--accent);font-weight:600}main{max-width:1920px;margin:auto;padding:32px 3% 0}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(26px,2.4vw,40px);letter-spacing:-1px;margin:10px 0 6px}.intro p{color:var(--muted);font-size:12px;line-height:1.7;margin:0}#notice{padding:12px 15px;border:1px solid var(--line);border-radius:6px;margin-bottom:20px;line-height:1.5;color:var(--green);font-size:12px}#notice.error{color:#ffc4b7;border-color:#945f52}.studio{display:grid;grid-template-columns:245px minmax(0,1fr) 280px;gap:16px;align-items:start}.panel,.viewport-panel{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:linear-gradient(145deg,#19251c,#121b16);box-shadow:0 18px 35px #0002}.panel{padding:21px 18px}.panel-heading{display:flex;align-items:center;gap:11px;margin-bottom:20px}.panel-heading small{font-size:8px;letter-spacing:1.5px;color:var(--muted)}h2{font-size:15px;letter-spacing:-.3px;font-weight:550;margin:5px 0}.step{font:italic 24px Georgia;color:#a6b99588}.divider{height:1px;background:var(--line);margin:23px 0}form{margin:0}fieldset{padding:0;margin:0;border:0;min-width:0}label{display:block;font-size:11px;font-weight:500;color:#b9c5b9;margin-bottom:15px}input:not([type=checkbox]):not([type=range]),select,textarea{width:100%;padding:11px 10px;background:#0c1510;border:1px solid #354438;color:#edf0e5;border-radius:6px;margin-top:7px;min-width:0}input:focus,select:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical;line-height:1.6}.coordinates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.coordinates input{padding:11px 6px!important}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.full{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:12px}.primary.full{margin-top:3px}.hint{font-size:10px;line-height:1.7;color:var(--muted);margin:13px 0 0}.view-buttons{display:flex;gap:5px}.view-buttons button{padding:9px 8px;font-size:10px;flex:1}.range-label{margin-top:22px}.range-label output{float:right;color:var(--accent)}input[type=range]{display:block;width:100%;accent-color:var(--accent);margin:14px 0}.check{display:flex;align-items:center;gap:8px;font-weight:400;line-height:1.5}.check input{accent-color:var(--accent);width:14px;height:14px;flex-shrink:0;margin:0}.region-card{margin-top:19px;padding:12px 10px;background:#0d1711;border-radius:6px;display:flex;gap:8px;font-size:9px;line-height:1.6;color:var(--muted)}.dot{width:5px;height:5px;background:var(--green);border-radius:100%;flex-shrink:0;margin-top:5px}.viewport-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;gap:8px}.viewport-top h2{font:24px Georgia,serif;margin-top:8px}#viewport{height:530px;position:relative;background:#b9c9bb;isolation:isolate;overflow:hidden}#viewport canvas{width:100%;height:100%;display:block;touch-action:none}.render-status{position:absolute;inset:45% 12% auto;text-align:center;background:#172319dc;border:1px solid #6e8063;border-radius:7px;color:#e3e7d4;padding:14px;font-size:11px;pointer-events:none}.compass{position:absolute;right:20px;top:20px;color:#2b4730;font-size:10px;display:flex;flex-direction:column;text-align:center;pointer-events:none}.compass span{font-size:28px}.viewport-caption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(transparent,#09180aa1);display:flex;justify-content:space-between;color:#f4f5e9;font-size:9px;letter-spacing:1.2px;pointer-events:none}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 15px;overflow:auto}.tabs button{background:none;border:0;border-radius:0;font-size:11px;padding:18px 12px;white-space:nowrap}.tabs button.active{border-bottom:2px solid var(--accent)}.details{padding:20px 23px;min-height:180px;font-size:12px;color:var(--muted);line-height:1.7}.details h3{color:var(--ink);font:21px Georgia;margin:0 0 10px}.details p{margin:6px 0 12px}.details ul{padding-left:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat{padding:12px;border-left:1px solid var(--line);font-size:9px;letter-spacing:.6px}.stat strong{font:23px Georgia;color:var(--ink);display:block;margin-top:5px}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.chips label{margin:0;padding:6px 9px;border:1px solid var(--line);border-radius:5px;font-size:10px;gap:5px;display:flex}.materials{max-height:300px;overflow:auto}.material{display:flex;align-items:center;justify-content:space-between;padding:8px;border-bottom:1px solid var(--line);font-size:11px}.swatch{display:inline-block;width:24px;height:24px;image-rendering:pixelated;vertical-align:middle;margin-right:10px}.material strong{color:var(--accent)}.signature{font-size:8px;letter-spacing:1.5px;line-height:1.8;color:var(--muted);margin:27px 0 2px}.signature span{color:var(--accent)}.visitor-note{padding:13px;background:#c6ad7220;border:1px solid #c6ad7244;border-radius:6px;font-size:11px;line-height:1.6;color:#d5c99e;margin-top:18px}footer{display:flex;justify-content:space-between;gap:20px;color:#778879;font-size:9px;letter-spacing:1px;padding:28px 0}dialog{background:#17241b;color:var(--ink);border:1px solid #607254;border-radius:14px;max-width:540px;width:calc(100% - 28px);padding:27px;box-shadow:0 35px 100px #0009;max-height:90dvh;overflow:auto}dialog::backdrop{background:#060d09bf;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}.dialog-head h2{font:27px Georgia;margin:8px 0}.dialog-head button{font-size:22px;padding:3px 10px}dialog p{color:var(--muted);line-height:1.7;font-size:12px}.result{padding:15px;background:#0a130d;border:1px solid var(--line);border-radius:7px;margin:20px 0;font-size:12px;line-height:1.8;white-space:pre-line}.error{color:#ffb3a2}.project-item{display:block;text-align:left;width:100%;margin-top:12px;padding:15px}.project-item small{display:block;color:var(--muted);font-size:10px;margin-top:7px}#newForm{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:20px}progress{width:100%;accent-color:var(--accent)}[hidden]{display:none!important}@media(min-width:1600px){.studio{grid-template-columns:270px minmax(0,1fr) 300px}#viewport{height:610px}}@media(max-width:1150px){.studio{grid-template-columns:210px minmax(0,1fr)}.design{grid-column:1/-1}.design form fieldset{display:grid;grid-template-columns:2fr 1fr 1fr;column-gap:20px}.design form fieldset>label:first-child{grid-row:1/4}.design .hint{max-width:700px}.design .signature{display:none}#ownerActions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#ownerActions .full{width:auto;margin:0}#viewport{height:500px}.portal{display:none}}@media(max-width:700px){header{padding:15px;min-height:75px}.brand{font-size:11px;letter-spacing:1px}.brand small{display:none}.brandmark{width:32px;height:32px;font-size:25px}.header-actions{gap:7px}.header-actions button{font-size:10px;padding:9px}.header-actions .badge{display:none}main{padding:24px 13px 0}.intro{display:block}.intro p{font-size:11px;margin-top:12px}.intro h1{font-size:28px}.studio{display:flex;flex-direction:column}.panel,.viewport-panel{width:100%}.viewport-panel{order:0}.site{order:1}.design{order:2}.panel{padding:20px}.site form fieldset{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.site .coordinates,.site .two,.site button.full{grid-column:1/-1}.site .hint{font-size:11px}.site .divider{margin:18px 0}.site .range-label{margin-top:17px}.design form fieldset{display:block}#viewport{height:400px}.viewport-top{padding:18px}.viewport-top h2{font-size:21px}.details{padding:18px}.tabs{padding:0 7px}.tabs button{padding:15px 11px}.stats{gap:5px}.stat{padding:9px;font-size:8px}.stat strong{font-size:20px}footer{font-size:8px;line-height:1.8}.eyebrow{font-size:8px}.badge{font-size:8px}#notice{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Material-led studio refinement. All effects are decorative and keep the controls in place. */
:root{--bg:#111511;--panel:#1c231c;--line:#394436;--ink:#f2f0e6;--muted:#a7afa0;--accent:#d9bc83;--green:#c4cfb7}body{background:radial-gradient(ellipse at 58% 0,#37432a55,transparent 64%),radial-gradient(ellipse at 4% 80%,#302d2033,transparent 60%),#101510}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.7' d='M0 0h140v140H0z'/%3E%3C/svg%3E")}header{background:linear-gradient(180deg,#242d20c4,#151d15c4);box-shadow:0 1px 0 #c5cfb40c,0 18px 60px #0002;min-height:82px}.brandmark{background:linear-gradient(145deg,#e8d09c,#a98e5e);box-shadow:inset 1px 1px 0 #fff5,2px 5px 9px #0006;transform:none;border:1px solid #d9bc8380}.brand{letter-spacing:2.2px}.brand small{color:#aab59c}.intro{padding:13px 0 18px;margin-bottom:15px}.intro h1{font-size:clamp(30px,3.1vw,49px);font-weight:400;line-height:1.15;letter-spacing:-1.8px;margin-top:12px}.intro h1 em{font-weight:400;color:#d4bb8a}.intro p{font-size:12px;line-height:1.9;max-width:325px;color:#b1baa7}#notice{background:linear-gradient(100deg,#2a352357,#1e291950);border-color:#42513a7d;box-shadow:inset 0 1px 0 #e4eccc05;padding:12px 16px}.studio{gap:20px}.panel,.viewport-panel{background:linear-gradient(155deg,#263021ee,#1b231bee 50%,#161e17);border:1px solid #47503c80;box-shadow:inset 0 1px 0 #eff7de0a,0 12px 24px #0002,0 35px 65px #0003;border-radius:13px}.panel{padding:24px 19px}.panel-heading{gap:12px;margin-bottom:22px}.step{color:#bfa77699;font-size:29px}.panel-heading small{font-size:8px;letter-spacing:1.8px;color:#aeb89f}.panel-heading h2{font-size:15px;margin-top:7px;line-height:1.35}.divider{background:linear-gradient(90deg,#48563c99,transparent)}button{background:linear-gradient(165deg,#3a4530,#263121);border-color:#535f4380;box-shadow:inset 0 1px 0 #ebf5d70a,0 2px 4px #0002;color:#e7eadc}button:hover:enabled{background:linear-gradient(165deg,#4b583c,#34402d);border-color:#9aa87d}.primary{background:linear-gradient(145deg,#e2c68b,#c4a66a);border-color:#d5ba84;color:#202719;box-shadow:inset 0 1px 0 #fff6,0 3px 9px #0003}.primary:hover:enabled{background:linear-gradient(145deg,#f0d89f,#d2b678)}button.active{background:#c5ac6926;border-color:#bea06570;box-shadow:inset 0 1px 0 #e4d19b12}button:disabled{opacity:.46}label{color:#bdc5b1;font-size:11px}input:not([type=checkbox]):not([type=range]),select,textarea{background:linear-gradient(180deg,#0f170f,#141c13);border-color:#44503a99;box-shadow:inset 0 2px 4px #0003;color:#e8e9df;border-radius:7px}input:focus,textarea:focus,select:focus{outline:2px solid #d2ba7822;border-color:#b5a26f}.viewport-top{padding:23px 24px;background:linear-gradient(100deg,#35402c44,transparent)}.viewport-top h2{font-size:26px;letter-spacing:-.6px;margin-top:9px}.viewport-top .badge{background:#aebf8920;border-color:#8e9b6a55;font-size:8px;color:#d4dbbe}#viewport{background:#b5c4c4;isolation:isolate;height:550px}#viewport:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 75px #18282125;background:linear-gradient(180deg,#e1e7ce08,transparent 22%,transparent 80%,#14261c18)}.scene-label{position:absolute;top:20px;left:22px;z-index:3;display:flex;align-items:center;gap:8px;color:#34473b;font-size:8px;letter-spacing:1.8px;background:#f1edda73;padding:9px 11px;border:1px solid #ffffff52;border-radius:5px;backdrop-filter:blur(8px);pointer-events:none}.scene-dot{width:5px;height:5px;border-radius:50%;background:#847944;box-shadow:0 0 7px #b6a768}.compass{right:24px;top:20px;z-index:3;color:#354b40}.compass span{font-family:Georgia;font-size:26px}.viewport-caption{padding:24px 23px 17px;z-index:3;background:linear-gradient(transparent,#17291eaf);font-size:8px;letter-spacing:1.3px;color:#eef1df}.render-status{z-index:5;background:#1b2a1ce8;border-color:#9aa77d;border-radius:9px;box-shadow:0 10px 35px #0003}.tabs{padding:0 17px;background:#11190f55;border-bottom-color:#48533a66}.tabs button{font-size:11px;box-shadow:none;padding:17px 14px}.tabs button.active{color:#e2c88e}.details{padding:23px 25px;background:linear-gradient(180deg,#1d281b66,transparent);min-height:190px}.details h3{font-size:23px;letter-spacing:-.4px}.stat{background:linear-gradient(120deg,#c2c68b08,transparent);border-left-color:#7a88612b;border-radius:0 6px 6px 0;padding:13px}.stat strong{font-size:25px;color:#e9e9d7}.chips label{background:#11190f5c;border-color:#63704d60;color:#b7c1a6;font-size:10px}.hint{color:#9eac93;line-height:1.8}.region-card{background:#0e170fcc;border:1px solid #4b5c383b;border-radius:7px;padding:12px 11px}.region-card .dot{background:#c6d99a;box-shadow:0 0 8px #b2d37730}.visitor-note{background:linear-gradient(135deg,#c6ad7220,#c6ad720a);border-color:#c6ad7238;color:#d3c8a8}.signature{font-size:8px;line-height:2;letter-spacing:1.6px}.sunlight{padding-top:9px;border-top:1px solid #66734d33}.sunlight output{color:#ddc78e}dialog{background:linear-gradient(155deg,#303b28,#1a241a);border-color:#87916680;box-shadow:inset 0 1px 0 #ffffff15,0 40px 120px #000b}dialog::backdrop{background:#071007c9}.result{background:#0c140e;border-color:#52643d88}.project-item{text-align:left;background:linear-gradient(140deg,#34442a,#25321f);padding:17px}.material{padding:10px;border-bottom-color:#6a765028}footer{border-top:1px solid #6a765025;margin-top:28px;padding:23px 0;color:#8b997c;font-size:8px;letter-spacing:1.4px}@media(min-width:1600px){#viewport{height:630px}}@media(max-width:1150px){#viewport{height:520px}.studio{gap:16px}.design{padding:24px}.intro h1{font-size:38px}}@media(max-width:700px){header{min-height:72px;background:#202b1c;padding:14px 15px}.intro{padding:8px 2px 11px}.intro h1{font-size:34px;letter-spacing:-1.1px}.intro p{font-size:11px;line-height:1.8;max-width:none}.intro .eyebrow{font-size:8px;letter-spacing:1.5px}.studio{gap:17px}.viewport-top{padding:19px}.viewport-top h2{font-size:23px}#viewport{height:415px}.scene-label{left:16px;top:16px;font-size:7px;padding:8px 9px}.compass{top:16px;right:18px}.viewport-caption{padding:22px 15px 16px;font-size:7px;letter-spacing:1px}.tabs{padding:0 8px}.tabs button{padding:16px 12px;font-size:11px}.details{padding:20px}.details h3{font-size:22px}.panel{padding:22px}.panel-heading{margin-bottom:22px}.header-actions button{font-size:10px;padding:9px 10px}.stats .stat{padding:10px;font-size:8px}.stat strong{font-size:22px}.range-label{margin-top:20px}footer{margin-top:23px;font-size:7px}.brandmark{width:33px;height:33px}.brand{font-size:10px;letter-spacing:1.4px}}
#viewport[data-light=night] .compass{color:#d3dfd5}#viewport[data-light=night] .scene-label{color:#dce7e2;background:#253a52b3;border-color:#dae7ec40}.sunlight input{cursor:ew-resize}
