:root{--bg:#10131C;--accent:#8A93A8;--thumb-bg:#333B54;--thumb-fg:#F6EFE1;--cream:#F6EFE1;--mute:#8A93A8;--mint:#67D9B0;--ink:#10131C;--slate:#1B2030;--r-lg:30px;--r-md:22px;--r-sm:16px;}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--cream);font-family:Karla,'Trebuchet MS',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;}.app{min-height:100dvh;display:flex;flex-direction:column;gap:clamp(8px,1.7vh,18px);padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 16px);max-width:520px;margin:0 auto;width:100%;}.bar{display:flex;align-items:center;gap:12px}.bar img{display:block;width:clamp(56px,16vw,96px);height:auto;aspect-ratio:1 / 1;border-radius:var(--r-sm);}.wordmark{font-family:Aleo,Georgia,serif;font-weight:700;font-size:clamp(1.05rem,0.9rem + 1.1vw,1.3rem);letter-spacing:0.01em}.kicker{font-size:clamp(0.72rem,0.68rem + 0.2vw,0.8rem);color:var(--mute);letter-spacing:0.08em;text-transform:uppercase}h1{font-family:Aleo,Georgia,serif;font-weight:700;font-size:clamp(1.45rem,1.05rem + 2.8vw,2.4rem);line-height:1.1;letter-spacing:-0.015em;}.sub{font-size:clamp(0.92rem,0.88rem + 0.3vw,1.05rem);line-height:1.45;color:#C7CBD8;max-width:42ch;}.seg{display:flex;position:relative;background:var(--slate);border-radius:var(--r-md);padding:5px;isolation:isolate;user-select:none;}.seg-thumb{position:absolute;z-index:0;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);background:var(--thumb-bg);border-radius:var(--r-sm);will-change:transform;}.seg button{position:relative;z-index:1;flex:1 1 50%;min-height:44px;border:0;background:none;cursor:pointer;font-family:Karla,'Trebuchet MS',sans-serif;font-weight:600;font-size:clamp(0.82rem,0.78rem + 0.3vw,0.95rem);color:#9AA2B6;border-radius:var(--r-sm);padding:0 8px;transition:color .18s linear,transform .12s linear;-webkit-tap-highlight-color:transparent;}.seg button[aria-selected="true"]{color:var(--thumb-fg)}.seg button:focus-visible{outline:3px solid var(--mint);outline-offset:2px}.seg button:active{transform:scale(0.97)}.stage{position:relative;flex:0 0 auto;height:clamp(220px,33vh,360px);overflow:hidden;border-radius:var(--r-lg);touch-action:pan-y;overscroll-behavior:contain;user-select:none;cursor:grab;}.stage:active{cursor:grabbing}.track{display:flex;width:200%;height:100%;will-change:transform;}.panel{width:50%;height:100%;padding:clamp(14px,3vw,22px);display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px);border-radius:var(--r-lg);}.panel.a{background:#1B2030}.panel.b{background:#2A2114}.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.panel-title{font-family:Aleo,Georgia,serif;font-weight:700;font-size:clamp(1rem,0.94rem + 0.5vw,1.2rem)}.panel-note{font-size:0.78rem;color:#9AA2B6}.panel.b .panel-note{color:#C8AE85}.rows{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,12px);flex:1 1 auto;min-height:0}.row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);flex:1 1 0;min-height:70px;}.panel.a .row{background:#232941}.panel.b .row{background:#F6EFE1}.tile{flex:0 0 auto;height:clamp(38px,6vh,52px);width:auto;aspect-ratio:2 / 3;border-radius:10px;}.panel.a .tile{background:#39415A}.panel.b .tile{background:#1A1206}.row-text{flex:1 1 auto;min-width:0}.row-name,.row-state{display:block}.row-name{font-weight:600;font-size:clamp(0.9rem,0.86rem + 0.3vw,1rem);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel.a .row-name{color:#A8AFC2}.panel.b .row-name{color:#1A1206}.row-state{font-size:clamp(0.74rem,0.72rem + 0.2vw,0.82rem);margin-top:3px}.panel.a .row-state{color:#A3ABC0}.panel.b .row-state{color:#5E4A28}.chip{flex:0 0 auto;font-size:0.7rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;padding:6px 10px;border-radius:999px;}.panel.a .chip{background:#2E3550;color:#B3BACC}.panel.b .chip{background:#FFB648;color:#1A1206}.panel-foot{display:flex;align-items:center;gap:9px;font-size:clamp(0.78rem,0.75rem + 0.2vw,0.86rem)}.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}.panel.a .dot{background:#4A5270}.panel.b .dot{background:#67D9B0}.panel.a .panel-foot{color:#8A93A8}.panel.b .panel-foot{color:#E4D6BB}.hint{display:flex;align-items:center;justify-content:center;gap:7px;font-size:0.76rem;color:var(--accent);letter-spacing:0.02em;}.hint i{display:block;width:26px;height:3px;border-radius:999px;background:currentColor;opacity:.55}.spacer{display:block;flex:1 1 auto;min-height:0}.action{padding-top:2px}.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;background:var(--mint);color:var(--ink);text-decoration:none;font-weight:600;font-size:clamp(1rem,0.95rem + 0.5vw,1.15rem);border-radius:var(--r-md);transition:transform .12s linear,filter .15s linear;-webkit-tap-highlight-color:transparent;}.cta:active{transform:scale(0.97)}.cta:focus-visible{outline:3px solid var(--cream);outline-offset:3px}footer{text-align:center;font-size:0.76rem;color:#949CB1;letter-spacing:0.06em}@media (hover:hover) and (pointer:fine){.cta:hover{filter:brightness(1.06)}.seg button:hover{color:var(--cream)}}@media (min-width:760px){.app{max-width:460px;border-radius:38px;margin:clamp(10px,2vh,24px) auto;min-height:min(740px,calc(100dvh - 2 * clamp(10px,2vh,24px)));background:rgba(246,239,225,0.04);box-shadow:0 0 0 1px rgba(246,239,225,0.08);padding:18px 20px 16px;gap:12px;}.stage{height:clamp(220px,29vh,320px)}}@media (prefers-reduced-motion:reduce){.track,.seg-thumb{transition:none}.panel{transition:opacity .18s linear}}html,body{max-width:100%;overflow-x:clip}