:root { --paper:#fffdf7; --ink:#20211f; --muted:#6f706b; --line:#d9d7cc; --coral:#f06449; --yellow:#f5c94f; --green:#3f8c6d; --soft:#f5f1e7; }
.workshop-links{display:flex;flex-wrap:wrap;gap:18px;width:min(760px,calc(100% - 28px));margin:16px auto 0;font-size:14px}.workshop-links a{color:#286d52;text-underline-offset:4px}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:0; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.shell { width:min(760px,calc(100% - 28px)); margin:0 auto; padding:28px 0 80px; }
.topline { display:flex; justify-content:space-between; gap:16px; align-items:center; border-bottom:2px solid var(--ink); padding-bottom:12px; font-size:13px; font-weight:800; }
.anon { color:var(--green); }
.hero { padding:44px 0 24px; display:grid; grid-template-columns:1fr 170px; gap:24px; align-items:end; }
.kicker { color:var(--coral); font-weight:900; margin:0 0 10px; }
h1 { margin:0; font-size:clamp(44px,11vw,82px); line-height:.96; }
.lead { margin:20px 0 0; font-size:18px; line-height:1.7; max-width:570px; }
.doodle { height:150px; position:relative; border-bottom:3px solid var(--ink); }
.person { position:absolute; left:55px; bottom:0; width:60px; height:78px; border:3px solid var(--ink); border-radius:50% 50% 8px 8px; background:var(--yellow); }
.person:before { content:""; position:absolute; width:36px; height:36px; border:3px solid var(--ink); border-radius:50%; left:9px; top:-31px; background:var(--paper); }
.bubble { position:absolute; top:4px; right:0; border:2px solid var(--ink); padding:8px; background:white; transform:rotate(3deg); font-weight:900; }
.bubble:after { content:""; position:absolute; width:10px; height:10px; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); bottom:-7px; left:18px; background:white; transform:rotate(-45deg); }
.intro-note { border-left:5px solid var(--yellow); padding:4px 0 4px 16px; color:var(--muted); line-height:1.65; }
.start { margin-top:24px; }
.button { border:2px solid var(--ink); background:var(--paper); color:var(--ink); min-height:48px; padding:11px 17px; border-radius:6px; font-weight:900; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:3px 3px 0 var(--ink); }
.button.primary { background:var(--coral); color:white; }
.button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.progress { position:sticky; top:0; z-index:5; background:rgba(255,253,247,.96); padding:14px 0; border-bottom:1px solid var(--line); }
.progress-head { display:flex; justify-content:space-between; font-size:13px; font-weight:900; margin-bottom:9px; }
.segments { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.segments i { height:7px; background:var(--line); }
.segments i.on { background:var(--coral); }
.step { padding:34px 0 18px; }
.step h2 { font-size:clamp(30px,7vw,44px); margin:0 0 8px; line-height:1.08; }
.step-copy { color:var(--muted); line-height:1.6; margin:0 0 28px; }
.question { border-top:2px solid var(--ink); padding:22px 0; }
.question h3 { font-size:19px; margin:0 0 6px; }
.question .hint { color:var(--muted); margin:0 0 14px; font-size:14px; }
.options { display:grid; gap:9px; }
.choice { display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; border:1px solid var(--line); padding:13px; border-radius:6px; cursor:pointer; background:white; }
.choice:has(input:checked) { border:2px solid var(--ink); padding:12px; background:#fff6d9; box-shadow:3px 3px 0 var(--yellow); }
.choice input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--coral); }
.choice strong,.choice small { display:block; }
.choice small { color:var(--muted); margin-top:3px; line-height:1.45; }
textarea,input[type="text"] { width:100%; border:1px solid var(--line); background:white; color:var(--ink); border-radius:6px; padding:13px; line-height:1.55; }
textarea { min-height:130px; resize:vertical; }
textarea:focus,input[type="text"]:focus { outline:3px solid #f8dfa0; border-color:var(--ink); }
details { border:1px dashed #aaa79d; padding:12px; border-radius:6px; background:var(--soft); }
summary { cursor:pointer; font-weight:900; }
details textarea { margin-top:12px; }
.other-input { margin-top:9px; display:none; }
.other-input.show { display:block; }
.actions { position:sticky; bottom:0; display:flex; justify-content:space-between; gap:12px; background:rgba(255,253,247,.96); border-top:2px solid var(--ink); padding:14px 0; }
.actions .button { min-width:120px; }
.error { color:#a82922; font-weight:800; min-height:24px; margin:10px 0 0; }
.success { text-align:center; padding:80px 0; }
.success-mark { width:76px; height:76px; display:grid; place-items:center; margin:0 auto 24px; background:var(--yellow); border:3px solid var(--ink); border-radius:50%; font-size:38px; font-weight:900; transform:rotate(-5deg); }
.success h1 { font-size:clamp(38px,9vw,62px); }
.success p { font-size:18px; line-height:1.7; color:var(--muted); }
.success .button { margin:8px; }
.result-head { padding:42px 0 26px; border-bottom:2px solid var(--ink); }
.result-head h1,.admin-head h1 { font-size:clamp(38px,9vw,66px); }
.big-number { color:var(--coral); font-size:clamp(54px,14vw,96px); font-weight:950; line-height:1; }
.rank-section { padding:30px 0; border-bottom:1px solid var(--line); }
.rank-section h2 { margin:0 0 18px; font-size:26px; }
.rank-row { margin:14px 0; }
.rank-meta { display:grid; grid-template-columns:1fr auto; gap:12px; font-weight:800; }
.rank-meta em { font-style:normal; color:var(--coral); }
.track { height:12px; background:#ebe7db; margin-top:7px; }
.track i { height:100%; display:block; background:var(--yellow); border-right:2px solid var(--ink); min-width:2px; }
.admin-head { padding:35px 0 20px; border-bottom:2px solid var(--ink); }
.admin-tools { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
select { border:1px solid var(--ink); border-radius:6px; padding:10px; background:white; }
.response { padding:16px 0; border-bottom:1px solid var(--line); }
.response time { color:var(--muted); font-size:13px; }
.response p { margin:8px 0 0; line-height:1.65; white-space:pre-wrap; }
.private-note { background:#fff1ed; border-left:5px solid var(--coral); padding:12px; line-height:1.55; }
.gate { min-height:80vh; display:grid; place-items:center; }
.gate form { width:min(430px,100%); border:2px solid var(--ink); padding:24px; box-shadow:5px 5px 0 var(--yellow); }
.gate input { margin:12px 0; }
@media(max-width:620px){ .shell{width:min(100% - 20px,760px);padding-top:14px}.hero{grid-template-columns:1fr;padding-top:30px}.doodle{display:none}.topline{align-items:flex-start}.actions .button{flex:1}.button{min-height:50px}.choice{padding:12px}.choice:has(input:checked){padding:11px} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}