/* =====================================================================
   v13 UX: laptop-fit panels, collapsed-panel rails, fast tooltips, stronger active states, plan badge
   ===================================================================== */
@media (min-width:1101px){
  body{--pw:304px;--gl:calc(var(--pw) + 32px);--gr:calc(var(--pw) + 32px)}
  body.hide-left{--gl:84px}
  body.hide-right{--gr:84px}
  .panel{width:var(--pw)}
  .gizmo{right:var(--gr)}
  body.hide-right .gizmo{right:84px}
  .panel-handle.left{left:calc(var(--pw) + 22px)}
  .panel-handle.right{right:calc(var(--pw) + 22px)}
  /* the view bar, shortcut card and stat bar sit centred in the space between the panels, never under them */
  .viewbar,.hud.keys,.hud.statbar{left:calc((var(--gl) + 100vw - var(--gr)) / 2)}
  .viewbar{max-width:calc(100vw - var(--gl) - var(--gr) - 16px);overflow-x:auto;scrollbar-width:none;transition:left .35s cubic-bezier(.2,.8,.2,1)}
  .viewbar::-webkit-scrollbar{display:none}
  .hud.keys{transition:left .35s cubic-bezier(.2,.8,.2,1)}
}
@media (min-width:1101px) and (max-width:1440px){body{--pw:284px}}
@media (min-width:1101px) and (max-width:1280px){body{--pw:264px}.panel{padding-left:14px;padding-right:14px}}
.sunrow .play{white-space:nowrap;flex:none}
@media (min-width:1101px) and (max-width:1280px){
  .sunrow .spd button{padding:0 7px}
  .viewbar button{padding:0 10px}
}

/* collapsed panel: a slim rail of section icons stays on screen */
.prail{position:fixed;top:76px;z-index:12;display:none;flex-direction:column;gap:4px;padding:6px;border-radius:18px}
.prail.left{left:16px}.prail.right{right:16px}
@media (min-width:1101px){body.hide-left .prail.left,body.hide-right .prail.right{display:flex;animation:railIn .35s cubic-bezier(.2,.8,.2,1) both}}
@keyframes railIn{from{opacity:0;transform:translateX(var(--rx,-10px))}}
.prail.right{--rx:10px}
.prail button{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--mut);transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.prail button:hover{background:rgba(var(--ov),.1);color:var(--txt);transform:scale(1.06)}
.prail button.on{color:var(--amber);background:rgba(255,179,71,.14);box-shadow:inset 0 0 0 1px rgba(255,179,71,.45)}
.prail button svg{width:18px;height:18px}
.prail hr{width:22px;height:1px;border:0;margin:3px auto;background:rgba(var(--ov),.16)}

/* one fast tooltip for every control (replaces the slow native ones and the old CSS-only tips) */
.icon-btn[data-tip]::after,.bm-tools button::after,:is(.bm-ib,.bm-view button)[data-tip]::after{content:none!important;display:none!important}
#uiTip{position:fixed;z-index:200;left:0;top:0;pointer-events:none;display:flex;align-items:center;gap:8px;max-width:280px;padding:6px 10px;border-radius:9px;
  font:600 12px/1.3 var(--font);color:#f4f6fa;background:rgba(16,19,26,.94);box-shadow:0 8px 24px -8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.08);
  opacity:0;transform:translateY(4px) scale(.98);transition:opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
#uiTip.on{opacity:1;transform:none}
#uiTip kbd{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 6px;border-radius:5px;color:#ffcf8a;background:rgba(255,179,71,.14);box-shadow:inset 0 0 0 1px rgba(255,179,71,.35);white-space:nowrap}
:root[data-theme="light"] #uiTip{color:#14203a;background:rgba(255,255,255,.97);box-shadow:0 10px 26px -10px rgba(20,32,54,.35),inset 0 0 0 1px rgba(20,32,54,.1)}
:root[data-theme="light"] #uiTip kbd{color:#8a4a06;background:rgba(242,138,23,.12);box-shadow:inset 0 0 0 1px rgba(178,82,0,.3)}
@media (hover:none){#uiTip{display:none}}

/* active selections read at a glance on dark glass */
:root:not([data-theme="light"]) .seg button.active{background:linear-gradient(180deg,rgba(255,179,71,.26),rgba(255,179,71,.12));border-color:#ffb347;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,179,71,.6),inset 0 0 14px rgba(255,179,71,.2),0 0 18px -6px rgba(255,179,71,.7)}
:root:not([data-theme="light"]) .ptabs button.on{background:linear-gradient(180deg,rgba(255,179,71,.26),rgba(255,179,71,.12));color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,179,71,.7),0 0 14px -5px rgba(255,179,71,.75)}
:root:not([data-theme="light"]) .viewbar button.active,:root:not([data-theme="light"]) .sunrow .spd button.active{background:rgba(255,179,71,.24);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,179,71,.6)}
:root:not([data-theme="light"]) .swatch.active .ball{box-shadow:0 0 0 2px #ffb347,0 0 16px -2px rgba(255,179,71,.8)}

/* plan chosen on the website */
.plan-badge{background:rgba(255,179,71,.14)!important;color:#ffcf8a!important;box-shadow:inset 0 0 0 1px rgba(255,179,71,.45)}
.plan-badge i{background:#ffb347!important}
:root[data-theme="light"] .plan-badge{color:#8a4a06!important;background:rgba(242,138,23,.12)!important}
@media (max-width:760px){.plan-badge{display:none!important}}

/* =====================================================================
   v14 plans: badge + menu, upgrade prompt, projects library, presentation mode
   ===================================================================== */
.plan-badge{cursor:pointer;border:0;font:inherit;transition:background .2s,box-shadow .2s}
.plan-badge:hover{background:rgba(255,179,71,.24)!important}
.plan-badge.free{background:rgba(var(--ov),.07)!important;color:var(--mut)!important;box-shadow:inset 0 0 0 1px var(--stroke)}
.plan-badge.free i{background:var(--mut)!important}
.plan-badge.warn{background:rgba(255,110,90,.16)!important;color:#ffb3a6!important;box-shadow:inset 0 0 0 1px rgba(255,110,90,.45)}
.plan-badge.warn i{background:#ff7a59!important}
.pmenu{position:fixed;top:70px;z-index:60;width:320px;padding:16px;border-radius:18px;display:none;flex-direction:column;gap:12px}
.pmenu.on{display:flex;animation:pmIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pmIn{from{opacity:0;transform:translateY(-6px)}}
.pmenu h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.pmenu .st{font-size:12px;color:var(--mut)}
.pmenu .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut)}
.pmenu .row b{color:var(--txt);font-variant-numeric:tabular-nums}
.pmenu .bar{height:6px;border-radius:6px;background:rgba(var(--ov),.1);overflow:hidden}
.pmenu .bar i{display:block;height:100%;border-radius:6px;background:var(--amber)}
.pmenu .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pmenu .acts button,.pmenu .acts a,.pmenu .wide{height:36px;border-radius:10px;font-size:12.5px;font-weight:600;display:grid;place-items:center;text-decoration:none;
  background:rgba(var(--ov),.06);border:1px solid var(--stroke);color:var(--txt);cursor:pointer}
.pmenu .acts button:hover,.pmenu .acts a:hover,.pmenu .wide:hover{background:rgba(var(--ov),.12)}
.pmenu .p{background:var(--amber)!important;border-color:var(--amber)!important;color:#1b1206!important}
.pmenu .lock{opacity:.55}
.pmenu .logo-prev{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mut)}
.pmenu .logo-prev img{max-height:28px;max-width:110px;border-radius:4px;background:#fff;padding:2px}
.plan-note{font-size:12px;color:var(--mut);margin:0}

.sheet.up{max-width:460px}
.sheet.up h1{display:flex;align-items:center;gap:10px}
.up-ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,179,71,.16);color:var(--amber);flex:none}
.up-ico svg{width:20px;height:20px}
.up-list{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:8px}
.up-list li{display:flex;gap:9px;font-size:13.5px}
.up-list li::before{content:"✓";color:#4cd59a;font-weight:800}
.up-price{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px}
.up-price b{font-size:28px;letter-spacing:-.02em}
.up-price span{color:var(--mut);font-size:13px}
.up-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:rgba(var(--ov),.07);margin-top:8px}
.up-seg button{height:28px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--mut)}
.up-seg button.on{background:rgba(255,179,71,.2);color:var(--txt);box-shadow:inset 0 0 0 1px rgba(255,179,71,.5)}

.sheet.projs{max-width:760px}
.pj-save{display:flex;gap:8px;margin:12px 0 6px}
.pj-save input{flex:1;height:38px;border-radius:10px;padding:0 12px;border:1px solid var(--stroke);background:rgba(var(--ov),.05);color:var(--txt);font:inherit;font-size:13.5px}
.pj-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mut);margin:4px 0 12px}
.pj-meta .bar{width:140px;height:6px;border-radius:6px;background:rgba(var(--ov),.1);overflow:hidden;display:inline-block;vertical-align:middle;margin-left:8px}
.pj-meta .bar i{display:block;height:100%;background:var(--amber)}
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-height:52vh;overflow:auto}
.pj{border-radius:14px;overflow:hidden;border:1px solid var(--stroke);background:rgba(var(--ov),.04);display:flex;flex-direction:column}
.pj img,.pj .ph{width:100%;aspect-ratio:16/10;object-fit:cover;background:rgba(var(--ov),.08);display:block}
.pj .in{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.pj b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj small{font-size:11.5px;color:var(--mut)}
.pj .b2{display:flex;gap:6px;padding:0 12px 12px}
.pj .b2 button{flex:1;height:30px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--stroke);background:rgba(var(--ov),.06);color:var(--txt)}
.pj .b2 button:hover{background:rgba(var(--ov),.12)}
.pj .b2 .p{background:var(--amber);border-color:var(--amber);color:#1b1206}
.pj-empty{grid-column:1/-1;text-align:center;padding:30px;color:var(--mut);font-size:13.5px}

body.presenting .hud:not(.present):not(.present-exit),body.presenting .panel,body.presenting .panel-handle,body.presenting .prail,body.presenting .gizmo,body.presenting #roomLabels,body.presenting .pmenu{display:none!important}
.present{position:fixed;left:24px;bottom:24px;z-index:70;display:none;align-items:center;gap:16px;padding:16px 20px;border-radius:20px;max-width:min(560px,calc(100vw - 48px))}
body.presenting .present{display:flex;animation:pmIn .4s cubic-bezier(.2,.8,.2,1)}
.present img{max-height:44px;max-width:140px;border-radius:6px;background:#fff;padding:3px}
.present .t b{display:block;font-size:18px;letter-spacing:-.01em}
.present .t span{font-size:13px;color:var(--mut)}
.present-exit{position:fixed;right:24px;top:24px;z-index:70;display:none;height:38px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--txt)}
body.presenting .present-exit{display:inline-flex;align-items:center;gap:8px}
@media (max-width:760px){.pmenu{left:12px!important;right:12px;width:auto}}
/* the dialogs sit on the light .sheet, so they use its ink rather than the HUD theme colours */
.sheet .up-seg{background:#efece5}
.sheet .up-seg button{color:#5b616b}
.sheet .up-seg button.on{background:#fff;color:#16181c;box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 0 0 1px #e0a34a}
.sheet .up-ico{background:#fff1dc;color:#c9761a}
.sheet .up-price span,.sheet .pj-meta,.sheet .pj small{color:#6a6f78}
.sheet a.btn-sec{height:40px;padding:0 18px;border-radius:10px;font-weight:600;font-size:13px;border:1px solid #cfcbc0;background:#fff;color:#16181c}
.sheet .pj-save input{background:#fff;color:#16181c;border-color:#cfcbc0}
.sheet .pj-save input::placeholder{color:#9aa0a8}
.sheet .pj-save button{border:1px solid #cfcbc0;background:#fff;color:#16181c;font-weight:600;font-size:13px}
.sheet .pj-save button.p{background:#16181c!important;color:#fff;border-color:#16181c}
.sheet .pj{border-color:#e4e0d6;background:#fff}
.sheet .pj .b2 button{border-color:#d9d4c9;background:#fff;color:#16181c}
.sheet .pj .b2 button:hover{background:#f4f1ea}
.sheet .pj .b2 .p{background:#16181c;border-color:#16181c;color:#fff}
.sheet .pj .b2 [data-del]{color:#b4233a}
.sheet .pj-meta .bar{background:#ebe7de}
.sheet .pj-meta .bar i{background:#e08a12}
.sheet #pjUp{color:#c9761a!important}
.sheet .pj-empty{color:#6a6f78}

/* v15 logo + way back to the website */
.home-link{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none;border-radius:12px;padding:2px 8px 2px 2px;margin-left:-2px;position:relative;transition:background .25s}
.home-link:hover{background:rgba(var(--ov),.07)}
.home-link .logo{flex:none;filter:drop-shadow(0 4px 8px rgba(242,134,26,.35))}
.home-link .lg-a,.home-link .lg-roof{fill:none;stroke:#fff;stroke-width:5.6;stroke-linecap:round;stroke-linejoin:round}
.home-link .lg-roof{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.home-link:hover .lg-roof,.home-link:focus-visible .lg-roof{transform:translate(2.5px,-4px)}
.home-hint{display:inline-flex;align-items:center;gap:5px;max-width:0;overflow:hidden;opacity:0;font-size:12.5px;font-weight:650;color:var(--amber);white-space:nowrap;
  transition:max-width .4s cubic-bezier(.22,1,.36,1),opacity .3s,margin .4s;margin-left:-12px}
.home-hint svg{width:14px;height:14px;flex:none}
.home-link:hover .home-hint,.home-link:focus-visible .home-hint{max-width:70px;opacity:1;margin-left:0}

/* =====================================================================
   v16 site theme: the studio's light theme in the website's design language
   (Plus Jakarta Sans + JetBrains Mono, white frosted glass, orange gradient actions, pill tabs, HUD brackets)
   ===================================================================== */
:root{--font:"Plus Jakarta Sans","Neue Haas Grotesk Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
:root[data-theme="light"]{
  --ov:12,20,36;--bg:#eef2f9;
  --glass:rgba(255,255,255,.72);--glass-solid:rgba(255,255,255,.94);
  --stroke:rgba(12,20,36,.08);--stroke-strong:rgba(12,20,36,.14);
  --txt:#0c1424;--mut:#394357;--dim:#687388;
  --amber:#f28a17;--amber-deep:#e2690c;--ok:#22b07d;--pin:rgba(255,255,255,.9);
  --s-shadow:0 1px 1px rgba(12,20,36,.03),0 8px 24px -6px rgba(12,20,36,.12),0 30px 60px -22px rgba(12,20,36,.2);
  --s-rim:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 #fff;
  --s-blur:saturate(175%) blur(24px);
}
:root[data-theme="light"] body{font-family:var(--font);color:var(--txt)}
:root[data-theme="light"] .panel{--glass:rgba(255,255,255,.7)}

/* glass surfaces */
:root[data-theme="light"] .hud{background:var(--glass);-webkit-backdrop-filter:var(--s-blur);backdrop-filter:var(--s-blur);border:0;box-shadow:var(--s-shadow),var(--s-rim)}
:root[data-theme="light"] .hud::after{content:none}
:root[data-theme="light"] .topbar{border-radius:999px;height:58px;padding:0 9px 0 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66))}
:root[data-theme="light"] .panel{border-radius:28px;padding:6px 16px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.66) 40%,rgba(255,255,255,.7))}
:root[data-theme="light"] .panel h2{font-size:18px;font-weight:800;letter-spacing:-.025em;padding-top:16px}
:root[data-theme="light"] .panel .sub{color:var(--dim)}

/* type: section titles bold, small labels mono uppercase with the orange dash */
:root[data-theme="light"] .brand-name{font-weight:800;letter-spacing:-.02em;font-size:17px}
:root[data-theme="light"] .brand-name b{font-weight:800;color:#e2690c}
:root[data-theme="light"] .sunrow .spd button{border:0;border-radius:999px;background:rgba(255,255,255,.7);color:var(--mut);box-shadow:inset 0 0 0 1px rgba(12,20,36,.08)}
:root[data-theme="light"] .sunrow .spd button.active{background:#fff;color:#c25f00;box-shadow:inset 0 0 0 1.5px #f28a17}
:root[data-theme="light"] .sunrow .play{border-color:rgba(242,138,23,.55);color:#c25f00;font-weight:700}
:root[data-theme="light"] .sunrow .play.on{color:#fff;background:linear-gradient(180deg,#ffa53d,#f28a17);border-color:transparent}
:root[data-theme="light"] .sec-h{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--txt)}
:root[data-theme="light"] .sec-h output{font-family:var(--mono);font-size:12px;font-weight:600;color:#c25f00}
:root[data-theme="light"] .sub-h{display:flex;align-items:center;gap:8px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--dim)}
:root[data-theme="light"] .sub-h::before{content:"";width:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,#f28a17,#ffb347)}
:root[data-theme="light"] .note-s{color:var(--dim)}

/* section cards */
:root[data-theme="light"] .panel>.sec{margin-top:10px;padding:14px;border:0;border-radius:20px;background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(12,20,36,.04),0 8px 20px -14px rgba(12,20,36,.22);transition:box-shadow .3s,background .3s}
:root[data-theme="light"] .panel>.sec:hover{background:rgba(255,255,255,.78)}
:root[data-theme="light"] .sec.fold>.sec-h::after{border-color:var(--dim)}

/* tabs: a soft track with a white pill, as on the website */
:root[data-theme="light"] .ptabs{background:rgba(12,20,36,.05);border:0;border-radius:15px;padding:4px;box-shadow:inset 0 1px 2px rgba(12,20,36,.06);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] .ptabs button{height:32px;border-radius:11px;color:var(--mut);font-weight:600;font-size:12.5px}
:root[data-theme="light"] .ptabs button:hover{color:var(--txt);background:rgba(255,255,255,.5)}
:root[data-theme="light"] .ptabs button.on{background:#fff;color:var(--txt);box-shadow:0 1px 2px rgba(12,20,36,.12),0 4px 10px -4px rgba(12,20,36,.18)}
:root[data-theme="light"] .psearch input{height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(12,20,36,.08);color:var(--txt);font-size:13px}
:root[data-theme="light"] .psearch input:focus{box-shadow:inset 0 0 0 1.5px rgba(242,138,23,.6),0 0 0 4px rgba(242,138,23,.12);outline:none}
:root[data-theme="light"] .ptools a,:root[data-theme="light"] .ptools button{color:var(--dim)}

/* choice buttons: white cards, the selected one gets an orange ring */
:root[data-theme="light"] .seg button{border:0;border-radius:14px;background:rgba(255,255,255,.7);color:var(--mut);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(12,20,36,.07),0 1px 2px rgba(12,20,36,.04);transition:background .25s,box-shadow .25s,color .25s,transform .35s cubic-bezier(.22,1,.36,1)}
:root[data-theme="light"] .seg button:hover{background:#fff;color:var(--txt);transform:translateY(-1px)}
:root[data-theme="light"] .seg button.active{background:linear-gradient(180deg,#fff,#fff7ee);color:var(--txt);
  box-shadow:inset 0 0 0 1.5px #f28a17,0 0 0 4px rgba(242,138,23,.12),0 8px 18px -10px rgba(242,138,23,.6)}
:root[data-theme="light"] .seg button.active small{color:#c25f00}
:root[data-theme="light"] .seg button small{color:var(--dim)}
/* pills: orange gradient when on, like the website's primary buttons */
:root[data-theme="light"] .pills button{border:0;border-radius:999px;background:rgba(255,255,255,.72);color:var(--mut);font-weight:600;box-shadow:inset 0 0 0 1px rgba(12,20,36,.08);transition:background .25s,color .25s,box-shadow .25s}
:root[data-theme="light"] .pills button:hover{background:#fff;color:var(--txt)}
:root[data-theme="light"] .pills button.active{color:#fff;background:linear-gradient(180deg,#ffa53d,#f28a17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(150,70,0,.18),0 6px 14px -6px rgba(242,138,23,.65)}
:root[data-theme="light"] .preset{border:0;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(12,20,36,.07),0 1px 2px rgba(12,20,36,.04);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .3s}
:root[data-theme="light"] .preset:hover{background:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(242,138,23,.35),0 12px 22px -14px rgba(12,20,36,.35)}
:root[data-theme="light"] .preset b{color:var(--txt);font-weight:700}
:root[data-theme="light"] .preset span{color:var(--dim)}
:root[data-theme="light"] .rand{border:1.5px dashed rgba(242,138,23,.55);color:#c25f00;border-radius:14px;font-weight:700;background:rgba(255,246,235,.5)}
:root[data-theme="light"] .rand:hover{background:rgba(255,236,214,.8)}
:root[data-theme="light"] .swatch{color:var(--mut);font-weight:600}
:root[data-theme="light"] .swatch.active{color:var(--txt)}
:root[data-theme="light"] .swatch.active .ball{border-color:#f28a17;box-shadow:inset -6px -8px 14px rgba(0,0,0,.3),inset 5px 5px 10px rgba(255,255,255,.3),0 0 0 4px rgba(242,138,23,.2),0 6px 14px -6px rgba(12,20,36,.4)}

/* switches and sliders */
:root[data-theme="light"] .sw{border:0;background:rgba(12,20,36,.14)}
:root[data-theme="light"] .toggle input:checked+.sw{background:linear-gradient(180deg,#ffa53d,#f28a17);border:0}
:root[data-theme="light"] .sw::after{box-shadow:0 1px 3px rgba(12,20,36,.3)}
:root[data-theme="light"] .toggle{color:var(--txt);font-weight:600}
:root[data-theme="light"] .toggle small{color:var(--dim);font-weight:500}
:root[data-theme="light"] .toggle+.toggle{border-top-color:rgba(12,20,36,.06)}
:root[data-theme="light"] input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#f28a17 var(--p),rgba(12,20,36,.1) var(--p))}
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px;border:0;background:#fff;box-shadow:0 2px 6px rgba(12,20,36,.3),0 0 0 3px rgba(255,179,71,.55)}
:root[data-theme="light"] input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#f28a17 var(--p),rgba(12,20,36,.1) var(--p))}
:root[data-theme="light"] input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;background:#fff;box-shadow:0 2px 6px rgba(12,20,36,.3),0 0 0 3px rgba(255,179,71,.55)}

/* top bar controls */
:root[data-theme="light"] .icon-btn{width:38px;height:38px;border-radius:50%;color:var(--mut);transition:background .25s,color .25s,box-shadow .25s,transform .35s cubic-bezier(.22,1,.36,1)}
:root[data-theme="light"] .icon-btn:hover:not(:disabled){background:#fff;color:var(--txt);border-color:transparent;box-shadow:inset 0 0 0 1px #fff,0 0 0 4px rgba(242,138,23,.12),0 6px 14px -8px rgba(12,20,36,.3);transform:translateY(-1px)}
:root[data-theme="light"] .icon-btn.on,:root[data-theme="light"] #buildBtn.on{background:rgba(255,236,214,.95);color:#c25f00;box-shadow:inset 0 0 0 1.5px rgba(242,138,23,.55)}
:root[data-theme="light"] .tb-sep{background:rgba(12,20,36,.1)}
:root[data-theme="light"] .tb-cta,:root[data-theme="light"] .btn-primary{border:0;border-radius:999px;color:#fff;font-weight:700;letter-spacing:0;
  background:linear-gradient(180deg,#ffa53d 0%,#f28a17 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(150,70,0,.18),0 10px 24px -8px rgba(242,138,23,.65),0 2px 6px rgba(242,138,23,.25);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .3s}
:root[data-theme="light"] .tb-cta{height:42px;padding:0 18px}
:root[data-theme="light"] .tb-cta:hover,:root[data-theme="light"] .btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(150,70,0,.18),0 16px 32px -10px rgba(242,138,23,.72)}
:root[data-theme="light"] .btn-sec,:root[data-theme="light"] .proj button{border:0;border-radius:999px;background:rgba(255,255,255,.75);color:var(--txt);font-weight:600;box-shadow:inset 0 0 0 1px rgba(12,20,36,.09),0 4px 12px -8px rgba(12,20,36,.25)}
:root[data-theme="light"] .btn-sec:hover,:root[data-theme="light"] .proj button:hover{background:#fff;box-shadow:inset 0 0 0 1px #fff,0 0 0 4px rgba(242,138,23,.12),0 8px 18px -10px rgba(12,20,36,.3)}
:root[data-theme="light"] .proj button.danger{color:#b4233a}
:root[data-theme="light"] .badge{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;
  color:#14755a;background:rgba(220,247,238,.9);border:0;box-shadow:inset 0 0 0 1px rgba(34,176,125,.25)}
:root[data-theme="light"] .badge i{box-shadow:0 0 0 3px rgba(34,176,125,.18)}
:root[data-theme="light"] .badge.busy{color:#8a4a06;background:rgba(255,240,220,.95);box-shadow:inset 0 0 0 1px rgba(242,138,23,.35)}
:root[data-theme="light"] .plan-badge{color:#8a4a06!important;background:rgba(255,240,220,.95)!important;box-shadow:inset 0 0 0 1px rgba(242,138,23,.35)!important}
:root[data-theme="light"] .plan-badge.free{color:var(--mut)!important;background:rgba(255,255,255,.7)!important;box-shadow:inset 0 0 0 1px rgba(12,20,36,.1)!important}
:root[data-theme="light"] .plan-badge.free i{background:var(--dim)!important}
:root[data-theme="light"] .home-link:hover{background:rgba(255,255,255,.75)}
:root[data-theme="light"] .home-hint{color:#c25f00}

/* view bar, stats, gizmo, handles, rails */
:root[data-theme="light"] .viewbar{padding:5px;border-radius:999px;gap:2px}
:root[data-theme="light"] .viewbar button{background:transparent;border:0;box-shadow:none;color:var(--mut);font-weight:600;font-size:12.5px;border-radius:999px;transition:background .25s,color .25s}
:root[data-theme="light"] .viewbar button:hover{background:rgba(255,255,255,.85);color:var(--txt)}
:root[data-theme="light"] .viewbar button.active{background:#fff;color:var(--txt);box-shadow:0 1px 2px rgba(12,20,36,.12),0 4px 10px -4px rgba(12,20,36,.18)}
:root[data-theme="light"] .hud.statbar{border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--dim)}
:root[data-theme="light"] .statbar b{font-family:var(--font);font-size:12.5px;color:var(--txt);font-weight:700;letter-spacing:0}
:root[data-theme="light"] .statbar b.a{color:#c25f00}
:root[data-theme="light"] .panel-handle{border-radius:14px;color:var(--mut)}
:root[data-theme="light"] .prail{border-radius:22px}
:root[data-theme="light"] .prail button.on{color:#c25f00;background:rgba(255,236,214,.95);box-shadow:inset 0 0 0 1.5px rgba(242,138,23,.5)}
:root[data-theme="light"] .hud.keys{border-radius:22px;color:var(--mut)}

/* cost card pinned under the right panel */
:root[data-theme="light"] .est{border:0;border-radius:20px;background:linear-gradient(160deg,rgba(255,236,214,.85),rgba(255,255,255,.75));box-shadow:inset 0 0 0 1px rgba(242,138,23,.25)}
:root[data-theme="light"] .est-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a4a06}
:root[data-theme="light"] .est-cost{font-weight:800;letter-spacing:-.03em;color:var(--txt)}

/* toast, tooltip, menus, dialogs */
:root[data-theme="light"] #toast{border:0;border-radius:999px;padding:10px 18px;font-weight:600;color:var(--txt);background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:var(--s-blur);backdrop-filter:var(--s-blur);box-shadow:var(--s-shadow),inset 0 0 0 1px #fff}
:root[data-theme="light"] .pmenu{border-radius:24px}
:root[data-theme="light"] .pmenu .acts button,:root[data-theme="light"] .pmenu .acts a,:root[data-theme="light"] .pmenu .wide{border:0;border-radius:999px;background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(12,20,36,.09)}
:root[data-theme="light"] .pmenu .p{background:linear-gradient(180deg,#ffa53d,#f28a17)!important;color:#fff!important;box-shadow:0 8px 18px -8px rgba(242,138,23,.6)!important}
:root[data-theme="light"] .modal{background:rgba(232,238,247,.55);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
:root[data-theme="light"] .sheet{font-family:var(--font);border-radius:28px;background:rgba(255,255,255,.94);color:var(--txt);box-shadow:0 2px 2px rgba(12,20,36,.03),0 24px 48px -14px rgba(12,20,36,.2),0 70px 140px -36px rgba(36,56,110,.3),inset 0 0 0 1px #fff}
:root[data-theme="light"] .sheet h1{font-weight:800;letter-spacing:-.03em}
:root[data-theme="light"] .sheet .meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}
:root[data-theme="light"] .sheet .row-btns button{border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(12,20,36,.12);font-weight:700}
:root[data-theme="light"] .sheet .row-btns button.p{color:#fff;background:linear-gradient(180deg,#ffa53d,#f28a17);box-shadow:0 10px 22px -8px rgba(242,138,23,.6)}
:root[data-theme="light"] .sheet a.btn-sec{border-radius:999px}
:root[data-theme="light"] #loader{background:radial-gradient(900px 600px at 15% 10%,#ffe5c8,rgba(255,229,200,0) 60%),radial-gradient(900px 700px at 90% 20%,#d9e7ff,rgba(217,231,255,0) 60%),#f3f5fa;color:var(--dim)}

/* HUD corner brackets on the two panels and the top bar, as on the website */
:root[data-theme="light"] .hud.panel{--bc:rgba(12,20,36,.28);background-image:
  linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),
  linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),
  linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.8) 40%,rgba(255,255,255,.84));
  background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,100% 100%;
  background-position:10px 10px,10px 10px,calc(100% - 10px) 10px,calc(100% - 10px) 10px,10px calc(100% - 10px),10px calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),0 0;
  background-repeat:no-repeat;background-attachment:local,local,local,local,local,local,local,local,local}
:root[data-theme="light"] .hud.topbar{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.78))}
:root[data-theme="light"] .hud.panel{background-attachment:scroll}
:root[data-theme="light"] .hud.tabs{border-radius:999px;padding:5px}
:root[data-theme="light"] .tabs button{border:0;border-radius:999px;color:var(--mut);background:transparent}
:root[data-theme="light"] .tabs button.active{background:linear-gradient(180deg,#ffa53d,#f28a17);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -6px rgba(242,138,23,.65)}
@media (max-width:760px){
  :root[data-theme="light"] .brand-name{font-size:15px}
  :root[data-theme="light"] .topbar{height:54px}
  :root[data-theme="light"] .hud.panel{border-radius:24px}
}
@media (max-width:520px){
  :root[data-theme="light"] .brand-name b{display:none}           /* "ArchStudio" alone fits beside the tools */
  .brand-name{font-size:14px!important}
  .home-link{gap:8px}
}
@media (max-width:440px){.brand-name{display:none}}          /* the logo alone links home on the narrowest phones */