:root{
  --scaleFactor: 1;
  --font: 'Comfortaa', Arial, sans-serif;
  --bg-deep: #091428;
  --axis: #FF9F1A;
  --axis-glow: #FFD700;
  --green: #219150;
  --green-light: #58D98B;
  --pink: #E84C9A;
  --callout: #3498DB;
  --text: #ffffff;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height:100%; background:#05101f; font-family:var(--font); }
html{ font-size: 100%; }

.responsive-container{
  width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 30%, #142a4a 0%, #0b1d33 70%);
  overflow:hidden;
}
.responsive-wrapper{
  position:absolute; top:50%; left:50%;
  width:1920px; height:1080px;
  transform: translate(-50%, -50%) scale(var(--scaleFactor));
  transform-origin: center center;
}

.applet-root{
  width:100%; height:100%; position:relative; overflow:hidden;
  background: radial-gradient(ellipse at 50% 30%, #1a3a5c 0%, #0d2240 60%, #091428 100%);
  color:var(--text);
}

/* ----------------------------- intro ----------------------------- */
.intro-screen{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.intro-card{
  width:70%; max-width:1200px; text-align:center; padding:60px 70px;
  background: rgba(20,40,70,.55); border:2px solid rgba(135,206,235,.35);
  border-radius:24px; box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.intro-title{ font-size:3.4rem; font-weight:800; color:#ff66c4; margin-bottom:36px; letter-spacing:.5px; }
.intro-note{ font-size:2.05rem; line-height:1.6; color:#cf7fff; font-weight:600; }
.intro-btn{
  margin-top:48px; padding:18px 56px; font-family:var(--font); font-size:2.3rem; font-weight:700;
  color:#06203a; background:linear-gradient(180deg, var(--green-light), var(--green));
  border:none; border-radius:48px; cursor:pointer; box-shadow:0 6px 0 rgba(0,0,0,.3);
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.intro-btn:hover{ filter:brightness(1.08); }

/* --------------------------- layout ------------------------------ */
.screen-layout{ width:100%; height:100%; display:flex; flex-direction:column; }
.screen-header{
  flex:0 0 9%; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:2rem; font-weight:700; color:#dbeeff;
  background: linear-gradient(180deg, rgba(30,72,120,.9), rgba(20,52,92,.5));
  border-bottom:2px solid rgba(120,180,235,.25); padding:0 40px;
}
.screen-main{ flex:1; display:flex; align-items:stretch; padding:24px 36px 36px; gap:28px; min-height:0; }

.menu-col{ flex:0 0 300px; display:flex; align-items:center; }
.grid-col{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-width:0; }
.grid-col--practice{ flex:1; }

/* --------------------------- concept menu ------------------------ */
.concept-menu{ display:flex; flex-direction:column; gap:16px; width:100%; }
.menu-pill{
  position:relative; width:100%; padding:16px 22px; font-family:var(--font); font-size:1.6rem; font-weight:700;
  text-align:center; border-radius:40px; cursor:pointer; transition:transform .12s, filter .12s;
  border:3px solid #fff; color:#3a2540;
  background: linear-gradient(180deg, #ffd6ec, #ffb3da);
  box-shadow:0 5px 0 rgba(0,0,0,.25);
}
.menu-pill-text{ position:relative; z-index:1; }
.menu-pill--unlocked:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.menu-pill--locked{
  cursor:not-allowed; opacity:.5; color:#6a5a72;
  background: linear-gradient(180deg, #e7c6dc, #cda6c2); box-shadow:0 4px 0 rgba(0,0,0,.2);
}
.menu-pill--active{
  color:#06280f; border-color:#eafff1;
  background: linear-gradient(180deg, var(--green-light), var(--green));
  box-shadow:0 5px 0 rgba(0,0,0,.3), 0 0 22px rgba(88,217,139,.6);
}
.menu-pill--done{
  color:#123018; border-color:#dff7e8;
  background: linear-gradient(180deg, #bff0d2, #8fdcae);
}

/* hand pointer */
.hand-pointer{
  position:absolute; right:-46px; top:50%; transform:translateY(-50%);
  width:64px; height:64px; pointer-events:none; z-index:5;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
  animation: handBob 1s ease-in-out infinite;
}
@keyframes handBob{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(-8px); } }

/* --------------------------- coordinate plane -------------------- */
.cp-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cp-svg{ width:auto; height:100%; max-width:100%; }

.cp-grid{ stroke: rgba(150,185,225,.22); stroke-width:1; }
.cp-axis{
  stroke: var(--axis); stroke-width:5; stroke-linecap:round;
  filter: drop-shadow(0 0 4px rgba(255,159,26,.5));
}
.cp-axis--pulse{ animation: axisPulse 1.2s ease-in-out infinite; }
.cp-arrow{ fill: var(--axis); filter: drop-shadow(0 0 3px rgba(255,159,26,.5)); }
.cp-axis-label{ fill:#ffe9c2; font-family:var(--font); font-size:24px; font-weight:700; }

.cp-region{ stroke: var(--green-light); stroke-width:9; stroke-linecap:round; opacity:.9; animation: regionPulse 1s ease-in-out infinite; }

.cp-num{ fill:#dbeaff; font-family:var(--font); font-size:22px; font-weight:600; text-anchor:middle; }
.cp-num--seq{ opacity:.25; animation: numPop .5s ease-out forwards; }
.cp-num--hi{ fill: var(--green-light); animation: numPulse 1s ease-in-out infinite; }
.cp-num--dim{ opacity:.32; }
.cp-num--muted{ opacity:.55; }

.cp-tick{ stroke: var(--axis); stroke-width:3; stroke-linecap:round; }
.cp-tick--dim{ opacity:.32; }
.cp-tick--hi{ stroke: var(--green-light); }
.cp-tick--muted{ opacity:.55; }

.cp-right-angle{ stroke:#fff; stroke-width:3; animation: axisPulse 1s ease-in-out 3; }

.cp-dist{ stroke:#4db8ff; stroke-width:6; stroke-linecap:round; animation: distPulse 1.1s ease-in-out infinite; filter:drop-shadow(0 0 5px rgba(77,184,255,.6)); }
.cp-dist-label{ fill:#bfe6ff; font-family:var(--font); font-size:20px; font-weight:700; text-anchor:middle; }
.cp-dist-label--y{ text-anchor:start; }

.cp-point{ fill: var(--green-light); stroke:#0c3b21; stroke-width:2; }
.cp-point--pulse{ animation: pointPulse 1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.cp-origin{ fill:#ffe9c2; stroke:#7a5210; }
.cp-point-label{ fill:#ffffff; font-family:var(--font); font-size:22px; font-weight:700; }
.cp-origin-label{ fill:#ffe9c2; }
.cp-point-label--reveal{ animation: numPop .35s ease-out; }
.cp-point-label--pulse{ animation: pointPulse 1s ease-in-out infinite; }

/* practice points */
.cp-ppoint{ fill:#7fe3a6; stroke:#0c3b21; stroke-width:2; animation: pointPulse 1.4s ease-in-out infinite; }
.cp-ppoint:hover{ fill:#bdffd6; }
.cp-ppoint--selected{ fill:#ffd54f; stroke:#7a5210; stroke-width:3; animation:none; }

/* --------------------------- callouts ---------------------------- */
.callout-layer{ position:absolute; inset:0; pointer-events:none; }
.callout{
  position:absolute; max-width:430px; padding:18px 24px; pointer-events:none;
  background: rgba(226,236,248,.96); color:#10314f; border-radius:16px;
  font-size:1.45rem; font-weight:600; line-height:1.45; text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.35); border:2px solid rgba(140,180,225,.6);
  animation: calloutIn .35s ease-out;
}
.callout::after{ content:''; position:absolute; width:0; height:0; border:14px solid transparent; }
.callout--top-right{ top:14px; right:18px; }
.callout--top-right::after{ left:40px; bottom:-26px; border-top-color: rgba(226,236,248,.96); }
.callout--bottom-right{ bottom:18px; right:18px; }
.callout--wide{ max-width:560px; white-space:nowrap; }
.callout--bottom-right::after{ left:40px; top:-26px; border-bottom-color: rgba(226,236,248,.96); }
.callout--top-left{ top:14px; left:18px; }
.callout--top-left::after{ left:40px; bottom:-26px; border-top-color: rgba(226,236,248,.96); }
.callout--bottom-left{ bottom:18px; left:18px; }
.callout--bottom-left::after{ left:40px; top:-26px; border-bottom-color: rgba(226,236,248,.96); }

/* region pill tags overlaid on grid */
.region-tag{
  position:absolute; padding:8px 18px; border-radius:10px; font-size:1.25rem; font-weight:700;
  color:#06203a; box-shadow:0 4px 12px rgba(0,0,0,.3); animation: calloutIn .3s ease-out;
}
.region-tag--pos-x{ top:46%; left:62%; background:#9fb8d4; color:#1a2c40; }
.region-tag--neg-x{ top:46%; left:24%; background:#9fb8d4; color:#1a2c40; }
.region-tag--pos-y{ top:30%; left:64%; background:#9fb8d4; color:#1a2c40; }
.region-tag--neg-y{ top:68%; left:54%; background:#9fb8d4; color:#1a2c40; }
.region-tag--muted{ background:#5e7186; color:#c4d2e2; opacity:.65; box-shadow:none; }

/* --------------------------- ctas -------------------------------- */
.cta-hint{
  position:absolute; bottom:24px; right:24px; padding:14px 26px; border-radius:12px;
  background: linear-gradient(180deg, #2aa98a, #1c8f73); color:#eafff8; font-size:1.5rem; font-weight:700;
  box-shadow:0 6px 0 rgba(0,0,0,.25); animation: pulseGlow 1.8s ease-in-out infinite;
}
.practice-cta{
  position:absolute; bottom:26px; right:26px; width:84px; height:64px; border:none; cursor:pointer;
  font-size:2rem; color:#06280f; border-radius:14px;
  background: linear-gradient(180deg, #ffb14a, #ff8a1a); box-shadow:0 6px 0 rgba(0,0,0,.3);
  animation: ctaArrow 1s ease-in-out infinite;
}
.explore-again{
  position:absolute; bottom:24px; right:28px; padding:14px 36px; border:none; cursor:pointer;
  font-family:var(--font); font-size:1.6rem; font-weight:700; color:#06280f; border-radius:40px;
  background: linear-gradient(180deg, var(--green-light), var(--green)); box-shadow:0 6px 0 rgba(0,0,0,.3);
}
.explore-again:hover{ filter:brightness(1.08); }

/* --------------------------- keyframes --------------------------- */
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 6px 0 rgba(0,0,0,.3), 0 0 0 rgba(88,217,139,0); } 50%{ box-shadow:0 6px 0 rgba(0,0,0,.3), 0 0 26px rgba(88,217,139,.7); } }
@keyframes axisPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
@keyframes regionPulse{ 0%,100%{ opacity:.95; } 50%{ opacity:.5; } }
@keyframes pointPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@keyframes distPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
@keyframes numPop{ 0%{ opacity:.2; } 60%{ opacity:1; } 100%{ opacity:1; } }
@keyframes numPulse{ 0%{ opacity:.35; } 50%{ opacity:1; } 100%{ opacity:.35; } }
@keyframes calloutIn{ 0%{ opacity:0; transform:translateY(-8px) scale(.96); } 100%{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes ctaArrow{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(8px); } }