:root{--bg:#070d14;--bg2:#0b121b;--surface:#0c151f;--surface2:#09111a;--border:#203247;--border-soft:#182a3b;--text:#f4f6f8;--text2:#b9c4d5;--muted:#788597;--accent:#ff8a00;--accent2:#ff9800;--maze:#f2f2ef;--font:Inter,Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ease:180ms cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}body{min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}
#maze-studio-root{min-height:100vh;background:radial-gradient(circle at 50% -20%,rgba(255,138,0,.06),transparent 28%),linear-gradient(180deg,#070d14 0%,#0a111a 100%)}
#studio-header{width:min(100%,900px);margin:0 auto;padding:max(22px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));position:relative;z-index:5}.header-inner{display:flex;justify-content:space-between;align-items:flex-start}.brand-wordmark{display:flex;align-items:center;gap:7px;font-weight:850;line-height:.9;letter-spacing:-2px}.brand-i,.brand-maze{font-size:44px;color:#f5f7fa}.brand-heart-svg{width:53px;height:53px;display:block;flex:0 0 auto;filter:drop-shadow(0 5px 14px rgba(255,138,0,.35))}.heart-fill{fill:var(--accent)}.inner-shape{fill:none;stroke:#fff;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center;animation:heart-shape-cycle 6s infinite backwards}.inner-shape-circle{animation-delay:0s}.inner-shape-square{animation-delay:2s}.inner-shape-triangle{animation-delay:4s}@keyframes heart-shape-cycle{0%,100%{opacity:0;transform:scale(.5) rotate(-20deg)}4%,29%{opacity:1;transform:scale(1) rotate(0deg)}33%{opacity:0;transform:scale(.5) rotate(20deg)}}@media (prefers-reduced-motion:reduce){.inner-shape{animation:none!important;opacity:0}.inner-shape-triangle{opacity:1;transform:none}}.header-subtitle{margin:12px 0 0;color:var(--text2);font-size:20px;letter-spacing:.2px}.header-subtitle b{margin:0 12px;color:#8a96a7;font-weight:400}.header-actions{display:flex;gap:16px;padding-top:2px}.round-header-btn{width:58px;height:58px;border-radius:50%;border:1.5px solid #1c3045;background:#0b131e;color:#f4f6f8;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.01)}.info-glyph{font-family:Georgia,serif;font-size:32px;font-weight:700;line-height:1}
#family-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;padding:14px;border:1.5px solid var(--border);border-radius:30px;background:rgba(12,21,31,.86);box-shadow:0 12px 35px rgba(0,0,0,.12)}.family-tab{height:102px;border-radius:25px;border:1.5px solid #1c3045;background:#09111a;color:#f4f6f8;display:grid;place-items:center;transition:all var(--ease);padding:0}.family-tab svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:3.1;stroke-linejoin:round}.family-tab[data-family="circle"]{border:3px solid var(--accent);background:#101820;box-shadow:0 0 22px rgba(255,138,0,.08)}.family-tab:hover{border-color:#36516c;background:#0d1823}.family-tab[data-family="circle"]:hover{border-color:var(--accent)}.compatibility-actions,.legacy-export{display:none!important}
main{width:min(100%,900px);margin:0 auto;padding:18px max(16px,env(safe-area-inset-right)) 26px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:18px}.maze-card{border:1.5px solid var(--border);border-radius:28px;background:rgba(12,21,31,.9);padding:13px;box-shadow:0 18px 45px rgba(0,0,0,.14)}.maze-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 10px 4px}.maze-metrics{display:flex;align-items:center;gap:13px;color:#e7edf5;font-size:22px;white-space:nowrap}.status-dot{width:21px;height:21px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(255,138,0,.14)}.zoom-controls{display:flex;align-items:center;gap:8px}.tool-icon-btn,.zoom-label{height:52px;min-width:52px;border-radius:16px;border:1.5px solid #203247;background:#0a121c;color:#e8edf4;display:grid;place-items:center}.tool-icon-btn svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.zoom-label{padding:0 14px;font-size:18px;min-width:82px}.tool-icon-btn:active,.family-tab:active{transform:translateY(1px)}
.maze-canvas{width:100%;aspect-ratio:1/1;border:1.5px solid #182a3b;border-radius:23px;background:#080f17;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px}.maze-canvas #svg-viewport-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:center center}.maze-canvas svg{display:block;width:min(88%,88%);height:auto;max-height:92%;filter:none}.maze-meta{display:none}.stage-banner{border-radius:14px;padding:10px 12px;margin-bottom:10px;font-size:13px}.stage-banner:not(.hidden){display:flex;gap:8px}.stage-banner#error-banner{background:#32181a;color:#ffb4b0;border:1px solid #653136}
.advanced-card{border:1.5px solid var(--border);border-radius:28px;background:rgba(12,21,31,.9);overflow:hidden}.advanced-trigger{width:100%;min-height:82px;padding:16px 20px;border:0;background:transparent;color:#eaf0f7;display:flex;align-items:center;gap:16px;text-align:left;font-size:24px;font-weight:500}.settings-icon{width:48px;height:48px;border-radius:15px;background:#0a121c;border:1.5px solid #1c3045;display:grid;place-items:center;flex:0 0 auto}.settings-icon svg{width:30px;height:30px;fill:none;stroke:#f4f6f8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.chevron{margin-left:auto;width:26px;height:26px;fill:none;stroke:#eaf0f7;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--ease)}.advanced-trigger.is-open .chevron{transform:rotate(180deg)}.advanced-panel{padding:0 20px 20px;border-top:1px solid #17283a}.settings-content{display:grid;gap:18px;padding-top:18px}.settings-section{padding:16px;border:1px solid #1a2d40;border-radius:18px;background:#09121c}.settings-section-title{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:#7f8da0;margin-bottom:12px}.settings-section label{display:block;color:#c9d2df;font-size:14px;margin:10px 0 7px}.settings-section select,.settings-section input[type=text]{width:100%;height:46px;padding:0 12px;border-radius:12px;border:1px solid #23384e;background:#0b141e;color:#eef2f7;outline:none}.setting-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.setting-line.compact{margin-top:10px}.setting-line output{color:#ffae38;font-weight:700}.settings-section small,.settings-section p{color:#7f8da0;font-size:12px;line-height:1.45}.fader-slider{width:100%;accent-color:var(--accent);margin:12px 0}.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.mode-btn{height:42px;border:1px solid #23384e;border-radius:11px;background:#0b141e;color:#aeb9c8}.mode-btn.active{border-color:var(--accent);color:#fff;background:#171b1f}.seed-row{display:grid;grid-template-columns:1fr auto;gap:8px}.seed-row button{height:46px;border-radius:12px;border:1px solid #2a4057;background:#111b26;color:#dbe4ee;padding:0 13px}.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.color-row label{margin:0!important;font-size:12px!important}.color-row input{width:100%;height:38px;border:1px solid #2a4057;border-radius:9px;background:#0b141e;padding:3px}
.studio-footer{text-align:center;padding:28px 4px max(5px,env(safe-area-inset-bottom));color:#7d8999}.footer-rule{display:flex;align-items:center;justify-content:center;gap:22px}.footer-rule span{width:112px;height:1px;background:#657181}.footer-rule strong{font-size:17px;letter-spacing:4px;font-weight:600}.footer-rule b{color:var(--accent);font-size:20px}.studio-footer p{margin:10px 0 0;font-size:10px;letter-spacing:3px;line-height:1.6}
@media (max-width:700px){#studio-header{padding-top:max(18px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));width:100%}main{width:100%;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}.brand-i,.brand-maze{font-size:39px}.brand-heart-svg{width:47px;height:47px}.header-subtitle{font-size:18px}.round-header-btn{width:54px;height:54px}.header-actions{gap:11px}#family-selector{gap:12px;padding:12px;border-radius:26px}.family-tab{height:92px;border-radius:22px}.family-tab svg{width:52px;height:52px}.maze-card{padding:11px;border-radius:25px}.maze-metrics{font-size:18px;gap:10px}.status-dot{width:19px;height:19px}.zoom-controls{gap:5px}.tool-icon-btn,.zoom-label{height:48px;min-width:48px;border-radius:14px}.zoom-label{min-width:69px;padding:0 9px;font-size:16px}.maze-canvas{padding:12px;border-radius:20px}.advanced-trigger{font-size:21px;min-height:76px;padding:14px 16px}.settings-icon{width:45px;height:45px}.footer-rule span{width:85px}.studio-footer p{font-size:8.5px;letter-spacing:2.4px}}
@media (max-width:430px){.brand-i,.brand-maze{font-size:34px}.brand-heart-svg{width:41px;height:41px}.header-subtitle{font-size:16px}.header-subtitle b{margin:0 7px}.header-actions{gap:7px}.round-header-btn{width:49px;height:49px}.info-glyph{font-size:28px}#family-selector{gap:8px}.family-tab{height:80px;border-radius:19px}.family-tab svg{width:45px;height:45px}.maze-toolbar{align-items:flex-start}.maze-metrics{font-size:16px}.status-dot{width:17px;height:17px}.tool-icon-btn,.zoom-label{height:44px;min-width:44px}.zoom-label{min-width:58px;font-size:14px}.footer-rule{gap:12px}.footer-rule span{width:58px}.footer-rule strong{font-size:13px;letter-spacing:3px}.studio-footer p{font-size:7.2px;letter-spacing:1.7px}}
.js-compat{display:none!important}

/* Help/Tips modal (info button) */
.help-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.help-modal.hidden{display:none!important}
.help-modal-backdrop{position:absolute;inset:0;background:rgba(4,8,13,.62);backdrop-filter:blur(2px)}
.help-modal-panel{position:relative;width:min(520px,100%);max-height:min(78vh,640px);overflow-y:auto;background:#0b131e;border:1.5px solid var(--border);border-top-left-radius:26px;border-top-right-radius:26px;box-shadow:0 -18px 50px rgba(0,0,0,.35);padding:22px 20px max(22px,env(safe-area-inset-bottom));animation:help-modal-up 220ms cubic-bezier(.2,.8,.2,1)}
@media (min-width:701px){.help-modal{align-items:center}.help-modal-panel{border-radius:26px;animation:help-modal-pop 180ms cubic-bezier(.2,.8,.2,1)}}
@keyframes help-modal-up{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes help-modal-pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.help-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.help-modal-head h2{margin:0;font-size:19px;color:var(--text)}
.help-modal-close{width:38px;height:38px;border-radius:50%;border:1.5px solid #1c3045;background:#09111a;color:#dfe7f1;display:grid;place-items:center;flex:0 0 auto}
.help-modal-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.help-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.help-step{display:flex;align-items:center;gap:14px;padding:12px;border:1.5px solid var(--border-soft);border-radius:18px;background:rgba(255,255,255,.015)}
.help-step-icon{width:44px;height:44px;border-radius:14px;background:#09111a;border:1.5px solid #1c3045;display:grid;place-items:center;flex:0 0 auto;color:var(--accent)}
.help-step-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.help-step:first-child .help-step-icon svg{fill:currentColor;stroke:none}
.help-step-text{font-size:14px;line-height:1.5;color:var(--text2)}
.help-step-text strong{color:var(--text);font-size:15px}
@media (max-width:430px){.help-modal-panel{padding:18px 15px max(18px,env(safe-area-inset-bottom))}.help-step{padding:10px;gap:11px}.help-step-icon{width:40px;height:40px}}

/* Reference-matched quick actions and restored downloads */
.header-quick-actions{display:grid;grid-template-columns:1.1fr 1.1fr 52px;gap:8px;margin-top:14px;padding:7px;border:1px solid #1b2e41;border-radius:18px;background:rgba(8,16,25,.72)}
.quick-action{height:42px;border:1px solid #203247;border-radius:12px;background:#0a121c;color:#dfe7f1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:650;transition:all var(--ease)}
.quick-action svg{width:18px;height:18px;fill:currentColor}.quick-action:not(.quick-action-primary) svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.quick-action-primary{background:linear-gradient(180deg,#ff9800,#ff7900);border-color:#ff9800;color:#fff;box-shadow:0 7px 18px rgba(255,138,0,.13)}
.quick-action.icon-only{width:52px;padding:0}.legacy-top-solve{display:none!important}
.family-tab.is-selected{border:3px solid var(--accent);background:#101820;box-shadow:0 0 22px rgba(255,138,0,.08);color:#fff}.family-tab:not(.is-selected){border:1.5px solid #1c3045;background:#09111a;color:#f4f6f8}
.maze-canvas{aspect-ratio:1.28/1;padding:14px}.maze-canvas svg{width:min(78%,78%);max-height:94%}
.download-actions{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:10px;margin-top:-4px}.download-actions button{height:48px;border-radius:14px;border:1px solid #1d3145;background:#0a121c;color:#aebccc;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600}.download-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.download-actions button:hover{border-color:#34506b;color:#f0f4f8}
@media (max-width:700px){.header-quick-actions{margin-top:12px;grid-template-columns:1fr 1fr 48px;padding:6px;border-radius:16px}.quick-action{height:40px;font-size:13px}.quick-action.icon-only{width:48px}.maze-canvas{aspect-ratio:1.22/1;padding:10px}.maze-canvas svg{width:min(76%,76%)}.download-actions{gap:8px}.download-actions button{height:44px;font-size:12px;border-radius:12px}}
@media (max-width:430px){.header-quick-actions{grid-template-columns:1fr 1fr 44px}.quick-action{height:38px;font-size:12px}.quick-action.icon-only{width:44px}.maze-canvas{aspect-ratio:1.18/1}.maze-canvas svg{width:min(72%,72%)}.download-actions{grid-template-columns:1fr 1fr 1.2fr}.download-actions button{height:42px;font-size:11px}}


/* V6 compact control layout: Solve replaces Preview; downloads only at bottom. */
.header-quick-actions{grid-template-columns:1fr 1fr 48px;gap:8px;margin-top:12px}
.quick-action{height:42px;border-radius:13px}
.quick-action.is-active{border-color:var(--accent);color:#fff;background:#171b1f;box-shadow:0 0 18px rgba(255,138,0,.08)}
.download-section{margin-top:0;padding:2px 2px 0;text-align:center}
.download-title{color:#788597;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:3px;margin-bottom:10px}
.download-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.download-actions button{height:46px;border-radius:14px;border:1px solid #1d3145;background:#0a121c;color:#dce5f1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:650}
.download-actions button:hover{border-color:#34506b;color:#fff}
.download-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.header-quick-actions{grid-template-columns:1fr 1fr 46px;gap:7px;margin-top:11px;padding:5px}.quick-action{height:40px;font-size:13px}.quick-action.icon-only{width:46px}.download-title{font-size:10px;letter-spacing:2.6px;margin-bottom:8px}.download-actions{gap:8px}.download-actions button{height:43px;border-radius:12px;font-size:12px}}
@media (max-width:430px){.header-quick-actions{grid-template-columns:1fr 1fr 42px;gap:6px}.quick-action{height:38px;font-size:12px}.quick-action.icon-only{width:42px}.download-actions{gap:7px}.download-actions button{height:41px;font-size:11px}}

/* V7 — compact mobile toolbar and zero horizontal overflow */
html, body { overflow-x: hidden; }
#maze-studio-root { width: 100%; overflow-x: clip; }

/* The cell/edge counter is secondary on phones; keep the zoom tools clean and centered. */
.maze-metrics { display: none !important; }
.maze-toolbar { justify-content: flex-end; padding: 0 0 8px; width: 100%; }
.zoom-controls { margin-left: auto; gap: 6px; }
.tool-icon-btn, .zoom-label { height: 44px; min-width: 44px; border-radius: 13px; }
.zoom-label { min-width: 62px; padding: 0 8px; font-size: 14px; font-weight: 600; }
.tool-icon-btn svg { width: 22px; height: 22px; }

/* Keep the preview area proportional instead of consuming the whole screen. */
.maze-canvas { aspect-ratio: 1.26 / 1; padding: 10px; }
.maze-canvas svg { width: min(74%, 74%); max-height: 90%; }

/* Compact three-shape selector, especially on narrow phones. */
#family-selector { gap: 10px; padding: 10px; margin-top: 17px; }
.family-tab { height: 78px; border-radius: 19px; }
.family-tab svg { width: 44px; height: 44px; }

@media (max-width: 430px) {
  #studio-header { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 14px; }
  .brand-i, .brand-maze { font-size: 33px; }
  .brand-heart-svg { width: 40px; height: 40px; }
  .header-subtitle { font-size: 15px; }
  .header-actions { gap: 6px; }
  .round-header-btn { width: 47px; height: 47px; }
  #family-selector { gap: 7px; padding: 8px; border-radius: 23px; }
  .family-tab { height: 70px; border-radius: 17px; }
  .family-tab svg { width: 40px; height: 40px; }
  .header-quick-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; gap: 5px; padding: 5px; }
  .quick-action { min-width: 0; height: 38px; font-size: 12px; }
  .quick-action.icon-only { width: 40px; }
  .quick-action svg { width: 17px; height: 17px; }
  .maze-card { padding: 9px; border-radius: 22px; }
  .maze-toolbar { padding-bottom: 7px; }
  .zoom-controls { gap: 4px; }
  .tool-icon-btn, .zoom-label { height: 40px; min-width: 40px; border-radius: 12px; }
  .zoom-label { min-width: 55px; font-size: 13px; }
  .tool-icon-btn svg { width: 20px; height: 20px; }
  .maze-canvas { aspect-ratio: 1.20 / 1; padding: 8px; border-radius: 18px; }
  .maze-canvas svg { width: min(70%, 70%); }
  .advanced-trigger { min-height: 68px; font-size: 19px; }
  .download-section { padding-top: 0; }
}

/* V8 — two-level settings: Basic for everyday users, Advanced for expert control. */
.settings-card {
  border: 1.5px solid var(--border);
  border-radius: 24px;
  background: rgba(12,21,31,.9);
  overflow: hidden;
}
.settings-trigger {
  width: 100%;
  min-height: 70px;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: #eaf0f7;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  font-size: 20px;
  font-weight: 600;
}
.settings-trigger .chevron { transition: transform var(--ease); }
.settings-trigger.is-open .chevron { transform: rotate(180deg); }
.settings-panel { border-top: 1px solid #17283a; padding: 0 16px 16px; }
.basic-hint { margin: 8px 0 0; }
.basic-card { order: 0; }
.advanced-card { order: 1; }
.basic-card .settings-content,
.advanced-card .settings-content { gap: 12px; padding-top: 12px; }
.basic-card .settings-section { padding: 13px; }
.basic-card .settings-section-title { margin-bottom: 9px; }
.basic-card .settings-section label { margin: 7px 0 6px; }
#circle-advanced-controls.hidden { display:none!important; }
@media (max-width:430px) {
  .settings-trigger { min-height: 62px; padding: 11px 13px; font-size: 18px; gap: 11px; }
  .settings-panel { padding: 0 12px 12px; }
  .basic-card .settings-section { padding: 12px; }
}

/* V11 — settings/download order: Preview → Basic → Advanced → Downloads → Footer. */
main > .basic-card { order: 10; }
main > .advanced-card { order: 20; }
main > .download-section { order: 30; }
main > .studio-footer { order: 40; }

#circle-rings-hint{display:block;max-width:34rem}

/* V21 — device-class coverage beyond the 700px/430px phone breakpoints. */

/* Very narrow phones / folded cover-screens (e.g. Galaxy Z Fold cover, small Android devices). */
@media (max-width:360px){
  #studio-header{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  main{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:11px}
  .brand-i,.brand-maze{font-size:29px}
  .brand-heart-svg{width:35px;height:35px}
  .header-subtitle{font-size:13px}
  #family-selector{gap:6px;padding:7px;margin-top:14px}
  .family-tab{height:64px;border-radius:15px}
  .family-tab svg{width:36px;height:36px}
  .header-quick-actions{gap:4px;padding:4px}
  .quick-action{font-size:11px;height:36px}
  .quick-action.icon-only{width:38px}
  .maze-card{padding:8px}
  .download-actions{gap:6px}
  .download-actions button{font-size:10px;height:38px}
}

/* Short-height / landscape phones: the header + canvas + controls stack can exceed a short
   viewport. Trim vertical rhythm so more fits without extra scrolling; layout stays scrollable
   either way (no fixed-position elements), this just reduces how much scrolling is needed. */
@media (max-height:480px) and (orientation:landscape){
  #studio-header{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:0}
  .brand-i,.brand-maze{font-size:27px}
  .brand-heart-svg{width:33px;height:33px}
  .header-subtitle{font-size:13px;margin-top:6px}
  .header-actions{gap:8px}
  .round-header-btn{width:42px;height:42px}
  #family-selector{margin-top:10px;padding:8px;gap:8px}
  .family-tab{height:52px;border-radius:15px}
  .family-tab svg{width:30px;height:30px}
  main{gap:10px;padding-top:10px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .maze-card{padding:8px}
  .maze-canvas{aspect-ratio:2/1;padding:8px}
  .maze-canvas svg{max-height:86%}
  .advanced-trigger,.settings-trigger{min-height:50px;font-size:16px;padding:10px 14px}
  .studio-footer{padding-top:10px}
}

/* Large tablets / small laptops in the gap between the phone breakpoints (≤700px) and the
   900px content cap: the container already centers via width:min(100%,900px), so this band
   just confirms comfortable spacing rather than inheriting cramped phone rules. No visual
   change from the existing desktop-sized rules is needed here — flagged in CONTINUE_PROMPT.md
   as unverified since this environment has no browser to screenshot it. */


/* ===== FINAL RESPONSIVE LAYOUT =====
   One layout system only. The visual design and component styles above remain unchanged.
   This block controls placement/sizing across phones, tablets and desktop. */

html, body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#maze-studio-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

#studio-header,
main,
.workspace,
.control-column,
#viewport-panel,
.settings-card,
.download-section {
  min-width: 0;
  max-width: 100%;
}

main {
  flex: 1 0 auto;
}

/* PHONE: keep the existing compact vertical composition. */
@media (max-width: 759px) {
  #studio-header {
    width: 100%;
    margin: 0;
  }

  main {
    width: 100%;
    margin: 0;
    padding-top: 14px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .workspace {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .control-column {
    display: contents;
  }

  #family-selector { order: 10; width: 100%; }
  .header-quick-actions { order: 20; width: 100%; }
  #viewport-panel { order: 30; width: 100%; margin: 0; }
  .basic-card { order: 40; width: 100%; }
  .advanced-card { order: 50; width: 100%; }
  .download-section { order: 60; width: 100%; }
  .studio-footer { order: 70; width: 100%; margin-top: auto; }

  .maze-canvas {
    width: 100%;
    max-width: 100%;
  }

  .maze-canvas #svg-viewport-wrapper {
    min-width: 0;
    min-height: 0;
  }

  .maze-canvas svg {
    max-width: 100%;
  }
}

/* TABLET: compact sidebar + larger preview. */
@media (min-width: 760px) and (max-width: 1023px) {
  #studio-header {
    width: min(calc(100% - 40px), 1100px);
    margin-inline: auto;
  }

  main {
    width: min(calc(100% - 40px), 1100px);
    margin-inline: auto;
    padding: 18px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .workspace {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "controls preview";
    align-items: start;
    column-gap: clamp(16px, 2.5vw, 26px);
    row-gap: 0;
  }

  .control-column {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  #viewport-panel {
    grid-area: preview;
    align-self: start;
    width: 100%;
    margin: 0;
  }

  #family-selector,
  .header-quick-actions,
  .basic-card,
  .advanced-card {
    width: 100%;
    margin-top: 0;
  }

  #family-selector {
    gap: 8px;
    padding: 9px;
  }

  .family-tab {
    height: 72px;
    border-radius: 18px;
  }

  .family-tab svg {
    width: 42px;
    height: 42px;
  }

  .header-quick-actions {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px;
  }

  .quick-action { min-width: 0; }

  .maze-canvas {
    aspect-ratio: 1 / 1;
  }

  .download-section {
    width: min(100%, 760px);
    margin-inline: auto;
  }
}

/* DESKTOP: professional two-column application workspace. */
@media (min-width: 1024px) {
  #studio-header {
    width: min(calc(100% - 48px), 1500px);
    margin-inline: auto;
    padding: 28px 0 12px;
  }

  main {
    width: min(calc(100% - 48px), 1500px);
    margin-inline: auto;
    padding: 14px 0 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1 0 auto;
  }

  .workspace {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "controls preview";
    align-items: start;
    column-gap: clamp(22px, 2.4vw, 36px);
    row-gap: 0;
  }

  .control-column {
    grid-area: controls;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  #viewport-panel {
    grid-area: preview;
    align-self: start;
    width: 100%;
    margin: 0;
    padding: 14px;
    border-radius: 28px;
  }

  #family-selector,
  .header-quick-actions,
  .basic-card,
  .advanced-card {
    width: 100%;
    margin-top: 0;
  }

  #family-selector {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    border-radius: 24px;
  }

  .family-tab {
    height: clamp(72px, 7vw, 92px);
    border-radius: 19px;
  }

  .family-tab svg {
    width: clamp(42px, 4vw, 54px);
    height: clamp(42px, 4vw, 54px);
  }

  .header-quick-actions {
    grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 52px;
    gap: 8px;
    padding: 7px;
  }

  .quick-action { min-width: 0; }

  .settings-card {
    width: 100%;
  }

  .settings-trigger {
    min-height: 68px;
    font-size: 19px;
    padding: 12px 14px;
  }

  .settings-panel,
  .advanced-panel {
    max-width: 100%;
  }

  .maze-toolbar {
    width: 100%;
    min-height: 50px;
    padding: 0 0 10px;
  }

  .zoom-controls {
    flex-wrap: nowrap;
  }

  .tool-icon-btn,
  .zoom-label {
    height: 50px;
    min-width: 50px;
  }

  /* The preview frame is square; the generated SVG remains proportional. */
  .maze-canvas {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: clamp(16px, 2vw, 28px);
    border-radius: 22px;
  }

  .maze-canvas #svg-viewport-wrapper {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .maze-canvas svg {
    display: block;
    width: min(92%, 760px);
    height: auto;
    max-width: 100%;
    max-height: 94%;
  }

  .download-section {
    width: min(100%, 760px);
    margin-inline: auto;
    padding: 0;
  }

  .download-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .download-actions button { min-width: 0; }

  .studio-footer {
    width: 100%;
    margin-top: auto;
    padding: 10px 4px max(8px, env(safe-area-inset-bottom));
  }
}

/* LARGE DESKTOP / ULTRAWIDE: keep the workspace centered and controlled. */
@media (min-width: 1440px) {
  #studio-header,
  main {
    width: min(calc(100% - 64px), 1560px);
  }

  .workspace {
    grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
    column-gap: 34px;
  }

  .maze-canvas { padding: 24px; }
}

@media (min-width: 1920px) {
  #studio-header,
  main {
    width: min(calc(100% - 80px), 1600px);
  }

  .workspace {
    grid-template-columns: 390px minmax(0, 1fr);
    column-gap: 38px;
  }

  .maze-canvas svg {
    width: min(90%, 820px);
  }
}
.seo-intro{width:min(100%,900px);margin:0 auto;padding:2px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.seo-intro h1{font-size:13px;font-weight:650;letter-spacing:.2px;color:var(--text2);margin:0 0 3px;line-height:1.3}
.seo-intro p{font-size:11px;line-height:1.4;color:var(--muted);margin:0;max-width:70ch}
.learn-section{width:min(100%,900px);margin:0 auto;padding:6px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:14px}
.learn-heading{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin:6px 0 0}
.learn-card{border:1.5px solid var(--border);border-radius:18px;background:rgba(12,21,31,.9);padding:16px 18px}
.learn-card h3{margin:0 0 9px;font-size:15.5px;color:var(--text);font-weight:650;letter-spacing:.1px;line-height:1.35}
.learn-card p{margin:0;font-size:13.5px;line-height:1.75;color:var(--text2);max-width:62ch;letter-spacing:.1px}
.learn-card p+p{margin-top:12px}
.learn-card strong{color:var(--text)}
.learn-faq summary{cursor:pointer;list-style:none}
.learn-faq summary::-webkit-details-marker{display:none}
.learn-faq summary h3{display:flex;align-items:center;justify-content:space-between}
.learn-faq summary h3::after{content:"+";color:var(--accent);font-weight:700;font-size:18px;margin-left:10px}
.learn-faq[open] summary h3::after{content:"–"}
.faq-item{padding-top:12px;border-top:1px solid var(--border-soft);margin-top:12px}
.faq-item:first-of-type{border-top:none;margin-top:14px;padding-top:0}
.faq-q{font-weight:600;color:var(--text);margin-bottom:4px!important}
.learn-lede{color:var(--text)!important;font-size:14.5px!important;line-height:1.8!important;max-width:64ch}
.lede-highlight{color:var(--accent);font-weight:650}

.stat-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;position:relative}
.stat-chip{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px 6px;border:1px solid rgba(255,138,0,.18);border-radius:13px;background:rgba(255,138,0,.05)}
.stat-chip strong{color:var(--text);font-size:14px}
.stat-chip span{color:var(--muted);font-size:10px;letter-spacing:.3px;text-transform:uppercase}
@media (max-width:430px){.stat-chips{gap:6px}.stat-chip{padding:8px 4px}.stat-chip strong{font-size:12.5px}.stat-chip span{font-size:8.8px}}

.pull-note{display:flex;gap:10px;align-items:flex-start;margin-top:13px;padding:12px 14px;border-left:2.5px solid var(--accent);background:rgba(255,138,0,.045);border-radius:0 12px 12px 0;font-size:12.5px;line-height:1.6;color:var(--text2)}
.pull-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pull-note strong{color:var(--text)}

.tips-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px}
.tips-list li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--text2)}
.tips-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:7px}
.tips-list strong{color:var(--text)}

/* Distinct, illustrated learn-cards */
:root{--accent-blue:#4fa3ff;--accent-teal:#2bd4b0;--accent-purple:#b892ff}
.learn-card--intro{position:relative;overflow:hidden;border-color:#33241a;background:linear-gradient(160deg,rgba(255,138,0,.09),rgba(12,21,31,.9) 55%)}
.intro-watermark{position:absolute;top:-14px;right:-10px;width:110px;height:110px;fill:var(--accent);opacity:.08;transform:rotate(8deg)}
.learn-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.learn-card-head h3{margin:0}
.learn-card-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;background:#09111a;border:1.5px solid #1c3045}
.learn-card-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.icon-tint-blue .learn-card-icon{color:var(--accent-blue);box-shadow:inset 0 0 0 1px rgba(79,163,255,.12)}
.icon-tint-teal .learn-card-icon{color:var(--accent-teal);box-shadow:inset 0 0 0 1px rgba(43,212,176,.12)}
.icon-tint-purple .learn-card-icon{color:var(--accent-purple);box-shadow:inset 0 0 0 1px rgba(184,146,255,.12)}
.icon-tint-accent .learn-card-icon{color:var(--accent);box-shadow:inset 0 0 0 1px rgba(255,138,0,.12)}
.icon-tint-blue{border-top:2.5px solid var(--accent-blue)}
.icon-tint-teal{border-top:2.5px solid var(--accent-teal)}
.icon-tint-purple{border-top:2.5px solid var(--accent-purple)}
.icon-tint-accent{border-top:2.5px solid var(--accent)}
:root{--accent-gold:#ffcf5c}
.icon-tint-gold .learn-card-icon{color:var(--accent-gold);box-shadow:inset 0 0 0 1px rgba(255,207,92,.14)}
.icon-tint-gold{border-top:2.5px solid var(--accent-gold)}

.mini-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mini-steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 6px;border:1px solid var(--border-soft);border-radius:14px;background:rgba(255,255,255,.015)}
.mini-step-icon{width:32px;height:32px;border-radius:10px;background:#09111a;border:1px solid #1c3045;display:grid;place-items:center;color:var(--accent)}
.mini-step-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mini-steps li span:last-child{font-size:11px;line-height:1.35;color:var(--text2)}
@media (max-width:520px){.mini-steps{grid-template-columns:repeat(2,1fr)}}

.shape-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.shape-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:14px 8px;border:1.5px solid var(--border-soft);border-radius:16px;background:#09111a}
.shape-tile svg{width:34px;height:34px;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round}
.shape-tile strong{color:var(--text);font-size:13px}
.shape-tile span{color:var(--muted);font-size:10.5px;line-height:1.3}
@media (max-width:480px){.shape-showcase{gap:7px}.shape-tile{padding:10px 5px}.shape-tile svg{width:28px;height:28px}}

/* Responsive polish for the illustrated learn-cards across breakpoints */
@media (max-width:700px){
  .learn-card{padding:14px 15px}
  .learn-card-icon{width:37px;height:37px;border-radius:12px}
  .learn-card-icon svg{width:19px;height:19px}
  .intro-watermark{width:90px;height:90px}
}
@media (max-width:430px){
  .learn-card{padding:13px 13px}
  .learn-card-head{gap:9px;margin-bottom:8px}
  .learn-card-head h3{font-size:14px}
  .learn-card-icon{width:33px;height:33px;border-radius:10px}
  .learn-card-icon svg{width:16px;height:16px;stroke-width:2}
  .intro-watermark{width:72px;height:72px;top:-8px;right:-8px}
  .stat-chip strong{font-size:12.5px}
  .pull-note{padding:10px 11px;font-size:11.5px;gap:8px}
  .pull-note svg{width:14px;height:14px}
  .tips-list li{font-size:12.3px;gap:8px}
  .learn-heading{font-size:11px;letter-spacing:1.5px}
}
@media (max-width:360px){
  .stat-chips{grid-template-columns:repeat(3,1fr);gap:5px}
  .stat-chip{padding:7px 3px;border-radius:11px}
  .stat-chip strong{font-size:11.5px}
  .stat-chip span{font-size:8px}
  .mini-steps{grid-template-columns:repeat(2,1fr);gap:6px}
  .mini-steps li{padding:8px 5px}
  .mini-step-icon{width:28px;height:28px}
  .shape-showcase{grid-template-columns:repeat(3,1fr);gap:5px}
  .shape-tile{padding:8px 3px;border-radius:13px}
  .shape-tile svg{width:24px;height:24px}
  .shape-tile span{display:none}
  .learn-card-head{flex-wrap:wrap}
}
@media (min-width:760px) and (max-width:1023px){
  .learn-section{width:min(100%,760px)}
}
@media (min-width:1024px){
  .learn-section{width:min(100%,860px);margin:0 auto}
  .mini-steps{grid-template-columns:repeat(4,1fr)}
  .shape-showcase{grid-template-columns:repeat(3,1fr)}
}
.footer-links{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;letter-spacing:1px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text2);text-decoration:underline}
.footer-links span{color:var(--border)}

/* Static info pages (about/privacy/contact) — shared minimal styles */
.info-page{width:min(100%,720px);margin:0 auto;padding:40px max(16px,env(safe-area-inset-right)) 60px max(16px,env(safe-area-inset-left))}
.info-page h1{font-size:26px;margin:0 0 18px}
.info-page h2{font-size:17px;margin:26px 0 10px;color:var(--text)}
.info-page p,.info-page li{font-size:14px;line-height:1.7;color:var(--text2)}
.info-page ul{margin:0 0 12px;padding-left:20px}
.info-page a{color:var(--accent)}
.info-back{display:inline-block;margin-bottom:24px;color:var(--muted);font-size:13px;text-decoration:none}
.info-back:hover{color:var(--text2)}