/* ==========================================================================
   BLOCKPLAN — editor shell (menu bar, tool rail, panels, inspector, home).
   Loaded after style.css; reuses its tokens. Layout goal: one compact top
   bar, a large viewport, and controls that appear where/when they're needed.
   ========================================================================== */

/* The `hidden` attribute must always win over component display rules
   (button{display:inline-flex}, .sb-item{display:flex}, …). */
[hidden]{ display:none !important; }

/* ---- light theme (the 3D viewport keeps its own day/night palette) ---- */
:root[data-theme="light"]{
  --bg-0:#dfe3e8; --bg-1:#eef1f4; --bg-2:#f7f8fa; --bg-3:#ffffff; --bg-4:#eef0f3;
  --bg-glass:rgba(250,251,252,0.86);
  --border:#d6dbe2; --border-soft:#e4e8ed; --border-strong:#c3cad3;
  --text:#161b22; --text-dim:#4d5866; --text-faint:#7d8896;
  --accent:#b9821f; --accent-strong:#9c6a10; --accent-soft:rgba(185,130,31,0.12); --accent-border:rgba(185,130,31,0.45);
  --accent-2:#23806c; --accent-2-strong:#1d6d5c; --accent-2-soft:rgba(35,128,108,0.1);
  --shadow-md:0 6px 20px rgba(20,30,45,0.12); --shadow-lg:0 14px 44px rgba(20,30,45,0.18);
  color-scheme:light;
}
:root[data-theme="light"] button:hover{ background:#eef1f4; }
:root[data-theme="light"] button.primary:hover{ background:var(--accent-strong); }
:root[data-theme="light"] #close-modal:hover{ background:var(--bg-4); }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
#topbar{ display:flex; align-items:center; gap:6px; height:46px; padding:0 10px; flex:none; flex-wrap:nowrap; row-gap:0;
  background:var(--bg-2); border-bottom:1px solid var(--border-soft); box-shadow:none; z-index:40; position:relative; }
.brand-btn{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid transparent; padding:5px 8px 5px 5px; margin-right:4px; }
.brand-btn:hover{ background:var(--bg-3); border-color:var(--border); }
.brand-btn .mark, .home-brand .mark{ width:22px; height:22px; border-radius:5px; flex:none; position:relative;
  background:linear-gradient(155deg,var(--accent-strong),var(--accent) 55%,#8a5f1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.35); }
.brand-btn .mark::after, .home-brand .mark::after{ content:''; position:absolute; inset:5px; border-radius:2px; background:rgba(255,255,255,0.16); }
.brand-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; letter-spacing:-0.01em; color:var(--text); }

#menubar{ display:flex; align-items:center; gap:1px; }
.menu{ position:relative; }
.menu-trigger{ background:transparent; border:1px solid transparent; color:var(--text-dim); font-weight:500; font-size:13px; padding:6px 10px; border-radius:var(--r-sm); }
.menu-trigger:hover, .menu.open .menu-trigger{ background:var(--bg-3); color:var(--text); border-color:var(--border-soft); }
.menu-panel{ display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:250px; padding:5px; z-index:60;
  background:var(--bg-2); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); animation:modal-in .1s var(--ease); }
.menu-panel.menu-wide{ min-width:300px; }
.menu.open .menu-panel{ display:flex; flex-direction:column; }
.menu-panel > button, .menu-panel > .menu-link{ display:flex; align-items:center; gap:9px; width:100%; justify-content:flex-start; text-align:left;
  background:transparent; border:1px solid transparent; color:var(--text); font-weight:500; font-size:13px; padding:7px 9px; border-radius:var(--r-sm); text-decoration:none; }
.menu-panel > button .icon{ color:var(--text-faint); width:15px; height:15px; }
.menu-panel > button:hover:not(:disabled), .menu-panel > button:focus-visible, .menu-panel > .menu-link:hover{ background:var(--accent-soft); border-color:transparent; color:var(--text); outline:none; }
.menu-panel > button:hover .icon{ color:var(--accent-strong); }
.menu-panel > button.toggle.active{ background:transparent; color:var(--text); border-color:transparent; }
.menu-panel > button.toggle::after{ content:''; margin-left:auto; width:26px; height:15px; border-radius:999px; background:var(--bg-4); border:1px solid var(--border-strong); flex:none;
  background-image:radial-gradient(circle at 7px 50%, var(--text-faint) 4.5px, transparent 5px); transition:background .12s; }
.menu-panel > button.toggle.active::after{ background-color:var(--accent-soft); border-color:var(--accent-border); background-image:radial-gradient(circle at 18px 50%, var(--accent) 4.5px, transparent 5px); }
.menu-panel > button:not(.toggle) .btn-label, .menu-panel > button .btn-label{ flex:1; }
.menu-panel .kbd-hint{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); padding-left:14px; }
.menu-panel > button.toggle .kbd-hint{ margin-left:0; }
.menu-sep{ height:1px; background:var(--border-soft); margin:5px 4px; }
.menu-label{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding:7px 9px 3px; }

.pro-chip{ font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.06em; color:var(--accent-strong); background:var(--accent-soft);
  border:1px solid var(--accent-border); border-radius:999px; padding:1px 6px; line-height:1.4; flex:none; }
.menu-panel .pro-chip{ margin-left:auto; }
.pro-user .menu-panel .pro-chip{ display:none; }

#doc-title{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; }
#doc-name{ background:transparent; border:1px solid transparent; font-weight:600; font-size:13px; color:var(--text); max-width:320px; overflow:hidden; text-overflow:ellipsis; padding:5px 9px; }
#doc-name:hover{ background:var(--bg-3); border-color:var(--border); }
.doc-status{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); white-space:nowrap; }
.doc-status.saved{ color:var(--good); }
.doc-status.dirty{ color:var(--warn); }

.topbar-right{ display:flex; align-items:center; gap:6px; }
.search-btn{ background:var(--bg-4); border-color:var(--border); color:var(--text-faint); font-weight:500; min-width:150px; justify-content:flex-start; }
.search-btn kbd{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); border:1px solid var(--border-strong); border-radius:4px; padding:0 5px; }
.search-btn:hover{ color:var(--text-dim); }
#undo-btn .btn-label, #redo-btn .btn-label{ display:none; }
#undo-btn, #redo-btn{ width:32px; padding:6px; justify-content:center; }
#account-group{ gap:6px; align-items:center; border:none; padding:0; margin-left:4px; }
.upgrade-btn{ background:linear-gradient(135deg,var(--accent-soft),rgba(63,156,136,0.12)); border-color:var(--accent-border); color:var(--accent-strong); }
.upgrade-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* ==========================================================================
   MAIN: rail | palette | viewport | inspector
   ========================================================================== */
#main{ flex:1; display:flex; min-height:0; }
#toolbar2{ display:none; }

#toolrail{ width:48px; flex:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0; background:var(--bg-2); border-right:1px solid var(--border-soft); z-index:15; }
.rail-btn{ width:36px; height:36px; padding:0; justify-content:center; border-radius:var(--r-md); position:relative; }
.rail-btn .btn-label{ display:none; }
.rail-btn .icon{ width:18px; height:18px; }
.rail-btn.toggle.active{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-strong); }
.rail-sep{ width:24px; height:1px; background:var(--border-soft); margin:5px 0; }
.rail-fill{ flex:1; }
#toolrail .rail-btn[data-tip]:hover::after{ content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap;
  background:var(--bg-3); border:1px solid var(--border-strong); color:var(--text); font-size:12px; font-weight:500; padding:5px 9px; border-radius:var(--r-sm); box-shadow:var(--shadow-md); pointer-events:none; z-index:70; }

#palette{ width:236px; transition:width .16s var(--ease), opacity .16s; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px 0; }
.panel-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:13px; }
#palette-search-wrap{ margin:9px 12px 6px; }
#palette-tabs{ padding:0 12px 6px; }
.palette-collapsed #palette{ width:0; opacity:0; overflow:hidden; border-right:none; }
.palette-collapsed #rail-palette-btn{ color:var(--text-faint); }

#inspector{ width:268px; flex:none; background:var(--bg-2); border-left:1px solid var(--border-soft); overflow-y:auto; z-index:10; transition:width .16s var(--ease), opacity .16s; }
.inspector-collapsed #inspector{ width:0; opacity:0; overflow:hidden; border-left:none; }
.insp-sec{ padding:13px 14px 14px; border-bottom:1px solid var(--border-soft); display:flex; flex-direction:column; gap:9px; }
.insp-sec[hidden]{ display:none; }
.insp-head{ display:flex; align-items:center; gap:8px; }
.insp-head h4{ margin:0; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.insp-head .mono-dim{ margin-left:auto; }
#insp-tool .insp-head h4{ font-family:'Sora',sans-serif; font-size:14px; text-transform:none; letter-spacing:0; color:var(--text); }
.insp-tool-icon{ width:28px; height:28px; border-radius:var(--r-md); background:var(--accent-soft); border:1px solid var(--accent-border); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; }
.insp-tool-icon .icon{ width:16px; height:16px; }
.insp-help{ margin:0; font-size:12px; line-height:1.55; color:var(--text-dim); }
.insp-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.insp-row:empty{ display:none; }
.insp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.insp-grid button{ justify-content:flex-start; padding:6px 9px; font-size:12px; }
.size-row{ flex-wrap:nowrap; }
.size-row input[type=number]{ width:100%; min-width:0; flex:1; }
.axis-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; }
.axis-x{ color:#e0655a; } .axis-y{ color:#5cbf7d; } .axis-z{ color:#5a9be0; }
.seg-sm .seg-btn{ padding:4px 8px; font-size:11px; }
#insp-snap .check.sm{ line-height:1.4; align-items:flex-start; }
#insp-snap .check.sm input{ margin-top:1px; flex:none; }
.insp-pro-card{ background:linear-gradient(160deg,var(--accent-soft),rgba(63,156,136,0.08)); border:1px solid var(--accent-border); border-radius:var(--r-lg); padding:12px; display:flex; flex-direction:column; gap:8px; }
.insp-pro-card p{ margin:0; font-size:12px; color:var(--text-dim); line-height:1.5; }
.insp-pro-card b{ font-family:'Sora',sans-serif; font-size:13px; }

/* ---- viewport overlays ---- */
#hud{ top:12px; left:12px; min-width:0; max-width:320px; padding:8px 12px; }
#viewhint{ top:12px; right:12px; }
#stats-panel{ top:48px; right:12px; }
#gizmo{ position:absolute; left:12px; bottom:12px; width:96px; height:96px; pointer-events:none; opacity:.95; }
#gizmo[hidden]{ display:none; }
#gizmo canvas{ width:96px; height:96px; }
#lock-hint{ background:radial-gradient(ellipse at center, rgba(15,18,23,0.45), rgba(6,7,9,0.72)); }
.lock-card{ background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-xl); padding:22px 26px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; gap:12px; max-width:560px; }
.lock-card h3{ margin:0; font-size:20px; }
.lock-sub{ margin:0; color:var(--text-dim); font-size:13px; }
.lock-sub kbd, .lock-hints kbd{ font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--bg-3); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:0 5px; color:var(--text-dim); }
#lock-hint.hidden{ display:none; }

#empty-state{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:6; }
#empty-state[hidden]{ display:none; }
.empty-card{ pointer-events:auto; background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px 22px; box-shadow:var(--shadow-lg); width:min(560px, calc(100% - 32px)); }
.empty-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); }
.empty-card h3{ margin:4px 0 12px; font-size:18px; }
.empty-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.empty-action{ flex-direction:column; align-items:flex-start; gap:2px; white-space:normal; text-align:left; padding:11px 12px; background:var(--bg-3); border-color:var(--border-soft); }
.empty-action:hover{ border-color:var(--accent-border); background:var(--accent-soft); }
.ea-title{ font-weight:600; font-size:13px; color:var(--text); display:flex; align-items:center; gap:6px; }
.ea-sub{ font-weight:400; font-size:11.5px; color:var(--text-dim); }

#lock-hint.compact{ inset:auto 0 118px 0; background:none; pointer-events:none; }
#lock-hint.compact .lock-card{ pointer-events:auto; flex-direction:row; padding:7px 14px; gap:10px; border-radius:999px; margin:0 auto; cursor:pointer; }
#lock-hint.compact .lock-card h3{ font-size:13px; font-family:'Inter',sans-serif; font-weight:600; }
#lock-hint.compact .lock-sub, #lock-hint.compact .lock-hints{ display:none; }
#lock-hint.compact #shortcuts-link{ font-size:11.5px; }
#guide-bar{ position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:12; display:flex; align-items:center; gap:10px;
  background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--accent-border); border-radius:var(--r-lg); padding:8px 10px; box-shadow:var(--shadow-md); }
#guide-bar[hidden]{ display:none; }
#guide-bar .gb-step{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--accent-strong); min-width:76px; text-align:center; }
#guide-bar .gb-title{ font-size:12.5px; font-weight:600; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#guide-bar .gb-mats{ display:flex; gap:4px; }
#guide-bar .gb-mat{ display:flex; align-items:center; gap:4px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); background:var(--bg-3); border:1px solid var(--border-soft); border-radius:999px; padding:2px 7px 2px 3px; }
#guide-bar .gb-mat i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
#guide-bar button{ padding:5px 8px; }
#guide-bar .gb-progress{ width:90px; height:5px; background:var(--bg-4); border-radius:3px; overflow:hidden; }
#guide-bar .gb-progress > span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }

/* ---- status bar ---- */
#statusbar{ height:24px; }

/* ---- keyboard shortcut sheet ---- */
.shortcut-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 24px; }
.shortcut-grid h4{ grid-column:1 / -1; margin:12px 0 2px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-2-strong); }
.shortcut-grid h4:first-child{ margin-top:0; }
.sc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; padding:3px 0; border-bottom:1px solid var(--border-soft); }
.sc-row kbd{ font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--bg-3); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:1px 6px; color:var(--text-dim); white-space:nowrap; }

/* ==========================================================================
   PRICING / UPGRADE
   ========================================================================== */
.plans-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:880px; margin:0 auto; }
.plan-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px; display:flex; flex-direction:column; gap:12px; }
.plan-card.pro{ border-color:var(--accent-border); background:linear-gradient(170deg,rgba(217,164,65,0.08),var(--bg-2) 45%); box-shadow:0 0 0 1px var(--accent-soft); }
.plan-name{ font-family:'Sora',sans-serif; font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; }
.plan-price{ font-family:'Sora',sans-serif; font-size:28px; font-weight:700; }
.plan-price small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:var(--text-dim); }
.plan-pitch{ margin:0; color:var(--text-dim); font-size:13px; line-height:1.5; }
.plan-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.plan-list li{ display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.45; }
.plan-list li .icon{ color:var(--good); flex:none; margin-top:2px; }
.plan-card.pro .plan-list li .icon{ color:var(--accent-strong); }
.plan-list li.muted{ color:var(--text-faint); }
.plan-list li.muted .icon{ color:var(--text-faint); }
.plan-card .plan-cta{ margin-top:auto; }
.plan-card .plan-cta button{ width:100%; justify-content:center; padding:10px; }
.plan-note{ font-size:11.5px; color:var(--text-faint); margin:0; text-align:center; }
.pricing-modal .plans-grid{ max-width:none; }
.pricing-compare{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px; }
.pricing-compare th, .pricing-compare td{ padding:7px 10px; border-top:1px solid var(--border-soft); text-align:left; }
.pricing-compare th{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.pricing-compare td.v{ text-align:center; font-variant-numeric:tabular-nums; }
.pricing-compare td.v.pro{ color:var(--accent-strong); font-weight:600; }
.upsell{ display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:center; }
.upsell canvas{ width:200px; height:140px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--bg-4); }
.upsell h3{ margin:0 0 6px !important; font-family:'Sora',sans-serif !important; font-size:17px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--text) !important; }
.upsell ul{ margin:8px 0 0; padding-left:18px; }
.upsell-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
@media (max-width:640px){ .upsell{ grid-template-columns:1fr; } .plans-grid{ grid-template-columns:1fr; } }

/* ---- cloud project cards ---- */
.cloud-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.cloud-card{ background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:8px; display:flex; flex-direction:column; gap:8px; }
.cloud-card.current{ border-color:var(--accent-border); box-shadow:0 0 0 1px var(--accent-soft); }
.cloud-thumb{ aspect-ratio:16/10; border-radius:var(--r-md); background:var(--bg-4); border:1px solid var(--border-soft); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.cloud-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cloud-card-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cloud-card .cloud-project-name{ display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloud-card .cloud-project-actions button{ padding:4px 8px; font-size:11.5px; }
.account-panel h3{ margin:10px 0 0 !important; }

/* ---- usage meter ---- */
.meter{ display:flex; flex-direction:column; gap:4px; }
.meter-top{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-dim); }
.meter-track{ height:6px; background:var(--bg-4); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.meter-track > span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.meter.full .meter-track > span{ background:var(--danger); }

/* ==========================================================================
   HOME / LANDING
   ========================================================================== */
#home{ position:fixed; inset:0; z-index:90; background:var(--bg-1); overflow:hidden; }
#home[hidden]{ display:none; }
.home-scroll{ height:100%; overflow-y:auto; scroll-behavior:smooth; }
.home-nav{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px clamp(16px,4vw,48px);
  background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border-soft); }
.home-brand{ display:flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-weight:700; font-size:16px; }
.home-links{ display:flex; align-items:center; gap:14px; }
.home-links a{ color:var(--text-dim); text-decoration:none; font-size:13px; font-weight:500; }
.home-links a:hover{ color:var(--text); }
.home-hero{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,4vw,56px); align-items:center; padding:clamp(28px,6vw,80px) clamp(16px,4vw,48px) clamp(24px,4vw,48px); max-width:1240px; margin:0 auto; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:12px; }
.home-hero h1{ font-size:clamp(30px,4.6vw,52px); line-height:1.06; margin:0 0 16px; font-weight:800; letter-spacing:-0.025em; }
.hero-sub{ font-size:clamp(14px,1.4vw,16.5px); line-height:1.65; color:var(--text-dim); margin:0 0 22px; max-width:560px; }
.hero-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
button.lg{ font-size:14.5px; padding:12px 20px; border-radius:var(--r-lg); }
.ghost-link{ color:var(--text-dim); font-weight:600; font-size:13.5px; text-decoration:none; }
.ghost-link:hover{ color:var(--text); }
.hero-points{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:6px; }
.hero-points li{ font-size:13px; color:var(--text-dim); padding-left:20px; position:relative; }
.hero-points li::before{ content:''; position:absolute; left:2px; top:6px; width:8px; height:8px; border-radius:2px; background:var(--accent); }
.hero-visual{ position:relative; }
.hero-visual canvas{ width:100%; height:auto; aspect-ratio:4/3; display:block; border-radius:var(--r-xl); border:1px solid var(--border); background:radial-gradient(ellipse at 60% 30%, #1e2a36, #0c1016 70%); box-shadow:var(--shadow-lg); }
:root[data-theme="light"] .hero-visual canvas{ background:radial-gradient(ellipse at 60% 30%, #cfe3f2, #9fb8cc 80%); }
.home-section{ padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px); max-width:1240px; margin:0 auto; }
.home-section h2{ font-size:clamp(22px,2.8vw,32px); margin:0 0 8px; text-align:center; font-weight:700; }
.section-sub{ text-align:center; color:var(--text-dim); margin:0 0 28px; font-size:14.5px; }
.feature-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feature-card{ background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, transform .15s; }
.feature-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.feature-preview{ width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--r-md); background:var(--bg-4); border:1px solid var(--border-soft); display:block; }
.feature-card h3{ font-size:15.5px; margin:6px 0 0; line-height:1.3; }
.feature-card p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-dim); }
.tier{ align-self:flex-start; margin-top:auto; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-dim); }
.tier.pro{ color:var(--accent-strong); border-color:var(--accent-border); background:var(--accent-soft); }
.how-steps{ list-style:none; padding:0; margin:18px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:900px; counter-reset:step; }
.how-steps li{ counter-increment:step; background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:4px; }
.how-steps li::before{ content:counter(step); font-family:'Sora',sans-serif; font-weight:800; font-size:20px; color:var(--accent-strong); }
.how-steps b{ font-size:14px; } .how-steps span{ color:var(--text-dim); font-size:13px; }
.home-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:22px clamp(16px,4vw,48px) 32px; border-top:1px solid var(--border-soft); color:var(--text-faint); font-size:12px; max-width:1240px; margin:0 auto; }
.home-foot a{ color:var(--text-dim); }
@media (max-width:980px){ .home-hero{ grid-template-columns:1fr; } .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .feature-grid, .how-steps{ grid-template-columns:1fr; } .home-links a{ display:none; } }

/* ==========================================================================
   GENERIC TOOL LAYOUTS (generators / toolkit modals)
   ========================================================================== */
.tool-layout{ display:grid; grid-template-columns:300px 1fr; gap:18px; }
.tool-side{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.tool-main{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.tool-field{ display:flex; flex-direction:column; gap:5px; }
.tool-field > label, .tool-label{ font-size:10.5px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.tool-field input[type=text], .tool-field input[type=number], .tool-field select, .tool-field input[type=search]{ width:100%; }
.tool-field .range-row{ display:flex; align-items:center; gap:10px; }
.tool-field .range-row input[type=range]{ flex:1; }
.tool-field .range-row output{ font-family:'JetBrains Mono',monospace; font-size:12px; min-width:48px; text-align:right; color:var(--text); }
.tool-canvas{ width:100%; border:1px solid var(--border-soft); border-radius:var(--r-md); background:var(--bg-4); display:block; }
.stat-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.stat-pill{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); background:var(--bg-3); border:1px solid var(--border-soft); border-radius:999px; padding:3px 9px; }
.stat-pill b{ color:var(--text); font-weight:600; }
.kv-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.kv-table td, .kv-table th{ padding:6px 9px; border-top:1px solid var(--border-soft); text-align:left; }
.kv-table th{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.kv-table td.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:'JetBrains Mono',monospace; }
.bedrock-note{ font-size:11.5px; color:var(--text-dim); display:flex; gap:7px; align-items:flex-start; background:var(--accent-2-soft); border:1px solid rgba(63,156,136,0.3); border-radius:var(--r-sm); padding:7px 9px; line-height:1.5; }
.bedrock-note .icon{ color:var(--accent-2-strong); flex:none; margin-top:1px; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border-soft); margin-bottom:12px; flex-wrap:wrap; }
.tab{ background:transparent; border:none; border-bottom:2px solid transparent; border-radius:0; color:var(--text-dim); font-weight:600; padding:8px 11px; }
.tab:hover{ background:transparent; color:var(--text); border-color:transparent; border-bottom-color:var(--border-strong); }
.tab.active{ color:var(--accent-strong); border-bottom-color:var(--accent); }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--bg-3); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; }
.chip:hover{ color:var(--text); border-color:var(--border-strong); }
.chip.active{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-strong); }
.swatch-strip{ display:flex; border-radius:var(--r-sm); overflow:hidden; height:26px; border:1px solid var(--border-soft); }
.swatch-strip > span{ flex:1; }
.pal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; max-height:56vh; overflow-y:auto; padding-right:4px; align-content:start; }
.pal-card{ background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:8px; display:flex; flex-direction:column; gap:6px; cursor:pointer; text-align:left; white-space:normal; align-items:stretch; }
.pal-card:hover{ border-color:var(--border-strong); }
.pal-card.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border); }
.pal-card .pal-name{ font-size:12.5px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.pal-card .pal-tags{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-faint); }
.pal-blocks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:5px; }
.pal-block{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-dim); background:var(--bg-4); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:4px 7px; overflow:hidden; }
.pal-block i{ width:14px; height:14px; border-radius:3px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.3); }
.pal-block span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px){ .tool-layout{ grid-template-columns:1fr; } }

/* build guide step list */
.guide-row{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; width:100%; text-align:left; background:transparent; border:none; border-top:1px solid var(--border-soft); border-radius:0; padding:7px 10px; font-weight:500; color:var(--text); white-space:normal; }
.guide-row:hover{ background:var(--bg-3); border-color:var(--border-soft); }
.guide-row.current{ background:var(--accent-soft); }
.guide-row.done{ color:var(--text-faint); }
.guide-row.done .mono-dim::after{ content:' ✓'; color:var(--good); }
.guide-row .gb-mats{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.guide-row .gb-mat, #guide-bar .gb-mat{ display:flex; align-items:center; gap:4px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); background:var(--bg-3); border:1px solid var(--border-soft); border-radius:999px; padding:2px 7px 2px 3px; }
.guide-row .gb-mat i{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* piano-roll for the note-block editor */
.roll-wrap{ position:relative; border:1px solid var(--border-soft); border-radius:var(--r-md); background:var(--bg-4); overflow:auto; max-height:320px; }
.roll-wrap canvas{ display:block; }
.transport{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* map picker */
.map-box{ position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:#aad3df; cursor:grab; user-select:none; touch-action:none; }
.map-box.dragging{ cursor:grabbing; }
.map-box canvas{ position:absolute; inset:0; width:100%; height:100%; }
.map-attrib{ position:absolute; right:0; bottom:0; font-size:10px; background:rgba(255,255,255,0.85); color:#333; padding:1px 5px; }
.map-attrib a{ color:#1d4f8c; }
.map-controls{ position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:4px; }
.map-controls button{ width:30px; height:30px; padding:0; justify-content:center; background:rgba(255,255,255,0.92); color:#222; border-color:#bbb; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){ .search-btn{ min-width:0; } .search-btn .search-btn-label, .search-btn kbd{ display:none; } #doc-status{ display:none; } }
@media (max-width:980px){
  #inspector{ position:absolute; right:0; top:46px; bottom:24px; box-shadow:var(--shadow-lg); z-index:30; }
  #app:not(.inspector-open-mobile) #inspector{ width:0; opacity:0; overflow:hidden; border-left:none; }
  #doc-title{ justify-content:flex-start; }
}
@media (max-width:760px){
  #menubar .menu-trigger{ padding:6px 7px; font-size:12.5px; }
  .brand-name{ display:none; }
  #doc-title{ display:none; }
  #palette{ position:absolute; left:48px; top:46px; bottom:24px; z-index:30; box-shadow:var(--shadow-lg); }
  #export-btn .btn-label{ display:none; }
  #hud, #viewhint{ display:none; }
  .empty-actions{ grid-template-columns:1fr; }
  .menu-panel{ position:fixed; left:8px !important; right:8px; top:52px; min-width:0; max-height:calc(100vh - 70px); overflow-y:auto; }
  #layer-slider{ width:120px; }
}
@media (max-width:520px){
  #menubar{ overflow-x:auto; }
  #account-btn .btn-label, #upgrade-btn .btn-label{ display:none; }
  #restore-bar{ left:56px; right:8px; transform:none; flex-wrap:wrap; }
  #restore-bar > span{ flex:1 1 100%; }
  #toolrail{ width:42px; }
  .rail-btn{ width:32px; height:32px; }
  .hotbar-slot{ width:30px; height:30px; }
  .hotbar-slot canvas.chip{ width:24px; height:24px; }
}