
:root{color-scheme:light;--ink:#123e4b;--teal:#007f87;--cream:#f7f5ed}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fca949;outline-offset:4px}.wrap{max-width:1180px;padding:26px 28px 18px;margin:auto}.top{display:flex;align-items:center;justify-content:space-between;gap:14px}.logo{font-size:28px;letter-spacing:-1.7px;font-weight:900}.logo i{color:#00aeb4;font-style:normal}.edition{font-size:11px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:#608087}.intro{display:flex;align-items:end;justify-content:space-between;margin:24px 0 20px;gap:16px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--teal);margin:0 0 9px}h1{font-size:clamp(29px,4.3vw,49px);letter-spacing:-2px;line-height:1.05;margin:0}.sub{color:#61808a;margin:10px 0 0;font-size:14px}.badges{display:flex;gap:7px}.badge{background:#fff;padding:11px 14px;border:1px solid #dde8e5;border-radius:12px;white-space:nowrap;font-size:13px}.badge b{font-size:17px}.stage{position:relative;border-radius:22px;overflow:hidden;background:#b5e9e7;box-shadow:0 18px 46px #184d5520;border:1px solid #ffffff;isolation:isolate}canvas{display:block;width:100%;height:clamp(370px,47vw,530px);outline:none;touch-action:none}.hud{position:absolute;inset:16px 18px auto;display:flex;align-items:center;gap:12px;pointer-events:none}.chapter{background:#ffffffed;border-radius:11px;padding:10px 13px;font-size:12px;box-shadow:0 4px 16px #17414c12}.chapter small{display:block;font-size:9px;letter-spacing:1.2px;color:#60868b;margin-bottom:3px}.route{flex:1;height:5px;border-radius:10px;background:#ffffff80;overflow:hidden}.route div{height:100%;background:#007f87;width:0}.round{width:37px;height:37px;border-radius:50%;border:1px solid #ffffff;background:#ffffffed;color:var(--ink);pointer-events:auto;font-size:16px}.hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:30px;background:#164551dd;color:white;font-size:12px;white-space:nowrap;pointer-events:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:36px;background:linear-gradient(90deg,#e9f8f3fa 0%,#e9f8f3ed 43%,#e9f8f315 80%)}.overlay[hidden]{display:none}.card{max-width:400px}.card h2{font-size:clamp(35px,4.6vw,56px);line-height:1.03;letter-spacing:-2px;margin:12px 0 18px}.card p{font-size:15px;line-height:1.65;max-width:335px;color:#496d74}.tag{display:inline-block;border-radius:20px;background:#d2eee1;color:#26765e;padding:7px 11px;font-size:10px;letter-spacing:1.5px;font-weight:800}.primary{border:0;border-radius:11px;background:#007f87;color:#fff;padding:15px 23px;font-weight:700;box-shadow:0 7px 18px #007f8730}.tiny{font-size:11px!important;margin-top:15px!important}.bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 2px 8px}.keys{font-size:12px;line-height:1.8;color:#638087}.keys kbd{display:inline-block;border:1px solid #cfddd6;border-bottom-width:3px;border-radius:5px;padding:1px 6px;background:white;color:#335860;font-family:inherit}.touch{display:flex;gap:9px;touch-action:none}.touch,.touch *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}.control{user-select:none;-webkit-user-select:none;border:1px solid #cfddd6;background:white;border-radius:12px;height:50px;min-width:61px;color:#14515d;font-size:22px;touch-action:none}.control.jump{background:#113f4c;color:white;padding:0 20px;font-size:14px;font-weight:bold}.control:active{background:#bce8df}.foot{display:flex;justify-content:space-between;border-top:1px solid #dce3db;margin-top:12px;padding-top:13px;font-size:11px;color:#6d8585;gap:15px}.foot a{color:#497c7c;text-decoration:none}@media(max-width:650px){.wrap{padding:15px 12px}.edition{font-size:8px;letter-spacing:1px}.intro{display:block;margin:20px 0 13px}.badges{margin-top:14px}.badge{padding:8px 12px}.sub{font-size:12px}h1{letter-spacing:-1.2px}.overlay{padding:23px;background:linear-gradient(90deg,#e9f8f3fc,#e9f8f3ed 64%,#e9f8f380)}.card{max-width:275px}.card h2{font-size:39px}.card p{font-size:13px}.hud{inset:12px 10px auto;gap:7px}.chapter{padding:8px;font-size:11px}.bottom{flex-direction:column-reverse;gap:10px}.touch{width:100%}.control{flex:1}.control.jump{flex:1.5}.keys{font-size:11px;text-align:center}.hint{font-size:10px;max-width:94%;white-space:normal;text-align:center}.foot{font-size:10px}.card .tiny{font-size:10px!important}}
.modeMenu{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 17px}.mode{display:flex;align-items:center;gap:13px;padding:15px 17px;background:#fffdf8;border:1px solid #d5e2db;border-radius:15px;text-align:left;color:#315b63;transition:background .15s,border-color .15s}.mode.selected{background:#e0eee6;border-color:#358b80;box-shadow:inset 0 0 0 1px #358b80}.mode b{display:block;font-size:15px}.mode small{display:block;font-size:11px;font-weight:normal;color:#648279;margin-top:5px}.modeIcon{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;background:#f6e5b8;color:#ac7925;font-size:26px}.poolIcon{background:linear-gradient(135deg,#9bb75c,#21abc3);color:white}.modeNumber{margin-left:auto;font-size:12px;opacity:.45}.badge[hidden]{display:none}@media(max-width:650px){.modeMenu{gap:8px}.mode{gap:8px;padding:11px 9px}.mode b{font-size:12px}.mode small{font-size:9px;line-height:1.4}.modeIcon{width:26px;height:32px;font-size:20px;flex-shrink:0}.modeNumber{display:none}}

/* Refinements retain the original layout and palette. */
.equipment{display:flex;gap:6px;flex-wrap:wrap}.equipment[hidden]{display:none}.equipment span{font-size:10px;padding:8px 10px;border-radius:9px;background:#fffaf0ed;color:#7f7964;border:1px solid #e3d8bb}.equipment .got{color:#17715d;background:#daf3e6;border-color:#8ec9ad}.feedback{position:absolute;left:50%;top:76px;transform:translate(-50%,-5px);opacity:0;pointer-events:none;padding:12px 20px;border-radius:30px;color:white;background:#154a54ed;font-size:12px;transition:opacity .15s,transform .15s;max-width:90%;text-align:center}.feedback.visible{opacity:1;transform:translate(-50%,0)}.control.pressed{background:#bce8df;transform:translateY(2px)}.control.jump.pressed{background:#087f89;color:white}.stage:has(.overlay:not([hidden])) .hud,.stage:has(.overlay:not([hidden])) .hint,.stage:has(.overlay:not([hidden])) .feedback{visibility:hidden}.round:hover{background:#d9f1e6}.card{max-width:450px}.card h2{font-size:clamp(34px,4.3vw,53px)}
@media(max-width:650px){.equipment{position:absolute;top:49px;left:0}.equipment span{font-size:9px;padding:5px 8px}.feedback{top:91px;font-size:11px;width:max-content;max-width:90%}.hud{gap:6px}.round{width:34px;height:34px;flex-shrink:0}.chapter{max-width:160px}.bottom{position:sticky;bottom:0;background:#f7f5edf5;z-index:3;padding:10px 0 8px;border-radius:12px;box-shadow:0 -5px 15px #f7f5ed70}.control{height:58px;min-width:64px}.keys{font-size:10px}.overlay{padding:22px;background:linear-gradient(90deg,#e9f8f3fa,#e9f8f3f0 65%,#e9f8f3b0)}.card h2{font-size:35px}.card p{font-size:12px;line-height:1.55}.card .tiny{font-size:10px}.primary{padding:13px 19px}.card{max-width:280px}.badges{margin-top:12px}.intro{margin-top:16px}.modeMenu{margin-bottom:12px}}
@media(max-height:540px) and (orientation:landscape){.wrap{padding:6px 16px}.top,.intro,.foot,.keys{display:none}.modeMenu{margin:0 0 6px}.mode{padding:6px 12px}.modeIcon{width:26px;height:26px}.mode small{display:none}canvas{height:calc(100dvh - 126px);min-height:225px}.stage{border-radius:13px}.bottom{padding:5px 0;position:static;flex-direction:row;justify-content:flex-end}.touch{width:100%;justify-content:space-between}.control{height:46px;flex:0 0 65px}.control.jump{margin-left:auto;flex:0 0 135px}.overlay{padding:14px 28px}.card h2{font-size:30px;margin:8px 0}.card p{font-size:11px;margin:8px 0;max-width:320px}.tiny{display:none}.tag{font-size:8px}.primary{padding:10px 20px}.hud{inset:10px 12px auto}.equipment span{font-size:9px;padding:6px}}
