/* peel-kit.css — the three steps up to Peel the Cube share one look,
   the same dark stage and answer buttons as peel-the-cube.html. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:#111;color:#fff;font-family:Georgia,'Times New Roman',serif;min-height:100dvh;
     display:flex;flex-direction:column;align-items:center;overflow-x:hidden;padding-bottom:80px}
.top-nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 10px 2px}
.top-nav a,.top-nav button{display:flex;align-items:center;min-height:48px;padding:0 18px;font:bold 17px Arial,sans-serif;
  color:#fff;border:3px solid #fff;border-radius:999px;text-decoration:none;background:transparent;cursor:pointer}
.top-nav a:active,.top-nav button:active{background:#fff;color:#000}
h1{font-size:clamp(18px,4.4vw,26px);letter-spacing:1px;margin-top:8px;text-align:center}
.ladder{font:12px Arial,sans-serif;color:#888;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;text-align:center}
.ladder a{color:#888}.ladder b{color:#fff}
#prog{display:flex;gap:6px;justify-content:center;margin-top:8px;min-height:14px}
#prog i{width:13px;height:13px;border-radius:50%;border:2px solid #555}
#prog i.done{background:#FFF200;border-color:#FFF200}
#prog i.now{border-color:#fff}
#eq{font-size:clamp(22px,6.4vw,36px);font-weight:bold;min-height:1.3em;margin-top:6px;text-align:center;padding:0 10px}
#eq .q{color:#888}
#stage{width:100%;max-width:640px;padding:6px 12px 0}
#stage svg{width:100%;height:auto;display:block;max-height:42dvh;margin:0 auto;overflow:visible}
#stage text{font-family:Arial,sans-serif;font-weight:bold;fill:#fff}
#stage .lbl{fill:#999;font-weight:normal}
#stage g{transition:transform .7s cubic-bezier(.2,.9,.3,1),opacity .7s}
#stage g.off{opacity:0}
#stage g.lift{opacity:.28}
#stage g.ghost{opacity:0}
#ask{font-size:clamp(17px,4.4vw,23px);text-align:center;padding:8px 16px 0;max-width:36ch;line-height:1.3;min-height:2.6em}
#choices{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:8px 12px;min-height:76px}
.ch{min-width:76px;height:62px;padding:0 14px;border-radius:16px;border:3px solid #fff;background:#1c1c1c;
    color:#fff;font:bold 28px Georgia,serif;cursor:pointer}
.ch:active{transform:scale(.94)}
.ch.no{opacity:.25;border-color:#555;animation:shake .4s}
.ch.yes{background:#fff;color:#111}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.act{padding:13px 30px;border:3px solid #FFF200;border-radius:999px;background:transparent;color:#FFF200;
     font:bold 20px Georgia,serif;cursor:pointer;min-height:56px}
.act:active{background:#FFF200;color:#111}
#hint{font:15px Arial,sans-serif;color:#ffb3b3;text-align:center;padding:4px 16px;max-width:44ch;line-height:1.45;min-height:3em}
#win{position:fixed;inset:0;background:#111f;display:none;z-index:30;flex-direction:column;align-items:center;
     justify-content:center;gap:18px;text-align:center;padding:24px}
#win.on{display:flex}
#win h2{font-size:clamp(26px,7vw,42px)}
#win p{color:#ccc;font:16px/1.55 Arial,sans-serif;max-width:38ch}
#win .next{color:#fff;font:bold 19px Arial,sans-serif;border:3px solid #fff;border-radius:999px;padding:12px 26px;text-decoration:none}
@media (prefers-reduced-motion:reduce){#stage g{transition:none}}