:root{font-family:system-ui,-apple-system,"Yu Gothic UI",sans-serif;color:#eef6ff;background:#030916;font-size:14px;--edge-gap:12px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#12325d 0,#071425 38%,#030916 100%);overflow:hidden}button{font:inherit;color:inherit}.portrait{display:none}main{height:100dvh;min-width:620px;display:grid;grid-template-rows:72px 1fr}header{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:100px minmax(390px,1fr) 215px 72px;gap:8px;align-items:center;padding:6px max(var(--edge-gap),env(safe-area-inset-right)) 6px max(var(--edge-gap),env(safe-area-inset-left));background:#071323eF;border-bottom:1px solid #38618a;box-shadow:0 5px 18px #0008}.title{display:flex;flex-direction:column}.title b{font:900 25px/1 sans-serif;color:#63d8ff;letter-spacing:-1px}.title span{font-weight:800}.settings{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.setting{min-width:0;text-align:center;padding:3px;background:#0e223a;border:1px solid #31597c;border-radius:6px}.setting span{display:block;font-size:10px}.setting b{font-size:16px}.setting i{display:block;height:3px;margin-top:2px;border-radius:3px}.summary{display:grid;grid-template-columns:1fr;line-height:1.15}.summary b{color:#ffd45a}.summary span{font-size:12px}.summary small{color:#88cfff}.reset{height:54px;background:#361621;border:1px solid #ff6a7d;border-radius:8px;font-size:10px;font-weight:800}.columns{display:grid;grid-template-columns:1.05fr .95fr;gap:8px;min-height:0;padding:8px max(var(--edge-gap),env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(var(--edge-gap),env(safe-area-inset-left))}.left,.right{min-width:0;overflow-y:auto;padding-right:2px}.left{display:grid;grid-template-columns:.85fr 1.15fr;gap:8px}.right{display:flex;flex-direction:column;gap:8px}article{background:#08182ad9;border:1px solid #254a6b;border-radius:9px;padding:7px;min-width:0}h2{font-size:13px;margin:0 0 5px;color:#64d8ff;border-bottom:1px solid #244762;padding-bottom:4px}h2 small{color:#9fb5c9;font-weight:400;font-size:9px}.counter{display:grid;grid-template-columns:minmax(0,1fr) 38px 58px 38px;gap:4px;align-items:center;min-height:43px;border-bottom:1px solid #183550}.counter label{min-width:0;font-weight:700;font-size:12px;overflow-wrap:anywhere}.counter label small{display:block;color:#92abc0;font-size:9px;font-weight:400}.counter button{height:34px;border:1px solid #3e729e;border-radius:7px;background:#102b45;font-size:20px;font-weight:900}.counter button.plus{background:#0b5170;border-color:#42c9ff}.counter output{text-align:center;font:900 18px/1 ui-monospace,monospace;color:#fff}.counter.child{padding-left:8px}.counter.invalid output{color:#ff7185}.counter details{grid-column:1/-1;font-size:10px;color:#afc7da}.counter summary{cursor:pointer;color:#6ecfff}.counter p{margin:4px 0 7px}.hint-group{margin:0 0 7px}.hint-group h3{font-size:11px;margin:0 0 4px;color:#b7cde1}.hint-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.hint{min-width:0;min-height:42px;padding:4px 2px;background:#10263d;border:1px solid #315775;border-radius:6px;text-align:center}.hint strong,.hint span,.hint b{display:block;overflow-wrap:anywhere}.hint strong{font-size:10px}.hint span{font-size:8px;color:#a8bed0}.hint b{font-size:13px;color:#64d8ff}.hint.certain{border-color:#e6bb46}.reference{font-size:10px}.reference details{margin-top:4px}.reference summary{color:#6edbff;font-weight:700}.reference p{margin:4px 0;color:#b8ccdc}.tap{animation:tap .15s}@keyframes tap{50%{transform:scale(.93);filter:brightness(1.7)}}
@media(max-height:500px){main{grid-template-rows:63px 1fr}header{grid-template-columns:88px minmax(350px,1fr) 180px 62px}.columns{padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom));gap:5px}.left{gap:5px}article{padding:5px}.counter{min-height:39px}.hint{min-height:38px}.title b{font-size:21px}}
@media(orientation:portrait){main{display:none}.portrait{height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center}.portrait b{font-size:20px;color:#64d8ff}}
.columns{grid-template-columns:1.35fr .85fr}
.left{grid-template-columns:minmax(210px,.95fr) minmax(245px,1.05fr)}
.counter label{word-break:normal}
#basic .counter{grid-template-columns:minmax(72px,1fr) 34px 48px 34px}
#basic .counter label{font-size:11px}
#basic .counter button{height:32px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px max(var(--edge-gap),env(safe-area-inset-right)) 0 max(var(--edge-gap),env(safe-area-inset-left));background:#071323ef}.tab{height:38px;border:1px solid #315b7e;border-bottom-color:#54d7ff;border-radius:8px 8px 0 0;background:#0c2138;color:#a8bed1;font-weight:800}.tab.active{background:#0a5574;color:#fff;border-color:#56d8ff;box-shadow:inset 0 -3px #65dcff}.tab-pages{min-height:0;padding:7px max(var(--edge-gap),env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(var(--edge-gap),env(safe-area-inset-left))}.tab-page{display:none;height:100%;overflow-y:auto}.tab-page.active{display:block}.tab-page>article{max-width:100%}#basicPanel article{max-width:560px;margin:0 auto}#basicPanel #basic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#basicPanel #basic .counter{display:grid;grid-template-columns:minmax(76px,1fr) 38px 54px 38px;border:1px solid #214764;border-radius:8px;padding:8px;align-content:start}#basicPanel #basic .counter details{margin-top:4px}#numericPanel #numeric{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}#hintPanel{display:none;grid-template-columns:minmax(0,1fr) 260px;gap:8px}#hintPanel.active{display:grid}#hintPanel .hint-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
main{grid-template-rows:72px 44px 1fr}
@media(max-height:500px){main{grid-template-rows:63px 44px 1fr}}
#basicPanel article{max-width:820px}
#basicPanel #basic .counter{grid-template-columns:minmax(55px,1fr) 30px 40px 30px;gap:3px;padding:5px}
#basicPanel #basic .counter button{height:32px}
dialog{width:min(320px,calc(100vw - 40px));padding:0;border:1px solid #4d86ac;border-radius:12px;background:#091a2c;color:#eef6ff;box-shadow:0 12px 50px #000c}dialog::backdrop{background:#000a}dialog form{display:grid;gap:8px;padding:14px}dialog h2{margin-bottom:2px}dialog button{min-height:42px;border:1px solid #3d7198;border-radius:8px;background:#102d48;font-weight:800}dialog button.danger{border-color:#ff6a7d;background:#421a26}
#basicPanel #basic .counter{grid-template-columns:minmax(55px,1fr) 32px 62px 32px;gap:3px;padding:3px}
#basicPanel #basic .counter output{min-width:62px;font-variant-numeric:tabular-nums;white-space:nowrap}