@font-face{font-family:Kota;src:url('../assets/kota-book.woff')}@font-face{font-family:Kota;src:url('../assets/kota-demi.woff');font-weight:700}
:root{--ink:#2b3d45;--muted:#687b82;--teal:#197d7a;--green:#3ba57e;--yellow:#f4c84b;--orange:#ee9859;--cream:#fffaf0;--line:#e4e7df;--shadow:0 15px 38px rgba(55,73,72,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Kota,system-ui,sans-serif;color:var(--ink);background:#f5faf8}button,select{font:inherit}button{touch-action:manipulation}.app-shell{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#fffdf8,#f0f8f4)}
.topbar{min-height:92px;padding:14px clamp(18px,3vw,42px);display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(255,255,255,.95);border-bottom:1px solid #e8ece7;box-shadow:0 6px 20px rgba(46,68,61,.05);z-index:8}.brand-wrap{display:flex;align-items:center;gap:14px}.back-button{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;text-decoration:none;font-size:36px;color:var(--teal);background:#edf7f3;border:1px solid #dce9e4}.brand-icon{width:58px;height:58px;border-radius:19px;background:#fff0bd;display:grid;place-items:center;font-size:34px}.brand h1{font-size:clamp(25px,2.5vw,38px);margin:0;line-height:1}.brand p{margin:5px 0 0;color:#73837f;font-size:15px}.header-tools{display:flex;gap:10px}.tool-button,.icon-button{border:0;border-radius:15px;background:#edf6f3;color:#2a6c66;font-weight:700;min-height:48px;padding:0 16px;cursor:pointer}.teacher{background:#257d73;color:#fff}.icon-button{width:50px;padding:0;font-size:24px}
.workspace{flex:1;padding:18px clamp(18px,3vw,42px) 20px;display:flex;flex-direction:column;gap:14px}.mission-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px 20px;box-shadow:var(--shadow)}.mission-badges{display:flex;gap:8px;flex-wrap:wrap}.mission-badges span{font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px;background:#e9f7f2;color:#276e63}.mission-badges span:nth-child(2){background:#fff2c6;color:#775d16}.mission-badges span:nth-child(3){background:#eef4fa;color:#4d6778}.mission-row{display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700;color:#287c70}.mission-row h2{margin:4px 0 3px;font-size:clamp(25px,2.5vw,36px)}.mission-row p{margin:0;color:var(--muted);font-size:17px}.score{min-width:110px;background:#fff7d6;border-radius:16px;padding:8px 13px;text-align:center}.score span{display:block;font-size:12px;color:#7c651d}.score strong{font-size:27px;color:#87660c}
.mode-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mode-tab{min-height:74px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:10px 15px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;text-align:left;align-items:center;column-gap:11px;cursor:pointer;color:var(--ink);box-shadow:0 7px 20px rgba(45,72,64,.06)}.mode-tab>span{grid-row:1/3;font-size:34px}.mode-tab b{font-size:17px}.mode-tab small{color:var(--muted)}.mode-tab.active{border:3px solid #3a9c8b;background:#effbf6;box-shadow:0 0 0 4px rgba(58,156,139,.1)}
.scale-stage{position:relative;min-height:365px;border:1px solid #e1e6dc;border-radius:29px;background:linear-gradient(180deg,#fff8d9 0 58%,#ddf0d8 58%);overflow:hidden;box-shadow:var(--shadow);padding:14px 30px 12px}.scene-decor{position:absolute;inset:25px 7% auto;display:flex;justify-content:space-between;font-size:35px;color:#e3b630;opacity:.75}.scale-wrap{position:relative;width:min(850px,92%);height:280px;margin:10px auto 0}.beam{position:absolute;left:50%;top:34px;width:min(760px,90%);height:205px;transform:translateX(-50%) rotate(0deg);transform-origin:50% 22px;transition:transform .45s ease}.beam-bar{position:absolute;left:0;right:0;top:14px;height:18px;background:#4b6763;border-radius:999px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}.pivot{position:absolute;left:50%;top:-1px;width:45px;height:45px;border-radius:50%;background:#f0b94b;border:7px solid #fff;transform:translateX(-50%);z-index:3;box-shadow:0 3px 8px rgba(0,0,0,.16)}.hanger{position:absolute;top:30px;width:240px;height:175px}.left-hanger{left:-6px}.right-hanger{right:-6px}.hanger>span:before,.hanger>span:after{content:"";position:absolute;top:0;width:3px;height:116px;background:#6f8680}.hanger>span:before{left:35px;transform:rotate(9deg);transform-origin:top}.hanger>span:after{right:35px;transform:rotate(-9deg);transform-origin:top}.pan{position:absolute;left:0;right:0;bottom:0;height:72px;border-radius:0 0 110px 110px;background:#6ba594;border-top:10px solid #3f756b;box-shadow:0 9px 13px rgba(42,78,69,.15);display:flex;align-items:flex-end;justify-content:center;padding:0 12px 12px}.pan-contents{display:flex;gap:6px;align-items:flex-end;justify-content:center;min-height:75px;flex-wrap:wrap;max-width:220px}.stand{position:absolute;left:50%;top:56px;transform:translateX(-50%);height:225px;width:160px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.stand-neck{width:24px;height:190px;background:#54766d;border-radius:14px}.stand-base{width:160px;height:26px;border-radius:50% 50% 13px 13px;background:#42675e;box-shadow:0 8px 0 rgba(50,82,74,.12)}.weight-chip{min-width:42px;height:48px;border:0;border-radius:10px 10px 6px 6px;background:linear-gradient(#ffd46b,#ecb73c);color:#59410a;font-weight:700;font-size:18px;display:grid;place-items:center;box-shadow:inset 0 -5px 0 rgba(161,111,19,.15),0 4px 6px rgba(0,0,0,.1);cursor:pointer}.weight-chip.given{cursor:default;background:linear-gradient(#8bd6c1,#55ad94);color:#174f43}.mystery-chip{min-width:50px;height:52px;border-radius:12px;background:linear-gradient(#c3b5f2,#8e77d1);color:#fff;font-size:23px;font-weight:700;display:grid;place-items:center;box-shadow:inset 0 -5px 0 rgba(66,45,125,.14)}.balance-readout{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.94);border:1px solid #dfe7df;border-radius:18px;padding:8px 12px;box-shadow:0 7px 18px rgba(56,75,66,.08)}.balance-readout>div:not(.relation){min-width:72px;text-align:center}.balance-readout span{display:block;font-size:11px;color:#788984}.balance-readout strong{font-size:23px}.relation{width:42px;height:42px;border-radius:13px;background:#eef5f2;display:grid;place-items:center;font-size:24px;font-weight:700;color:#36786c}
.interaction-panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:17px 20px;box-shadow:var(--shadow)}.interaction-panel.hidden{display:none}.panel-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.panel-head h3{font-size:24px;margin:3px 0 0}.panel-head p{margin:0;color:var(--muted)}.weight-bank{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}.bank-weight{min-height:82px;border:2px solid #e3e9e4;background:#fbfefc;border-radius:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;color:#52655f}.bank-weight:hover,.bank-weight:focus-visible{border-color:#7ebcaf;outline:none;transform:translateY(-2px)}.bank-weight .weight-chip{pointer-events:none}.bank-weight small{font-weight:700}.panel-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}.primary-button,.secondary-button{border:0;border-radius:16px;min-height:50px;padding:0 19px;font-weight:700;cursor:pointer}.primary-button{background:#278576;color:#fff;box-shadow:0 7px 16px rgba(39,133,118,.2)}.primary-button:disabled{opacity:.45;box-shadow:none}.secondary-button{background:#edf5f1;color:#366b61}
.mystery-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center}.equation-card{background:linear-gradient(135deg,#f2faf6,#fff);border-radius:22px;padding:18px 22px;text-align:center}.equation{font-size:clamp(36px,4vw,58px);font-weight:700;color:#315f58;margin:10px}.equation-card p{margin:0;color:var(--muted)}.choice-label{font-weight:700;display:block;margin-bottom:9px}.mystery-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.mystery-choice{min-height:78px;border:2px solid #dfe9e4;border-radius:18px;background:#fff;font-size:25px;font-weight:700;color:#356e64;cursor:pointer}.mystery-choice.selected{border:4px solid #389a88;background:#ecfaf5}
.feedback{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:13px 16px;min-height:58px}.feedback>span{width:38px;height:38px;border-radius:13px;background:#fff1b8;display:grid;place-items:center}.feedback p{margin:0;color:#586f68}.feedback.good{border-color:#abdcca;background:#f3fcf7}.feedback.bad{border-color:#efbdb0;background:#fff7f4}footer{text-align:center;color:#6d7f7a;padding:8px 12px 14px;font-size:13px}
.dialog{border:0;border-radius:28px;padding:0;max-width:640px;width:min(640px,calc(100vw - 30px));box-shadow:0 28px 80px rgba(24,65,58,.3);color:var(--ink)}.dialog::backdrop{background:rgba(25,52,48,.43);backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:22px 25px 15px;border-bottom:1px solid #e5ece8}.dialog-head h2{margin:4px 0 0;font-size:30px}.close-button{border:0;background:#eef6f3;border-radius:14px;width:44px;height:44px;font-size:27px;color:#526f69;cursor:pointer}.dialog-body{padding:10px 25px 25px}.setting{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid #edf2ef}.setting span{display:flex;flex-direction:column;gap:3px}.setting small{color:#738780}.setting select{border:1px solid #cfdfd9;border-radius:13px;background:#fff;padding:10px 34px 10px 12px;font-weight:700;color:#34665d}.toggle-setting input{width:24px;height:24px;accent-color:#278576}.apply-button{width:100%;border:0;border-radius:17px;background:#278576;color:#fff;font-weight:700;padding:15px;margin-top:18px;cursor:pointer}.success-dialog{text-align:center;padding:28px;max-width:540px}.success-icon{font-size:58px}.success-dialog h2{font-size:37px;margin:4px}.success-dialog>p{color:var(--muted);font-size:18px}.reflection{text-align:left;display:flex;gap:12px;background:#fff4ca;border-radius:18px;padding:15px;margin:18px 0}.reflection>span{font-size:28px}.reflection p{margin:4px 0 0;color:#6e6648}
@media(max-width:1050px){.header-tools .tool-button span{display:none}.scale-stage{min-height:345px}.scale-wrap{transform:scale(.9);transform-origin:top center}.weight-bank{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){.topbar{align-items:flex-start}.brand-icon{display:none}.brand p{display:none}.workspace{padding:12px}.mode-tabs{grid-template-columns:1fr}.mission-row,.panel-head{align-items:flex-start;flex-direction:column}.scale-stage{overflow-x:auto}.scale-wrap{width:680px;transform:scale(.78);transform-origin:top left;margin-left:20px}.balance-readout{left:50%;position:sticky;transform:none;margin:250px auto 0;width:max-content}.weight-bank{grid-template-columns:repeat(2,1fr)}.mystery-layout{grid-template-columns:1fr}.mystery-choices{grid-template-columns:repeat(2,1fr)}.panel-actions{flex-direction:column}.panel-actions button{width:100%}}@media(max-height:820px) and (min-width:1000px){.topbar{min-height:78px}.workspace{padding-top:10px}.scale-stage{min-height:320px}.scale-wrap{height:245px;transform:scale(.9);transform-origin:top center}}