:root{--cw-bg:#F0E9D7;--cw-surface:#F8F4E8;--cw-ink:#262722;--cw-muted:#5D5F55;--cw-accent:#154035;--cw-accent-ink:#F7F3E6;--cw-line:#26272229;
--sans:Onest,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:Newsreader,Georgia,serif;--r:14px;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
details::details-content{box-sizing:border-box}
details>*:not(summary){box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--cw-bg);color:var(--cw-ink);font:16px/1.55 var(--sans);min-height:100dvh}
h1{font:500 clamp(26px,5vw,36px)/1.15 var(--serif);margin:0 0 6px}h2{font:700 16px var(--sans);margin:0 0 10px}
.lead{color:var(--cw-muted);margin:0 0 20px;max-width:60ch}.hint{color:var(--cw-muted);font-size:14px;margin:8px 0 0}
a{color:var(--cw-accent)}:focus-visible{outline:3px solid var(--cw-accent);outline-offset:2px}
.logo-mark,.logo-word{display:inline-block;background:var(--cw-accent);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.logo-mark{width:34px;aspect-ratio:203.5/167.7;-webkit-mask-image:url(/brand/mark.svg);mask-image:url(/brand/mark.svg)}
.logo-word{width:min(280px,70vw);aspect-ratio:844.2/88;background:var(--cw-ink);-webkit-mask-image:url(/brand/wordmark.svg);mask-image:url(/brand/wordmark.svg)}
.btn,button{font:600 15px var(--sans);min-height:44px;padding:10px 16px;border-radius:10px;border:1px solid var(--cw-accent);background:transparent;color:var(--cw-accent);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.primary,button.primary,[aria-pressed="true"]{background:var(--cw-accent);color:var(--cw-accent-ink)}
input[type=text],input[type=color]{font:inherit;min-height:44px;border-radius:10px;border:1px solid var(--cw-line);background:var(--cw-bg);color:var(--cw-ink);padding:8px 12px}
input[type=color]{padding:3px;width:64px;cursor:pointer}
.card{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--r);padding:16px;margin:0 0 14px}
.chip{display:inline-block;font:600 12px var(--sans);padding:3px 10px;border-radius:99px;border:1px solid var(--cw-line);color:var(--cw-muted)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg{display:flex;gap:8px;flex-wrap:wrap}.seg button{flex:1 1 90px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.sw{justify-content:flex-start;color:var(--cw-ink);border-color:var(--cw-line)}.sw[aria-pressed="true"]{color:var(--cw-accent-ink);border-color:var(--cw-accent)}
.sw span{width:22px;height:22px;border-radius:50%;border:2px solid var(--cw-bg);outline:1px solid var(--cw-line);flex:none}
.steps{margin:0;padding-left:20px;color:var(--cw-muted)}.steps li{margin:4px 0}.steps .done{color:var(--cw-ink)}
.stub{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:6px;padding:24px;text-align:center}
/* App shell: bottom tabs on phones, sidebar on wide screens */
.shell{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
.top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--cw-line);background:var(--cw-bg);position:sticky;top:0;z-index:5}
.top .title{font-weight:700}
#view{padding:20px 16px 28px;width:100%;max-width:820px;margin:0 auto;outline:none}
.nav{display:flex;gap:4px}.nav a{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;padding:8px 6px;border-radius:10px;color:var(--cw-muted);text-decoration:none;font-size:12px;font-weight:600;min-height:48px;justify-content:center}
.nav a[aria-current="page"]{color:var(--cw-accent)}.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabs{position:sticky;bottom:0;background:var(--cw-bg);border-top:1px solid var(--cw-line);padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px))}
.side{display:none}
@media (min-width:900px){
  .shell{grid-template-columns:240px 1fr;grid-template-rows:1fr}
  .side{display:flex;flex-direction:column;gap:18px;padding:20px 14px;border-right:1px solid var(--cw-line);position:sticky;top:0;height:100dvh}
  .side .nav{flex-direction:column}.side .nav a{flex-direction:row;justify-content:flex-start;gap:10px;font-size:15px;padding:10px 12px}
  .top,.tabs{display:none}#view{padding:36px 32px}
}
@media (prefers-reduced-motion:no-preference){.btn,button,.nav a{transition:background-color .15s,color .15s,border-color .15s}}
/* Forms and messages */
.form{display:grid;gap:14px;max-width:440px}.form label{display:grid;gap:6px;font-weight:600;font-size:15px}
input[type=email],input[type=password],input[type=number],.form input[type=text]{font:inherit;min-height:46px;border-radius:10px;border:1px solid var(--cw-line);background:var(--cw-bg);color:var(--cw-ink);padding:8px 12px;width:100%}
.pw{display:flex;gap:8px}.pw input{flex:1;min-width:0}.pw button{min-height:46px;padding:0 14px}
.msg{min-height:1.4em;margin:0;font-size:14px}.msg.bad,.flash.bad{color:#b3261e}[data-mode="dark"] .msg.bad,[data-mode="dark"] .flash.bad{color:#ff9a92}.msg.ok{color:var(--cw-accent)}
.flash{border:1px solid var(--cw-accent);border-radius:10px;padding:10px 14px;margin:0 0 16px}.flash.bad{border-color:currentColor}
.links2{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}.sep{display:flex;align-items:center;gap:10px;color:var(--cw-muted);font-size:13px}.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--cw-line)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}.kv dt{color:var(--cw-muted)}.kv dd{margin:0;word-break:break-word}

/* Workspace */
[hidden]{display:none!important}
.lbl{font-weight:600;font-size:15px;margin-bottom:6px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
textarea{font:inherit;width:100%;min-height:96px;border-radius:10px;border:1px solid var(--cw-line);background:var(--cw-bg);color:var(--cw-ink);padding:10px 12px;resize:vertical}
.card input[type=text],.card select,.form select{width:100%;font:inherit;min-height:46px;border-radius:10px;border:1px solid var(--cw-line);background:var(--cw-bg);color:var(--cw-ink);padding:8px 12px}
.projects{display:grid;gap:14px;margin-bottom:14px}.chip.on{border-color:var(--cw-accent);color:var(--cw-accent)}
.steps2{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}.pill{padding:8px 14px;border-radius:99px;border:1px solid var(--cw-line);text-decoration:none;color:var(--cw-ink);font-weight:600;font-size:14px}
.pill[aria-current=step]{background:var(--cw-accent);color:var(--cw-accent-ink);border-color:var(--cw-accent)}.pill.off{color:var(--cw-muted);font-weight:400}
.ideas{display:grid;gap:10px}.idea{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;width:100%;font-weight:400;color:var(--cw-ink);border-color:var(--cw-line);padding:14px}
.idea em{font-size:14px;opacity:.85}.idea[aria-pressed=true]{color:var(--cw-accent-ink)}
.scene textarea{margin:8px 0}.scene input[type=text]{margin-bottom:2px}
blockquote{margin:10px 0;padding:8px 12px;border-left:3px solid var(--cw-accent);background:var(--cw-bg);border-radius:6px}
.chip.wrong{color:#b3261e;border-color:#b3261e}.chip.doubtful{color:#8a5a00;border-color:#8a5a00}[data-mode="dark"] .chip.wrong{color:#ff9a92;border-color:#ff9a92}[data-mode="dark"] .chip.doubtful{color:#e8b95a;border-color:#e8b95a}
.loading{display:flex;align-items:center;gap:12px;margin:0;color:var(--cw-muted)}.spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--cw-line);border-top-color:var(--cw-accent);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
@media (min-width:700px){.projects{grid-template-columns:repeat(2,1fr)}}