:root{color-scheme:light;--panel: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(243, 247, 255, .92));--line: rgba(90, 110, 160, .25);--text: #1f2c55;--muted: #55658f;--accent: #3d7cff;--accent-2: #11b6d8;--rail: #eef4ff;--scale-pad: 6%;--scale-edge: .75rem}*{box-sizing:border-box}body{margin:0;font-family:Zen Kaku Gothic New,sans-serif;background:transparent;color:var(--text)}.app{max-width:820px;margin:0 auto;padding:0}.panel{background:var(--panel);border:1px solid rgba(149,165,199,.34);border-radius:20px;padding:1rem 1rem 1.1rem;overflow:hidden}h1{margin:0 0 .3rem;text-align:center;font-size:1.38rem;font-weight:900;letter-spacing:.02em}.lead{margin:0 auto .9rem;max-width:58ch;text-align:center;color:var(--muted);font-size:.92rem;line-height:1.6}.mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:.85rem}.mode-button{appearance:none;border:1px solid #d5e0fb;background:#fff;color:#49608f;border-radius:999px;padding:.72rem .9rem;font:inherit;font-weight:700;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease,box-shadow .2s ease}.mode-button:hover{transform:translateY(-1px)}.mode-button.active{border-color:#3d7cff47;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 12px 24px #386ee12e}.status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-bottom:.95rem}.stat-card{padding:.75rem .8rem;border-radius:14px;border:1px solid #dbe5fb;background:#ffffffdb}.stat-label{display:block;margin-bottom:.18rem;color:#62739d;font-size:.76rem;font-weight:700}.stat-value{display:block;font-size:1.05rem;font-weight:900;color:#21315f;letter-spacing:.01em}.stage{position:relative;border-radius:18px;border:1px solid #d7e2fb;background:radial-gradient(circle at top left,rgba(103,150,255,.08),transparent 28%),linear-gradient(180deg,#fff,#f5f8ff 70%);padding:.95rem .85rem 1rem;overflow:hidden}.stage-help{margin:0 0 .8rem;color:#465887;font-size:.88rem;line-height:1.6}.rule-stack{position:relative;height:294px}.cursor{position:absolute;top:1.2rem;height:268px;width:2px;background:linear-gradient(180deg,#11b6d826,#11b6d8d9);left:calc(var(--scale-edge) + var(--cursor-ratio, 0) * (100% - var(--scale-edge) * 2));transform:translate(-50%);z-index:5;pointer-events:none}.cursor:before{content:"";position:absolute;top:-.45rem;left:50%;width:14px;height:14px;border-radius:999px;background:#fff;border:2px solid var(--accent-2);transform:translate(-50%);box-shadow:0 4px 12px #11b6d829}.rule{position:absolute;left:0;right:0;border-radius:16px;border:1px solid #dbe5fb;background:#ffffffeb;box-shadow:inset 0 -1px #b7c5e538}.rule--fixed{top:1rem}.rule--sliding{top:10.15rem;left:0;right:0;transform:translate(calc(var(--slide-ratio, 0) * (100% - var(--scale-edge) * 2)));background:linear-gradient(180deg,#eef4ff,#fff 88%);border-color:#cfdcfb}.rule-head{display:flex;align-items:center;justify-content:space-between;padding:.55rem .9rem .28rem}.rule-name{font-size:.78rem;font-weight:900;color:#2a3d73;letter-spacing:.14em}.rule-caption{font-size:.7rem;color:#6a7aa3}.scale{position:relative;height:94px;margin:0 var(--scale-edge) .75rem;padding-inline:var(--scale-pad);border-radius:12px;background:linear-gradient(180deg,#e2ebff42,#ffffff1f),var(--rail);overflow:hidden}.tick{position:absolute;bottom:0;width:1px;background:#31417057;transform:translate(-50%)}.tick[data-kind=major]{height:44px;background:#23315f8f}.tick[data-kind=mid]{height:32px}.tick[data-kind=minor]{height:20px}.label{position:absolute;top:.72rem;transform:translate(-50%);color:#314170;font-size:.76rem;font-weight:800}.marker{position:absolute;top:.5rem;transform:translate(-50%);display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;padding:.16rem .45rem;border-radius:999px;font-size:.73rem;font-weight:900;letter-spacing:.01em;white-space:nowrap;z-index:2}.marker--input-a{top:1.95rem;background:#3d7cff1f;color:#2450b9;border:1px solid rgba(61,124,255,.2)}.marker--input-b{top:2.25rem;background:#11b6d81f;color:#0b7b91;border:1px solid rgba(17,182,216,.2)}.marker--read{top:3.9rem;background:#765cff1f;color:#5a3fc4;border:1px solid rgba(118,92,255,.18)}.marker--result{top:3.95rem;background:#f79a2b21;color:#9a5b05;border:1px solid rgba(247,154,43,.24)}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:.95rem}.control{border:1px solid #dbe5fb;border-radius:14px;background:#ffffffe6;padding:.78rem .8rem .9rem}.control-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.55rem}.control label{font-size:.84rem;font-weight:800;color:#354675}.control-note{color:#7483aa;font-size:.72rem}.control input[type=range]{width:100%;margin:0 0 .6rem;accent-color:var(--accent)}.number-input{width:100%;border:1px solid #cedaf7;border-radius:10px;padding:.6rem .7rem;font:inherit;font-size:.95rem;color:#20305d;background:#fff}.footer-note{margin:.9rem 0 0;color:#5a6a93;font-size:.82rem;line-height:1.6}@media (max-width: 720px){.status,.controls{grid-template-columns:1fr}.panel{padding:.9rem .85rem 1rem}.stage{padding:.8rem .55rem .9rem}.stage-help{font-size:.82rem}.stat-value{font-size:.98rem}.rule-stack{height:284px}.rule-head{padding:.45rem .65rem .2rem}.rule-name{font-size:.72rem}.rule-caption{font-size:.64rem}.scale{height:82px;margin:0 .45rem .6rem;padding-inline:4%}.tick[data-kind=major]{height:38px}.tick[data-kind=mid]{height:28px}.tick[data-kind=minor]{height:18px}.label{top:.62rem;font-size:.68rem}.marker{min-width:1.8rem;padding:.12rem .35rem;font-size:.66rem}.marker--input-a{top:1.7rem}.marker--input-b{top:1.95rem}.marker--read{top:3.05rem}.marker--result{top:3.45rem}.cursor{top:1rem;height:242px}.rule--sliding{top:9.35rem}}