:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#222;background:#fff;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}header{height:108px;margin:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e7e7e7}.brand{font:600 42px/1 Georgia,"Times New Roman",serif;letter-spacing:-2.5px;color:#222;text-decoration:none}.brand span{color:#222}.header-note{font-size:13px;color:#777}main{max-width:1000px;margin:0 auto;padding:0 48px 64px}#entry{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;padding:clamp(70px,14vh,145px) 0 80px}.section-index{font-size:12px;color:#757575;letter-spacing:.04em;display:block;margin-bottom:25px}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(46px,5vw,68px);line-height:1.12;letter-spacing:-.065em;margin:0 0 24px}.entry-note{font-size:16px;color:#666;line-height:1.6;max-width:270px;margin:0}.hand-line{position:relative}.hand-line:after{content:"";position:absolute;bottom:-6px;right:0;width:70px;height:5px;border-bottom:2px solid #222;border-radius:50%;transform:rotate(-6deg)}#join{padding-top:7px}label{display:block;font-size:14px;font-weight:500}#code{width:100%;border:0;border-bottom:1px solid #bcbcbc;border-radius:0;background:transparent;color:#222;font:400 clamp(38px,4.5vw,52px)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;padding:15px 0 13px;caret-color:#222;outline-offset:6px}#code::placeholder{color:#d4d4d4}#code:focus{border-bottom-color:#222}#code-hint{font-size:12px;color:#777;margin:13px 0 32px}button{min-height:52px;border:1px solid #222;border-radius:3px;background:#222;color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:32px;font-size:15px;cursor:pointer}#join>button{width:100%}button span{font-size:22px;line-height:1;transition:transform .2s}button:hover span{transform:translateX(4px)}button:hover{background:#393939}button:disabled{opacity:.5;cursor:wait}#name-field{margin:0 0 24px}select{display:block;width:100%;background:#fff;border:1px solid #bbb;border-radius:3px;color:#222;padding:14px 12px;margin-top:12px;font-size:16px}.eyebrow{font-size:13px;color:#666;margin:0 0 20px}.lead{font-size:17px;line-height:1.7;color:#666;max-width:680px}#lesson{max-width:760px;margin:65px auto 0}#lesson h1{font-size:clamp(34px,4vw,48px);line-height:1.16;letter-spacing:-.045em}fieldset{border:0;border-top:1px solid #ddd;margin:38px 0;padding:28px 0 0;min-width:0}legend{float:left;width:100%;font-size:20px;line-height:1.5;margin-bottom:20px;font-weight:500}legend span{display:block;font-size:12px;font-weight:400;color:#777;margin-bottom:15px;letter-spacing:.03em}.option{clear:both;display:flex;align-items:flex-start;gap:14px;margin:0;padding:16px 12px;font-size:16px;font-weight:400;line-height:1.55;border-bottom:1px solid #eee;border-left:2px solid transparent;cursor:pointer}.option:hover{background:#fafafa}.option:has(input:checked){background:#f5f5f5;border-left-color:#222}.option:has(input:disabled){cursor:default}input[type=radio]{accent-color:#222;width:17px;height:17px;flex:0 0 17px;margin:4px 0 0}.explanation{clear:both;padding:18px 0;color:#365a42;line-height:1.65;font-size:15px}#receipt{font-size:18px;line-height:1.6;border-bottom:2px solid #497151;padding:20px 0}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:35px}.secondary{border-color:#ddd;background:#fff;color:#666;font-size:13px;min-height:40px;padding:10px 12px}.secondary:hover{background:#f7f7f7;color:#222}#status{font-size:14px;line-height:1.6;color:#666;min-height:24px;margin:20px 0 0}#status.error{color:#a03c32}[hidden]{display:none!important}:focus-visible{outline:2px solid #222;outline-offset:4px}::selection{background:#e6e6e6}@media(max-width:700px){header{height:85px;margin:0 24px}.brand{font-size:36px}.header-note{display:none}main{padding:0 26px 40px;max-width:480px}#entry{grid-template-columns:1fr;gap:42px;padding:55px 0 24px}.section-index{margin-bottom:20px}h1{font-size:54px}.entry-note{max-width:none}#join{padding:0}#code{font-size:46px;letter-spacing:.22em}#code-hint{margin-bottom:25px}#lesson{margin-top:40px}#lesson h1{font-size:36px}.actions{gap:8px}.option{padding:15px 6px}#status{margin-top:18px}}@media(prefers-reduced-motion:no-preference){#entry,#lesson{animation:appear .35s ease-out}button,.option{transition:background .18s ease}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

#join>label[for=code]{margin-bottom:12px}#code:focus-visible{outline:none;border-bottom:2px solid #222;background:#fafafa}#code[aria-invalid=true]{border-bottom:2px solid #a03c32;background:#fffafa}#code[aria-invalid=true]:focus-visible{box-shadow:0 2px 0 #a03c32}.field-error{display:block;color:#a03c32;font-size:13px;line-height:1.5;margin:10px 0 24px}#code-hint{margin-bottom:28px}#join:has(#code[aria-invalid=true]) #code-hint{display:none}select[aria-invalid=true]{border-color:#a03c32}#join-feedback{font-size:14px;line-height:1.6;margin:20px 0 0;color:#666}#join-feedback.error{color:#a03c32;border-left:2px solid #a03c32;padding-left:13px}#status.error{background:#fff8f7;border-left:2px solid #a03c32;padding:14px 16px}button[aria-busy=true]{cursor:progress}button:disabled{opacity:.7}button:disabled:hover span{transform:none}