:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#172b32;background:#f5f4ef;font-synthesis:none;line-height:1.55;--ink:#172b32;--muted:#53666b;--accent:#176052;--line:#d9e0db;--paper:#fff;--tint:#eef5ef;--danger:#9d2929}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
button,input,select,textarea,a{-webkit-tap-highlight-color:transparent}
button,input,select,textarea{border:1px solid #899b97;border-radius:9px}
button{background:#fff;color:var(--ink);padding:.72rem 1rem;min-height:44px;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s}
button:hover:not(:disabled){background:#eef4f1;border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover:not(:disabled){background:#104c40}
button:disabled,select:disabled{opacity:.55;cursor:default}
button.quiet{background:transparent}
button.danger{color:var(--danger)}
:focus-visible{outline:3px solid #a74911;outline-offset:3px}
input,select,textarea{background:#fff;color:var(--ink);padding:.7rem .8rem;min-height:44px;max-width:100%;font-size:1rem}
input,textarea{width:100%}
textarea{resize:vertical;line-height:1.65;min-height:180px}
input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
label{display:block;font-weight:650;font-size:.92rem;margin:0 0 .4rem}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.12;letter-spacing:-.035em;max-width:900px;margin-bottom:1.1rem;font-weight:750}
h2{font-size:1.35rem;line-height:1.3;letter-spacing:-.02em;margin-bottom:.85rem}
h3{font-size:1.15rem}
.topbar{max-width:1280px;margin:auto;padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:750;text-decoration:none;line-height:1.2}
.mark{display:grid;place-items:center;background:var(--accent);color:white;border-radius:8px;width:30px;height:30px;flex-shrink:0}
.language-control{display:flex;gap:.65rem;align-items:center}
.language-control label{margin:0}
main{max-width:1280px;margin:auto;padding:0 2rem}
.hero{padding:3.3rem 0 2.4rem}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:750;color:var(--accent);margin-bottom:.75rem}
.lead{font-size:1.08rem;max-width:780px;color:var(--muted);margin-bottom:1.25rem}
.badges{display:flex;flex-wrap:wrap;gap:.55rem}
.badges span{font-size:.8rem;font-weight:650;border:1px solid #cad8cd;background:#edf2e9;border-radius:99px;padding:.32rem .75rem}
.workspace{display:grid;grid-template-columns:minmax(265px,.78fr) minmax(0,1.6fr);gap:1.4rem;align-items:start}
.card{border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:1.7rem;box-shadow:0 5px 22px #263c3210;min-width:0}
.editor{position:sticky;top:1rem}
.muted,.hint{color:var(--muted)}
.muted{font-size:.92rem}
.hint{font-size:.8rem;margin:.4rem 0 .9rem}
.field-error{color:var(--danger);font-size:.85rem;min-height:0;margin:.2rem 0 .9rem}
.field-error:empty{display:none}
#prep-form>label:not(:first-child){margin-top:1.1rem}
#build{width:100%;margin-top:.4rem}
.storage-actions{display:flex;flex-direction:column;gap:.5rem;margin:1.3rem 0 .8rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:start;gap:1rem;flex-wrap:wrap}
.view-control{min-width:145px}
.view-control select{width:100%}
.view-control label{font-size:.8rem}
.empty-state{text-align:center;padding:2.7rem 1rem;color:var(--muted)}
.empty-state h3{color:var(--ink);margin-bottom:.55rem}
.empty-state p{max-width:410px;margin:0 auto}
.empty-symbol{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1.1rem;border-radius:18px;background:var(--tint);color:var(--accent);font-size:2.2rem}
.context{font-size:.88rem;color:var(--muted);overflow-wrap:anywhere;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-top:.35rem}
.progress-heading{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem}
#percent{color:var(--accent);font-weight:750}
progress{appearance:none;display:block;width:100%;height:9px;border:0;border-radius:9px;overflow:hidden;background:#e3eae5;margin:.7rem 0 1.1rem}
progress::-webkit-progress-bar{background:#e3eae5}
progress::-webkit-progress-value{background:var(--accent);border-radius:9px}
progress::-moz-progress-bar{background:var(--accent);border-radius:9px}
.next-step{padding:.9rem 1rem;border-radius:10px;background:var(--tint);margin-bottom:1rem;overflow-wrap:anywhere}
.next-step span{display:block;font-size:.73rem;color:var(--accent);font-weight:750;margin-bottom:.2rem}
.next-step strong{font-size:.93rem}
.tasks{list-style:none;padding:0;margin:0}
.task{border-bottom:1px solid var(--line);padding:.95rem 0}
.task:last-child{border-bottom:0}
.task label{display:flex;align-items:flex-start;gap:.9rem;cursor:pointer;margin:0;padding:.15rem 0;min-height:44px}
.task input[type=checkbox]{appearance:auto;accent-color:var(--accent);width:22px;height:22px;min-height:22px;margin:.15rem 0 0;flex:0 0 22px}
.task-copy{min-width:0;overflow-wrap:anywhere}
.task-copy strong{display:block;font-size:.98rem;margin-bottom:.25rem}
.task-copy span{display:block;font-size:.87rem;font-weight:400;color:var(--muted)}
.task.done .task-copy strong{color:#526660;text-decoration:line-through;text-decoration-thickness:1px}
.boundary{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem;margin:1.25rem 0 0}
.notice{background:#fff5e5;border:1px solid #d7bc8c;padding:.85rem;border-radius:9px;font-size:.85rem;margin:1rem 0}
.status{margin:1rem 0;min-height:1.6rem;font-size:.92rem;font-weight:600;overflow-wrap:anywhere}
.status[data-error=true]{color:var(--danger)}
.export-panel{margin-bottom:1.5rem}
.export-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
#output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88rem;overflow-wrap:anywhere}
footer{color:var(--muted);font-size:.78rem;padding:.5rem 0 2rem;max-width:850px}
[hidden]{display:none!important}
@media(max-width:850px){.workspace{grid-template-columns:1fr}.editor{position:static}.storage-actions{flex-direction:row;flex-wrap:wrap}.storage-actions button{flex:1 1 150px}.hero{padding-top:2.4rem}}
@media(max-width:480px){.topbar{padding:1rem;align-items:flex-start;flex-wrap:wrap}.language-control{width:100%;justify-content:space-between}.language-control select{min-width:145px}main{padding:0 1rem}.hero{padding:2rem 0 1.6rem}.card{padding:1.15rem;border-radius:13px}.section-heading{gap:.5rem}.view-control{width:100%;margin-bottom:.9rem}.export-actions{width:100%}.export-actions button{flex:1 1 120px}.task label{gap:.65rem}h1{font-size:2.15rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}