@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101113;--panel:#191b1e;--line:#33363a;--text:#f3f4ee;--muted:#a1a59f;--lime:#c4fa57}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans JP',sans-serif;font-size:16px}button,input,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}header{max-width:1200px;margin:auto;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid var(--line)}.brand{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:800;font-style:italic;color:var(--text);text-decoration:none;display:flex;align-items:baseline}.brand span{color:var(--lime)}.brand i{display:block;width:7px;height:7px;background:var(--lime);margin-left:5px}.edition,.eyebrow,.console-top,.fixed,.scale,.under,footer,.tempo-label,.result-numbers span{font-size:12px;letter-spacing:.13em;font-weight:600}.edition{color:var(--muted)}.quiet{background:none;border:0;color:var(--muted);font-size:14px;padding:12px}.quiet span{border:1px solid var(--muted);border-radius:50%;padding:0 5px;margin-left:8px}main{max-width:1000px;margin:0 auto;padding:48px 40px 24px}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px}.eyebrow{color:var(--lime);margin:0 0 18px}h1{font-size:36px;letter-spacing:.01em;line-height:1.55;margin:0;font-weight:700}h1 em{font-style:normal}h1 br{display:none}.sub{font-size:14px;color:var(--muted);margin:14px 0 0}.session-label{display:flex;gap:16px;align-items:center}.session-label>span{font-family:'Barlow Condensed',sans-serif;font-size:64px;line-height:1;color:var(--lime)}.session-label p{font-size:14px;letter-spacing:.06em;line-height:1.7}.session-label small{font-size:10px;color:var(--muted)}.console{border:1px solid #41443d;border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:0 24px 70px #0004}.console-top{padding:18px 24px;display:flex;justify-content:space-between;background:#20231f;border-bottom:1px solid var(--line)}.console-top>span:last-child{color:var(--muted);font-size:11px}.status-dot{display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:50%;margin-right:8px}.decks{display:grid;grid-template-columns:1fr 1fr}.deck{padding:25px 28px 23px;text-align:center}.deck:first-child{border-right:1px solid var(--line)}.deck-head{display:flex;align-items:center;text-align:left;gap:12px}.channel{border:1px solid #6c7362;color:var(--lime);width:38px;height:38px;display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;font-size:25px;font-weight:600;border-radius:5px}.deck-head>span:nth-child(2){font-size:14px;letter-spacing:.08em}.deck-head small{display:block;color:var(--muted);font-size:11px;letter-spacing:0;margin-top:2px}.fixed{font-size:9px;color:var(--muted);margin-left:auto}.wave{height:68px;display:flex;align-items:center;justify-content:center;gap:3px;margin:23px 0 5px;overflow:hidden;opacity:.75}.wave i{width:3px;background:#7f8b68;border-radius:1px;flex-shrink:0}.right .wave i{background:var(--lime)}.bpm{display:flex;justify-content:center;align-items:baseline;gap:10px}.bpm>span{font-family:'Barlow Condensed',sans-serif;font-size:50px;font-weight:600;letter-spacing:.06em;line-height:1}.bpm small{font-size:11px;color:var(--muted);letter-spacing:.1em}.deck>p{font-size:12px;color:var(--muted);margin:12px 0 0}.control-area{border-top:1px solid var(--line);padding:26px 32px 18px;background:#16181a}.tempo-label{display:flex;justify-content:space-between;font-size:14px;letter-spacing:.07em}.tempo-label label span{font-size:12px;color:var(--muted);margin-left:10px;font-weight:400}.tempo-label output{font-family:monospace;color:var(--lime)}.fader{display:flex;gap:22px;align-items:center;margin-top:20px}.fader button{flex-shrink:0;width:48px;height:48px;border:1px solid #474b43;color:var(--text);background:#222522;border-radius:6px;font-size:23px}.fader input{width:100%;height:44px;appearance:none;background:transparent;cursor:ew-resize}.fader input::-webkit-slider-runnable-track{height:5px;background:repeating-linear-gradient(90deg,#62675b 0 1px,transparent 1px 10%),#32372d;border-radius:4px}.fader input::-webkit-slider-thumb{appearance:none;width:24px;height:40px;background:var(--lime);border:5px solid #b1e04f;border-radius:4px;margin-top:-17px;box-shadow:0 2px 9px #0008}.fader input::-moz-range-track{height:5px;background:#454d3a}.fader input::-moz-range-thumb{width:20px;height:36px;background:var(--lime);border:0;border-radius:4px}.scale{display:flex;justify-content:space-between;margin:4px 70px 26px;color:var(--muted);font-size:10px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}button.primary,.lock{border:0;border-radius:6px;min-height:56px;background:var(--lime);color:#151a0c;font-weight:700;letter-spacing:.1em;font-size:17px}.primary span{margin-left:12px}.lock{background:#282c24;border:1px solid #64714f;color:var(--lime);display:flex;align-items:center;justify-content:center;gap:20px}.hint{font-size:12px;text-align:center;color:var(--muted);margin:17px 0 0;line-height:1.8}#error{color:#ffc49b;text-align:center;font-size:14px;margin:0}.under{display:flex;justify-content:space-around;color:var(--muted);font-size:12px;letter-spacing:.04em;margin:26px 0 44px}footer{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;color:#83897d;font-size:11px;letter-spacing:.1em}.result{margin-top:20px;padding:28px;border:1px solid #617b36;border-radius:10px;background:#1d2417;display:grid;grid-template-columns:1fr 1fr;gap:22px}.result[hidden]{display:none}.result h2{font-family:'Barlow Condensed',sans-serif;font-size:38px;color:var(--lime);margin:0}.result p{font-size:13px}.result .eyebrow{font-size:11px;margin-bottom:8px}.result-numbers{display:grid;gap:10px}.result-numbers div{display:flex;justify-content:space-between;align-items:center}.result-numbers strong{font-family:monospace;font-size:20px}.result button{grid-column:1/-1}dialog{max-width:480px;width:calc(100% - 32px);border:1px solid #4b5340;border-radius:12px;background:#1b1e18;color:var(--text);padding:32px}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog h2{font-size:24px}dialog p,dialog li{font-size:14px;line-height:1.9}dialog ol{padding-left:22px}dialog li{margin-bottom:12px}.close{position:absolute;top:8px;right:12px;font-size:26px}.note{color:var(--muted)}@media(max-width:700px){header{height:78px;padding:0 22px}.edition{display:none}main{padding:30px 20px 24px}.intro{margin-bottom:25px}.eyebrow{font-size:10px;margin-bottom:12px}h1{font-size:27px;line-height:1.6}h1 br{display:block}h1 em{display:block}.sub{font-size:12px;margin-top:10px}.session-label{display:none}.console-top{padding:15px;font-size:11px}.console-top>span:last-child{font-size:9px;letter-spacing:.06em}.deck{padding:20px 12px}.deck-head{gap:8px}.channel{width:30px;height:34px;font-size:23px}.deck-head>span:nth-child(2){font-size:12px}.deck-head small{font-size:9px}.fixed{display:none}.wave{gap:3px;height:50px;margin:22px 0 10px}.wave i{width:2px}.bpm>span{font-size:40px}.bpm{gap:5px}.deck>p{font-size:10px}.control-area{padding:22px 18px 17px}.fader{gap:13px}.fader button{width:42px;height:46px}.scale{margin-left:55px;margin-right:55px}.hint{font-size:11px}.under{font-size:10px;margin:23px 0 32px}.result{padding:22px;grid-template-columns:1fr}.result-numbers strong{font-size:22px}footer{font-size:10px}footer span:last-child{display:none}}
.decks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.deck{min-width:0}.wave{max-width:100%}@media(max-width:380px){.bpm>span{font-size:32px}.bpm small{font-size:9px}.deck-head small{font-size:8px}}