:root{--paper:#f3efe6;--ink:#1d2420;--muted:#64675f;--accent:#ff5c35;--line:#c9c4b8;--soft:#e7e1d5;--white:#fffdfa;--shadow:0 18px 55px rgba(29,36,32,.09)}
html[data-theme="dark"]{--paper:#151716;--ink:#f3efe6;--muted:#aaa79f;--line:#454844;--soft:#242724;--white:#202320;--shadow:0 18px 55px rgba(0,0,0,.28);color-scheme:dark}
*{box-sizing:border-box}
html{font-size:16px;background:var(--ink)}
body{margin:0;min-width:0;min-height:100svh;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.shell{min-height:100svh;max-width:1180px;margin:auto;padding:24px clamp(20px,5vw,64px) max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.site-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.brand-mark{display:block;width:30px;height:30px;border-radius:8px}
.mode-toggle{display:flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(255,253,250,.18)}
.mode-toggle button{min-height:44px;min-width:44px;padding:7px 11px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:.75rem;font-weight:800;cursor:pointer}
.mode-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.view{display:none;flex:1;animation:arrive .35s cubic-bezier(.2,.8,.2,1)}
.view.is-active{display:flex}
#start-view{flex-direction:column;justify-content:center;padding:50px 0 36px}
.intro{margin-bottom:46px}
.eyebrow{margin:0 0 14px;color:var(--accent);font-weight:850;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
h1,h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.055em;font-weight:500;line-height:.92;margin:0}
h1{font-size:clamp(3.45rem,15vw,7rem);max-width:920px}
h1 em{font-weight:500;color:var(--accent)}
.lede{font-size:clamp(1.05rem,3vw,1.3rem);color:var(--muted);margin:22px 0 0}
.choice-block{width:100%;max-width:760px}
.prompt{margin:0 0 14px;font-weight:750}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.category,.button,.effort,.back{cursor:pointer;border:0;background:none}
.category{min-height:52px;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:rgba(255,253,250,.35);font-weight:700;text-align:left;transition:.18s ease}
.category:hover{border-color:var(--ink);background:var(--white);transform:translateY(-1px)}
.button{border-radius:13px;min-height:54px;padding:15px 18px;font-weight:800;transition:.18s ease}
.button:active,.effort:active,.category:active{transform:translateY(1px)}
.button-random{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:10px;background:var(--ink);color:var(--paper)}
.button-random:hover{background:#303a34}.button-primary:hover{background:#e74b25}
.back{padding:10px 0;min-height:44px;display:inline-flex;align-items:center;color:var(--muted);font-weight:700;align-self:flex-start}
#effort-view{flex-direction:column;padding:28px 0}
.step-centre{margin:auto 0;max-width:720px;padding:34px 0}
.step-centre h2{font-size:clamp(3.1rem,13vw,6.4rem);margin-bottom:42px}
.effort-list{display:grid;gap:10px}
.effort{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1.5px solid var(--line);border-radius:14px;background:rgba(255,253,250,.35);padding:18px;text-align:left;transition:.18s ease}
.effort span{font-weight:800;font-size:1.05rem}.effort small{color:var(--muted);font-size:.85rem}.effort:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.effort:hover small{color:#c9c4b8}
#action-view{flex-direction:column;padding:28px 0 12px}
.action-topline{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.action-card{margin:auto 0;padding:54px 0;max-width:1080px;display:flex;align-items:flex-end;gap:clamp(12px,4vw,48px)}
.action-copy{min-width:0;flex:1}
.result-mug{width:clamp(88px,15vw,170px);height:auto;opacity:.9;transform:rotate(2deg);flex:0 0 auto}
.action-card h2{font-size:clamp(3.5rem,13vw,7.8rem)}
.support{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(1.1rem,3vw,1.4rem);color:var(--muted);margin:28px 0 0;max-width:620px;line-height:1.45}
.action-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:650px}
.button-primary{background:var(--accent);color:#191d1a}.button-secondary{border:1.5px solid var(--ink);background:transparent}.button-secondary:hover{background:var(--white)}.button-quiet{grid-column:1/-1;color:var(--muted);min-height:44px;padding:10px}
#finish-view{flex-direction:column;justify-content:center;align-items:flex-start;gap:34px;padding:50px 0}
.finish-mug{width:clamp(100px,18vw,170px);height:auto;transform:rotate(-3deg)}
.finish-copy h2{font-size:clamp(3.6rem,14vw,7.5rem);max-width:950px}.finish-copy>p:last-child{font-size:1.05rem;color:var(--muted);margin:24px 0 0}
#finish-view .button{min-width:250px}
footer{padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:.85rem}footer span{color:var(--accent);font-weight:900;padding:0 .2em}
html[data-theme="dark"] .button-random,html[data-theme="dark"] .effort:hover{background:#292c29;color:var(--ink);border-color:#5a5d58}
html[data-theme="dark"] .button-random:hover{background:#343834}
html[data-theme="dark"] .button-primary:hover{background:#ff7354}
@keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(min-width:700px){.shell{padding-top:34px;padding-bottom:30px}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.category:last-child{grid-column:auto}.intro{margin-bottom:54px}.action-controls{grid-template-columns:1fr 1fr auto}.button-quiet{grid-column:auto}.finish-mark{width:96px;height:96px}}
@media(max-height:690px){#start-view{padding:30px 0 22px}.intro{margin-bottom:28px}h1{font-size:clamp(3rem,12vh,5.2rem)}.category{min-height:46px;padding:10px 14px}.button-random{min-height:48px}.action-card{padding:34px 0}.action-card h2{font-size:clamp(3rem,12vh,6rem)}}
@media(max-width:520px){.result-mug{width:60px;align-self:flex-end;margin-top:20px}.action-card{align-items:flex-start;flex-direction:column;padding:28px 0}.action-card h2{font-size:clamp(2.55rem,10.5vw,3.5rem);line-height:1.04;overflow-wrap:break-word}.brand{font-size:.74rem}.effort{flex-wrap:wrap;gap:6px}.action-topline{gap:18px}.action-topline span{text-align:right}.support{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}