:root{--nav-h:40px;--pov-h:44px;--void:#080A0F;--void-card:#0f141e;--ink-card:#e8f0ff;--paper-warm:#FEFCF9;--moss:#84948A;--ring:#D8452A;--blue:#0072B2;--rail-w:84px}
.ec-wrap{display:flex;gap:0;align-items:flex-start}
.ec-rail{position:sticky;left:0;top:var(--nav-h);width:var(--rail-w);min-width:var(--rail-w);height:calc(100dvh - var(--nav-h));display:flex;flex-direction:column;align-items:center;padding:12px 8px 12px;gap:12px;background:linear-gradient(180deg,var(--paper-warm),#fff);border-right:1.2px solid #00000012;z-index:31;isolation:isolate;backdrop-filter:blur(8px) saturate(1.04)}
.ec-rail-track{width:72px;height:360px;perspective:600px;transform-style:preserve-3d;display:flex;flex-direction:column;align-items:center}
.ec-disc{appearance:none;border:0;background:0 0;cursor:pointer;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;position:relative;margin:5px 0;transform:rotateY(var(--spin,0deg)) scale(var(--sc,1));transition:transform .32s cubic-bezier(.22,1,.36,1),filter .22s;will-change:transform;filter:drop-shadow(0 1px 0 #111);outline:0}
.ec-disc::before{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(90% 90% at 36% 32%,#fff 0%,#f6f2ed 22%,#e9e9e9 58%,#111 59%,#111 61%,var(--void) 62%);border:1.4px solid #111}
.ec-disc::after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ring);border:1.6px solid #111;z-index:2;box-shadow:0 0 0 2px #fff}
.ec-disc.on{--sc:1.22;filter:drop-shadow(0 2px 8px #00000028);z-index:3}
.ec-disc.on::before{box-shadow:0 0 0 2px #fff,0 0 0 4.6px var(--ring),0 6px 18px #0003}
.ec-disc-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 9.2px ui-monospace,monospace;text-transform:uppercase;color:#111;position:relative;z-index:1}
.ec-rail-label{font:700 10.4px ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:#1d1d1b;min-height:2.2em;line-height:1.25;text-align:center;max-width:76px;border:1px dashed #1112;border-radius:8px;padding:6px;background:#fff;box-shadow:1.2px 1.2px 0 #111;width:100%;overflow-wrap:anywhere}
.ec-pov{position:sticky;top:var(--nav-h);z-index:30;display:flex;gap:8px;align-items:center;height:var(--pov-h);min-height:44px;padding:6px 12px;background:var(--void);border-bottom:1px solid #1a1f2e;overflow-x:auto;scrollbar-width:none}
.ec-pov::-webkit-scrollbar{display:none}
.ec-pov-pill{flex:0 0 auto;min-width:112px;height:32px;border:1.4px solid #2a3042;border-radius:9999px;background:linear-gradient(180deg,#121826,#0e1420);color:#cbd5e1;font:700 11.2px ui-monospace,monospace;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;padding:0 9px 0 6px;cursor:pointer;user-select:none;box-shadow:inset 0 1px 0 #ffffff12;transition:border-color .18s,color .18s}
.ec-pov-pill.on{color:#fffcf2;border-color:#fff3;background:linear-gradient(180deg,#1a2338,#121a2e)}
.ec-pov-track{width:44px;height:18px;border-radius:999px;background:#080A0F;border:1px solid #28304a;position:relative;flex:0 0 44px;box-shadow:inset 0 1px 4px #0008}
.ec-pov-thumb{width:18px;height:18px;border-radius:50%;background:#fffcf2;border:1.4px solid #111;position:absolute;left:0;top:50%;transform:translate(0,-50%);box-shadow:0 1px 0 #111,0 1px 6px #0006;will-change:transform}
.ec-pov-pill.on .ec-pov-thumb{background:#E4FF7C}
.ec-cards{display:grid;grid-template-columns:1fr;gap:10px;position:relative}
.ec-card{background:radial-gradient(420px 280px at 14% 18%,#D8452A18,transparent 62%),radial-gradient(380px 260px at 82% 72%,#0072B220,transparent 66%),linear-gradient(180deg,#0f141e,#0b101a);color:var(--ink-card);border:1px solid #1f2937;border-radius:12px;padding:11px 11px 9px;box-shadow:0 1px 0 #fff1 inset,0 6px 18px #00000038;transform:perspective(700px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));transform-origin:center;will-change:transform;opacity:0;animation:ein .48s cubic-bezier(.22,1,.36,1) forwards;cursor:pointer;isolation:isolate;min-height:68px}
.ec-card:nth-child(1){animation-delay:0s}.ec-card:nth-child(2){animation-delay:.06s}.ec-card:nth-child(3){animation-delay:.12s}.ec-card:nth-child(4){animation-delay:.18s}.ec-card:nth-child(5){animation-delay:.24s}.ec-card:nth-child(6){animation-delay:.30s}
@keyframes ein{from{opacity:0;transform:perspective(700px) translateY(12px) rotateX(8deg)}to{opacity:1;transform:perspective(700px) translateY(0) rotateX(0)}}
.ec-card.on{outline:2px solid var(--ring);box-shadow:0 0 0 3px #fffcf2,0 0 0 5.5px var(--ring),0 10px 26px #0006}
.ec-card b{font:800 12.8px system-ui,sans-serif;display:block;margin:0 0 3px;color:#e8f0ff}.ec-card .sub{font:500 11.6px/1.42 system-ui,sans-serif;color:#a8b8d0;margin:0}.ec-card .meta{font:700 10px ui-monospace,monospace;text-transform:uppercase;color:#84948A;margin-top:7px;display:flex;gap:5px;flex-wrap:wrap}.ec-card .okabe{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid #fff2}
.ec-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(8px);z-index:90;background:#1d1d1b;color:#fffcf2;border:1px solid #2a2a2a;border-radius:9999px;padding:9px 14px;font:600 11.8px system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;max-width:min(92vw,560px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:860px){.ec-rail{display:none}}
@media(max-width:600px){.ec-cards{gap:8px}.ec-card{padding:9px}}
@media(prefers-reduced-motion:reduce){.ec-card{animation:none;opacity:1}.ec-disc{transition:none}}