:root{
    --ink:#0F241D;
    --ink-soft:#1C3A2E;
    --paper:#FBF8F1;
    --paper-dim:#F1ECDF;
    --gold:#C7962C;
    --gold-soft:#E7CE8C;
    --teal:#1F6F5C;
    --teal-soft:#DCEEE7;
    --red:#B0331F;
    --red-soft:#F6E3DF;
    --text:#20302A;
    --text-dim:#5B6E64;
    --line: rgba(15,36,29,0.14);
    --shadow: 0 12px 32px rgba(15,36,29,0.10);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:"Noto Sans TC",sans-serif;
    background:var(--paper-dim);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }
  .serif{font-family:"Noto Serif TC",serif;}
  .mono{font-family:"JetBrains Mono",monospace;}

  /* ===== Header ===== */
  header.hero{
    background:
      radial-gradient(1100px 500px at 85% -10%, rgba(199,150,44,0.18), transparent 60%),
      linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
    color:var(--paper);
    padding:56px 24px 40px;
    position:relative;
    overflow:hidden;
  }
  .hero-inner{max-width:1040px;margin:0 auto;position:relative;z-index:2;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;letter-spacing:0.14em;
    color:var(--gold-soft);
    border:1px solid rgba(231,206,140,0.35);
    padding:6px 14px;border-radius:999px;
    margin-bottom:20px;
  }
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-soft);}
  h1.title{
    font-size:clamp(28px,4vw,44px);
    line-height:1.25;margin:0 0 14px;
    font-weight:900;
  }
  .hero-sub{
    font-size:16px;line-height:1.8;color:rgba(251,248,241,0.78);
    max-width:640px;margin:0 0 28px;
  }
  .growth-wrap{
    display:flex;gap:40px;align-items:flex-end;flex-wrap:wrap;
  }
  .growth-chart{flex:0 0 auto;}
  .obj-list{
    flex:1 1 320px;
    background:rgba(251,248,241,0.06);
    border:1px solid rgba(251,248,241,0.14);
    border-radius:14px;
    padding:18px 22px;
    backdrop-filter:blur(2px);
  }
  .obj-list p.label{margin:0 0 10px;font-size:13px;letter-spacing:0.08em;color:var(--gold-soft);}
  .obj-list ul{margin:0;padding-left:18px;font-size:14px;line-height:1.9;color:rgba(251,248,241,0.9);}

  /* ===== Tabs ===== */
  nav.tabs{
    position:sticky;top:0;z-index:50;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 2px 10px rgba(15,36,29,0.05);
  }
  .tabs-inner{
    max-width:1040px;margin:0 auto;
    display:flex;gap:4px;padding:0 24px;overflow-x:auto;
  }
  .tab-btn{
    appearance:none;border:none;background:none;cursor:pointer;
    font-family:"Noto Sans TC",sans-serif;font-weight:700;font-size:14.5px;
    color:var(--text-dim);
    padding:16px 14px;
    border-bottom:3px solid transparent;
    white-space:nowrap;
    transition:color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{color:var(--ink);}
  .tab-btn.active{color:var(--ink);border-bottom-color:var(--gold);}
  .tab-num{color:var(--gold);margin-right:6px;font-family:"JetBrains Mono",monospace;font-size:12px;}

  main{max-width:1040px;margin:0 auto;padding:40px 24px 100px;}
  .panel{display:none;}
  .panel.active{display:block;animation:fade .35s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  h2.section-title{
    font-family:"Noto Serif TC",serif;font-weight:700;
    font-size:24px;margin:48px 0 18px;
    display:flex;align-items:baseline;gap:10px;
  }
  h2.section-title:first-child{margin-top:0;}
  h2.section-title .idx{color:var(--gold);font-family:"JetBrains Mono",monospace;font-size:16px;}
  p.lead{color:var(--text-dim);line-height:1.85;font-size:15.5px;}

  .card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px 24px;
    box-shadow:var(--shadow);
  }

  /* four layers */
  .layer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0;}
  @media (max-width:820px){.layer-grid{grid-template-columns:repeat(2,1fr);}}
  .layer-card{
    background:var(--paper);border:1px solid var(--line);border-radius:12px;
    padding:18px 16px;position:relative;overflow:hidden;
  }
  .layer-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--teal);
  }
  .layer-card b{display:block;font-family:"Noto Serif TC",serif;font-size:15.5px;margin-bottom:6px;}
  .layer-card span{font-size:13px;color:var(--text-dim);line-height:1.6;}

  /* tech table */
  table.tech-table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;}
  table.tech-table th{
    text-align:left;background:var(--ink);color:var(--paper);
    padding:11px 14px;font-weight:700;font-size:13px;letter-spacing:.03em;
  }
  table.tech-table th:first-child{border-radius:8px 0 0 0;}
  table.tech-table th:last-child{border-radius:0 8px 0 0;}
  table.tech-table td{padding:12px 14px;border-bottom:1px solid var(--line);}
  table.tech-table tr:last-child td{border-bottom:none;}
  table.tech-table tr:hover td{background:var(--paper-dim);}
  .tech-tag{
    display:inline-block;font-family:"JetBrains Mono",monospace;font-size:12.5px;
    font-weight:600;color:var(--teal);background:var(--teal-soft);
    padding:2px 8px;border-radius:6px;
  }

  /* IPO flow */
  .flow{display:flex;align-items:stretch;gap:0;margin:24px 0;flex-wrap:wrap;}
  .flow-step{
    flex:1 1 200px;background:var(--paper);border:1px solid var(--line);
    border-radius:12px;padding:18px 16px;text-align:center;position:relative;
  }
  .flow-step b{display:block;font-family:"Noto Serif TC",serif;font-size:15px;margin-bottom:6px;}
  .flow-step span{font-size:12.5px;color:var(--text-dim);}
  .flow-arrow{
    display:flex;align-items:center;justify-content:center;color:var(--gold);
    font-size:20px;padding:0 6px;flex:0 0 auto;
  }
  @media (max-width:760px){.flow{flex-direction:column;}.flow-arrow{transform:rotate(90deg);padding:4px 0;}}

  .formula-box{
    background:var(--ink);color:var(--paper);border-radius:14px;
    padding:26px 28px;margin:22px 0;position:relative;overflow:hidden;
  }
  .formula-box::after{
    content:"";position:absolute;right:-30px;top:-30px;width:160px;height:160px;
    background:radial-gradient(circle, rgba(199,150,44,0.25), transparent 70%);
  }
  .formula-box .f{
    font-family:"JetBrains Mono",monospace;font-size:clamp(18px,3vw,26px);
    color:var(--gold-soft);margin-bottom:10px;
  }
  .formula-box p{margin:4px 0;font-size:14px;color:rgba(251,248,241,0.82);line-height:1.7;}

  .warn-box{
    background:var(--red-soft);border:1px solid rgba(176,51,31,0.28);
    border-radius:12px;padding:16px 18px;margin:18px 0;
    display:flex;gap:12px;align-items:flex-start;
  }
  .warn-box .mark{
    flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--red);
    color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px;
  }
  .warn-box p{margin:0;font-size:14px;line-height:1.7;color:#5c1c11;}

  pre.code{
    background:var(--ink);color:#E8F3EC;border-radius:10px;
    padding:16px 18px;overflow-x:auto;font-family:"JetBrains Mono",monospace;
    font-size:13px;line-height:1.7;margin:14px 0;
  }
  pre.code .c1{color:#8fb89f;} /* comment */
  pre.code .kw{color:#E7CE8C;}
  pre.code .num{color:#8FC7E0;}

  /* error table */
  table.err-table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0;}
  table.err-table th{text-align:left;padding:10px 12px;background:var(--paper-dim);font-size:12.5px;letter-spacing:.03em;color:var(--text-dim);border-bottom:2px solid var(--line);}
  table.err-table td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top;}

  /* step list (folder setup / windows steps) */
  ol.step-list{margin:16px 0;padding-left:0;list-style:none;counter-reset:step;}
  ol.step-list li{
    counter-increment:step;position:relative;padding:10px 0 10px 40px;
    font-size:14.5px;line-height:1.75;border-bottom:1px dashed var(--line);
  }
  ol.step-list li:last-child{border-bottom:none;}
  ol.step-list li::before{
    content:counter(step);position:absolute;left:0;top:9px;
    width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--gold-soft);
    font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }

  .code-block-head{
    display:flex;justify-content:space-between;align-items:center;
    margin:22px 0 -4px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text-dim);
  }
  .code-block-head .fname{color:var(--teal);font-weight:600;}

  .kw-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
  .kw-chip{
    font-size:13px;padding:6px 13px;border-radius:999px;background:var(--paper);
    border:1px solid var(--line);color:var(--text);
  }

  .practice-group{margin:20px 0 28px;}
  .practice-group .g-label{
    display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.05em;
    padding:4px 12px;border-radius:999px;background:var(--teal-soft);color:var(--teal);margin-bottom:10px;
  }
  .practice-group ul{margin:0;padding-left:20px;font-size:14.5px;line-height:2;}

  .case-block{
    background:var(--paper);border:1px solid var(--line);border-radius:12px;
    padding:18px 20px;margin:16px 0;
  }
  .case-block h5{margin:0 0 8px;font-family:"Noto Serif TC",serif;font-size:15.5px;}
  .case-block p{margin:6px 0;font-size:14px;line-height:1.75;color:var(--text-dim);}

  table.data-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px;}
  table.data-table th{text-align:left;padding:9px 12px;background:var(--paper-dim);font-size:12.5px;color:var(--text-dim);border-bottom:2px solid var(--line);}
  table.data-table td{padding:9px 12px;border-bottom:1px solid var(--line);}

  .closing-note{
    background:var(--ink);color:var(--paper);border-radius:14px;padding:26px 28px;margin:36px 0 24px;
  }
  .closing-note p{margin:0 0 10px;font-size:14.5px;line-height:1.85;color:rgba(251,248,241,0.85);}
  .closing-note p:last-child{margin-bottom:0;font-style:italic;color:var(--gold-soft);}

  /* ===== Calculator demo ===== */
  .calc-frame-wrap{
    background:var(--paper);border:1px solid var(--line);border-radius:16px;
    box-shadow:var(--shadow);overflow:hidden;
  }
  .calc-frame-head{
    background:var(--ink);color:var(--gold-soft);font-family:"JetBrains Mono",monospace;
    font-size:12.5px;padding:10px 16px;display:flex;align-items:center;gap:8px;
  }
  .calc-frame-head .dot{width:9px;height:9px;border-radius:50%;background:rgba(251,248,241,0.25);}
  iframe.calc-frame{width:100%;height:640px;border:none;display:block;background:#f4f6f8;}

  /* ===== Quiz ===== */
  .quiz-progress{
    display:flex;align-items:center;gap:14px;margin-bottom:26px;
  }
  .quiz-bar{flex:1;height:8px;background:var(--paper-dim);border-radius:999px;overflow:hidden;}
  .quiz-bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));width:0%;transition:width .3s ease;}
  .quiz-score{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--text-dim);white-space:nowrap;}

  .q-card{
    background:var(--paper);border:1px solid var(--line);border-radius:14px;
    padding:22px 24px;margin-bottom:16px;box-shadow:var(--shadow);
  }
  .q-num{font-family:"JetBrains Mono",monospace;color:var(--gold);font-size:12.5px;margin-bottom:8px;}
  .q-text{font-size:15.5px;font-weight:700;line-height:1.6;margin-bottom:16px;}
  .q-opts{display:grid;gap:8px;}
  .q-opt{
    text-align:left;border:1px solid var(--line);background:var(--paper);
    border-radius:10px;padding:12px 14px;font-size:14px;cursor:pointer;
    font-family:"Noto Sans TC",sans-serif;color:var(--text);
    display:flex;gap:10px;transition:border-color .15s ease, background .15s ease;
  }
  .q-opt:hover:not(:disabled){border-color:var(--gold);background:var(--paper-dim);}
  .q-opt .letter{
    flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--paper-dim);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  }
  .q-opt.correct{border-color:var(--teal);background:var(--teal-soft);}
  .q-opt.correct .letter{background:var(--teal);color:#fff;}
  .q-opt.wrong{border-color:var(--red);background:var(--red-soft);}
  .q-opt.wrong .letter{background:var(--red);color:#fff;}
  .q-opt:disabled{cursor:default;}
  .q-explain{
    margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--paper-dim);
    font-size:13.5px;line-height:1.7;color:var(--text-dim);display:none;
  }
  .q-explain.show{display:block;}
  .quiz-done{
    text-align:center;padding:40px 20px;
  }
  .quiz-done .big{font-family:"Noto Serif TC",serif;font-size:40px;color:var(--ink);margin-bottom:8px;}
  .btn{
    appearance:none;border:none;border-radius:10px;
    background:var(--ink);color:var(--paper);font-weight:700;font-size:14.5px;
    padding:12px 22px;cursor:pointer;font-family:"Noto Sans TC",sans-serif;
  }
  .btn:hover{background:var(--ink-soft);}
  .btn.gold{background:var(--gold);color:var(--ink);}
  .btn.gold:hover{background:#b58726;}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}

  /* ===== Challenge ===== */
  .challenge-intro{
    background:var(--ink);color:var(--paper);border-radius:14px;padding:22px 24px;margin-bottom:26px;
  }
  .challenge-intro h3{font-family:"Noto Serif TC",serif;margin:0 0 8px;font-size:19px;color:var(--gold-soft);}
  .challenge-intro p{margin:0;font-size:14px;line-height:1.8;color:rgba(251,248,241,0.82);}

  .exercise{
    background:var(--paper);border:1px solid var(--line);border-radius:16px;
    margin-bottom:34px;overflow:hidden;box-shadow:var(--shadow);
  }
  .exercise-head{
    padding:20px 24px;border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .exercise-head h4{margin:0 0 4px;font-family:"Noto Serif TC",serif;font-size:17px;}
  .exercise-head p{margin:0;font-size:13.5px;color:var(--text-dim);}
  .tag{
    font-size:11.5px;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:999px;
  }
  .tag.easy{background:var(--teal-soft);color:var(--teal);}
  .tag.hard{background:var(--red-soft);color:var(--red);}

  .exercise-body{padding:22px 24px;}
  .goal-list{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.9;}
  .goal-list li{margin-bottom:2px;}

  textarea.editor{
    width:100%;min-height:340px;background:var(--ink);color:#E8F3EC;
    font-family:"JetBrains Mono",monospace;font-size:13px;line-height:1.65;
    border:none;border-radius:10px;padding:16px 18px;resize:vertical;
    tab-size:2;
  }
  .editor-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px;}
  .editor-label{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text-dim);}

  .run-btn-row{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap;}
  .status-chip{
    font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;
    display:none;align-items:center;gap:6px;
  }
  .status-chip.show{display:inline-flex;}
  .status-chip.running{background:var(--paper-dim);color:var(--text-dim);}
  .status-chip.pass{background:var(--teal-soft);color:var(--teal);}
  .status-chip.fail{background:var(--red-soft);color:var(--red);}

  .debug-output{
    margin-top:16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);display:none;
  }
  .debug-output.show{display:block;}
  .debug-output .row{
    padding:14px 16px;font-size:13.5px;line-height:1.75;border-bottom:1px solid var(--line);
  }
  .debug-output .row:last-child{border-bottom:none;}
  .debug-output .row.pass{background:var(--teal-soft);}
  .debug-output .row.fail{background:var(--red-soft);}
  .debug-output .row b{display:block;margin-bottom:4px;font-size:13px;}
  .debug-output .raw{
    font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--text-dim);
    margin-top:6px;padding:8px 10px;background:rgba(15,36,29,0.05);border-radius:6px;
  }

  iframe.sandbox-frame{width:0;height:0;border:none;position:absolute;left:-9999px;}

  details.hint{margin-top:14px;}
  details.hint summary{cursor:pointer;font-size:13px;color:var(--teal);font-weight:700;}
  details.hint .hint-body{
    margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--text-dim);
    background:var(--paper-dim);padding:12px 14px;border-radius:8px;
  }

  footer{
    text-align:center;padding:36px 24px;color:var(--text-dim);font-size:13px;
    border-top:1px solid var(--line);
  }