:root { --paper:#f4f0e7; --panel:#fbfaf6; --ink:#211c27; --muted:#6d6571; --line:rgba(33,28,39,.15); --purple:#65429b; --red:#a92f35; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea { font:inherit; }
.hidden { display:none !important; }
.skip-link { position:fixed; z-index:20; top:8px; left:8px; padding:10px; background:white; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.topbar { height:52px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 18px; border-bottom:1px solid var(--line); background:var(--panel); }
.topbar a { color:inherit; font-weight:900; letter-spacing:.08em; text-decoration:none; }.topbar a:last-child { justify-self:end; font-size:.78rem; letter-spacing:0; text-decoration:underline; }.topbar span { color:var(--purple); }.topbar p { margin:0; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.session-state,.onboarding { width:min(680px,calc(100% - 40px)); margin:80px auto; }
.onboarding h1 { margin:0 0 30px; font-size:clamp(2.2rem,6vw,4.5rem); line-height:1; letter-spacing:-.05em; }
.eyebrow,.rail-label { margin:0 0 10px; color:var(--muted); font-size:.67rem; font-weight:900; letter-spacing:.13em; }
form { display:grid; gap:14px; } label { display:grid; gap:7px; font-size:.76rem; font-weight:800; } input,textarea { width:100%; padding:12px; color:var(--ink); border:1px solid var(--line); border-radius:9px; background:white; } textarea { min-height:86px; resize:vertical; }
form button,.mobile-control,.information-control { min-height:44px; padding:11px 16px; color:white; border:0; border-radius:999px; background:var(--purple); font-weight:850; cursor:pointer; }
.form-state { min-height:1.4em; margin:0; color:var(--red); font-size:.8rem; }
.workspace { height:calc(100dvh - 52px); display:grid; grid-template-columns:272px minmax(0,1fr) 320px; }
.left-rail,.right-rail { overflow:auto; background:var(--panel); }
.left-rail { display:flex; flex-direction:column; gap:8px; padding:22px 14px; border-right:1px solid var(--line); }.left-rail>div { display:flex; align-items:center; gap:9px; padding:8px; }.dot { width:10px; height:10px; border-radius:50%; background:var(--purple); box-shadow:0 0 0 5px rgba(101,66,155,.12); }.left-rail button,.left-rail nav button { width:100%; padding:10px; color:inherit; border:0; border-radius:9px; background:transparent; text-align:left; cursor:pointer; }.left-rail button.active,.left-rail button:hover { background:rgba(101,66,155,.09); }.left-rail b { float:right; min-width:20px; color:white; border-radius:99px; background:var(--red); text-align:center; }.left-rail small { margin-top:auto; padding:10px; color:var(--muted); line-height:1.5; }
.work-surface { position:relative; min-width:0; overflow:auto; padding:42px clamp(24px,6vw,90px) 130px; background:linear-gradient(180deg,rgba(101,66,155,.045),transparent 180px); }.work-surface>h1 { margin:0; font-size:clamp(2.2rem,5vw,4.8rem); letter-spacing:-.05em; }.work-card,.setup-panel { max-width:700px; margin:28px auto 0; padding:22px; border:1px solid var(--line); border-radius:16px; background:white; }.work-card p { line-height:1.5; }.work-card small { color:var(--muted); }
.setup-panel h2 { margin-top:0; }.setup-panel form { grid-template-columns:1fr 1fr; }.setup-panel label:has(textarea),.setup-panel form button,.setup-panel .form-state { grid-column:1/-1; }
.composer { position:fixed; z-index:3; bottom:16px; left:max(296px,calc(50% - 350px)); width:min(700px,calc(100% - 640px)); display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 8px 24px rgba(33,28,39,.08); }.composer label,.composer small { grid-column:1/-1; }.composer textarea { min-height:52px; }.composer button:disabled { opacity:.45; cursor:not-allowed; }.composer small { color:var(--muted); }
.right-rail { padding:16px 18px; border-left:1px solid var(--line); }.right-rail details { padding:16px 0; border-bottom:1px solid var(--line); }.right-rail summary { font-weight:900; cursor:pointer; }.right-rail dl { margin:14px 0; }.right-rail dt { color:var(--muted); font-size:.7rem; }.right-rail dd { margin:3px 0 12px; font-size:.86rem; line-height:1.4; }.helper { color:var(--muted); font-size:.72rem; line-height:1.4; }
.mobile-control,.information-control { display:none; }
@media (max-width:900px) {
  .topbar { grid-template-columns:1fr 1fr; }.topbar p { display:none; }
  .workspace { grid-template-columns:1fr; }.left-rail,.right-rail { position:fixed; z-index:10; inset:52px auto 0 0; width:min(330px,88vw); transform:translateX(-105%); transition:transform .2s ease; box-shadow:12px 0 30px rgba(33,28,39,.16); }.right-rail { right:0; left:auto; width:min(380px,94vw); transform:translateX(105%); box-shadow:-12px 0 30px rgba(33,28,39,.16); }.left-rail.open,.right-rail.open { transform:none; }.mobile-control,.information-control { display:block; }.information-control { position:fixed; z-index:4; right:14px; bottom:16px; }.work-surface { padding:28px 20px 150px; }.composer { left:16px; bottom:70px; width:calc(100% - 32px); }.setup-panel form { grid-template-columns:1fr; }.setup-panel label:has(textarea),.setup-panel form button,.setup-panel .form-state { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) { .left-rail,.right-rail { transition:none; } }