:root{color-scheme:light;--ink:#111;--muted:#5f6068;--line:#111;--soft:#e4e4e7;--surface:#fff;--surface2:#f6f6f7;--green:#e7f8ee;--green-ink:#12351f;--amber:#fff4cf;--amber-ink:#4f3900;--blue:#e7f0ff;--blue-ink:#163c78;--radius:18px;--shadow:4px 4px 0 #111;--page:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:"Noto Sans JP","Yu Gothic UI",Meiryo,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-tap-highlight-color:transparent}button,input,summary{font:inherit}button{color:inherit}a{color:inherit;text-underline-offset:.2em}:focus-visible{outline:3px solid #15703b;outline-offset:3px}.skip-link{position:fixed;z-index:200;top:.7rem;left:.7rem;transform:translateY(-160%);padding:.4rem .7rem;border:2px solid var(--line);border-radius:999px;background:#fff;font-weight:800}.skip-link:focus{transform:none}
.site-header{position:sticky;top:0;z-index:30;display:flex;justify-content:center;border-bottom:2px solid var(--line);background:rgb(255 255 255/.94);backdrop-filter:blur(10px)}.header-inner{display:flex;width:min(100%,var(--page));min-height:60px;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem 1rem}.brand{display:flex;align-items:center;gap:.6rem;font-weight:850;text-decoration:none}.brand-mark{display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-size:.72rem}.header-links{display:flex;gap:.25rem;align-items:center}.header-links a{padding:.35rem .6rem;border-radius:999px;color:var(--muted);font-size:.86rem;font-weight:750;text-decoration:none}.header-links a:hover{background:var(--surface2)}.header-links .github-link{border:2px solid var(--line);background:var(--green);color:var(--green-ink)}
main{width:min(100%,var(--page));margin:auto;padding:1.5rem 1rem 5rem}.tile{min-width:0;border:2px solid var(--line);border-radius:var(--radius);background:#fff}.kicker{margin:0 0 .5rem;color:var(--muted);font-size:.74rem;font-weight:850;letter-spacing:.08em}.intro-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}.intro-copy{grid-column:span 8;padding:clamp(1.4rem,4vw,2.5rem)}.intro-copy h1{max-width:11ch;margin:0 0 1rem;font-size:clamp(3rem,8vw,5.6rem);letter-spacing:-.075em;line-height:.96}.intro-lead{max-width:44rem;margin:0;color:var(--muted)}.intro-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}.intro-actions a,.target-actions button,.filter-row button,.text-button{padding:.48rem .82rem;border:2px solid var(--line);border-radius:999px;background:#fff;font-size:.9rem;font-weight:850;text-decoration:none;cursor:pointer}.intro-actions .primary-action{background:var(--ink);color:#fff}.intro-actions a:hover,.target-actions button:hover,.filter-row button:hover{box-shadow:2px 2px 0 var(--line);transform:translate(-1px,-1px)}.target-card{grid-column:span 4;padding:1.25rem;background:var(--green)}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.status-pill{display:inline-flex;align-items:center;min-height:1.6rem;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:850;white-space:nowrap}.status-pill.completed{border:1px solid var(--green-ink);background:#fff;color:var(--green-ink)}.status-pill.research{border:1px solid var(--amber-ink);background:var(--amber);color:var(--amber-ink)}.status-pill.fast{border:1px solid var(--blue-ink);background:var(--blue);color:var(--blue-ink)}.status-pill.plain{background:var(--surface2);color:var(--muted)}.target-value{margin:1.5rem 0 .25rem;font-size:clamp(3rem,8vw,4.7rem);font-weight:900;letter-spacing:-.07em;line-height:1}.target-note{margin:.4rem 0 1rem;color:var(--green-ink);font-size:.86rem;font-weight:700}.target-actions{display:flex;flex-wrap:wrap;gap:.45rem}.target-actions button{border-width:1px;background:#fff;color:var(--green-ink);padding:.38rem .65rem;font-size:.8rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1rem;border-block:2px solid var(--line)}.fact{display:flex;align-items:baseline;justify-content:center;gap:.65rem;padding:1rem;text-align:center}.fact+.fact{border-left:2px solid var(--line)}.fact strong{font-size:1.65rem;line-height:1}.fact span{color:var(--muted);font-size:.78rem;font-weight:750}.section{margin-top:clamp(3.5rem,8vw,6rem);scroll-margin-top:5rem}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.1rem}.section-heading h2{margin:0;font-size:clamp(1.8rem,5vw,2.7rem);letter-spacing:-.045em;line-height:1.15}.section-heading>p{max-width:31rem;margin:0;color:var(--muted);font-size:.9rem}.filter-row{display:flex;gap:.45rem;overflow:auto;padding:.15rem 0 .8rem;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter-row button{flex:none;padding:.38rem .72rem;font-size:.8rem}.filter-row button.active{background:var(--ink);color:#fff}.section-title{margin:2rem 0 .8rem;font-size:1.1rem}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.method-card{display:flex;min-height:270px;flex-direction:column;align-items:flex-start;padding:1.2rem;transition:transform .12s,box-shadow .12s}.method-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow)}.card-top{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem}.method-card h3{margin:.9rem 0 .45rem;font-size:1.35rem;letter-spacing:-.035em;line-height:1.25}.method-card p{margin:0;color:var(--muted);font-size:.9rem}.method-meta{margin-top:.8rem;color:var(--muted);font-size:.74rem;font-weight:750}.method-score{margin-top:auto;padding-top:1rem;font-size:.78rem}.method-score strong{font-size:.9rem}.try-button{width:100%;margin-top:.7rem;padding:.55rem .8rem;border:2px solid var(--line);border-radius:999px;background:var(--ink);color:#fff;font-weight:850;cursor:pointer}.try-button:hover{box-shadow:2px 2px 0 #888;transform:translate(-1px,-1px)}
.ranking-panel{padding:1rem}.bench-list{display:grid;gap:.35rem}.bench-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.8rem;align-items:center;padding:.6rem .7rem;border-radius:10px;background:var(--surface2);font-size:.82rem}.bench-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bench-row span{color:var(--muted);font-variant-numeric:tabular-nums}.text-button{margin-top:1rem;background:#fff;font-size:.78rem}footer{border-top:2px solid var(--line)}.footer-inner{display:flex;width:min(100%,var(--page));margin:auto;justify-content:space-between;gap:1rem;padding:1rem;color:var(--muted);font-size:.78rem}
.sheet-backdrop{position:fixed;z-index:100;inset:0;display:none;align-items:flex-end;justify-content:center;padding:1rem;background:rgb(0 0 0/.35)}.sheet-backdrop.open{display:flex}.sheet{width:min(760px,100%);max-height:min(900px,92dvh);overflow:auto;box-shadow:8px 8px 0 #111}.sheet-head{position:sticky;top:0;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:2px solid var(--line);background:rgb(255 255 255/.96);backdrop-filter:blur(8px)}.sheet-head h2{margin:0;font-size:1.35rem}.round-button{width:2.2rem;height:2.2rem;border:2px solid var(--line);border-radius:50%;background:#fff;font-size:1.3rem;font-weight:900;cursor:pointer}.demo-summary{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--line)}.demo-summary>div{padding:.8rem;text-align:center}.demo-summary>div+div{border-left:1px solid var(--soft)}.demo-summary small{display:block;color:var(--muted);font-size:.62rem;font-weight:850;letter-spacing:.05em}.demo-summary strong{display:block;margin-top:.1rem;font-size:1rem;font-variant-numeric:tabular-nums}.method-area{padding:1rem}.method-help{margin-bottom:.8rem;padding:.7rem .8rem;border-left:3px solid var(--line);background:var(--surface2);color:var(--muted);font-size:.82rem}.result{display:none;margin:0 1rem 1rem;padding:.7rem .8rem;border-radius:10px;font-size:.82rem;font-weight:750}.result.show{display:block}.result.ok{background:var(--green);color:var(--green-ink)}.result.bad{background:var(--amber);color:var(--amber-ink)}.sheet-actions{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 2fr;gap:.6rem;padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));border-top:2px solid var(--line);background:rgb(255 255 255/.96);backdrop-filter:blur(8px)}.sheet-actions button{min-height:48px;border:2px solid var(--line);border-radius:999px;font-weight:850;cursor:pointer}.sheet-actions .secondary{background:#fff}.sheet-actions .primary{background:var(--ink);color:#fff}
/* common method widgets */
.text-input{width:100%;min-height:56px;padding:.75rem 1rem;border:2px solid var(--line);border-radius:14px;background:#fff;font-size:1.3rem}.calc-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}.mini-btn{min-height:48px;padding:.55rem .75rem;border:2px solid var(--line);border-radius:12px;background:#fff;font-weight:800;cursor:pointer}.quick,.step-grid,.denoms,.search-choices,.ternary-btns,.relative,.stage-choices,.base-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.keypad{display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,360px);margin:auto;gap:.5rem;touch-action:none;user-select:none}.key{min-height:64px;border:2px solid var(--line);border-radius:14px;background:#fff;font-size:1.4rem;font-weight:850;cursor:pointer}.key.hot{background:var(--green)}.slider-wrap input{width:100%;accent-color:#111}.step-grid{grid-template-columns:repeat(4,1fr)}.digit-rows{display:grid;gap:.55rem}.digit-row{display:grid;grid-template-columns:4.2rem 1fr;gap:.5rem;align-items:center}.digit-label{font-size:.75rem;color:var(--muted);font-weight:750}.digit-options{display:grid;grid-template-columns:repeat(10,1fr);gap:.2rem}.digit-options button{min-width:0;min-height:40px;border:1px solid var(--soft);border-radius:7px;background:#fff;font-size:.74rem}.digit-options .sel{background:var(--ink);color:#fff}.range-note{padding:.55rem .7rem;border-radius:9px;background:var(--surface2);color:var(--muted);font-size:.76rem;font-weight:700}.search-choices{grid-template-columns:repeat(5,1fr);margin-top:.7rem}.search-choices button,.ternary-btns button,.relative button{min-height:62px;border:2px solid var(--line);border-radius:12px;background:#fff;font-weight:850}.search-choices small,.relative small{display:block;margin-top:.2rem;color:var(--muted);font-size:.6rem;font-weight:650}.binary-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}.binary-btns button{min-height:70px;border:2px solid var(--line);border-radius:14px;background:#fff;font-weight:850}.ternary-btns{grid-template-columns:repeat(3,1fr);margin-top:.7rem}.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.7rem}.map-grid button{min-height:72px;border:2px solid var(--line);border-radius:12px;background:#fff;font-weight:850}.scrub{height:180px;border:2px solid var(--line);border-radius:16px;background:linear-gradient(#eef6ff 0 33%,#f6f6f7 33% 66%,#fff5dc 66%);touch-action:none;user-select:none;display:grid;place-items:center}.scrub-core{padding:.5rem .75rem;border:2px solid var(--line);border-radius:999px;background:#fff;font-weight:850}.scrub-hint{margin-top:.4rem;color:var(--muted);font-size:.7rem;text-align:center}.odo{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.odo-col{display:grid;gap:.25rem}.odo-btn{min-height:38px;border:1px solid var(--soft);border-radius:8px;background:#fff}.odo-num{display:grid;min-height:64px;place-items:center;border:2px solid var(--line);border-radius:10px;font-size:1.6rem;font-weight:900}.dial{position:relative;width:min(100%,330px);aspect-ratio:1;margin:auto;border:2px solid var(--line);border-radius:50%}.dial button{position:absolute;width:48px;height:48px;transform:translate(-50%,-50%);border:2px solid var(--line);border-radius:50%;background:#fff;font-weight:850}.stage-wrap{display:grid;gap:.8rem}.stage-title{font-size:.78rem;font-weight:850}.stage-choices{grid-template-columns:repeat(4,1fr)}.stage-choices button,.base-btns button{min-height:48px;border:2px solid var(--line);border-radius:10px;background:#fff;font-weight:850}.base-btns{grid-template-columns:repeat(5,1fr)}.place-val{margin-bottom:.6rem;font-weight:850}
/* fast methods */
.super-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,70px);width:min(100%,360px);margin:auto;overflow:hidden;border:2px solid var(--line);border-radius:16px;touch-action:none;user-select:none}.super-cell{display:grid;place-items:center;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);font-size:1.35rem;font-weight:850}.super-cell:nth-child(3n){border-right:0}.super-cell.hot{background:var(--green)}.super-cell.blank{background:var(--surface2);color:#aaa}.pair-zone{position:relative;width:min(100%,360px);margin:auto}.pair-zone svg,.stroke-ring svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}.drag-line{stroke:#15703b;stroke-width:5;stroke-linecap:round;opacity:.75}.pair-zone .keypad{position:relative;z-index:2}.stroke-ring{position:relative;width:min(100%,340px);aspect-ratio:1;margin:auto;border:2px solid var(--line);border-radius:50%;background:var(--surface2);touch-action:none;user-select:none}.stroke-node{position:absolute;z-index:2;display:grid;width:54px;height:54px;place-items:center;transform:translate(-50%,-50%);border:2px solid var(--line);border-radius:50%;background:#fff;font-size:1.05rem;font-weight:900}.stroke-node.hot{background:var(--green)}.fan-flick{position:relative;width:min(100%,360px);height:300px;margin:auto;overflow:hidden;border:2px solid var(--line);border-radius:18px;background:linear-gradient(#fff,#f6f6f7);touch-action:none;user-select:none}.fan-hub{position:absolute;left:50%;bottom:18px;display:grid;width:74px;height:74px;place-items:center;transform:translateX(-50%);border:2px solid var(--line);border-radius:50%;background:var(--ink);color:#fff;font-weight:900}.fan-item{position:absolute;display:grid;width:42px;height:42px;place-items:center;transform:translate(-50%,-50%);border:1px solid var(--soft);border-radius:50%;background:#fff;font-size:.82rem;font-weight:850}.fan-item.hot{border:2px solid var(--line);background:var(--green)}.fan-legend{margin-top:.5rem;color:var(--muted);font-size:.7rem;text-align:center}.dual{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.dual-pad{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}.dual-key{min-height:62px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:1.15rem;font-weight:850}.dual-label{margin-bottom:.4rem;color:var(--muted);font-size:.7rem;text-align:center;font-weight:750}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){body{font-size:15px}.header-links a:not(.github-link){display:none}.header-inner{padding:.4rem .75rem}.brand{font-size:.92rem}main{padding:1rem .75rem 4rem}.intro-grid{grid-template-columns:1fr}.intro-copy,.target-card{grid-column:auto}.intro-copy h1{font-size:clamp(2.7rem,15vw,4.4rem)}.facts{grid-template-columns:1fr 1fr 1fr}.fact{display:grid;gap:.25rem;padding:.75rem .25rem}.fact strong{font-size:1.25rem}.fact span{font-size:.65rem}.section-heading{display:block}.section-heading>p{margin-top:.45rem}.grid{grid-template-columns:1fr}.method-card{min-height:0;padding:1rem}.sheet-backdrop{padding:0}.sheet{width:100%;max-height:94dvh;border-radius:20px 20px 0 0;border-bottom:0;box-shadow:none}.sheet-head{padding:.85rem 1rem}.demo-summary{grid-template-columns:repeat(2,1fr)}.demo-summary>div:nth-child(3){border-left:0;border-top:1px solid var(--soft)}.demo-summary>div:nth-child(4){border-top:1px solid var(--soft)}.method-area{padding:.85rem}.sheet-actions{grid-template-columns:1fr 1.7fr}.search-choices{gap:.3rem}.search-choices button{min-height:58px;padding:.25rem;font-size:.73rem}.digit-row{grid-template-columns:3.5rem 1fr}.digit-options{gap:.1rem}.digit-options button{min-height:36px;font-size:.66rem}.quick,.denoms{grid-template-columns:repeat(3,1fr)}.footer-inner{padding:.8rem .75rem}.footer-inner span{max-width:70%}}
@media(max-width:680px) and (max-height:720px){.sheet{max-height:100dvh;border-radius:0}.sheet-head{padding:.5rem .75rem}.sheet-head .kicker{display:none}.sheet-head h2{font-size:1.05rem}.round-button{width:2rem;height:2rem;font-size:1.1rem}.demo-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-summary>div{padding:.4rem .12rem!important;border-top:0!important}.demo-summary>div+div{border-left:1px solid var(--soft)!important}.demo-summary small{font-size:.54rem}.demo-summary strong{font-size:.8rem}.method-area{padding:.55rem .75rem}.method-help{display:none}.fan-legend{margin-top:.25rem}.sheet-actions{padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom))}.sheet-actions button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}