.slider-wrapper{display:grid;gap:1.25rem;place-items:center;width:100%}.slider-track{position:relative;width:100%;height:14px;background:linear-gradient(180deg,#222842,#1b2138);border:1px solid #2a304b;border-radius:999px;cursor:pointer;overflow:hidden;box-shadow:inset 0 2px 8px #00000059}.slider-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-strong));border-radius:999px;box-shadow:0 0 14px #3c8aff59;transition:width .2s ease-out}.slider-fill.dragging{transition:none}.slider-thumb{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brand-strong);box-shadow:0 0 12px #3c8aff80;transition:left .1s linear,box-shadow .15s ease}.slider-thumb.dragging{box-shadow:0 0 16px #3c8affb3}.slider-value{text-align:center;font-size:22px;font-weight:800;letter-spacing:.2px}.slider-value .value{color:var(--brand-strong)}.img-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(120px,1fr));max-width:960px;margin:0 auto;max-height:70vh;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}@media (max-width: 900px){.img-grid{grid-template-columns:repeat(2,minmax(120px,1fr));max-width:640px}}@media (max-width: 600px){.img-grid{grid-template-columns:1fr;max-width:400px}}.img-card{position:relative;border:1px solid var(--muted);background:var(--card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 6px 18px #00000059;cursor:pointer;padding:0;aspect-ratio:1 / 1;min-width:120px;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}.img-card:hover{transform:translateY(-3px)}.img-card.active{border-color:var(--brand-strong);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 40%,transparent),0 12px 30px #00000080}.img{width:100%;height:100%;object-fit:cover;display:block}.img-label{position:absolute;bottom:0;left:0;right:0;padding:10px 12px;color:#fff;font-weight:600;font-size:.85rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.4)}.choice-row{display:flex;flex-wrap:wrap;gap:10px}.choice-pill{padding:10px 14px;border-radius:999px;border:1px solid color-mix(in oklab,var(--muted) 80%,transparent);background:color-mix(in oklab,var(--card) 90%,transparent);color:var(--text);font-weight:600;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .08s ease}.choice-pill:hover{background:color-mix(in oklab,var(--card) 96%,transparent)}.choice-pill:active{transform:scale(.98)}.choice-pill.active{background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:#fff;border-color:color-mix(in oklab,var(--brand-strong) 60%,transparent);box-shadow:0 0 18px color-mix(in oklab,var(--brand) 35%,transparent)}.scale7{display:grid;gap:16px}.scale7-track{position:relative;height:14px;background:linear-gradient(180deg,#222842,#1b2138);border:1px solid #2a304b;border-radius:999px;outline:none;box-shadow:inset 0 2px 8px #00000059}.scale7-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-strong));box-shadow:0 0 14px #3c8aff59;transition:width .2s ease-out}.scale7-ticks{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:0 2px;pointer-events:none}.scale7-tick{position:relative;background:transparent;border:none;padding:0;width:1px;height:100%;cursor:pointer;pointer-events:auto}.scale7-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--card-elev);box-shadow:0 0 0 3px #0000002e;transition:transform .12s ease,border-color .18s ease,box-shadow .18s ease}.scale7-tick:hover .scale7-dot{transform:translate(-50%,-50%) scale(1.06)}.scale7-tick.active .scale7-dot{border-color:var(--brand-strong);box-shadow:0 0 0 3px #3c8aff59}.scale7-thumb{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brand-strong);box-shadow:0 0 12px #3c8aff80;transition:left .12s linear}.scale7-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.scale7-label{background:#1a2138;border:1px solid #2a304b;color:var(--text);font-size:.92rem;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .08s ease;text-wrap:balance}.scale7-label:hover{background:#212744;border-color:#3a4468}.scale7-label:active{transform:scale(.98)}.scale7-label.active{background:linear-gradient(180deg,var(--brand),var(--brand-strong));color:#fff;border-color:var(--brand-strong);box-shadow:0 0 18px #3c8aff59}.scale7-captions{display:flex;justify-content:space-between;color:var(--text-dim);font-size:.9rem;margin-top:2px}.scale7-captions .left{text-align:left}.scale7-captions .right{text-align:right}.startscreen{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);padding:2rem}.start-btn{font-size:1.125rem;padding:12px 28px;border-radius:12px;box-shadow:0 0 20px color-mix(in oklab,var(--brand) 30%,transparent);transition:transform .15s ease,box-shadow .25s ease}.start-btn:hover{transform:translateY(-2px);box-shadow:0 0 28px color-mix(in oklab,var(--brand-strong) 50%,transparent)}:root{--bg: #0f1220;--bg-soft: #171b2e;--card: #1c2136;--card-elev: #212744;--text: #e6e9f5;--text-dim: #bbc2dd;--brand: #6aa9ff;--brand-strong: #3c8aff;--muted: #2a304b;--success: #63d3a6;--danger: #ff7a7a;--shadow: 0 8px 30px rgba(0,0,0,.35);--radius-xl: 18px;--radius-lg: 14px;--radius-md: 12px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background-color:var(--bg);background-image:radial-gradient(1200px 600px at 15% -10%,rgba(39,48,85,.4),transparent 60%),radial-gradient(1000px 500px at 110% 10%,rgba(27,42,74,.4),transparent 60%),linear-gradient(180deg,var(--bg),#0d0f1b)}.container{width:100%;max-width:960px;margin:0 auto;padding:24px}.header{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:saturate(120%) blur(8px);backdrop-filter:saturate(120%) blur(8px);background-color:#0f1220d9;border-bottom:1px solid var(--muted)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}.brand{font-weight:800;letter-spacing:.2px}.progress{width:200px}.progress-bar{height:8px;background:var(--muted);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-strong));box-shadow:0 0 12px #3c8aff99}.card{background-color:var(--card);border:1px solid #2a304b;border-radius:var(--radius-xl);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,background .2s ease,border-color .2s ease}.card:hover{transform:translateY(-2px);box-shadow:0 12px 36px #00000073;background-color:var(--card-elev);border-color:#3a4468}.card-body{padding:20px}.card-title{font-size:1.125rem;font-weight:700;margin:0 0 6px}.card-subtle{color:var(--text-dim);font-size:.95rem;margin:0 0 18px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid #2a304b;background:#171b2e;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease,border-color .2s ease,transform .1s ease,opacity .2s ease}.btn:hover{background:#1b2040;border-color:#3a4468}.btn:active{transform:translateY(1px) scale(.99)}.btn[disabled]{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-strong));border-color:#3c8aff;color:#fff}.btn-primary:hover{filter:brightness(1.04)}input[type=text],textarea{background:#1a2138;color:var(--text);border:1px solid #2a304b;border-radius:12px}.rank-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-lg);border:1px solid #2a304b;background:#1a2138;box-shadow:0 6px 18px #00000040;cursor:grab;-webkit-user-select:none;user-select:none;transition:transform .12s ease,background .2s ease,border-color .2s ease}.rank-item:active{cursor:grabbing;transform:scale(.998)}.rank-index{color:var(--text-dim);width:28px;text-align:right}.startscreen{min-height:100dvh;display:flex;align-items:center;justify-content:center}.startcard{max-width:600px;text-align:center;background:var(--card);padding:3rem 2rem;border-radius:var(--radius-xl);box-shadow:var(--shadow);animation:fadeIn .6s ease forwards}.start-title{font-size:2.2rem;font-weight:800;color:var(--brand);margin-bottom:1rem}.start-text{color:var(--text-dim);font-size:1.125rem;line-height:1.6;margin-bottom:.5rem}.start-note{color:var(--text-dim);font-size:.95rem;opacity:.9;margin-bottom:2rem}.start-btn{font-size:1.125rem;padding:12px 28px;border-radius:12px;box-shadow:0 0 20px #6aa9ff4d;transition:transform .15s ease,box-shadow .25s ease}.start-btn:hover{transform:translateY(-2px);box-shadow:0 0 28px #3c8aff80}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.progress-info{text-align:right;color:var(--text-dim);font-size:12px;margin-top:6px}