:root{color-scheme:light;--ink:#15353b;--muted:#596e65;--mint:#b5e8d2;--paper:#f6f7f2;--line:#dce3dc;--deep:#102e35}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans SC',system-ui,sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.32}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #138777;outline-offset:5px}button:hover:not(:disabled){filter:brightness(.92)}.topbar{max-width:1240px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:28px 48px}.wordmark{display:flex;align-items:center;gap:0;text-decoration:none;color:var(--ink);font:bold 27px 'Space Grotesk',sans-serif;letter-spacing:-1.3px}.brand-icon{display:grid;place-items:center;width:28px;height:28px;border:1.8px solid var(--ink);border-radius:50%;font-size:25px;line-height:1;margin-right:10px;transform:rotate(-22deg)}.brand-dot{color:#46987e}.edition{font-size:12px;color:var(--muted);letter-spacing:1px}main{max-width:920px;margin:auto;padding:24px 32px 44px}.intro{text-align:center;margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);margin:0 0 16px}.eyebrow>span{display:inline-block;width:6px;height:6px;background:#51a48b;border-radius:50%;margin-right:9px;vertical-align:2px}h1{font-size:clamp(32px,4.5vw,47px);letter-spacing:-1.5px;margin:0 0 16px;font-weight:600;line-height:1.35}h1 span{color:#4e917c}.premise{font-size:15px;line-height:1.9;color:var(--muted);margin:0}.target{margin-left:5px;color:var(--ink);font-weight:600;background:linear-gradient(transparent 58%,#d5ead9 58%)}.mobile-break{display:none}.playground{background:var(--deep);color:#f2f5eb;padding:22px 30px 0;border-radius:24px;box-shadow:0 18px 45px -30px #123b355c;overflow:hidden}.board-top{display:flex;justify-content:space-between;align-items:center}.experiment-label{font-size:11px;letter-spacing:2px;color:#9eb9b9}.text-button{background:none;border:0;padding:8px 0;font-size:12px;white-space:nowrap}.board-top .text-button{color:#bfd3cb}.rules{font-size:12px;color:#bdd2cb;line-height:1.9;max-width:600px;margin:12px auto 0;border-left:2px solid #799c91;padding-left:12px}.vessels{display:grid;grid-template-columns:1fr 148px 1fr;max-width:590px;margin:23px auto 27px;align-items:end;gap:22px}.jug-group{display:flex;align-items:center;flex-direction:column}.capacity{color:#b0c6c0;font-size:12px;margin-bottom:17px;letter-spacing:1px}.capacity span{font:500 17px 'Space Grotesk',sans-serif;margin-left:9px;color:#edf4e9}.vessel{width:100%;max-width:185px;height:226px;border:2px solid #749891;border-top-color:#a7c6ba;border-radius:7px 7px 28px 28px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(120deg,#c2dec90b,#d0fbea03);box-shadow:inset 0 -5px 18px #ffffff06}.small{height:162px;max-width:158px;border-radius:7px 7px 25px 25px}.water{height:0%;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#b5e8d2,#70b99e);transition:height .6s cubic-bezier(.23,.7,.3,1);z-index:-1}.water-surface{height:7px;border-radius:50%;background:#def7e8;opacity:.65;position:absolute;top:-3px;width:100%}.glass-shine{position:absolute;left:10px;top:12px;bottom:14px;width:4px;border-radius:5px;background:#ffffff11}.quantity{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;font:500 46px 'Space Grotesk',sans-serif;color:#e8f0e4;transition:color .3s;text-shadow:0 1px 1px #102e3533}.quantity span{font-size:15px;margin-top:20px}.vessel.has-water .quantity{color:#153c35;text-shadow:0 1px 2px #b5e8d2}.jug-actions{display:flex;gap:9px;width:100%;max-width:185px;margin-top:18px}.jug-actions button{border:1px solid #46655f;border-radius:8px;background:#ffffff05;padding:10px 12px;flex:1;font-size:12px;white-space:nowrap}.jug-actions button span[aria-hidden]{color:#95b5a8;margin-left:5px}.pour-actions{display:flex;flex-direction:column;gap:11px;align-self:center;padding-top:38px}.pour-actions button{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #53786b;border-radius:10px;background:#badbc00d;padding:12px 8px;font-size:11px;color:#cae6d7}.arrow{font-size:23px;line-height:20px}.status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;border-top:1px solid #ffffff12}.status-row p{font-size:12px;color:#bbd3c6;line-height:1.7;margin:12px 0}.history-controls{display:flex;gap:20px;flex-shrink:0;color:#bad1c8}.below-board{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;margin-top:24px;align-items:start}.hint-button{border:1px solid #d6dfd4;background:#eef2e9;padding:12px 17px;border-radius:99px;font-size:12px}.hint-button span{font-size:16px;margin-right:5px;color:#538775}#hint-content{padding:10px 4px;line-height:1.9;color:var(--muted);font-size:13px}#hint-content p{margin:4px 0}.history{padding-top:11px;font-size:12px}.history summary{cursor:pointer;color:var(--muted);text-align:right}.history summary span{margin-left:8px;color:#95a19b;font-family:'Space Grotesk',sans-serif}.history ol{padding:0;list-style:none;max-height:240px;overflow:auto;margin:15px 0}.history li{display:flex;gap:9px;align-items:baseline;justify-content:space-between;padding:10px 4px;border-bottom:1px solid var(--line);color:var(--muted)}.history li .record-state{font-family:'Space Grotesk',sans-serif;white-space:nowrap;color:var(--ink)}.history li .record-num{color:#9aa8a0;font-size:10px;margin-right:5px}.quiet-note{text-align:center;font-size:12px;color:#8a9990;margin:31px 0 0;letter-spacing:1px}.quiet-note span{color:#5c7969;margin-left:8px}footer{border-top:1px solid #e2e7de;padding:22px 48px;max-width:1240px;margin:auto;display:flex;justify-content:space-between;font:10px 'Space Grotesk','Noto Sans SC',sans-serif;letter-spacing:1.6px;color:#8b9b91}.success{display:flex;gap:15px;background:#e5efe3;border:1px solid #cbdcc8;border-radius:16px;padding:23px;margin-top:22px;animation:arrive .45s ease-out}.success-mark{flex-shrink:0;display:grid;place-items:center;background:#cee4cd;border-radius:50%;width:32px;height:32px;color:#386f51}.success .eyebrow{margin:0 0 8px;font-size:10px}.success h2{font-size:18px;line-height:1.6;font-weight:500;margin:0}.success p{font-size:13px;color:#587461;line-height:1.9;margin:8px 0}.success #why{border-top:1px solid #cadbc6;margin-top:12px;padding-top:8px}.success p.reflection{color:#274b3d;font-weight:500}body .vessel.solved{border-color:#e3f1ae;box-shadow:0 0 28px #c9e9a822}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.topbar{padding:22px 22px}.wordmark{font-size:24px}.edition{font-size:10px;letter-spacing:0}main{padding:23px 16px 32px}.intro{margin-bottom:25px}h1{font-size:34px;letter-spacing:-1px}.premise{font-size:13px}.mobile-break{display:block}.eyebrow{font-size:10px;margin-bottom:14px}.playground{padding:16px 18px 0;border-radius:20px}.vessels{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:12px;margin:23px auto}.vessel{height:190px}.small{height:137px}.capacity{font-size:11px;letter-spacing:0}.capacity span{font-size:15px;margin-left:5px}.quantity{font-size:37px}.quantity span{font-size:12px;margin-top:16px}.pour-actions{gap:12px;padding-top:40px}.pour-actions button{flex-direction:column;gap:3px;padding:9px 2px;font-size:9px}.pour-actions button>span:not(.arrow){white-space:normal;line-height:1.5}.jug-actions{gap:5px;margin-top:14px}.jug-actions button{padding:10px 5px;font-size:11px}.jug-actions button span[aria-hidden]{display:none}.status-row{align-items:flex-start;flex-direction:column;gap:0;padding:11px 0 9px}.status-row p{margin:0;font-size:11px;min-height:19px}.history-controls{align-self:flex-end;gap:24px}.history-controls .text-button{font-size:11px;padding:7px 0}.below-board{gap:16px;grid-template-columns:1.35fr 1fr;margin-top:20px}.hint-button{padding:10px 12px;font-size:11px}.history{font-size:11px}.history li{flex-wrap:wrap;gap:3px}.history li .record-state{margin-left:auto}.quiet-note{font-size:10px;letter-spacing:.5px}.success{padding:18px 14px;gap:10px}.success h2{font-size:16px}.success p{font-size:12px}footer{padding:20px 22px;font-size:8px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.rule-reminder{font-size:11px;color:#a8c2b6;margin:5px 0 0;line-height:1.7}.jug-actions button{min-height:44px}.history-controls button{min-height:44px}.hint-button{min-height:44px}

/* The collection remains a small set of experiments, rather than a level map. */
.activity-nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 38px}.activity-nav a{padding:12px 15px;min-height:44px;border-radius:99px;text-decoration:none;color:var(--muted);font-size:12px;border:1px solid transparent}.activity-nav a[aria-current]{background:#e3ede3;border-color:#cbdccc;color:var(--ink)}.activity-nav a:hover{background:#eaf0e7}.mini-board{padding-bottom:0}.board-caption{color:#a9c5b7;font-size:11px}.mini-below{margin:22px 0 0}.hint-copy{color:var(--muted);line-height:1.9;font-size:13px;max-width:640px}.discovery{margin-top:22px;padding:22px 25px;background:#e5efe3;border:1px solid #cbdcc8;border-radius:16px}.discovery h2,.number-result h2{font-size:18px;font-weight:500;margin:0 0 10px}.discovery p,.number-result p{line-height:1.9;color:#587461;font-size:13px;margin:6px 0}.lights-ring{position:relative;width:290px;height:290px;border:1px dashed #56796b;border-radius:50%;margin:50px auto;max-width:100%}.light-node{position:absolute;width:76px;height:76px;border-radius:50%;border:1px solid #68847b;background:#18383d;color:#abc1b8;transition:background .25s,box-shadow .25s;transform:translate(-50%,-50%);font-size:13px}.light-node.lit{background:#c5efd3;color:#214d3e;border-color:#e8f8ca;box-shadow:0 0 32px #b5e8d22e}.light-0{left:50%;top:0}.light-1{left:93.3%;top:25%}.light-2{left:93.3%;top:75%}.light-3{left:50%;top:100%}.light-4{left:6.7%;top:75%}.light-5{left:6.7%;top:25%}.placement-tabs{display:flex;justify-content:center;gap:6px;margin:24px 0 20px}.placement-tabs button{background:transparent;border:1px solid #507367;color:#c6dbcf;padding:10px 17px;min-height:44px;border-radius:8px;font-size:12px}.placement-tabs button[aria-pressed=true]{background:var(--mint);color:var(--deep);border-color:var(--mint)}.coin-tray{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;max-width:660px;margin:0 auto}.coin{border:1px solid #789083;color:#d1dfc5;background:#ffffff06;border-radius:50%;aspect-ratio:1;min-height:54px;font-size:11px;padding:5px}.coin[data-position=left],.coin[data-position=right]{background:#b5e8d225;border-color:#b5e8d2;color:#e4f6d9}.balance{display:flex;justify-content:center;align-items:center;gap:25px;max-width:540px;margin:26px auto 20px}.pan{border-bottom:3px solid #789c8c;border-radius:0 0 34px 34px;padding:15px 20px 18px;min-height:84px;flex:1;text-align:center;background:linear-gradient(transparent,#b5e8d20a)}.pan span{display:block;color:#9ab5a6;font-size:11px;margin-bottom:9px}.pan strong{font-weight:500;font-size:17px;line-height:1.5;overflow-wrap:anywhere}.balance-symbol{color:#a9cbb6;font-size:28px}.weigh-actions{display:flex;justify-content:center;align-items:center;gap:22px;margin-bottom:22px}.primary-button{background:var(--mint);color:var(--deep);border:0;border-radius:10px;padding:13px 24px;min-height:46px;font-weight:500;font-size:13px}.coin-evidence{margin:22px 0;color:var(--muted);font-size:13px;line-height:1.8}.coin-evidence ol{padding-left:23px}.answer-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}.answer-form select{font:inherit;border:1px solid #cbd9ce;border-radius:8px;background:#fbfcf8;color:var(--ink);padding:12px;min-height:44px}.formula{font-size:clamp(34px,6vw,54px);letter-spacing:2px;text-align:center;margin:34px 0 15px;font-weight:500}.formula span{color:var(--mint)}.formula-note{text-align:center;color:#aec6ba;font-size:11px;line-height:1.8}.number-form{display:flex;align-items:center;justify-content:center;gap:14px;margin:25px 0 10px}.number-form label{font-size:12px;color:#c4d9ca}.number-form input{width:116px;min-width:0;border:1px solid #628777;border-radius:10px;background:#193c3f;color:#e2f4de;padding:12px;font:500 21px system-ui;text-align:center}.number-form input:focus-visible,.answer-form select:focus-visible{outline:3px solid #5cbf9f;outline-offset:3px}.number-form input[aria-invalid=true]{border-color:#edbf99}.number-result{margin-top:22px;padding:20px 24px;border:1px solid #ccdacb;border-radius:16px;background:#eef3e9}.number-history{margin:22px 0;color:var(--muted);font-size:12px}.number-history summary{cursor:pointer;padding:10px 0}.number-history summary span{margin-left:8px}.number-history ol{padding-left:22px;max-height:260px;overflow:auto;line-height:2}.activity-view{min-width:0}
@media(max-width:640px){.activity-nav{gap:4px;margin:0 0 28px}.activity-nav a{padding:12px 10px;font-size:11px}.board-caption{font-size:10px}.lights-ring{width:218px;height:218px;margin:46px auto}.light-node{width:60px;height:60px;font-size:12px}.coin-tray{grid-template-columns:repeat(4,1fr);max-width:320px;gap:10px}.coin{max-width:70px;width:100%;justify-self:center}.placement-tabs{gap:6px}.placement-tabs button{padding:10px 13px;font-size:11px}.balance{gap:14px;margin-top:15px}.pan{padding:12px 9px 16px}.pan strong{font-size:14px}.number-form{gap:10px;flex-wrap:wrap}.number-form input{width:88px}.number-form .primary-button{padding:13px 16px}.answer-form{gap:9px}.answer-form label{width:100%}.discovery{padding:20px}.discovery h2,.number-result h2{font-size:16px}.hint-copy{font-size:12px}.mini-board .status-row>.text-button{align-self:flex-end}.formula{margin-top:28px}}
@media(max-width:360px){.lights-ring{width:190px;height:190px}.light-node{width:56px;height:56px}.activity-nav{display:grid;grid-template-columns:1fr 1fr;text-align:center}.board-caption{letter-spacing:0}.number-form label{width:100%;text-align:center}}

/* A quiet, desktop-first orbit. Only the angle animates; the titles stay upright. */
@property --rotation{syntax:'<angle>';inherits:true;initial-value:0deg}
.topbar{max-width:1500px;padding:22px 44px}
.orbit-shell{max-width:1500px;padding:0 28px 14px}
.orbit-stage{position:relative;--orbit-inset-x:88px;--orbit-inset-y:36px;height:var(--orbit-stage-height,760px);max-width:1380px;margin:auto;isolation:isolate}
.orbit-track{position:absolute;left:var(--orbit-inset-x);top:var(--orbit-inset-y);width:calc(100% - 2*var(--orbit-inset-x));height:calc(100% - 2*var(--orbit-inset-y));overflow:visible;pointer-events:none}
.orbit-track ellipse{fill:none;stroke:#d2ddd2;stroke-width:1;vector-effect:non-scaling-stroke}
.activity-nav{--rotation:0deg;position:absolute;inset:0;margin:0;display:block;pointer-events:none;z-index:3;transition:--rotation 650ms cubic-bezier(.22,.75,.24,1)}
.activity-nav a{position:absolute;left:calc(50% + (50% - var(--orbit-inset-x))*sin(var(--slot) + var(--rotation)));top:calc(50% - (50% - var(--orbit-inset-y))*cos(var(--slot) + var(--rotation)));transform:translate(-50%,-50%);width:170px;min-height:62px;padding:10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;white-space:nowrap;pointer-events:auto;background:var(--paper);border:1px solid transparent;border-radius:40px;color:#708279;font-size:15px;font-weight:500;letter-spacing:1px;text-decoration:none;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.activity-nav a[aria-current]{background:#e4ede2;border-color:#bdcfbc;color:#24493e;box-shadow:0 5px 22px #3b65400b}
.activity-nav a:hover{background:#eaf0e6;color:var(--ink);border-color:#d2dfcf}
.orbit-number{font-size:9px;font-weight:400;letter-spacing:2px;color:#8a9f8d;line-height:1}
.activity-nav a[aria-current] .orbit-number{color:#54856b}
.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(60% - 100px);max-width:760px;height:auto;overflow:visible;padding:14px 18px 22px;border-radius:28px;background:var(--paper);z-index:1}
.orbit-center:focus-visible{outline:2px solid #8eae98;outline-offset:4px}
.orbit-center .intro{margin-bottom:19px}
.orbit-center .eyebrow{font-size:10px;margin-bottom:9px;letter-spacing:1.6px}
.orbit-center h1{font-size:32px;line-height:1.3;margin-bottom:9px;letter-spacing:-1px}
.orbit-center .premise{font-size:13px;line-height:1.75}
.orbit-center .playground{padding:17px 24px 0;border-radius:20px}
.orbit-center .vessels{grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);gap:20px;max-width:530px;margin:16px auto 17px}
.orbit-center .capacity{margin-bottom:10px}
.orbit-center .vessel{height:165px;max-width:154px}
.orbit-center .vessel.small{height:119px;max-width:136px}
.orbit-center .quantity{font-size:36px}
.orbit-center .jug-actions{margin-top:12px;max-width:154px}
.orbit-center .pour-actions{padding-top:30px;gap:10px}
.orbit-center .status-row{min-height:56px}
.orbit-center .below-board{margin-top:16px;gap:20px}
.orbit-center .quiet-note{margin-top:18px;font-size:10px}
.orbit-center .mini-below,.orbit-center .coin-evidence,.orbit-center .number-history{margin-top:16px}
.orbit-center .lights-ring{width:206px;height:206px;margin:40px auto}
.orbit-center .light-node{width:60px;height:60px;font-size:12px}
.orbit-center .placement-tabs{margin:16px 0}
.orbit-center .coin-tray{gap:6px}
.orbit-center .coin{min-height:44px}
.orbit-center .balance{margin:14px auto;gap:20px}
.orbit-center .pan{min-height:67px;padding:9px 14px 12px}
.orbit-center .weigh-actions{margin-bottom:13px}
.orbit-center .formula{font-size:42px;margin:23px 0 12px}
.orbit-center .number-form{margin-top:20px}
.orbit-invitation{text-align:center;color:#8a9a8c;font-size:11px;letter-spacing:1px;margin:3px 0 12px}
.orbit-invitation span{margin-left:12px;color:#a1aca1}
footer{max-width:1420px;padding:16px 32px;font-size:9px}
@media(min-width:901px) and (max-width:1100px){
  .orbit-shell{padding-inline:14px}.orbit-stage{--orbit-inset-x:74px}
  .activity-nav a{width:145px;font-size:13px}
  .orbit-center{padding-inline:10px}
  .orbit-center .playground{padding-inline:18px}.orbit-center .coin-tray{grid-template-columns:repeat(4,1fr);max-width:340px}.orbit-center .coin{max-width:58px;justify-self:center;width:100%}
}
/* Base narrow-screen flow; mobile.css refines the ten-title ellipse and controls. */
@media(max-width:900px){
  .topbar{padding:20px 22px}.orbit-shell{padding:0 16px 18px}
  .orbit-stage{--orbit-inset-x:58px;--orbit-inset-y:40px;--orbit-nav-height:620px;min-width:0;height:auto;padding-top:calc(var(--orbit-nav-height) + 6px)}
  .orbit-track{height:calc(var(--orbit-nav-height) - 2*var(--orbit-inset-y))}
  .activity-nav{height:var(--orbit-nav-height)}
  .activity-nav a{width:140px;min-height:56px;font-size:12px}
  .orbit-center{position:relative;inset:auto;transform:none;width:100%;height:auto;max-height:none;overflow:visible;padding:10px 0 20px;max-width:700px;margin:auto;scrollbar-gutter:auto}
  .orbit-center .vessels{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:12px}
  .orbit-center .pour-actions button{flex-direction:column;gap:3px;font-size:10px;padding:9px 2px}
  .orbit-center .coin-tray{grid-template-columns:repeat(4,1fr);max-width:320px}
  .orbit-invitation{line-height:1.8}.orbit-invitation span{display:block;margin:0}
}
@media(prefers-reduced-motion:reduce){.activity-nav{transition:none}.activity-nav a{transition:none}}

/* Every title center follows the exact same SVG ellipse, including in flight.
   Shared insets define both radii; the center panel fits inside their safe area. */
.wordmark{padding:0;background:transparent;border-radius:12px;line-height:0;letter-spacing:0;flex-shrink:0;width:340px;max-width:100%}
.wordmark img{display:block;width:100%;height:auto}
.language-control{position:relative;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.language-control::after{content:"";position:absolute;right:18px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.language-control select,#language-select{font:inherit;color:var(--ink);background:#edf2e9;border:1px solid #cddccd;border-radius:20px;padding:9px 36px 9px 14px;appearance:none;-webkit-appearance:none;width:164px;max-width:164px;min-height:40px}
.topbar{gap:20px}.edition{margin-left:auto}
.activity-nav a{width:168px;white-space:normal;text-align:center;line-height:1.3;font-size:13px;letter-spacing:.2px;height:70px;min-height:70px}
html:not([lang=zh-CN]):not([lang=zh-TW]) .orbit-center h1{font-size:30px;letter-spacing:-.7px}
html:not([lang=zh-CN]):not([lang=zh-TW]) .experiment-label{letter-spacing:1px}
html:not([lang=zh-CN]):not([lang=zh-TW]) .jug-actions button{white-space:normal;font-size:11px}
html:not([lang=zh-CN]):not([lang=zh-TW]) .pour-actions button{font-size:10px}
html:not([lang=zh-CN]):not([lang=zh-TW]) .quiet-note{letter-spacing:0;line-height:1.8}
html:not([lang=zh-CN]):not([lang=zh-TW]) .coin{font-size:10px}
@media(min-width:901px) and (max-width:1100px){.activity-nav a{width:140px;font-size:12px}}
@media(max-width:900px){
 .topbar{gap:12px;flex-wrap:wrap}.topbar .edition{display:none}.language-control{margin-left:auto}
 .activity-nav a{width:108px;height:74px;min-height:74px;font-size:11px;padding:7px 8px}
 .orbit-center{height:auto}.orbit-center .playground{padding-inline:18px}.orbit-center .eyebrow{letter-spacing:1px}
}
@media(max-width:420px){
 .topbar{padding:16px}.language-control{gap:4px}.language-control select,#language-select{max-width:164px;font-size:11px}
 .orbit-center .below-board{grid-template-columns:1fr}.history summary{text-align:left}.orbit-center h1,html:not([lang=zh-CN]):not([lang=zh-TW]) .orbit-center h1{font-size:28px}
 .board-top{gap:10px}.board-caption{text-align:right}.placement-tabs button{padding-inline:9px}.quiet-note span{display:block;margin:0}
}

.header-tools{display:flex;align-items:center;gap:26px;margin-left:auto}
@media(max-width:640px){.header-tools{gap:10px}}

/* Activity text, controls, hints and expanded histories flow naturally. */
.orbit-center .history ol,.orbit-center .number-history ol,.orbit-center .more-history ol{max-height:none;overflow:visible}

/* Optional personal reflections grow with their text, never inside a scroll box. */
.thoughts{margin:24px 0 0;padding-top:19px;border-top:1px solid var(--line)}
.thoughts h2{font-size:14px;line-height:1.5;font-weight:500;margin:0 0 7px}
.thoughts-helper,.thoughts-status{font-size:11px;color:var(--muted);line-height:1.65;margin:0 0 10px}
.thoughts textarea{display:block;width:100%;min-height:86px;max-height:none;resize:none;overflow:hidden;box-sizing:border-box;border:1px solid #cddccd;border-radius:12px;background:#fbfcf8;color:var(--ink);padding:12px 14px;font:inherit;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.thoughts textarea:focus-visible,#language-select:focus-visible{outline:3px solid #138777;outline-offset:3px}
.thoughts-status{margin:7px 0 0}
.thoughts-status[data-state=error]{color:#97562c}

/* Completed titles stay readable, focusable and replayable. No opacity reduction. */
.activity-nav a{color:#4a6358}
.activity-nav a.is-completed{color:#606863;background:#eceee9;border-color:#d9ded7}
.activity-nav a.is-completed .orbit-number{color:#606863}
.activity-nav a.is-completed .orbit-number::after{content:" ✓";font-size:12px;font-weight:700;letter-spacing:0}
.activity-nav a.is-completed[aria-current]{color:#3b4942;background:#e1e6de;border-color:#7d9180;box-shadow:0 0 0 2px #7d918029}
.activity-nav a.is-completed:hover{color:#344b40;background:#e1e7df;border-color:#a6b6a7}
.activity-nav a:focus-visible{outline:3px solid #167365;outline-offset:4px}
#completion-guide{margin:8px 24px 24px;line-height:1.8;color:#606e64}

/* Eighteen full titles: narrower cards and a naturally taller true ellipse. */
@media(min-width:980px){
 .activity-nav a{width:128px;height:88px;min-height:88px;font-size:13px;line-height:1.35;padding:8px;overflow-wrap:anywhere}
 .orbit-stage{--orbit-inset-y:48px}
}
@media(min-width:1200px){.activity-nav a{width:148px}}

/* Readable secondary text on the pale paper; preserve completed-label dimming. */
.orbit-number,.activity-nav a[aria-current] .orbit-number{color:#526b58}
footer,.quiet-note,.orbit-invitation,.orbit-invitation span,.history summary span,.history li .record-num,.orbit-center .more-history summary>span+span,.orbit-center .more-history>p{color:#596e65}
.orbit-center:focus-visible{outline:3px solid #167365;outline-offset:4px}


/* Avoid painting the CSS fallback ring before its measured first position. */
html[data-orbit-pending] .orbit-shell,html[data-orbit-pending] footer{visibility:hidden}