:root{
      --glass: rgba(255,255,255,.92);
      --ink:#17212b;
      --shadow: 0 10px 30px rgba(0,0,0,.18);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{
      margin:0;width:100%;height:100%;overflow:hidden;
      font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:#bfe8ff;color:var(--ink);touch-action:none;
    }
    #game{position:fixed;inset:0;width:100%;height:100%;display:block}
    button{
      border:0;border-radius:14px;background:white;color:var(--ink);
      font:inherit;font-weight:800;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.12);
      min-height:46px;padding:9px 12px;
    }
    button:active{transform:translateY(2px)}
    button.active{outline:4px solid rgba(20,137,255,.28);background:#e9f5ff}
    button.primary{background:#17212b;color:white}
    button.danger{background:#ffefef;color:#a31919}
    .glass{background:var(--glass);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
    #brand{
      position:fixed;left:14px;top:14px;padding:10px 13px;border-radius:999px;
      display:flex;align-items:center;gap:9px;font-weight:900;z-index:20;user-select:none
    }
    #brand .dot{width:11px;height:11px;border-radius:50%;background:#21c46b;box-shadow:0 0 0 5px rgba(33,196,107,.18)}
    #brand small{font-weight:700;opacity:.6}
    #toolBar{
      position:fixed;top:14px;left:50%;transform:translateX(-50%);
      padding:8px;border-radius:18px;display:flex;gap:7px;z-index:20;user-select:none
    }
    .tool{min-width:100px}
    #mission{
      position:fixed;right:14px;top:14px;width:min(310px,42vw);padding:12px 14px;border-radius:18px;z-index:20;
      font-size:14px;line-height:1.3;user-select:none
    }
    #mission strong{font-size:16px}
    #score{display:flex;gap:10px;margin-top:7px;font-weight:900}
    #score span{background:rgba(255,255,255,.7);padding:5px 9px;border-radius:999px}
    #posePanel{
      position:fixed;right:14px;bottom:14px;width:min(340px,44vw);
      padding:12px;border-radius:20px;z-index:20;user-select:none
    }
    #poseTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
    #poseState{font-size:13px;font-weight:800}
    #poseState.good{color:#0a8a43}
    #poseState.warn{color:#a66500}
    #videoWrap{
      margin-top:9px;border-radius:16px;overflow:hidden;background:#0e1720;aspect-ratio:16/10;position:relative;display:none
    }
    #video{
      width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.82;display:block
    }
    #guide{
      position:absolute;inset:0;pointer-events:none;
      background:
        linear-gradient(90deg,transparent 32%,rgba(255,255,255,.18) 32%,rgba(255,255,255,.18) 33%,transparent 33%,transparent 67%,rgba(255,255,255,.18) 67%,rgba(255,255,255,.18) 68%,transparent 68%),
        linear-gradient(0deg,transparent 31%,rgba(255,255,255,.14) 31%,rgba(255,255,255,.14) 32%,transparent 32%,transparent 68%,rgba(255,255,255,.14) 68%,rgba(255,255,255,.14) 69%,transparent 69%);
    }
    #poseHint{font-size:12px;opacity:.75;margin-top:8px;line-height:1.35}
    #classic{
      position:fixed;left:14px;bottom:14px;padding:11px;border-radius:20px;z-index:20;user-select:none;
      max-width:min(430px,48vw)
    }
    #classic .row{display:flex;gap:7px;margin-top:7px}
    #classic button{min-width:54px;font-size:20px}
    #classic .action{font-size:14px;min-width:112px}
    #classic small{display:block;margin-top:7px;opacity:.64;font-weight:700}
    #toast{
      position:fixed;left:50%;bottom:24%;transform:translateX(-50%) translateY(12px);
      padding:10px 16px;border-radius:999px;background:rgba(23,33,43,.9);color:white;
      font-weight:900;font-size:16px;opacity:0;pointer-events:none;transition:.22s;z-index:50
    }
    #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    #startCard{
      position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;
      background:rgba(10,18,28,.32);backdrop-filter:blur(7px)
    }
    #startInner{
      width:min(560px,92vw);padding:24px;border-radius:28px;background:rgba(255,255,255,.96);
      box-shadow:0 20px 70px rgba(0,0,0,.28);text-align:center
    }
    #startInner h1{margin:0 0 8px;font-size:clamp(28px,5vw,48px)}
    #startInner p{margin:5px auto 17px;max-width:460px;line-height:1.45}
    #startActions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
    #startActions button{font-size:17px;padding:12px 17px}
    #kidRules{margin-top:15px;font-size:13px;opacity:.68}

    #learnCard{
      position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
      width:min(520px,90vw);padding:22px;border-radius:28px;z-index:55;
      text-align:center;display:none;user-select:none;
    }
    #learnCard.show{display:block}
    #learnStep{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
    #learnIcon{font-size:72px;line-height:1;margin:10px 0 6px}
    #learnTitle{font-size:30px;font-weight:1000;margin:0}
    #learnText{font-size:17px;line-height:1.35;margin:8px auto 14px;max-width:410px}
    #learnFeedback{
      min-height:32px;font-size:22px;font-weight:1000;color:#0a8a43;margin:5px 0 8px
    }
    #learnBar{height:10px;background:rgba(23,33,43,.1);border-radius:999px;overflow:hidden;margin:10px auto 14px;max-width:400px}
    #learnFill{height:100%;width:0%;background:#21c46b;border-radius:999px;transition:width .08s linear}
    #learnActions{display:flex;justify-content:center;gap:9px}
    #liveControls{
      margin-top:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px
    }
    .liveControl{
      background:rgba(255,255,255,.7);border-radius:12px;padding:7px 5px;text-align:center;
      font-size:11px;font-weight:850
    }
    .liveControl b{display:block;font-size:15px;margin-top:2px}
    .liveControl.on{background:#e3f7eb;outline:2px solid rgba(33,196,107,.3)}
    @media(max-width:780px){
      #brand{top:8px;left:8px}
      #toolBar{top:62px;width:calc(100% - 16px);justify-content:center}
      .tool{min-width:0;flex:1;padding:8px 7px;font-size:13px}
      #mission{top:120px;right:8px;width:calc(100% - 16px);font-size:12px}
      #posePanel{right:8px;bottom:8px;width:calc(50% - 12px)}
      #classic{left:8px;bottom:8px;max-width:calc(50% - 12px)}
      #classic button{min-width:44px;padding:7px}
      #classic .action{min-width:84px}
    }
    @media(max-width:560px){
      #mission{display:none}
      #posePanel{width:calc(100% - 16px);bottom:8px}
      #classic{display:none}
      #videoWrap{aspect-ratio:16/7}
    }