:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#10171e;color:#f5f7fa;--accent:#96dcff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#20323b 0%,transparent 40%)}main{max-width:600px;margin:auto;padding:24px 20px 150px}header{display:flex;align-items:center;justify-content:space-between;gap:10px}header a{color:inherit;text-decoration:none;font-size:20px;font-weight:850;letter-spacing:3px}header a span{display:block;font-size:9px;font-weight:400;letter-spacing:1px;margin-top:4px;color:#96a5b2}.balance{font-size:12px;background:#25313d;border:1px solid #354450;border-radius:30px;padding:10px 12px;white-space:nowrap}.intro{margin:24px 0 18px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--accent)}h1{font-size:29px;font-weight:650;letter-spacing:-1px;margin:10px 0}p{font-size:13px;color:#9babb9;line-height:1.5;margin:0}.comparison{position:relative;aspect-ratio:3/4;max-height:46vh;min-height:270px;margin:auto;background:#1c2630;border-radius:22px;overflow:hidden;isolation:isolate}.comparison img{position:absolute;width:100%;height:100%;object-fit:contain}.comparison #before-layer{position:absolute;inset:0;clip-path:inset(0 50% 0 0);background:#1c2630}.tags{position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;pointer-events:none}.tags span{padding:6px 10px;border-radius:20px;font-size:11px;color:white;background:#10171e99;backdrop-filter:blur(10px)}#divider{position:absolute;left:50%;top:0;height:100%;width:1px;background:#fffc;pointer-events:none}#divider span{position:absolute;top:50%;left:-18px;background:#f5f7fa;color:#24313c;border-radius:100%;width:37px;height:37px;display:grid;place-items:center;font-size:20px;box-shadow:0 3px 15px #0005}#slider{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}#slider:focus-visible{opacity:.2}#empty{position:absolute;inset:0;display:grid;place-items:center;color:#9babb9}#empty[hidden]{display:none}.selection{display:flex;align-items:center;justify-content:space-between;margin:22px 0 14px}h2{font-size:22px;margin:0;font-weight:600}#count{font-size:12px;color:#8495a5}nav{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}nav button{flex-shrink:0;border:1px solid #33404c;background:#1b252f;color:#aab8c5;border-radius:14px;padding:7px 13px 7px 7px;display:flex;align-items:center;gap:9px;font:inherit;font-size:12px;cursor:pointer}nav button img{width:35px;height:43px;object-fit:cover;border-radius:8px}nav button[aria-pressed=true]{border-color:var(--accent);color:#fff;background:#233844}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}footer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(transparent,#10171e 18%);padding:25px 20px max(18px,env(safe-area-inset-bottom));text-align:center}footer button{display:block;width:100%;max-width:560px;margin:0 auto 9px;border:0;border-radius:17px;padding:17px;font:inherit;font-weight:650;font-size:15px;background:var(--accent);color:#102737;cursor:pointer}footer button:disabled{opacity:.5;cursor:default}footer span{font-size:11px;color:#8193a3}#notice{min-height:20px;margin-top:12px;color:#f3c98b}@media(min-width:700px){main{padding-top:35px}.comparison{max-height:570px}.intro{margin-top:38px}}@media(prefers-reduced-motion:no-preference){nav button,footer button{transition:background .15s,border-color .15s}}

/* A single fitted screen: the image yields space before controls do. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{height:var(--app-height,100dvh);overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
main{width:100%;flex:1;min-height:0;margin:0 auto;padding:16px 20px 0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:12px}
header{min-width:0}.intro{margin:0}h1{font-size:clamp(21px,5.5vw,29px);margin:0}
.comparison{height:100%;width:auto;max-width:100%;aspect-ratio:3/4;min-height:0;max-height:none;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.comparison img{pointer-events:none;-webkit-user-drag:none}#slider{touch-action:none}#empty{pointer-events:none}
.selection{margin:0;gap:8px;min-width:0}h2{font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#count{flex-shrink:0}
nav{min-width:0;min-height:58px;padding:2px;touch-action:pan-x;overscroll-behavior-x:contain}nav button{min-height:54px}nav button img{height:38px;width:30px}
#notice{min-height:0;margin:0;font-size:12px;max-height:42px;overflow:auto}#notice:empty{display:none}
footer{position:static;flex-shrink:0;background:none;padding:12px 20px max(12px,env(safe-area-inset-bottom));width:100%;max-width:600px;margin:0 auto}footer button{margin:0;min-height:48px;padding:14px}
@media(max-height:620px){main{padding-top:10px;gap:8px}header a{font-size:17px}.balance{padding:7px 10px}.intro h1{font-size:22px}h2{font-size:18px}nav{min-height:48px}nav button{min-height:44px;padding:5px 10px 5px 5px}nav button img{height:30px;width:24px}footer{padding-top:8px}}
@media(max-height:420px){main{gap:5px;padding-top:6px}.intro{display:none}main{grid-template-rows:auto minmax(0,1fr) auto auto auto}header a{font-size:15px}.balance{padding:5px 9px}footer button{min-height:40px;padding:10px}footer{padding-bottom:max(6px,env(safe-area-inset-bottom))}}