:root {
  color-scheme:light;
  --brand-navy:#0B2A4A;
  --brand-blue:#0F4B7A;
  --brand-sky:#3C8DCC;
  --brand-gold:#D4A443;
  --surface-cream:#F7F4EA;
  --surface-muted:#E2E8F0;
  --canvas:#FFFFFF;
  color:var(--brand-navy);
  background:var(--surface-cream);
  font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
a{color:var(--brand-blue)}
.topbar{background:var(--canvas);color:var(--brand-navy);border-bottom:1px solid var(--surface-muted);display:flex;justify-content:space-between;align-items:center;padding:4px clamp(16px,4vw,60px);gap:18px;min-height:144px}
.brand{display:block;flex-shrink:1;min-width:0;line-height:0}
.brand-logo{display:block;width:min(390px,100%);height:auto;max-width:100%;object-fit:contain}
.top-right{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;font-size:.85rem}
.pill,.intro-mark{border:1px solid #B9C8D4;border-radius:99px;color:var(--brand-blue);padding:5px 12px;font-size:.72rem;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.textbtn,.text-action{background:transparent;color:var(--brand-blue);border:none;text-decoration:underline;text-underline-offset:3px}
main{width:min(1460px,94vw);margin:32px auto 48px}
h1{font:600 clamp(1.85rem,3vw,2.5rem)/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.02em;margin:5px 0 12px}
h2{font-size:1.33rem;letter-spacing:-.025em;margin:0}
h3{font-size:1.1rem;margin:0 0 8px}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.1em;color:var(--brand-blue)}
.subtle{color:#4A6279;line-height:1.65;margin:0;max-width:70ch}
.small{font-size:.84rem;line-height:1.55}
.muted{color:#5B6F84}
.primary,.secondary,.external{border-radius:8px;padding:11px 16px;border:1px solid transparent;font-size:.88rem;font-weight:650;line-height:1.35;text-align:center;text-decoration:none}
.primary{background:var(--brand-blue);color:white}
.primary:hover{background:var(--brand-navy)}
.secondary,.external{border-color:#BFCFDB;background:white;color:var(--brand-blue)}
.secondary:hover,.external:hover{border-color:var(--brand-blue);background:#F5F9FD}
.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.intro h1{margin-top:5px}
.module-nav{display:flex;gap:12px;padding-bottom:15px;border-bottom:2px solid var(--surface-muted);flex-wrap:wrap;margin-bottom:24px}
.module-choice{padding:12px 16px;border-radius:8px;border:1px solid var(--surface-muted);background:#fff;color:var(--brand-navy);font-weight:700;text-align:left;min-height:48px}
.module-choice:hover{border-color:var(--brand-blue)}
.module-choice.active{background:var(--brand-navy);color:white;border-color:var(--brand-navy)}
.module-lead{margin-bottom:20px}
.module-lead h2{font:600 clamp(1.5rem,2.5vw,2rem)/1.25 Georgia,"Times New Roman",serif;margin:5px 0 8px}
.ai-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px}
.ai-panel,.sidebar,.workspace,.auth-panel{background:white;border:1px solid var(--surface-muted);border-radius:10px;box-shadow:0 5px 23px #0B2A4A0b}
.ai-panel{padding:26px}
.ai-panel-muted{background:#F9FAFA}
.ai-panel p{margin:5px 0 20px}
.ai-panel form{display:flex;flex-direction:column;gap:12px}
.ai-panel label,.ai-result label{font-weight:700;color:var(--brand-navy);font-size:.9rem}
.ai-panel input,.ai-panel select,.ai-panel textarea,.auth-panel input{border:1px solid #B9C8D4;border-radius:8px;padding:11px 12px;width:100%;background:white;color:var(--brand-navy)}
.ai-panel textarea{resize:vertical;line-height:1.55}
.ai-result{margin-top:18px;border-top:1px solid var(--surface-muted);padding-top:18px}
.ai-result textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.8rem;background:#F7F9FB;margin:8px 0 10px}
.workflow-steps{padding-left:19px;margin:10px 0 26px;color:#354F68}
.workflow-steps li{margin:10px 0}
.action-stack{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.external{display:flex;align-items:center;justify-content:space-between;gap:15px}
.editor-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.editor-intro h2{margin:6px 0}
.studio-grid{display:grid;grid-template-columns:265px minmax(0,1fr);gap:18px}
.sidebar{padding:19px;align-self:start;min-height:260px}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--surface-muted)}
.section-chip{display:inline-block;border:1px solid #C1D2DF;color:var(--brand-blue);padding:2px 10px;border-radius:20px;font-size:.76rem}
.projects-list{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.project-entry{width:100%;text-align:left;background:white;border:1px solid transparent;border-radius:8px;padding:12px;display:flex;justify-content:space-between;gap:8px;color:var(--brand-navy)}
.project-entry:hover{background:#EFF5FA}
.project-entry.selected{background:#EDF5FB;border-color:#ABC7DE;color:var(--brand-blue)}
.workspace{min-height:510px;padding:0;overflow:hidden}
.empty{padding:100px 25px;text-align:center;color:#5B6F84}
.empty-icon{font-family:monospace;font-size:2rem;background:#F0F6FA;border-radius:50%;width:80px;height:80px;display:grid;place-items:center;margin:0 auto 16px;color:var(--brand-blue)}
.editor-heading{padding:25px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
.editor-heading h2{font-size:1.45rem;margin:5px 0}
.editor-actions{display:flex;gap:9px;flex-wrap:wrap}
.tabs{display:flex;gap:7px;border-top:1px solid var(--surface-muted);padding:12px 20px 0}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:10px 14px;color:#405F7D;font-family:ui-monospace,monospace;font-size:.84rem}
.tabs button.active{border-color:var(--brand-blue);color:var(--brand-navy);background:#EFF5FA}
.code-editor{display:block;background:#132E49;color:#F1F7FC;border:0;resize:vertical;width:100%;min-height:290px;padding:22px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.87rem;line-height:1.6;tab-size:2;white-space:pre}
.preview-head,.snapshot-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 25px 10px}
.preview-head p,.snapshot-head p{margin:0}
.snapshot-head{padding-top:25px}
iframe{margin:7px 2%;width:96%;height:255px;border:1px solid #CFDAE3;border-radius:8px;background:white}
.snapshot-list{padding:0 25px 25px;display:flex;flex-wrap:wrap;gap:9px}
.snapshot{display:flex;align-items:center;gap:12px;border:1px solid var(--surface-muted);border-radius:8px;padding:10px 12px;background:#FCFDFE;font-size:.82rem}
.snapshot button{background:white;border:1px solid #C0D0DC;border-radius:6px;padding:6px 10px}
.auth-panel{max-width:560px;margin:50px auto;padding:36px}
.auth-panel form{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.auth-panel label{display:block;font-weight:650;font-size:.9rem}
.auth-panel input{margin-top:8px}
.hint{font-size:.83rem;color:#50677A;margin:20px 0 0}
.setup-panel p{line-height:1.65}
.pending-preview{display:flex;flex-direction:column;gap:4px;margin-top:25px;padding:16px 18px;border-left:4px solid var(--brand-gold);background:#F8FAFC;color:var(--brand-navy)}
.pending-preview span{font-size:.83rem;color:#53677A}
.alert{position:fixed;bottom:20px;right:20px;background:var(--brand-navy);color:white;border-radius:8px;padding:14px 18px;max-width:min(400px,90vw);box-shadow:0 10px 32px #0B2A4A44;z-index:8}
footer{text-align:center;color:#50677A;font-size:.79rem;padding:22px}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--brand-sky);outline-offset:3px}
.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
@media(max-width:970px){.ai-grid,.studio-grid{grid-template-columns:1fr}.sidebar{min-height:auto}.intro,.editor-intro,.editor-heading{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.topbar{flex-wrap:wrap;padding:6px 20px 14px}.top-right{width:100%;justify-content:flex-start}.brand-logo{width:min(390px,90vw)}.pill{white-space:normal}.intro-mark{display:none}}
@media(max-width:530px){main{width:94vw;margin:23px auto}.auth-panel,.ai-panel{padding:22px}.module-choice{width:100%}.tabs{overflow:auto;padding:8px 12px 0}.tabs button{white-space:nowrap}.editor-actions{width:100%}.editor-actions button{flex:1}.preview-head,.snapshot-head{padding:16px}.snapshot-list{padding:0 16px 16px}}