:root{font-family:Arial,"PingFang SC",sans-serif;color:#171717;background:#f7f7f2}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f7f7f2}button,input,textarea,select{font:inherit}button{color:inherit}main{max-width:1280px;min-height:100vh;margin:auto;padding:0 38px 45px}nav{height:76px;display:flex;align-items:center;border-bottom:1px solid #181818;gap:28px}nav a{font-size:19px;font-weight:900;color:inherit;text-decoration:none}nav a span{display:inline-block;background:#ff6846;color:white;padding:7px 8px;transform:rotate(-3deg);margin-right:4px}nav p{margin:auto;color:#6d6d68;font-size:12px}nav i{font-size:9px;letter-spacing:.18em}.setup{display:grid;grid-template-columns:1fr 480px;gap:8vw;padding:65px 3vw}.pitch{padding-top:25px}.eyebrow{font-size:9px;letter-spacing:.24em;font-weight:bold;color:#ff6846}.pitch h1{font-size:clamp(48px,7vw,82px);line-height:1.02;letter-spacing:-.055em;margin:15px 0 27px}.pitch h1 strong{color:#ff6846}.pitch>p:not(.eyebrow){max-width:470px;color:#64645f;line-height:1.85;font-size:14px}.scene-strip{display:flex;gap:8px;margin-top:48px}.scene-strip span{display:flex;flex-direction:column;justify-content:space-between;width:115px;height:94px;border:1px solid #222;padding:10px;font-size:23px}.scene-strip b{font-size:11px}#config{background:#d9f36d;border:1px solid #171717;padding:27px 30px;box-shadow:10px 10px 0 #171717}#config header{display:flex;gap:14px;border-bottom:1px solid #171717;padding-bottom:18px;margin-bottom:18px}#config header>span{font-size:37px;font-weight:900}#config header b,#config header small{display:block}#config header small{margin-top:5px;font-size:10px;color:#525a2e}label{display:block;margin-bottom:17px;font-size:11px;font-weight:bold}select,input,textarea{display:block;width:100%;margin-top:7px;border:1px solid #171717;background:#f8f8f2;border-radius:0;padding:11px;outline:0;resize:none}select:focus,input:focus,textarea:focus{box-shadow:3px 3px 0 #ff6846}label>small{display:block;text-align:right;margin-top:4px;color:#636936;font-size:9px}fieldset{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;border:0;padding:0;margin:0 0 17px}legend{font-size:11px;font-weight:bold;margin-bottom:7px}fieldset button{background:transparent;border:1px solid #687334;padding:9px 3px;cursor:pointer}fieldset button small{display:block;font-size:8px;margin-top:3px;color:#667034}fieldset button.on{background:#171717;color:white}fieldset button.on small{color:#ddd}.enter{width:100%;border:1px solid #171717;background:#ff6846;color:white;font-weight:bold;padding:14px;cursor:pointer}.enter span{float:right}.enter:disabled{background:#9fa575;cursor:not-allowed}.loading{padding-top:12px}.loading>i{display:block;height:4px;width:100%;background:linear-gradient(90deg,#ff6846 var(--progress,45%),#b7c959 0);animation:load 2s ease-in-out infinite}.loading p{font-size:10px}.loading b{float:right}.error{margin-top:12px;background:#ffe4dd;border:1px solid #d5472a;padding:11px;font-size:11px}.error button{float:right;border:0;background:none;text-decoration:underline;cursor:pointer}.room{padding:25px 0}.room-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #171717;padding:0 5px 18px}.room-head>div{display:flex;align-items:center;gap:12px}.room-head button{border:1px solid #171717;background:none;width:35px;height:35px;cursor:pointer}.room-head>div>span{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#ff6846;color:white}.room-head p{margin:0}.room-head p small{display:block;font-size:9px;color:#6f6f69;margin-top:4px}.room-head p small i{display:inline-block;width:6px;height:6px;background:#40a568;border-radius:50%}.level-pill{background:#d9f36d;padding:7px 13px;border:1px solid #171717;font-size:10px}.room-grid{display:grid;grid-template-columns:280px minmax(0,740px);justify-content:center;gap:70px;padding:42px 20px}.room-grid aside{border-right:1px solid #aaa;padding-right:32px}.room-grid aside h2{font-size:29px;line-height:1.3;margin:12px 0 30px}.tip{background:#d9f36d;border:1px solid #171717;padding:18px;transform:rotate(-1deg);font-size:11px;line-height:1.6}.tip p{margin-bottom:0}.vocab{margin-top:30px}.vocab>b{font-size:10px;letter-spacing:.16em}.vocab p{display:flex;justify-content:space-between;border-bottom:1px solid #ccc;padding:10px 0;margin:0;font-size:11px}.vocab strong{font-size:13px}.vocab span{color:#70706a}.chat{min-width:0}#messages{min-height:350px}.bubble{max-width:82%;margin-bottom:20px}.bubble small{font-size:9px;color:#84847d}.bubble p{font-size:18px;line-height:1.65;margin:5px 0}.bubble.me{margin-left:auto;background:#171717;color:white;padding:13px 17px}.bubble.me p{font-size:14px;margin:0}.correction{border:1px solid #ff6846;border-left:6px solid #ff6846;padding:13px 16px;margin:10px 0 20px}.correction b{color:#dc492d;font-size:10px}.correction p{margin:6px 0 0;font-size:12px}.typing{padding:15px 0;color:#777;font-size:11px}.typing i{display:inline-block;width:6px;height:6px;background:#ff6846;border-radius:50%;animation:bounce 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}.typing span{margin-left:8px}#reply{border:1px solid #171717;background:white}#reply textarea{border:0;margin:0;box-shadow:none;min-height:80px;padding:13px}#reply>div{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ddd;padding:7px 9px}#reply small{color:#888;font-size:9px}kbd{border:1px solid #bbb;padding:1px 3px}#reply button{border:0;background:#ff6846;color:#fff;padding:9px 17px;cursor:pointer}#reply button:disabled{background:#aaa}@keyframes bounce{50%{transform:translateY(-4px);opacity:.4}}@keyframes load{50%{opacity:.55}}@media(max-width:800px){main{padding:0 15px 25px}nav p{display:none}.setup{grid-template-columns:1fr;padding:30px 0}.pitch{padding-top:0}.scene-strip{margin-top:25px}.scene-strip span{width:31%;height:78px}#config{padding:22px 17px;box-shadow:5px 5px 0 #171717}.room-grid{grid-template-columns:1fr;padding:25px 0;gap:20px}.room-grid aside{border-right:0;border-bottom:1px solid #aaa;padding:0 0 20px}.tip{display:inline-block;width:49%;vertical-align:top}.vocab{display:inline-block;width:47%;margin:0 0 0 3%;vertical-align:top}.bubble{max-width:92%}}