/* PolarForce — compare.html styles (moved out of the page so the CSP needs no unsafe-inline) */
.page-head{padding:clamp(8rem,14vw,10rem) 0 2rem}
.page-head .h2{font-size:clamp(2.5rem,7vw,5.5rem)}

/* Picker */
.picker{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:2.5rem}
.pick{position:relative;display:flex;align-items:center;gap:.9rem;padding:.75rem 1rem .75rem .75rem;border-radius:18px;background:var(--surface);border:1px solid var(--line);cursor:pointer;text-align:left;transition:transform .5s var(--out),border-color .3s,background .3s}
.pick:hover{transform:translateY(-3px)}
.pick .th{flex:none;width:52px;height:60px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden}
.pick .th img{max-height:52px;width:auto;mix-blend-mode:multiply}
.pick b{display:block;font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.pick small{display:block;font-size:.75rem;color:var(--faint)}
.pick .tick{position:absolute;top:.6rem;right:.6rem;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .5s var(--out)}
.pick .tick svg{opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--out)}
.pick[aria-pressed="true"]{border-color:var(--ice);background:linear-gradient(150deg,rgba(110,193,245,.16),var(--surface) 70%)}
.pick[aria-pressed="true"] .tick{background:var(--ice);border-color:var(--ice);color:var(--ink);transform:rotate(360deg)}
.pick[aria-pressed="true"] .tick svg{opacity:1;transform:none}
.pick-note{font-size:.8125rem;color:var(--faint);margin-top:.75rem}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;margin-top:2rem}
.toolbar .grp{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.height{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--muted)}
.height b{min-width:5.5em;color:var(--text);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:160px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ice) var(--p,50%),rgba(255,255,255,.15) var(--p,50%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .3s var(--out)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff}

/* Stage */
.stage{position:relative;margin-top:1.25rem;border-radius:28px;background:linear-gradient(180deg,#f5f5f7 0%,#ebedf0 100%);color:#1d1d1f;overflow:hidden;height:clamp(380px,52vw,560px)}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:56px;height:1px;background:#c7c9ce}
.floor{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(180deg,#e2e4e8,#d9dce1)}
.ruler{position:absolute;left:0;top:0;bottom:56px;width:56px;border-right:1px solid #d2d2d7;background:rgba(255,255,255,.6);z-index:2}
.ruler span{position:absolute;right:0;left:0;height:0;border-top:1px solid #b9bcc2;font-size:.625rem;font-weight:600;color:#86868b;text-align:right;padding-right:6px;line-height:0;transition:bottom .8s var(--out)}
.ruler span.minor{left:auto;width:8px;padding:0;border-color:#d2d2d7}
.ruler span b{position:relative;top:-7px;font-weight:600}
.lineup{position:absolute;left:56px;right:0;bottom:56px;top:0;display:flex;align-items:flex-end;justify-content:center;gap:var(--gap,40px);padding:0 2rem}
.fig{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;animation:pop .9s var(--out) backwards}
@keyframes pop{from{opacity:0;transform:translateY(40px) scaleY(.6)}}
.fig .body{position:relative;transition:width .8s var(--out),height .8s var(--out)}
.fig img,.fig svg.person{display:block;width:100%;height:100%}
.fig img{object-fit:fill;filter:drop-shadow(0 18px 18px rgba(0,0,0,.16))}
.fig .cap{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;font-size:.8125rem;font-weight:700;color:#1d1d1f}
.fig .cap span{display:block;font-weight:500;font-size:.6875rem;color:#6e6e73}
.dim-h{position:absolute;top:0;bottom:0;left:calc(100% + 8px);width:1px;background:var(--ice);opacity:0;transition:opacity .3s}
.dim-h::before,.dim-h::after{content:"";position:absolute;left:-4px;width:9px;height:1px;background:var(--ice)}
.dim-h::before{top:0}.dim-h::after{bottom:0}
.dim-h b{position:absolute;top:50%;left:6px;transform:translateY(-50%);font-size:.6875rem;font-weight:700;color:#0a72c9;background:#fff;padding:.15em .45em;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.dim-w{position:absolute;left:0;right:0;top:-14px;height:1px;background:var(--ice);opacity:0;transition:opacity .3s}
.dim-w b{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font-size:.6875rem;font-weight:700;color:#0a72c9;white-space:nowrap}
.fig:hover .dim-h,.fig:hover .dim-w,.stage.dims .dim-h,.stage.dims .dim-w{opacity:1}
.fit{position:absolute;top:-38px;left:50%;transform:translateX(-50%);font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.35em .7em;border-radius:980px;white-space:nowrap;animation:pop .6s var(--out)}
.fit.ok{background:#dcfce7;color:#166534}.fit.no{background:#fee2e2;color:#991b1b}
.stage.top .lineup{align-items:flex-start;padding-top:56px}
.stage.top::after{bottom:auto;top:56px}
.stage.top .floor{display:none}
.stage.top .ruler{bottom:0;top:56px}
.foot-box{position:relative;border:2px solid #1d1d1f;border-radius:6px;background:repeating-linear-gradient(135deg,#fff 0 8px,#f2f3f5 8px 16px);transition:width .8s var(--out),height .8s var(--out)}
.foot-box.p{border-radius:50%;border-color:#8e8e93;background:#e5e5ea}
.foot-box .cap{top:calc(100% + 10px)}
.wall{position:absolute;left:56px;right:0;top:0;height:56px;display:flex;align-items:center;padding-left:1rem;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#86868b;background:repeating-linear-gradient(90deg,#d9dce1 0 2px,transparent 2px 14px)}
.wall[hidden]{display:none}
.empty{position:absolute;inset:0;display:grid;place-items:center;color:#86868b;font-weight:600}

/* Space checker */
.checker{display:grid;grid-template-columns:auto repeat(3,1fr) auto;gap:.75rem;align-items:end;margin-top:1.25rem;padding:1.25rem;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.checker .t{font-size:.875rem;font-weight:700;padding-bottom:.7rem}
.checker .t small{display:block;font-weight:400;color:var(--faint)}
.field{display:grid;gap:.35rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.field input{width:100%;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--bg-alt);color:var(--text);font:inherit;font-size:1rem;font-weight:600;letter-spacing:0;padding:0 .9rem;text-transform:none;transition:border-color .3s,box-shadow .3s}
.field input:focus{outline:0;border-color:var(--ice);box-shadow:0 0 0 4px rgba(110,193,245,.18)}

/* Stats */
.stats{margin-top:2rem;display:grid;gap:1.25rem}
.metric{padding:1.5rem;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.metric h3{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:1rem}
.bar{display:grid;grid-template-columns:5.5rem 1fr 8.5rem;gap:1rem;align-items:center;padding:.4rem 0;font-size:.9375rem}
.bar b{font-weight:800}
.bar .track{height:10px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden}
.bar .track i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--ice),#cfeaff);width:0;transition:width 1.1s var(--out)}
.bar span{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.verdict{padding:1.5rem 1.75rem;border-radius:22px;background:linear-gradient(150deg,#2f4252,#26282c 75%);border:1px solid var(--line);font-size:clamp(1.0625rem,1.8vw,1.375rem);line-height:1.45}
.verdict b{color:var(--ice-strong)}
.go{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.custom-note{margin-top:2rem;padding:1.25rem 1.5rem;border-radius:18px;border:1px dashed rgba(255,255,255,.22);color:var(--muted);font-size:.9375rem}
.custom-note a{color:var(--ice);font-weight:650}

@media (max-width:900px){
  .picker{grid-template-columns:repeat(2,1fr)}
  .checker{grid-template-columns:repeat(3,1fr)}
  .checker .t{grid-column:span 3;padding:0}
  .checker .btn{grid-column:span 3;justify-content:center}
}
@media (max-width:600px){
  .ruler{width:40px}.lineup,.wall{left:40px}
  .lineup{padding:0 .75rem}
  .bar{grid-template-columns:4rem 1fr 6.5rem;gap:.6rem;font-size:.8125rem}
  .fig .cap{font-size:.6875rem}
}

.lead-head{max-width:52ch;margin-top:1.25rem}
.fit.above{top:auto;bottom:calc(100% + 8px)}