:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --text: #172033;
  --muted: #64748b;
  --line: #dbe4f0;
  --primary: #2f66f6;
  --primary-soft: #eef4ff;
  --stack: #ffca28;
  --stack-bg: #fffbea;
  --pc: #e8843d;
  --pc-bg: #fff5ec;
  --heap: #5ea1ff;
  --heap-bg: #eef6ff;
  --method: #94a9c0;
  --method-bg: #edf2f7;
  --pool: #b28cff;
  --pool-bg: #f6f0ff;
  --gc: #7bcf9b;
  --gc-bg: #effbf3;
  --danger: #ff4757;
  --copy: #3478f6;
  --ref-copy: #3478f6;
  --shadow: 0 8px 22px rgba(36, 55, 85, .08);
  --radius: 15px;
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, #edf4ff 0, transparent 30%),
    radial-gradient(circle at 100% 20%, #f3efff 0, transparent 26%),
    var(--bg);
}
button { font: inherit; }
.app-shell { width: min(1480px, calc(100% - 36px)); margin: 28px auto 70px; }
.card {
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero { padding: 26px 30px 22px; }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.hero-actions { display:flex; align-items:flex-start; justify-content:flex-end; gap:10px; flex:0 0 auto; }
.mode-switcher { min-width:300px; padding:9px 10px; border:1px solid #dbe4f0; border-radius:11px; background:#f8fafc; }
.mode-control-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mode-control-row > strong { color:#475569; font-size:11px; white-space:nowrap; }
.segmented-control { display:inline-flex; padding:3px; border-radius:9px; background:#e8eef6; }
.mode-btn { border:0; border-radius:7px; padding:6px 10px; color:#52637b; background:transparent; cursor:pointer; font-size:11px; font-weight:800; transition:.16s ease; }
.mode-btn:hover { color:#244fb8; }
.mode-btn.active { color:#fff; background:var(--primary); box-shadow:0 3px 8px rgba(47,102,246,.24); }
.mode-switcher small { display:block; margin-top:5px; color:#718096; font-size:9px; text-align:right; }
.help-navigation { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid #e5ebf3; }
.help-nav-btn { border:1px solid #cbd8e8; border-radius:9px; padding:8px 12px; color:#365172; background:#f8fbff; cursor:pointer; font-size:11px; font-weight:800; transition:.16s ease; }
.help-nav-btn:hover { color:#244fb8; border-color:#8eabdc; background:#eef4ff; }
.help-nav-btn.active { color:#fff; border-color:var(--primary); background:var(--primary); box-shadow:0 4px 10px rgba(47,102,246,.2); }
.eyebrow { margin: 0 0 4px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; }
.subtitle { margin: 9px 0 0; color: var(--muted); max-width: 850px; line-height: 1.8; }
.tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:12px; }
.tab-group { min-width:0; padding:10px; border:1px solid #dbe4f0; border-radius:12px; background:#f8fafc; }
.tab-group-title { margin:0 0 8px; color:#607087; font-size:11px; font-weight:850; letter-spacing:.04em; }
.tab-group-list { display:grid; gap:6px; }
.tab-btn {
  width:100%; border:1px solid #d5deea; background:#fff; border-radius:8px; padding:8px 9px;
  color:#233044; cursor:pointer; transition:.18s ease; font-weight:700; font-size:11px; line-height:1.35; text-align:left;
}
.tab-btn:hover { transform:translateY(-1px); border-color:#8eabdc; }
.tab-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 5px 12px rgba(47,102,246,.22); }
.supplement-group { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding:8px 10px; }
.supplement-group .tab-group-title { margin:0; white-space:nowrap; }
.supplement-group .tab-group-list { display:flex; flex-wrap:wrap; }
.supplement-group .tab-btn { width:auto; }
.topic-summary {
  margin-top: 18px; padding: 12px 14px; border-left: 4px solid #4c86ff; background: #f8fbff;
  color: #475569; line-height: 1.7;
}

.intro-view { margin-top:18px; padding:24px 28px 28px; }
.intro-view[hidden], .intro-page[hidden] { display:none; }
.intro-view-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid #e2e8f0; }
.intro-mode-badge { display:inline-flex; align-items:center; min-height:28px; padding:5px 10px; border-radius:999px; color:#2f54c7; background:#e9edff; font-size:11px; font-weight:850; }
.intro-page { max-width:1180px; margin:0 auto; }
.intro-page-head { max-width:830px; margin:28px auto 22px; text-align:center; }
.intro-page-head h2 { margin:3px 0 10px; font-size:clamp(25px,3vw,34px); letter-spacing:-.025em; }
.intro-page-head > p:last-child { margin:0; color:#52637b; font-size:14px; line-height:1.75; }
.intro-basics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.intro-basic-card { position:relative; min-height:205px; padding:20px; border:1px solid; border-radius:14px; }
.intro-basic-card h3 { margin:2px 0 10px; font-size:18px; }
.intro-basic-card h3 small { color:#52637b; font-size:12px; }
.intro-basic-card > strong { display:block; margin-bottom:8px; font-size:13px; }
.intro-basic-card p { margin:0; color:#52637b; font-size:12px; line-height:1.7; }
.intro-number { position:absolute; top:14px; right:16px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.75); font-size:11px; font-weight:900; }
.intro-stack-card { border-color:#efc84c; background:var(--stack-bg); }
.intro-heap-card { border-color:#9fc7ff; background:var(--heap-bg); }
.intro-reference-card { border-color:#ffb3bb; background:#fff4f5; }
.intro-relation-demo { display:grid; grid-template-columns:minmax(230px,1fr) 150px minmax(260px,1.2fr); align-items:center; gap:16px; margin-top:18px; padding:20px; border:1px solid #dce5f0; border-radius:14px; background:#fbfdff; }
.intro-memory-box { padding:14px; border:1px solid; border-radius:12px; }
.intro-memory-box > span { display:block; margin-bottom:9px; color:#52637b; font-size:11px; font-weight:850; }
.intro-stack-box { border-color:#edc334; background:var(--stack-bg); }
.intro-heap-box { border-color:#85baff; background:var(--heap-bg); }
.intro-variable-box, .intro-object-box { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:9px; background:#fff; box-shadow:0 3px 9px rgba(36,55,85,.08); }
.intro-variable-box { border:1px solid #efbd09; }
.intro-object-box { border:1px solid #6caaf8; }
.intro-variable-box small, .intro-object-box small { color:#64748b; font-size:10px; }
.intro-reference-arrow { position:relative; height:2px; color:var(--danger); background:currentColor; }
.intro-reference-arrow::after { content:""; position:absolute; right:-1px; top:-5px; border:6px solid transparent; border-left-color:currentColor; }
.intro-reference-arrow span { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); padding:2px 7px; border-radius:999px; color:#bd2633; background:#fff1f2; font-size:10px; font-weight:850; white-space:nowrap; }
.intro-relation-demo > p { grid-column:1 / -1; margin:0; color:#52637b; font-size:12px; text-align:center; }
.screen-guide { margin-top:18px; padding:20px; border:1px solid #dce5f0; border-radius:14px; }
.screen-guide h3 { margin:0 0 14px; font-size:17px; }
.screen-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.screen-guide-grid > div { display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:10px; min-width:0; padding:10px; border-radius:9px; background:#f8fafc; }
.screen-guide-grid strong { font-size:12px; }
.screen-guide-grid small { grid-column:2; color:#64748b; font-size:10px; }
.guide-swatch { grid-row:1 / 3; width:34px; height:22px; border-radius:5px; }
.code-swatch { background:#294f9c; box-shadow:inset 3px 0 0 #6da0ff; }
.stack-swatch { border:1px solid #e9b900; background:#ffcf20; }
.heap-swatch { border:1px solid #6caaf8; background:#d7eaff; }
.change-swatch { border:1px solid #7ca8f5; background:#fff; box-shadow:0 0 0 4px rgba(47,102,246,.16); }
.guide-line-swatch { position:relative; grid-row:1 / 3; width:34px; height:0; border-top:2px solid; }
.guide-line-swatch::after { content:""; position:absolute; right:-2px; top:-5px; border:4px solid transparent; border-left-color:currentColor; }
.ref-guide-line { color:var(--danger); }
.copy-guide-line { color:var(--copy); border-top-style:dashed; }
.intro-cta { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; padding:18px 20px; border-radius:14px; color:#fff; background:linear-gradient(120deg,#214ebd,#3674f7); }
.intro-cta p { margin:0; font-size:13px; line-height:1.6; }
.intro-start-btn { flex:0 0 auto; color:#214ebd; background:#fff; box-shadow:0 5px 12px rgba(20,45,105,.2); }

.jvm-map { display:grid; grid-template-columns:1fr 1.15fr; gap:16px; }
.jvm-map-group { overflow:hidden; border:1px solid #cdd9e6; border-radius:14px; background:#f8fafc; }
.jvm-map-group > header { padding:14px 16px; color:#fff; background:#516a86; }
.thread-map-group > header { background:#566879; }
.shared-map-group > header { background:#315b8e; }
.jvm-map-group > header span { display:block; font-size:16px; font-weight:850; }
.jvm-map-group > header p { margin:4px 0 0; opacity:.85; font-size:11px; }
.jvm-map-cards { display:grid; gap:10px; padding:12px; }
.jvm-map-cards article { padding:13px; border:1px solid #d5dfeb; border-radius:10px; background:#fff; }
.jvm-map-cards h3 { margin:0 0 6px; font-size:15px; }
.jvm-map-cards p { margin:0; color:#52637b; font-size:11px; line-height:1.6; }
.jvm-map-cards small { display:inline-flex; margin-top:9px; padding:3px 7px; border-radius:999px; color:#516277; background:#edf2f7; font-size:9px; font-weight:750; }
.map-kind-label { display:inline-flex; margin-bottom:7px; padding:3px 7px; border-radius:999px; color:#445b73; background:#eaf0f6; font-size:9px; font-weight:850; }
.map-heap-card { border-left:4px solid var(--heap) !important; }
.map-method-card { border-left:4px solid #879bb1 !important; }
.map-metaspace-card { border-left:4px solid #667d96 !important; background:#f4f7fa !important; }
.implementation-link { position:relative; display:grid; place-items:center; min-height:34px; color:#64748b; font-size:10px; font-weight:850; }
.implementation-link::before { content:""; position:absolute; top:-7px; bottom:-7px; left:50%; border-left:2px dashed #8294aa; }
.implementation-link span { position:relative; padding:3px 8px; border-radius:999px; background:#f8fafc; }
.jvm-deeper-note { margin-top:16px; border:1px solid #d5dfeb; border-radius:12px; background:#fbfcfe; }
.jvm-deeper-note summary { padding:13px 15px; cursor:pointer; color:#3f5877; font-size:12px; font-weight:850; }
.jvm-deeper-note[open] summary { border-bottom:1px solid #e1e8f1; }
.jvm-deeper-note > p { margin:0 16px 15px; color:#64748b; font-size:11px; }
.mirror-map { display:grid; grid-template-columns:1fr 130px 1fr; align-items:center; gap:12px; padding:16px; }
.mirror-map > div:not(.internal-map-link) { display:grid; gap:4px; padding:12px; border:1px solid #bdcce0; border-radius:9px; background:#fff; }
.mirror-map span, .mirror-map small { color:#64748b; font-size:10px; }
.mirror-map strong { font:800 12px ui-monospace, monospace; }
.internal-map-link { display:grid; place-items:center; color:#64748b; font-size:21px; }
.internal-map-link small { font-size:9px; font-weight:850; }

.panel-title > div { min-width:0; flex:1 1 auto; }
.panel-heading-row { display:flex; align-items:center; gap:8px; }
.panel-heading-row h2 { min-width:0; }
.term-help-btn { display:grid; place-items:center; flex:0 0 auto; width:21px; height:21px; border:1px solid #aebed2; border-radius:50%; padding:0; color:#536980; background:rgba(255,255,255,.72); cursor:pointer; font-size:11px; font-weight:900; line-height:1; transition:.16s ease; }
.term-help-btn:hover, .term-help-btn:focus-visible { color:#fff; border-color:var(--primary); background:var(--primary); outline:none; }

.help-dialog { width:min(620px,calc(100% - 30px)); max-height:min(82vh,760px); padding:0; overflow:auto; border:1px solid #cdd8e6; border-radius:16px; color:var(--text); background:#fff; box-shadow:0 24px 70px rgba(18,35,62,.28); }
.help-dialog::backdrop { background:rgba(20,32,50,.48); backdrop-filter:blur(2px); }
.dialog-head { position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px 14px; border-bottom:1px solid #e2e8f0; background:#fff; }
.dialog-head h2 { margin:5px 0 0; font-size:22px; }
.dialog-close { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:8px; color:#52637b; background:#eef2f7; cursor:pointer; font-size:21px; line-height:1; }
.dialog-close:hover { color:#1f3f84; background:#e0e9f7; }
.term-level-badge { display:inline-flex; padding:3px 7px; border-radius:999px; color:#3559ad; background:#eaf0ff; font-size:9px; font-weight:850; }
.term-help-dialog > p, .term-help-dialog > section { margin-left:20px; margin-right:20px; }
.term-help-short { margin-top:18px; color:#31445d; font-size:15px; font-weight:750; line-height:1.65; }
.term-help-dialog section { padding:12px; border-radius:10px; background:#f6f9fd; }
.term-help-dialog section h3 { margin:0 0 5px; font-size:11px; color:#52637b; }
.term-help-dialog section p { margin:0; color:#43536a; font-size:12px; line-height:1.6; }
.term-attention { color:#64748b; font-size:11px; line-height:1.6; }
.dialog-done { float:right; margin:6px 20px 20px; }

.glossary-dialog { width:min(860px,calc(100% - 30px)); }
.glossary-tools { position:sticky; top:81px; z-index:2; display:flex; align-items:end; gap:14px; padding:14px 20px 12px; border-bottom:1px solid #e6ebf2; background:#fff; }
.glossary-search-label { display:grid; flex:1 1 auto; gap:5px; color:#52637b; font-size:10px; font-weight:800; }
.glossary-search-label input { width:100%; border:1px solid #cbd7e6; border-radius:9px; padding:9px 11px; color:#26364b; background:#f9fbfd; font-size:13px; outline:none; }
.glossary-search-label input:focus { border-color:#6e9bea; box-shadow:0 0 0 3px rgba(47,102,246,.11); }
.glossary-detail-toggle { display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius:9px; color:#465a73; background:#f1f5f9; font-size:11px; font-weight:750; white-space:nowrap; }
.glossary-result-count { margin:12px 20px 0; color:#64748b; font-size:10px; }
.glossary-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:12px 20px 22px; }
.glossary-entry { padding:13px; border:1px solid #dce4ee; border-radius:10px; background:#fbfcfe; }
.glossary-entry-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.glossary-entry h3 { margin:0; font-size:14px; }
.glossary-entry p { margin:8px 0 0; color:#43536a; font-size:11px; line-height:1.55; }
.glossary-entry dl { margin:8px 0 0; padding-top:8px; border-top:1px dashed #d6e0eb; }
.glossary-entry dt { color:#64748b; font-size:9px; font-weight:850; }
.glossary-entry dd { margin:3px 0 0; color:#52637b; font-size:10px; line-height:1.5; }
.glossary-attention { display:block; margin-top:8px; padding-top:8px; border-top:1px dashed #d6e0eb; color:#64748b; font-size:9px; line-height:1.5; }
.glossary-attention strong { margin-right:6px; color:#49617b; }
.glossary-empty { grid-column:1 / -1; padding:30px; color:#738197; text-align:center; }
.example-switcher { display:flex; gap:8px; margin-top:12px; padding:6px; border:1px solid #dbe4f0; border-radius:11px; background:#f8fafc; }
.example-btn { flex:1 1 0; display:flex; align-items:center; gap:9px; border:1px solid transparent; border-radius:8px; padding:8px 11px; color:#52637b; background:transparent; cursor:pointer; text-align:left; transition:.16s ease; }
.example-btn > span { flex:0 0 auto; color:#4264b4; font-size:10px; font-weight:850; }
.example-btn > strong { font-size:12px; }
.example-btn:hover { border-color:#b8c9e3; background:#fff; }
.example-btn.active { border-color:#9bb8ee; color:#21489e; background:#eef4ff; box-shadow:0 3px 8px rgba(47,102,246,.12); }
.workbench { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 14px; margin-top: 18px; align-items: stretch; }
.code-card { height:420px; min-height:420px; overflow:hidden; background:#1f1f1f; border-color:#2b2b2b; }
.window-bar { height:38px; display:flex; align-items:center; gap:10px; padding:0 14px; background:#2b2b2b; color:#c7d5e9; font:600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.traffic { display: flex; gap: 7px; }
.traffic span { width:10px; height:10px; border-radius:50%; }
.traffic span:nth-child(1){ background:#ff5f57; } .traffic span:nth-child(2){background:#febc2e;} .traffic span:nth-child(3){background:#28c840;}
.step-mini { margin-left: auto; color: #8ea0b8; }
.code-view { height:382px; min-height:0; margin:0; padding:12px 14px 14px; overflow:auto; background:#1f1f1f; }
#codeView { display: block; min-width: max-content; }
.code-line {
  display:grid; grid-template-columns:32px 1fr; min-height:21px; align-items:center;
  border-radius:5px; padding:0 8px 0 0; transition:.18s ease;
}
.code-line.active { background: #294f9c; box-shadow: inset 3px 0 0 #6da0ff; }
.code-line.method-entry-active { background:#27384f; box-shadow:inset 3px 0 0 #8fb5e5; }
.code-line.thread-active { background:#3b3927; box-shadow:inset 3px 0 0 #f0b74b; }
.line-no { text-align:right; padding-right:10px; color:#72809a; user-select:none; font:11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.line-code { white-space:pre; color:#edf2f7; font:12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kw { color:#ff83c6; font-weight:700;} .type{color:#70d6ff;} .str{color:#a9e190;} .num{color:#ffd166;} .comment{color:#7e8da7;font-style:italic;} .method{color:#9ce6ff;}
.guide-column { height:420px; display:grid; grid-template-rows:minmax(0,1fr) auto auto; gap:8px; }
.guide-card { min-height:0; padding:14px; display:flex; flex-direction:column; overflow:hidden; }
.guide-head { display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; gap:12px; }
.guide-scroll-content { min-height:0; flex:1 1 auto; overflow-y:auto; padding-right:4px; scrollbar-gutter:stable; }
.step-pill { display:inline-flex; padding:5px 8px; border-radius:999px; color:#2f54c7; background:#e9edff; font-weight:800; font-size:11px; }
.event-badge { color:#596579; background:#f2f5f9; padding:5px 7px; border-radius:7px; font-size:10px; font-weight:700; }
.guide-card h2 { margin:11px 0 5px; font-size:18px; }
.guide-card p { margin:0; color:#43506a; line-height:1.55; font-size:13px; }
.step-changes { margin-top:9px; padding:8px 10px; border-radius:8px; background:#f4f8ff; border:1px solid #cdddf5; }
.step-changes strong { color:#315b96; font-size:11px; }
.step-changes ul { margin:5px 0 0; padding:0; list-style:none; }
.step-changes li { color:#43506a; font-size:11px; line-height:1.45; }
.step-changes li::before { content:"＋ "; color:#2f66f6; font-weight:900; }
.controls { min-height:56px; flex:0 0 auto; margin-top:auto; padding:12px 0 4px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; border-top:1px solid #e8edf4; }
.progress-track { height:7px; background:#eef2f8; border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; background:var(--primary); width:0; transition:width .25s ease; }
.btn { border:0; border-radius:8px; cursor:pointer; font-weight:800; padding:8px 12px; font-size:13px; transition:.16s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity:.42; cursor:not-allowed; }
.btn-primary { color:#fff; background:var(--primary); box-shadow:0 4px 9px rgba(47,102,246,.2); }
.btn-secondary { color:#334155; background:#e8eef6; }
.btn-ghost { color:#334155; background:#f2f6fb; border:1px solid #dbe4f0; }
.legend-card, .note-card { padding:10px 13px; }
.legend-card h3, .note-card h3 { margin:0 0 6px; font-size:12px; }
.legend-row { display:flex; align-items:center; gap:7px; margin:3px 0; font-size:12px; line-height:1.35; }
.legend-row small { color:var(--muted); font-size:10px; }
.legend-line.jvm-line { color:#64748b; border-top-color:#64748b; border-top-style:dashed; }
.jvm-line::before { content:""; position:absolute; left:-2px; top:-5px; border:4px solid transparent; border-right-color:currentColor; }
.legend-line { width:32px; height:0; border-top:2px solid; position:relative; flex:0 0 auto; }
.legend-line::after { content:""; position:absolute; right:-2px; top:-5px; border:4px solid transparent; border-left-color:currentColor; }
.ref-line { color:var(--danger); border-top-color:var(--danger); }
.copy-line { color:var(--copy); border-top-style:dashed; border-top-color:var(--copy); }
.ref-copy-line { color:var(--ref-copy); border-top-style:dashed; border-top-color:var(--ref-copy); }
.note-card p { margin:0; color:#596579; line-height:1.45; font-size:11px; }

.memory-grid { display:grid; grid-template-columns:minmax(310px,.8fr) minmax(0,1.7fr); gap:14px; margin-top:12px; align-items:start; }
.memory-grid.beginner-mode { grid-template-columns:minmax(310px,35fr) minmax(0,65fr); }
.memory-grid.beginner-stack-only { grid-template-columns:1fr; }
.memory-grid.beginner-stack-only .thread-column { grid-column:1 / -1; }
.memory-grid.beginner-mode .pool-panel:not([hidden]),
.memory-grid.beginner-mode .gc-panel:not([hidden]) { grid-column:1 / -1; }
.thread-column, .memory-right { display:grid; gap:12px; }
.memory-right[hidden] { display:none; }
.thread-column { align-content:start; }
.memory-panel { position:relative; border-radius:var(--radius); border:1px solid; padding:15px; min-height:180px; box-shadow:var(--shadow); overflow:hidden; }
.memory-panel[hidden], .legend-row[hidden] { display:none; }
.memory-grid.reflection-beginner .heap-panel { min-height:300px; }
.memory-grid.reflection-topic .gc-panel { grid-column:1 / -1; }
.memory-grid.list-reference-topic .heap-content { gap:24px; }
.memory-grid.copy-depth-topic .heap-content { display:grid; grid-template-columns:repeat(3,minmax(165px,1fr)); gap:14px 18px; }
.memory-grid.copy-depth-topic #copy-original { grid-column:1; grid-row:1; }
.memory-grid.copy-depth-topic #copy-person1 { grid-column:2; grid-row:1; }
.memory-grid.copy-depth-topic #copy-shallow { grid-column:3; grid-row:1; }
.memory-grid.copy-depth-topic #copy-deep { grid-column:1; grid-row:2; }
.memory-grid.copy-depth-topic #copy-person2 { grid-column:2; grid-row:2; }
.memory-grid.threads-topic .heap-content { display:grid; grid-template-columns:repeat(2,minmax(210px,1fr)); gap:14px 18px; }
.memory-grid.threads-topic #class-mirror-Worker { grid-column:1; grid-row:1; }
.memory-grid.threads-topic #class-mirror-Main { grid-column:2; grid-row:1; }
.memory-grid.threads-topic #thread-a { grid-column:1; grid-row:2; }
.memory-grid.threads-topic #thread-label-a-string { grid-column:2; grid-row:2; }
.memory-grid.threads-topic #thread-b { grid-column:1; grid-row:3; }
.memory-grid.threads-topic #thread-label-b-string { grid-column:2; grid-row:3; }
.pc-panel { background:var(--pc-bg); border-color:#f0b987; min-height:130px; }
.stack-panel { background:var(--stack-bg); border-color:#f1c94b; min-height:300px; }
.heap-panel { background:var(--heap-bg); border-color:#a8ccff; min-height:190px; }
.method-panel { background:var(--method-bg); border-color:#c6d1dd; min-height:175px; }
.pool-panel { background:var(--pool-bg); border-color:#d3baff; min-height:110px; }
.gc-panel { background:var(--gc-bg); border-color:#b0e3c3; min-height:110px; }
.panel-title { display:flex; align-items:center; gap:9px; border-bottom:1px solid rgba(70,90,120,.35); padding-bottom:8px; margin-bottom:10px; }
.panel-title h2 { margin:0; font-size:18px; }
.panel-title h2 span { color:#52637b; font-size:14px; font-weight:650; }
.panel-title p { margin:3px 0 0; color:#6c788a; font-size:12px; }
.panel-icon { font-size:18px; }
.memory-content { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; min-height:150px; position:relative; }
.heap-content { min-height:115px; }
.method-content { display:block; min-height:95px; }
.pc-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; min-height:65px; }
.empty-state { width:100%; min-height:130px; display:grid; place-items:center; color:#8ea0b8; font-style:italic; text-align:center; }
.pool-panel .memory-content, .gc-panel .memory-content { min-height:45px; }
.pool-panel .empty-state, .gc-panel .empty-state { min-height:45px; }

.pc-register {
  background:#fff; border:1px solid #efb27c; border-radius:10px; padding:12px;
  box-shadow:0 4px 10px rgba(117,72,33,.09);
}
.pc-register.state-waiting { border-color:#98a9e8; background:#f8f9ff; }
.pc-register.state-terminated { border-color:#cbd3de; background:#f7f8fa; }
.pc-register.is-inactive { opacity:.7; }
.pc-register-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pc-thread { display:flex; align-items:center; gap:7px; font:800 12px ui-monospace, monospace; color:#71421c; }
.pc-thread::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--pc); box-shadow:0 0 0 4px rgba(232,132,61,.14); }
.state-waiting .pc-thread::before { background:#687acb; box-shadow:0 0 0 4px rgba(104,122,203,.14); }
.state-terminated .pc-thread::before { background:#94a3b8; box-shadow:none; }
.pc-badge, .thread-state { color:#9a581f; background:#fff0df; border-radius:999px; padding:4px 7px; font-size:10px; font-weight:800; }
.state-waiting.pc-badge, .thread-state.state-waiting { color:#4e5fae; background:#e9edff; }
.state-terminated.pc-badge, .thread-state.state-terminated { color:#64748b; background:#e8edf3; }
.pc-frame-label { margin-top:8px; color:#776452; font:700 10px ui-monospace, monospace; }
.pc-location { margin-top:8px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; }
.pc-line { min-width:64px; text-align:center; color:#fff; background:var(--pc); border-radius:8px; padding:8px; font:800 12px ui-monospace, monospace; }
.pc-line.pc-native { background:#687acb; }
.state-terminated .pc-line { background:#94a3b8; }
.pc-instruction { min-width:0; color:#3d4655; font:700 12px/1.5 ui-monospace, monospace; overflow-wrap:anywhere; }
.pc-note { margin:9px 0 0; color:#8a6a50; font-size:11px; line-height:1.55; }
.stack-frame {
  width:100%; padding:11px; border:1px solid rgba(193,158,22,.48); border-left:4px solid #f0b800;
  background:rgba(255,255,255,.48); border-radius:8px; box-shadow:0 3px 8px rgba(148,119,0,.08);
}
.stack-frame + .stack-frame { margin-top:4px; }
.thread-stack-group { width:100%; padding:10px; border:1px solid rgba(171,139,24,.35); border-radius:9px; background:rgba(255,255,255,.34); }
.thread-stack-group + .thread-stack-group { margin-top:2px; }
.thread-stack-group.is-inactive { opacity:.62; }
.thread-stack-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.thread-stack-head strong { font:800 12px ui-monospace, monospace; color:#665400; }
.thread-stack-group .stack-frame { background:rgba(255,255,255,.62); }
.compact-empty { min-height:54px; font-size:12px; }
.frame-title { font:700 12px ui-monospace, monospace; margin-bottom:9px; color:#665400; }
.variable {
  background:#ffcf20; border:1px solid #edba00; border-radius:9px; padding:8px; margin-top:8px;
  box-shadow:0 3px 7px rgba(148,119,0,.14);
}
.variable-label { font:600 12px ui-monospace, monospace; color:#574800; }
.variable-value {
  margin-top:6px; border-radius:5px; background:#fffdf0; padding:8px 10px; text-align:center;
  font:700 13px ui-monospace, monospace; min-height:34px;
}
.heap-object, .class-card, .pool-string, .gc-object {
  background:#fff; border-radius:9px; border:1px solid; box-shadow:0 4px 10px rgba(67,84,110,.1); position:relative;
}
.heap-object { min-width:165px; border-color:#6caaf8; overflow:hidden; }
.class-mirror-object { min-width:210px; border-color:#779dca; background:#f8fbff; }
.mirror-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mirror-badge { padding:3px 6px; border-radius:999px; color:#285d96; background:rgba(255,255,255,.72); font:800 9px ui-sans-serif, sans-serif; }
.class-mirror-body { display:grid; gap:6px; padding:9px 10px 10px; }
.mirror-java-type { color:#265c9c; font:800 11px ui-monospace, monospace; }
.mirror-source-type { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 7px; border-radius:6px; background:#f1f6fc; font:10px ui-monospace, monospace; }
.mirror-source-type span { color:#64748b; font-family:ui-sans-serif, sans-serif; }
.mirror-source-type strong { color:#294f83; }
.mirror-beginner-description { margin:0; color:#52657d; font-size:11px; line-height:1.45; }
.mirror-target { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 7px; border-radius:6px; background:#eef6ff; font:11px ui-monospace, monospace; }
.mirror-target span { color:#64748b; }
.mirror-static-values { display:grid; gap:4px; padding:7px; border:1px solid #e8c85b; border-radius:6px; background:#fff9df; font:11px ui-monospace, monospace; }
.mirror-static-values > span { color:#806400; font-size:9px; font-weight:800; text-transform:uppercase; }
.mirror-static-values > strong { color:#5e4a00; }
.object-title { background:#73adf8; padding:9px 12px; font:700 13px ui-monospace, monospace; }
.object-fields { padding:10px; }
.object-field { display:flex; gap:9px; justify-content:space-between; border-radius:5px; padding:7px 8px; background:#f7fbff; margin-top:5px; font:12px ui-monospace, monospace; }
.object-field:first-child { margin-top:0; }

.method-area-map { display:grid; gap:8px; width:100%; }




.implementation-label { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:2px 3px 0; color:#52637b; font-size:12px; font-weight:800; }
.implementation-label small { color:#7b8796; font-size:9px; font-weight:650; }
.method-zone { padding:11px; border:1px solid; border-radius:10px; }
.method-zone > p { margin:5px 0 10px; color:#64748b; font-size:10px; line-height:1.5; }
.metaspace-zone { border-color:#9cb0c5; background:#e8eef4; }
.code-cache-zone { border-color:#b7a4df; background:#f2effa; }
.heap-mirror-zone { border-color:#93bdf1; background:#eef6ff; }
.runtime-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.runtime-chip { padding:5px 7px; border:1px solid #ad9ad4; border-radius:7px; color:#594681; background:#fff; font:10px/1.35 ui-monospace, monospace; }
.optimization-chip { border-color:#7fb69a; color:#28704a; background:#effaf4; }
.zone-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zone-title strong { font-size:13px; }
.zone-title span { padding:3px 6px; border-radius:999px; color:#53657a; background:rgba(255,255,255,.72); font-size:9px; font-weight:800; }
.class-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px; }


.metaspace-section { display:grid; gap:6px; padding:7px 8px; border:1px solid #aebdcd; border-radius:8px; background:#e8eef4; }
.metaspace-label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#52637b; font-size:10px; }
.metaspace-label strong { color:#34465c; font-size:11px; }
.metaspace-label .term-help-btn { margin-right:auto; }
.metaspace-label span { font-size:9px; font-weight:700; }




.class-card { min-width:0; border-color:#92a7bf; background:#dfe8f1; padding:10px; }
.class-mirror-object.is-focus, .class-card.is-focus { outline:3px solid rgba(47,102,246,.34); box-shadow:0 8px 20px rgba(47,102,246,.2); }
.class-mirror-object.is-context, .class-card.is-context { opacity:.58; filter:saturate(.65); }
.beginner-class-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:9px; }
.beginner-class-card { display:grid; gap:8px; padding:11px; border:1px solid #aebdcd; border-radius:9px; background:#f7fafc; }
.beginner-class-card > strong { font-size:13px; }
.beginner-shared-values, .beginner-class-items { display:grid; gap:5px; padding:8px; border-radius:7px; background:#fff; font:11px ui-monospace, monospace; }
.beginner-shared-values { border:1px solid #e8c85b; background:#fff9df; }
.beginner-shared-values > span, .beginner-class-items > span { color:#64748b; font:800 10px ui-sans-serif, sans-serif; }
.class-title { display:grid; gap:3px; border-bottom:1px solid #9fb0c2; padding:4px 3px 8px; }
.class-title strong { font-size:12px; }
.class-title span { color:#52637b; font:10px ui-monospace, monospace; }
.class-section { background:#fff; border-radius:5px; margin-top:6px; padding:7px; font:11px ui-monospace, monospace; }
.class-section strong { display:block; color:#14a45d; font-family:inherit; margin-bottom:5px; }
.pool-string { border-color:#b898ec; padding:11px 13px; font:700 13px ui-monospace, monospace; }
.pool-entry { display:grid; gap:3px; }
.pool-entry > span { color:#7655a7; font:800 9px ui-sans-serif, sans-serif; text-transform:uppercase; }
.pool-entry > strong { font:800 13px ui-monospace, monospace; }
.pool-entry > small { color:#78688f; font:9px ui-sans-serif, sans-serif; }
.gc-object { border-color:#7bcf9b; padding:11px 13px; font:700 13px ui-monospace, monospace; opacity:.62; }
.gc-candidate { display:grid; gap:6px; min-width:190px; border-style:dashed; }
.gc-object-title { color:#315f42; }
.gc-object-field { display:flex; justify-content:space-between; gap:12px; padding:6px 8px; border-radius:6px; background:#fff; }
.gc-object-status { color:#287a48; font-size:11px; }
.gc-candidate small { color:#547460; font:10px ui-sans-serif, sans-serif; }
.gc-object::after { content:"GC候補"; margin-left:8px; color:#27864b; font-size:11px; background:#e6f8ed; padding:3px 6px; border-radius:999px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.memory-chip { padding:7px 10px; border-radius:7px; background:#fff; border:1px solid #c9d5e3; font:12px ui-monospace, monospace; }
.just-created { animation: pop .38s ease; outline:3px solid rgba(47,102,246,.17); }
.step-change { animation:stepChangeGlow .8s ease-out; }
.step-change-arrow { animation:stepArrowGlow .75s ease-out; }
@keyframes stepChangeGlow { 0%{outline:3px solid rgba(47,102,246,.55);box-shadow:0 0 0 7px rgba(47,102,246,.16)} 100%{outline-color:transparent;box-shadow:none} }
@keyframes stepArrowGlow { 0%{opacity:.2;stroke-width:4} 100%{opacity:1;stroke-width:2.2} }
@keyframes pop { from { transform:scale(.93); opacity:.25;} to{transform:scale(1);opacity:1;} }

.arrow-layer { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50; overflow:visible; }
.ref-path, .copy-path, .ref-copy-path, .jvm-path { fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ref-path { stroke:var(--danger); marker-end:url(#arrowRef); }
.copy-path { stroke:var(--copy); stroke-dasharray:7 6; marker-end:url(#arrowCopy); }
.ref-copy-path { stroke:var(--ref-copy); stroke-dasharray:4 5; marker-end:url(#arrowRefCopy); }
.jvm-path { stroke:#64748b; stroke-width:1.75; stroke-dasharray:5 5; marker-start:url(#arrowJvm); marker-end:url(#arrowJvm); }
.jvm-link-label { fill:#64748b; stroke:rgba(255,255,255,.96); stroke-width:3px; paint-order:stroke; font:800 10px ui-sans-serif, sans-serif; }
.ref-marker { fill:var(--danger); } .copy-marker{ fill:var(--copy); } .ref-copy-marker{ fill:var(--ref-copy); } .jvm-marker{ fill:#64748b; }

.concept-card { margin-top:24px; padding:22px 24px; }
.concept-card h2 { margin:0 0 15px; font-size:19px; }
.concepts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }
.concepts > div { padding:14px; border:1px solid #e1e8f2; background:#fbfcfe; border-radius:10px; }
.concepts p { margin:7px 0 0; color:#64748b; line-height:1.65; font-size:14px; }
.accuracy-note { margin:16px 0 0; padding-top:14px; border-top:1px dashed #d3dce8; color:#778398; font-size:12px; line-height:1.7; }

@media (max-width: 1200px) {
  .tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .concepts { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 980px) {
  .tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workbench, .memory-grid { grid-template-columns:1fr; }
  .stack-panel { min-height:360px; grid-row:auto; }
  .code-card { height:380px; min-height:380px; }
  .code-view { height:342px; min-height:0; }
  .concepts { grid-template-columns:1fr; }
  .intro-basics, .jvm-map { grid-template-columns:1fr; }
  .screen-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .memory-grid.copy-depth-topic .heap-content { grid-template-columns:repeat(2,minmax(165px,1fr)); }
  .memory-grid.copy-depth-topic #copy-original,
  .memory-grid.copy-depth-topic #copy-person1,
  .memory-grid.copy-depth-topic #copy-shallow,
  .memory-grid.copy-depth-topic #copy-deep,
  .memory-grid.copy-depth-topic #copy-person2 { grid-column:auto; grid-row:auto; }
}
@media (max-width: 620px) {
  .app-shell { width:min(100% - 18px, 1480px); margin-top:10px; }
  .hero { padding:20px 16px; }
  .hero-top { display:block; }
  .hero-actions { margin-top:14px; display:grid; justify-content:stretch; }
  .mode-switcher { min-width:0; }
  .hero-top .hero-actions .btn { margin-top:0; }
  .tabs { grid-template-columns:1fr; }
  .help-navigation { display:grid; grid-template-columns:1fr 1fr; }
  .help-nav-btn { padding:9px 8px; }
  .supplement-group { grid-column:auto; display:block; }
  .supplement-group .tab-group-title { margin-bottom:8px; }
  .tab-btn { font-size:12px; padding:9px 12px; }
  .workbench { gap:14px; }
  .guide-card { min-height:300px; }
  .controls { grid-template-columns:1fr 1fr; }
  .progress-track { grid-column:1 / -1; grid-row:1; }
  .memory-panel { padding:14px; }
  .intro-view { padding:16px; }
  .intro-view-toolbar { align-items:stretch; }
  .intro-page-head { margin-top:22px; }
  .intro-relation-demo { grid-template-columns:1fr; }
  .intro-reference-arrow { width:2px; height:48px; margin:0 auto; }
  .intro-reference-arrow::after { right:-5px; top:auto; bottom:-3px; border-left-color:transparent; border-top-color:currentColor; }
  .intro-reference-arrow span { left:12px; bottom:auto; top:50%; transform:translateY(-50%); }
  .screen-guide-grid, .glossary-list { grid-template-columns:1fr; }
  .intro-cta { display:grid; }
  .intro-start-btn { width:100%; white-space:normal; }
  .mirror-map { grid-template-columns:1fr; }
  .glossary-tools { top:80px; display:grid; }
  .glossary-detail-toggle { white-space:normal; }
  .memory-grid.copy-depth-topic .heap-content { grid-template-columns:1fr; }
  .memory-grid.threads-topic .heap-content { grid-template-columns:1fr; }
  .memory-grid.threads-topic #class-mirror-Worker,
  .memory-grid.threads-topic #class-mirror-Main,
  .memory-grid.threads-topic #thread-a,
  .memory-grid.threads-topic #thread-label-a-string,
  .memory-grid.threads-topic #thread-b,
  .memory-grid.threads-topic #thread-label-b-string { grid-column:auto; grid-row:auto; }
}