.head{display:flex;gap:20px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.head>div:first-child{flex:1 1 460px;min-width:0}
.prog{display:flex;align-items:center;gap:16px;padding:12px 18px;flex:0 1 380px;min-width:0}
.prog small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.prog b{font-size:22px;font-variant-numeric:tabular-nums}
.prog .pb{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.12);overflow:hidden;min-width:60px}
.prog .pb i{display:block;height:100%;width:0;background:var(--grad);transition:width .6s}
.stage{position:relative;padding:0;overflow:hidden;height:min(68vh,640px);min-height:380px;touch-action:none}
.stage canvas{display:block;width:100%;height:100%;cursor:grab;outline:none}
.stage canvas.hov{cursor:pointer}
.stage canvas:active{cursor:grabbing}
.marks{position:absolute;inset:0;pointer-events:none}
.marks span{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#059669;border:2px solid #a7f3d0;box-shadow:0 0 18px rgba(52,211,153,.8);transition:opacity .2s}
.marks span.ping{background:rgba(251,191,36,.25);border-color:#fbbf24;box-shadow:0 0 0 0 rgba(251,191,36,.7);animation:ping 1.2s infinite;width:56px;height:56px;margin:-28px 0 0 -28px}
@keyframes ping{70%{box-shadow:0 0 0 18px rgba(251,191,36,0)}100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}}
.hint-ov{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-size:13px;color:#dbe4f7;padding:8px 14px;border-radius:999px;background:rgba(11,16,38,.7);border:1px solid var(--line);white-space:nowrap;transition:opacity .5s;pointer-events:none}
.hint-ov.gone{opacity:0}
.card{position:absolute;right:16px;top:16px;width:min(360px,calc(100% - 32px));padding:18px 20px;border-radius:18px;background:linear-gradient(160deg,rgba(236,72,153,.2),rgba(124,58,237,.22) 60%,rgba(34,211,238,.12)),rgba(15,20,52,.94);border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);animation:in .3s}
.card.safe{background:linear-gradient(160deg,rgba(52,211,153,.18),rgba(34,211,238,.12)),rgba(15,20,52,.94)}
@keyframes in{from{opacity:0;transform:translateY(-8px)}}
.card .tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f9a8d4}
.card.safe .tag{color:#6ee7b7}
.card h2{font-size:20px;margin:4px 0 8px;line-height:1.25}
.card p{font-size:14px;color:#dbe4f7}
.fix{margin:10px 0 14px;font-size:13.5px;padding:10px 12px;border-radius:12px;background:rgba(52,211,153,.12);border-left:3px solid #34d399}
.fix:empty{display:none}
.nogl{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:20px;background:var(--navy2)}
.tools{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:8px}
.ib{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(11,16,38,.72);cursor:pointer;font-size:20px;font-weight:700;display:grid;place-items:center}
.ib:hover{border-color:var(--cy)}
.below{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:16px}
.list,.log{padding:16px}
.lh{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.objs{display:flex;flex-wrap:wrap;gap:8px}
.objs button{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;font-size:13px;font-weight:600;min-height:38px}
.objs button:hover,.objs button:focus-visible{border-color:var(--cy)}
.objs button.f{border-color:#34d399;color:#6ee7b7}
.objs button.s{color:var(--mut)}
.log ol{list-style:none;display:grid;gap:8px}
.log li{font-size:13.5px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border-left:3px solid #34d399}
.log li b{display:block}.log li span{color:var(--mut)}
.log li.empty{border-left-color:var(--line);color:var(--mut)}
.win{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,8,26,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:16px}
.win>div{max-width:440px;text-align:center;padding:26px}
.win .big{font-size:46px;font-weight:800}
.win .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
@media(max-width:860px){.below{grid-template-columns:1fr}}
@media(max-width:560px){.stage{height:62vh;min-height:360px}.card{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:70%;overflow:auto}.hint-ov{font-size:11.5px;white-space:normal;width:90%;text-align:center}.tools{flex-direction:row}.prog{flex-basis:100%}.lh .note{display:none}}