#i { 
          background: var(--glass-bg);
          padding: 20px; 
          margin: 12px; 
          text-align: center; 
          border-radius: 16px; 
          border: 1px solid var(--glass-border); 
          box-shadow: var(--cyber-shadow); 
          font-weight: 700; 
          color: var(--cyber-text); 
          backdrop-filter: blur(14px);
        }

        /* 🚀 サイバーブルーのヒントエリア */
        #tutorial-next-under-problem {
          margin: 0 12px 12px;
          padding: 16px;
          border-radius: 16px;
          background: linear-gradient(90deg, rgba(56, 189, 248, 0.14), rgba(6, 26, 58, 0.4));
          border: 1px solid var(--glass-border);
          border-left: 5px solid var(--cyber-blue); 
          font-weight: 900;
          color: #f0f7ff;
          text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
          box-shadow: var(--cyber-shadow);
          backdrop-filter: blur(10px);
          text-align: left;
          display: none;
        }
        #tutorial-next-under-problem.visible { display: block; }
        #tutorial-next-under-problem.pulse {
          animation: underProblemPulse 1.4s ease-in-out infinite;
        }
        @keyframes underProblemPulse {
          0%, 100% { transform: translateY(0); box-shadow: var(--cyber-shadow); }
          50% { transform: translateY(-3px); border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 16px 36px rgba(56, 189, 248, 0.15); }
        }

        /* 🚀 チュートリアル用上の帯ガラス */
        #tutorial-banner {
          display: none;
          margin: 12px 12px 0;
          padding: 16px;
          border-radius: 16px;
          background: linear-gradient(135deg, rgba(6, 26, 58, 0.9), rgba(4, 12, 32, 0.75));
          border: 1px solid rgba(56, 189, 248, 0.4);
          box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
          font-weight: 900;
          color: var(--cyber-text);
          text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
          text-align: left;
        }
        #tutorial-banner.visible { display: block; }

        /* チュートリアル光枠(オレンジ丸) */
        .tutorial-pulse-source,
        .tutorial-pulse-target {
          position: absolute;
          z-index: 9998;
          pointer-events: none;
          border-radius: 12px;
          box-sizing: border-box;
        }
        .tutorial-pulse-source {
          border: 3px solid #38bdf8;
          box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
          animation: pulse-cyan 1.5s ease-in-out infinite;
        }
        .tutorial-pulse-target {
          position: fixed;
          pointer-events: none;
          z-index: 9999;
          border-radius: 12px;
          background-color: rgba(56, 189, 248, 0.15);
          border: 2px solid rgba(125, 211, 252, 0.85);
          box-shadow: 0 0 22px 6px rgba(56, 189, 248, 0.55), inset 0 0 12px 4px rgba(56, 189, 248, 0.3);
          transition: all 0.15s ease-out;
          animation: pulse-cyan-target 1.6s ease-in-out infinite;
        }
        .tutorial-pulse-source.hidden,
        .tutorial-pulse-target.hidden { display: none; }
        @keyframes pulse-cyan {
          0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55); }
          50% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0.12); }
        }
        @keyframes pulse-cyan-target {
          0%, 100% {
            box-shadow: 0 0 22px 6px rgba(56, 189, 248, 0.55), inset 0 0 12px 4px rgba(56, 189, 248, 0.3);
          }
          50% {
            box-shadow: 0 0 34px 10px rgba(56, 189, 248, 0.8), inset 0 0 16px 6px rgba(56, 189, 248, 0.45);
          }
        }

        /* チュートリアルプログレスバー */
        #tutorial-progress-shell { 
          display: none; 
          margin: 0 12px 12px; 
          background: rgba(255,255,255,0.06); 
          border: 1px solid var(--glass-border); 
          border-radius: 16px; 
          box-shadow: var(--cyber-shadow); 
          padding: 12px; 
          backdrop-filter: blur(10px);
        }
        #tutorial-progress-shell.visible { display: block; }
        #tutorial-progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 900; color: rgba(187, 247, 208, 0.95); }
        #tutorial-progress-track { width: 100%; height: 14px; border-radius: 999px; background: rgba(34, 197, 94, 0.15); overflow: hidden; }
        #tutorial-progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #22c55e, #10b981); border-radius: 999px; transition: width 0.35s ease; }

        /* ワークスペース本体 */
        #l { flex-grow: 1; width: 100%; position: relative; }
        #l .blocklyDiv, #l .blocklySvg, #l .blocklyWorkspace, #l .blocklyHtmlCanvas { width: 100% !important; height: 100% !important; }
        #l .blocklySvg { background: transparent !important; }
        /* ==== 下部アクションバー (リセット / あきらめる / ヒント / 正解チェック) ==== */
        .action-bar-container {
          position: fixed;
          bottom: var(--action-bar-bottom, 26px);
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: var(--action-bar-gap, 14px);
          padding: var(--action-bar-padding, 12px 18px);
          z-index: 1000;
          background: linear-gradient(135deg, rgba(8, 20, 44, 0.88), rgba(3, 10, 24, 0.75));
          border: 1px solid rgba(56, 189, 248, 0.3);
          border-radius: 22px;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
          backdrop-filter: blur(16px);
        }
        .action-btn {
          font-family: inherit;
          font-weight: 900;
          font-size: var(--action-btn-size, 15px);
          padding: var(--action-btn-padding, 12px 24px);
          border-radius: 14px;
          cursor: pointer;
          outline: none;
          border: 1px solid rgba(255, 255, 255, 0.08);
          color: #ffffff;
          letter-spacing: 0.02em;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
          transition: all 0.16s ease;
        }
        .action-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
        }
        .action-btn:active { transform: translateY(1px); }
        .btn-primary   { background: linear-gradient(135deg, #38bdf8, #0284c7); }
        .btn-danger    { background: linear-gradient(135deg, #ef4444, #b91c1c); }
        .btn-warning   { background: linear-gradient(135deg, #f59e0b, #b45309); color: #1f2937; }
        .btn-secondary { background: linear-gradient(135deg, #64748b, #334155); }