.sansu-page{max-width:1240px;margin:22px auto;padding:0 16px;color:#20324b;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:34px;margin:0 0 6px}.page-heading p{margin:0}.parent-note{max-width:920px;margin:30px auto;padding:25px;background:#fff8e7;line-height:1.9}.parent-note h2{font-size:22px}
#host{--ink:#20324b;--paper:#fff8e9;position:relative;isolation:isolate;container-type:size;container-name:game;height:720px;max-width:1200px;margin:auto;overflow:hidden;background:#102438 url('./assets/sky.webp') center/cover;border:3px solid #bca777;border-radius:28px;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:800 15px/1.4 'Zen Maru Gothic',sans-serif;min-width:0;min-height:44px;border:1px solid #bcaa85;border-radius:13px;background:var(--paper);color:var(--ink);padding:8px 14px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #99815b}#host button:disabled{cursor:default;opacity:.55}#host button:focus-visible,#host input:focus-visible,#collection:focus-visible{outline:3px solid #eeac79;outline-offset:3px}#host button:hover:enabled{filter:brightness(1.05)}#host button.primary{background:#a4d9ca;border-color:#5c948b;color:#163939}#host input{accent-color:#3c8179;font:inherit}#host .sansu-top{height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#0e223cd9;color:#f8e4b8;border-bottom:1px solid #bca777}#host .sansu-top strong{font-size:17px;white-space:nowrap}#host nav{display:flex;gap:7px}#host nav button{font-size:12px;min-height:31px;padding:5px 10px;border-radius:20px;box-shadow:none}#base{height:calc(100% - 55px)}
#cover{height:100%;display:grid;grid-template-columns:.95fr 1.15fr;gap:0;background:#fffaed}#cover figure{margin:0;position:relative;min-width:0;min-height:0}#cover figure img{width:100%;height:100%;object-fit:cover;object-position:35% center}#cover figcaption{position:absolute;left:0;bottom:25px;width:100%;padding:15px;color:#fff4d5;background:#18334fba;text-align:center;font-size:14px}.selection{display:flex;flex-direction:column;justify-content:center;padding:25px 29px;gap:14px;background:linear-gradient(130deg,#fffaf0,#f2e4c8)}.selection>small{font-size:12px;color:#6b685f}.selection h2{font-size:clamp(32px,4cqw,48px);line-height:1.25;margin:0;color:#20334c;letter-spacing:.06em}.selection h2 br{display:none}.selection h2 span{color:#418279}.step{font-size:13px;font-weight:800;margin:6px 0 0}#difficulties{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#host #difficulties button{padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:10px;min-height:112px}#difficulties span{font-size:13px;color:#a47b20}#difficulties b{font-size:12px;white-space:nowrap}#difficulties small{font-size:9px;font-weight:500;line-height:1.6}#host #difficulties button[aria-pressed=true]{background:#c4e4d8;border:3px solid #478176;padding:10px 2px}#operations{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:4px 0 12px}#host #operations button{padding:10px 2px;background:#fff5dd;display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:40px 40px 16px 16px}#operations b{display:grid;place-items:center;width:48px;height:48px;background:#d9ece0;border:1px solid #8dad9e;border-radius:50%;font:700 28px/1 sans-serif}#operations button:nth-child(2n) b{background:#f4d2b1}#operations span{font-size:10px}#ready-note{text-align:center;font-size:10px!important}
#play{height:100%;padding:18px 24px 23px;display:grid;grid-template-rows:47px minmax(0,1fr);gap:16px}#status{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff2ca;font-size:14px}#status b{font-size:25px}#progress{display:flex;align-items:center;gap:13px;font:700 28px/1 sans-serif;color:#e2b965}#progress i{font-style:normal}#progress i[data-current=true]{color:#9bdbcb;transform:scale(1.18)}#station{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:26px;min-height:0}#porthole{background:#fff8e9;border:8px double #bba678;border-radius:45% 45% 24px 24px;padding:40px 22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:21px;min-width:0;min-height:0;box-shadow:0 9px 20px #07132355}#mode-label{font-size:12px}#equation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:16px;row-gap:8px;font:800 clamp(25px,4.3cqw,55px)/1.25 'Fredoka',sans-serif;width:100%;font-variant-numeric:tabular-nums}#expression{white-space:nowrap}.equals{font-size:35px}#answer{min-width:120px;padding:8px 14px;background:#dcece3;border:2px solid #91b7ab;border-radius:14px;min-height:77px;text-align:center}#feedback{font-size:17px;font-weight:800;margin:0;color:#3c6f65;min-height:26px;text-align:center}#porthole[data-status=hint] #answer{background:#d3e7f4;color:#22517a}#porthole[data-status=wrong] #answer{background:#f8dbc8;animation:shake .3s}#porthole[data-status=correct]{border-color:#58a18d}.helper{display:flex;gap:17px;align-items:center;margin-top:5px}.helper img{width:104px;height:104px;object-fit:contain;border-radius:50%}.helper p{font-size:13px;line-height:1.8}.console{padding:19px;background:#f2e9d4;border:4px double #bfa77b;border-radius:26px;display:grid;grid-template-rows:25px minmax(0,1fr) 47px 16px;gap:14px;min-height:0}.console>p{font-size:15px;font-weight:800;text-align:center;margin:0}.console>small{font-size:10px;text-align:center}#keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:12px;min-height:0}#host #keypad button{font:700 31px/1 'Fredoka',sans-serif;min-height:0;padding:5px;border-radius:15px;background:#fffdf5}#host #keypad #clear,#host #keypad #submit{font:800 14px/1.4 'Zen Maru Gothic',sans-serif}#host #keypad #submit{background:#aadbc9}#host #keypad #clear{background:#f4d1b4}.small-actions{display:flex;gap:10px}#host .small-actions button{flex:1;font-size:12px;min-height:40px;padding:6px}
#result{height:100%;display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;padding:24px}#result-card{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#fff8e9;border:5px double #c4ae78;border-radius:25px;text-align:center}#result-card>img{min-height:0;width:100%;height:45%;object-fit:cover;object-position:40% center}#result-card>div{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:17px}#result-card small{font-size:12px}#result-title{font-size:26px;line-height:1.4;margin:0}#result-msg{font-size:13px;margin:0}.scoreline{font:700 23px/1.1 'Fredoka',sans-serif;margin:0}.scoreline b{font-size:62px}#result-stars{font-size:28px;color:#a47724;margin:0;letter-spacing:.13em}#notebook{background:#fffaeb;border:5px double #c4ae78;border-radius:14px;padding:23px;display:grid;grid-template-rows:35px 23px minmax(0,1fr) 48px;gap:12px;min-width:0;min-height:0}#notebook h3{font-size:22px;margin:0;line-height:1.5}#notebook>p{font-size:10px;margin:0}#collection{overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable;border-top:2px solid #dbc9a4;border-bottom:2px solid #dbc9a4;padding:2px 8px}#collection article{display:grid;grid-template-columns:30px minmax(0,1fr) 54px;gap:13px;align-items:center;min-height:54px;border-bottom:1px dashed #cab991;font-variant-numeric:tabular-nums}#collection article>span{font-size:14px;color:#737a87}#collection b{font:600 23px/1.4 'Fredoka',sans-serif;white-space:nowrap}#collection em{font-size:13px;font-style:normal;color:#365e5d;background:#cfe7df;border-radius:6px;text-align:center;padding:5px 0}#collection article[data-ok=true] em{font-size:24px;background:none;color:#b67444}#notebook footer{display:flex;gap:13px}#notebook footer button{flex:1}
#modal{position:absolute;inset:0;z-index:50;background:#11253bd6;display:grid;place-items:center;padding:16px}#modal>section{max-height:100%;overflow:auto;width:min(620px,100%);background:#fff8e8;border:4px double #b68a3a;border-radius:22px;padding:25px}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}#modal h2{font-size:23px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:17px 0}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;margin:0;border:0;border-radius:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
@media(max-width:700px){.sansu-page{padding:0 8px}#host{height:850px;border-radius:20px}.page-heading h1{font-size:29px}.parent-note{padding:16px}}@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container game (max-width:620px){#host .sansu-top{height:77px;display:grid;justify-content:stretch;gap:6px;padding:7px 8px;text-align:center}#host .sansu-top strong{font-size:14px}#host nav{gap:5px}#host nav button{flex:1;white-space:nowrap;font-size:10px;padding:7px 3px;min-height:31px}#base{height:calc(100% - 77px)}#cover{grid-template-columns:1fr;grid-template-rows:minmax(140px,1fr) auto}#cover figure img{object-position:center 38%}#cover figcaption{font-size:10px;bottom:10px;padding:9px}.selection{padding:18px 16px 20px;gap:10px}.selection>small{font-size:10px}.selection h2{font-size:31px}.step{font-size:11px;margin:3px 0}#difficulties{gap:5px}#host #difficulties button{min-height:91px;padding:9px 3px;gap:6px}#host #difficulties button[aria-pressed=true]{padding:7px 1px}#difficulties span{font-size:10px}#difficulties b{font-size:10px}#difficulties small{font-size:8px}#operations{gap:6px;margin:3px 0 6px}#host #operations button{gap:7px;padding:8px 2px}#operations b{width:38px;height:38px;font-size:23px}#operations span{font-size:8px}#ready-note{font-size:9px!important}#play{grid-template-rows:40px minmax(0,1fr);padding:12px 11px 15px;gap:10px}#status{font-size:10px;gap:7px}#status b{font-size:20px}#progress{font-size:21px;gap:4px}#station{grid-template-columns:1fr;grid-template-rows:minmax(180px,.8fr) minmax(280px,1fr);gap:14px}#porthole{border-width:6px;border-radius:48% 48% 18px 18px;padding:14px 12px;gap:10px}#mode-label{font-size:10px}#equation{font-size:33px;gap:9px}.equals{font-size:24px}#answer{min-width:80px;min-height:52px;padding:5px 8px;border-radius:10px}#feedback{font-size:12px;min-height:19px}.helper{gap:9px;margin-top:0}.helper img{width:56px;height:56px}.helper p{font-size:10px;line-height:1.5}.console{padding:11px;grid-template-rows:18px minmax(0,1fr) 36px 13px;gap:9px;border-radius:18px}.console>p{font-size:12px}.console>small{font-size:8px}#keypad{gap:9px}#host #keypad button{font-size:27px;border-radius:11px}#host #keypad #clear,#host #keypad #submit{font-size:12px}#host .small-actions button{font-size:10px;min-height:33px}#result{grid-template-columns:1fr;grid-template-rows:203px minmax(0,1fr);gap:14px;padding:15px 12px}#result-card{flex-direction:row;border-radius:18px}#result-card>img{width:40%;height:100%;object-position:30%}#result-card>div{padding:11px 7px;gap:8px}#result-card small{font-size:9px}#result-title{font-size:17px}#result-msg{font-size:10px}.scoreline{font-size:16px}.scoreline b{font-size:38px}#result-stars{font-size:21px}#notebook{padding:13px;grid-template-rows:26px 24px minmax(0,1fr) 41px;gap:7px}#notebook h3{font-size:17px}#notebook>p{font-size:8px}#collection{padding:2px 3px}#collection article{grid-template-columns:19px minmax(0,1fr) 44px;gap:9px;min-height:43px}#collection b{font-size:19px}#collection article>span{font-size:11px}#collection em{font-size:10px}#collection article[data-ok=true] em{font-size:22px}#host #notebook footer button{font-size:12px;min-height:38px}#modal>section{padding:18px}#modal h2{font-size:19px}#dialog-content{font-size:13px}}
@container game (max-height:520px) and (min-width:621px){#host .sansu-top{height:38px;padding:4px 12px}#host .sansu-top strong{font-size:12px}#host nav button{min-height:27px;font-size:10px;padding:4px 8px}#base{height:calc(100% - 38px)}.selection{padding:12px 22px;gap:6px}.selection h2{font-size:29px}.selection>small{font-size:9px}.step{font-size:10px;margin:2px 0}#host #difficulties button{min-height:69px;padding:6px 2px;gap:3px}#host #difficulties button[aria-pressed=true]{padding:4px 0}#difficulties b{font-size:10px}#difficulties span{font-size:10px}#difficulties small{font-size:8px}#operations{gap:6px;margin:0}#host #operations button{padding:5px 2px;gap:4px}#operations b{width:33px;height:33px;font-size:22px}#operations span{font-size:9px}#ready-note{font-size:8px!important}#play{grid-template-rows:29px minmax(0,1fr);gap:8px;padding:8px 19px 12px}#status{font-size:10px}#status b{font-size:18px}#progress{font-size:21px;gap:12px}#station{gap:18px;grid-template-columns:1.15fr .85fr}#porthole{border-width:6px;padding:12px 16px;gap:7px}#mode-label{font-size:9px}#equation{font-size:34px;gap:8px}.equals{font-size:26px}#answer{min-height:51px;min-width:89px;padding:4px 8px}#feedback{font-size:12px;min-height:17px}.helper{gap:10px;margin:0}.helper img{width:55px;height:55px}.helper p{font-size:9px}.console{padding:10px 12px;grid-template-rows:17px minmax(0,1fr) 28px 12px;gap:7px;border-radius:18px}.console>p{font-size:11px}.console>small{font-size:8px}#keypad{gap:7px}#host #keypad button{font-size:24px;border-radius:9px}#host #keypad #clear,#host #keypad #submit{font-size:10px}#host .small-actions button{font-size:9px;min-height:26px;padding:3px}#result{padding:12px 19px;gap:18px;grid-template-columns:.85fr 1.15fr}#result-card{border-radius:17px}#result-card>img{height:36%}#result-card>div{padding:7px 10px;gap:5px}#result-title{font-size:19px}#result-msg{font-size:10px}#result-card small{font-size:9px}.scoreline{font-size:17px}.scoreline b{font-size:38px}#result-stars{font-size:22px}#notebook{padding:12px 16px;grid-template-rows:26px 17px minmax(0,1fr) 33px;gap:6px}#notebook h3{font-size:18px}#notebook>p{font-size:8px}#collection article{min-height:39px;grid-template-columns:22px minmax(0,1fr) 44px;gap:10px}#collection b{font-size:19px}#collection em{font-size:10px}#collection article[data-ok=true] em{font-size:21px}#host #notebook footer button{min-height:30px;padding:4px;font-size:11px}#modal>section{padding:13px 22px}#modal h2{font-size:19px}#dialog-content{font-size:12px;line-height:1.6}#dialog-content p{margin:10px 0}#dialog-content label{margin:8px 0}}
@container game (max-width:350px){.selection{padding:14px 10px;gap:8px}.selection h2{font-size:27px}#difficulties b{font-size:8px}#difficulties small{font-size:7px}#operations b{width:31px;height:31px;font-size:22px}#operations span{font-size:7px}#station{grid-template-rows:minmax(158px,.75fr) minmax(255px,1fr)}#play{padding:9px 8px 12px;gap:6px}#progress{font-size:17px;gap:3px}#status{font-size:9px}#status b{font-size:16px}#equation{font-size:26px}#answer{min-width:69px;min-height:43px}#feedback{font-size:10px}.helper img{width:41px;height:41px}.helper p{font-size:8px}#result{grid-template-rows:175px minmax(0,1fr);padding:12px 9px}#result-title{font-size:14px}#result-msg{font-size:9px}#result-stars{font-size:17px}#notebook{padding:11px 9px}#notebook h3{font-size:14px}#notebook>p{font-size:7px}#collection b{font-size:15px}#collection article{gap:6px;grid-template-columns:17px minmax(0,1fr) 37px}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media(prefers-reduced-motion:reduce){#host *{transition:none!important;animation:none!important}}