.poople{--pp-tile:clamp(38px,min(8.4cqh,13vw),58px);--pp-key:clamp(40px,6.4cqh,54px)}.pp-intro{gap:clamp(14px,2.6cqh,22px)}.pp-demo{flex-direction:column;align-items:center;gap:4px;display:flex}.pp-demo-row{gap:4px;display:flex}.pp-demo-row i{text-transform:uppercase;width:26px;height:26px;color:var(--muted);border:1.5px solid var(--border-strong);border-radius:6px;justify-content:center;align-items:center;font-size:12px;font-style:normal;font-weight:700;display:flex}.pp-demo-row[data-tone=start] i{color:var(--text);background:#ffffff14;border-color:#0000}.pp-demo-row i[data-changed=true]{background:var(--text);color:var(--background);border-color:var(--text)}.pp-demo-row[data-tone=target] i{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.pp-column{gap:calc(var(--fit-gap)*.7)}.pp-hud{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;display:flex}.pp-goal{letter-spacing:.14em;text-transform:uppercase;color:var(--text);align-items:center;gap:8px;margin:0;font-size:15px;font-weight:750;display:inline-flex}.pp-hud>.pp-meters{width:100%}.pp-goal svg{color:var(--faint)}.pp-goal-target{color:var(--accent)}.pp-meters{align-items:flex-end;gap:18px;margin:0;display:flex}.pp-meters>div{flex-direction:column;gap:2px;display:flex}.pp-meters dt{letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-size:10px;font-weight:650;line-height:14px}.pp-meters dd{font-variant-numeric:tabular-nums;color:var(--muted);margin:0;font-size:16px;font-weight:750;line-height:20px}.pp-clock dd{color:var(--text);letter-spacing:-.03em;font-size:clamp(24px,4.6cqh,32px);line-height:1}.pp-best{text-align:right;margin-left:auto}.pp-best dd{color:var(--accent)}.pp-ladder-wrap{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.pp-ladder{scrollbar-width:thin;scrollbar-color:#363639 transparent;flex-direction:column;flex:1;align-items:center;gap:5px;min-height:0;padding:6px 2px;display:flex;overflow:auto;-webkit-mask-image:linear-gradient(#0000,#000 12px calc(100% - 12px),#0000);mask-image:linear-gradient(#0000,#000 12px calc(100% - 12px),#0000)}.pp-ladder:focus{outline:none}.pp-ladder>:first-child{margin-top:auto}.pp-ladder>:last-child{margin-bottom:auto}.pp-row{flex-shrink:0;gap:5px;display:flex}.pp-tile{width:var(--pp-tile);height:var(--pp-tile);border:2px solid var(--border-strong);font-size:calc(var(--pp-tile)*.48);text-transform:uppercase;color:var(--text);transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease);background:0 0;border-radius:10px;justify-content:center;align-items:center;font-weight:800;line-height:1;display:flex}.pp-row[data-tone=start] .pp-tile{color:var(--muted);background:#ffffff12;border-color:#0000}.pp-row[data-tone=step] .pp-tile[data-changed=true]{background:var(--text);border-color:var(--text);color:var(--background)}.pp-row[data-tone=target] .pp-tile{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.pp-row[data-tone=target] .pp-tile[data-changed=true]{box-shadow:inset 0 0 0 2px var(--accent-ink)}.pp-row[data-tone=ghost] .pp-tile{color:var(--faint);background:0 0;border-style:dashed;border-color:#ffffff24}.pp-row[data-tone=draft] .pp-tile{border-style:solid;border-color:var(--border);color:var(--text)}.pp-row[data-tone=draft] .pp-tile[data-filled=true]{animation:pp-pop .12s var(--ease);border-color:#ffffff4a}.pp-row[data-tone=draft] .pp-tile[data-moved=true]{border-color:var(--text)}.pp-row[data-tone=draft]:is([data-diff="2"],[data-diff="3"],[data-diff="4"]) .pp-tile[data-moved=true]{border-color:var(--error);color:var(--error);text-underline-offset:3px;background:#fb718529;text-decoration:underline;text-decoration-thickness:2px}.pp-row[data-last=true][data-tone=target] .pp-tile{animation:pp-land .45s var(--ease) both;animation-delay:calc(var(--i)*70ms)}@keyframes pp-pop{0%{transform:scale(.88)}to{transform:scale(1)}}@keyframes pp-land{0%{opacity:.4;transform:translateY(-6px)scale(.94)}60%{opacity:1;transform:translateY(2px)scale(1.04)}to{transform:none}}.pp-toast-slot{pointer-events:none;z-index:2;justify-content:center;display:flex;position:absolute;top:8px;left:0;right:0}.pp-toast{background:var(--text);color:var(--background);animation:pp-toast .14s var(--ease) both;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;box-shadow:0 8px 30px #000a}@keyframes pp-toast{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.pp-foot{flex-direction:column;flex-shrink:0;gap:10px;display:flex}.pp-kb{flex-direction:column;gap:6px;width:100%;display:flex}.pp-kb-row{justify-content:center;gap:5px;display:flex}.pp-key{max-width:44px;height:var(--pp-key);border:1px solid var(--border);color:var(--text);text-transform:uppercase;background:#ffffff0c;border-radius:8px;flex:1;justify-content:center;align-items:center;padding:0;font-size:13px;font-weight:700;display:flex}.pp-key:not(:disabled):hover{border-color:var(--border-strong);background:#ffffff18}.pp-key:not(:disabled):active{background:#ffffff26}.pp-key-wide{letter-spacing:.06em;flex:1.6;max-width:70px;font-size:11px}.pp-tools{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.pp-tool{border:1px solid var(--border-strong);min-height:30px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:#ffffff03;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:700;display:inline-flex}.pp-tool:not(:disabled):hover{color:var(--text);background:#ffffff09}.pp-over{text-align:center;flex-direction:column;align-items:center;gap:6px;padding-top:4px;display:flex}.pp-over-title{letter-spacing:-.035em;margin:4px 0 0;font-size:clamp(22px,3.8cqh,30px);font-weight:800;line-height:1.1}.pp-over-line{color:var(--muted);font-variant-numeric:tabular-nums;max-width:320px;margin:0;font-size:13px;line-height:1.55}.pp-over-best{color:var(--faint);font-variant-numeric:tabular-nums;margin:0;font-size:11px}.pp-over-actions{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin-top:10px;display:flex}.pp-over-actions .button{white-space:nowrap;flex:auto;min-width:110px}@media (max-width:600px){.pp-key{max-width:none}.pp-key-wide{flex:1.55;max-width:none}.pp-tool svg{display:none}.pp-tool{padding:6px 10px}.pp-meters{gap:14px}}@media (max-width:360px){.poople{--pp-tile:clamp(34px,12vw,44px);--pp-key:38px}.pp-goal{letter-spacing:.1em;font-size:13px}.pp-hud .pp-best{display:none}.pp-kb-row{gap:4px}.pp-key{border-radius:6px;font-size:12px}.pp-key-wide{letter-spacing:0;flex:1.9;font-size:10px}.pp-tool{padding:5px 8px;font-size:10px}.pp-over-actions .button{min-width:0;padding-left:8px;padding-right:8px;font-size:12px}}@container (max-height:520px){.pp-hud{flex-wrap:nowrap}.pp-hud>.pp-goal,.pp-hud .pp-best{display:none}.pp-hud>.pp-meters{flex:1;order:1;width:auto}.pp-hud>.pp-back{order:2}.pp-clock dd{font-size:20px}.pp-column{gap:8px}.pp-foot{gap:6px}.pp-kb{gap:4px}}@media (prefers-reduced-motion:reduce){.pp-tile,.pp-toast,.pp-row[data-last=true][data-tone=target] .pp-tile{transition:none!important;animation:none!important}}