*{box-sizing:border-box}html{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}body{margin:0;background:#071329;color:#fff}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #62ddff;outline-offset:2px}.shell{display:flex;min-height:100dvh}.sidebar{width:250px;flex-shrink:0;background:#0b1c36;color:#f7faff;display:flex;flex-direction:column;padding:24px 16px;gap:12px}.logo{font-size:32px;font-weight:850;letter-spacing:-2px}.logo span{color:#59c9ff}.sub,.eyebrow{font-size:10px;letter-spacing:1.5px;color:#8db4e8;font-weight:750}.nav{display:grid;gap:3px;margin-top:15px}.nav button{background:transparent;border:0;color:#c2d3ee;text-align:left;padding:10px 12px;border-radius:10px;min-height:40px}.nav button[aria-current=true]{background:#244268;color:white}.side-bottom{margin-top:auto;display:grid;gap:15px}.theme-trigger{background:#19395f;color:#fff;border:1px solid #5a9be0;padding:14px 12px;border-radius:12px;text-align:left;font-weight:700;min-height:48px;display:flex;justify-content:space-between}.version{font-size:11px;color:#91aacb;line-height:1.7}.main{flex:1;min-width:0;padding:clamp(22px,5vw,62px);background:var(--bg,#081329);color:var(--fg,#f8faff)}.main h1{font-size:clamp(30px,5vw,52px);margin:8px 0}.lead{opacity:.8}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0}.card{border:1px solid var(--accent,#42b9ff);border-radius:var(--radius,18px);padding:var(--pad,24px);background:color-mix(in srgb,var(--bg,#081329) 85%,var(--accent,#42b9ff) 15%);min-width:0}.card small{opacity:.8}.card h2{overflow-wrap:anywhere}.card p{opacity:.8}.example{display:flex;justify-content:space-between;gap:20px;align-items:center}.primary{background:var(--accent,#42b9ff)!important;color:var(--bg,#081329)!important;font-weight:800!important}.example button{border:0;padding:13px 20px;border-radius:10px;min-height:44px}.disclaimer{opacity:.65;font-size:12px;margin-top:24px}dialog{border:1px solid #34537c;border-radius:22px;background:#0c1a33;color:#f7faff;width:min(760px,96vw);height:min(760px,94dvh);max-height:94dvh;padding:0;overflow:hidden}dialog::backdrop{background:rgba(0,5,17,.8)}.dialog-wrap{display:flex;flex-direction:column;height:100%;min-height:0}.dialog-head{display:flex;justify-content:space-between;gap:12px;padding:17px 18px 10px;flex-shrink:0}.dialog-head h2{margin:5px 0;font-size:23px}.dialog-head p{font-size:12px;color:#aec2df;margin:0}.dialog-head button{background:#24436b;color:#fff;border:0;border-radius:11px;width:44px;height:44px}.current{background:#172d4d;border:1px solid #36577e;margin:0 18px 10px;border-radius:12px;padding:11px 13px;display:flex;gap:6px;align-items:center;flex-shrink:0;font-size:13px}.current strong{flex:1}.current span{font-size:10px;color:#83caff}.filters{display:flex;gap:7px;padding:0 18px 10px;flex-shrink:0}.filters button{background:#1b3456;color:white;border:1px solid #3d5e88;border-radius:999px;padding:8px 15px;font-size:12px}.filters button[aria-pressed=true]{background:#2a79d8}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:4px 18px 14px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;align-content:start}.pick{border:2px solid transparent;border-radius:13px;background:#1a3355;color:#fff;position:relative;padding:7px;text-align:left;min-width:0;display:flex;flex-direction:column;gap:6px}.pick[aria-pressed=true]{border-color:#64e1ff;background:#285078}.swatch{display:flex;flex-direction:column;height:72px;border-radius:8px;padding:10px;gap:7px}.swatch i{height:8px;border-radius:4px;display:block}.swatch i:nth-child(1){width:65%}.swatch i:nth-child(2){width:90%;opacity:.75}.swatch i:nth-child(3){width:43%;opacity:.4}.pick small{font-size:11px;line-height:1.3;overflow-wrap:anywhere}.pick b{display:none;position:absolute;right:11px;top:11px;border-radius:50%;background:#60e1ff;color:#05172c;width:24px;height:24px;text-align:center;line-height:24px}.pick[aria-pressed=true] b{display:block}.custom{padding:11px 18px;background:#142640;flex-shrink:0;max-height:150px;overflow:auto}.custom summary{font-size:12px;font-weight:700;cursor:pointer}.controls{display:flex;flex-wrap:wrap;gap:16px;padding:10px 0}.controls label{display:grid;gap:4px;font-size:12px}.dialog-foot{padding:12px 18px;display:flex;gap:8px;flex-shrink:0}.dialog-foot button{flex:1;min-height:45px;border:1px solid #496c9b;border-radius:10px;background:#24436c;color:#fff;font-weight:700}.dialog-foot .primary{background:#52b9ff!important;color:#071329!important}@media(max-width:650px){.shell{display:block}.sidebar{width:100%;padding:15px}.nav{grid-template-columns:repeat(3,minmax(0,1fr));max-height:145px;overflow:auto}.nav button{font-size:11px}.side-bottom{margin-top:5px}.main{padding:22px}.metrics{grid-template-columns:1fr;gap:10px}.example{display:block}.example button{margin-top:12px}dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0;margin:0}.grid{gap:7px;padding:4px 12px 12px}.swatch{height:62px;padding:8px}.dialog-head{padding-top:calc(10px + env(safe-area-inset-top))}.dialog-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
.pick[hidden]{display:none!important}