/* First scene: one shell grid, one scroll owner, and independent memory/code columns. */
.sorting-scene[hidden],
.memory-lessons[hidden],
[hidden] { display: none !important; }
body.sorting-scene-active { margin: 0; overflow: hidden; background-color:var(--wash); background-image:linear-gradient(rgba(60,55,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(60,55,42,.045) 1px,transparent 1px); background-size:40px 40px; }
body.sorting-scene-active > header,
body.sorting-scene-active > main { display: none !important; }
.sorting-scene {
  --accent: var(--blue);
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: 58px minmax(0,1fr) auto;
  overflow: hidden; color: var(--ink); background-color:var(--wash); background-image:linear-gradient(rgba(60,55,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(60,55,42,.045) 1px,transparent 1px); background-size:40px 40px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.scene-header { grid-row: 1; min-width: 0; display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(1480px,calc(100% - 40px)); margin:0 auto; border-bottom:1px solid var(--line); background:var(--paper); }
.scene-header-start { display:flex; align-items:center; gap:18px; min-width:0; }
.scene-brand { display:inline-flex; align-items:baseline; gap:10px; color:var(--ink); text-decoration:none; font-weight:750; font-size:20px; letter-spacing:-.04em; }
.scene-brand span { color:var(--muted); font-size:14px; font-weight:500; letter-spacing:0; }
.scene-top-actions { display:flex; align-items:center; gap:20px; }
.scene-course-link { color:var(--blue-deep); font-size:15px; font-weight:650; text-decoration:none; padding:8px 0; }
.scene-course-link:hover { color:var(--blue); }
.scene-course-link span { padding-left:4px; }
.scene-top-actions.page-switcher { gap:4px; }
.scene-top-actions .page-switcher-link { min-height:32px; padding:0 9px; }
.scene-top-actions .page-switcher-link[aria-current="page"] { color:var(--blue-deep); background:var(--blue-wash); }
.scene-main, .memory-lessons { grid-row:2; min-height:0; width:min(1480px,calc(100% - 40px)); margin:0 auto; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.scene-main { display:block; height:auto; max-width:none; }
.scene-main { box-sizing:border-box; padding:12px 16px 28px 0; }
.scene-kicker { margin:0 0 5px; color:var(--muted); font-size:15px; font-weight:600; letter-spacing:.03em; }
.scene-columns { display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; }
.scene-left, .memory-panel { min-width:0; }
.album-grid { position:relative; display:grid; grid-template-columns:repeat(auto-fit,96px); grid-auto-rows:118px; align-content:start; justify-content:center; gap:4px; width:100%; height:330px; min-width:0; overflow:hidden; isolation:isolate; }
.album-grid.is-floating { display:block; }
.song-card { box-sizing:border-box; min-width:0; width:96px; height:118px; display:grid; grid-template-rows:72px minmax(0,1fr); align-content:start; gap:2px; padding:4px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); text-align:left; cursor:pointer; box-shadow:0 1px 2px rgba(54,46,34,.06); transition:border-color .18s,background-color .18s,opacity .18s,box-shadow .18s; }
.album-grid.is-floating .song-card { position:absolute; left:0; top:0; margin:0; will-change:transform; }
.song-card:hover:not(:disabled), .song-card:focus-visible { border-color:var(--blue); background:var(--paper); box-shadow:0 1px 3px rgba(54,46,34,.08); }
.song-card:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.song-card:disabled { cursor:default; opacity:.88; }
.song-card.is-added { border-color:var(--line); }
.song-cover { display:block; width:100%; height:72px; overflow:hidden; background:var(--panel-tint); }
.song-cover svg, .song-cover-image, .song-cover-fallback { display:block; width:100%; height:100%; }
.song-cover-image { object-fit:contain; background:var(--panel-tint); }
.song-cover-fallback[hidden] { display:none; }
.song-copy { min-width:0; display:flex; flex-direction:column; gap:1px; padding:0 1px; overflow:hidden; }
.song-copy strong { display:block; min-height:0; overflow:hidden; color:var(--ink); font-size:16px; line-height:18px; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.song-copy span { display:block; min-width:0; min-height:0; overflow:hidden; color:var(--muted); font-size:14px; line-height:14px; white-space:nowrap; text-overflow:ellipsis; }
.queue-area { margin:0; padding:12px 0 0; border-top:1px solid var(--line); }
.queue-heading { display:flex; align-items:baseline; gap:12px; }
.queue-heading h2 { margin:0; font-size:22px; line-height:1.25; }
.queue-heading p { display:none; }
.queue-lane { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:7px; min-height:46px; margin:9px 0 0; padding:0; list-style:none; }
.queue-slot { min-width:0; min-height:46px; display:grid; align-content:center; justify-items:start; gap:2px; padding:5px 8px; border:1px dashed var(--line); border-radius:6px; background:var(--paper); color:var(--muted); font-size:14px; transition:background .2s,border-color .2s,opacity .2s; }
.queue-slot .queue-song-title { color:var(--ink); font-size:16px; line-height:1.2; font-weight:700; }
.queue-slot .queue-song-artist { color:var(--muted); font-size:14px; line-height:1.2; }
.queue-slot .queue-song-title { min-width:0; overflow-wrap:normal; word-break:normal; }
.queue-slot.has-remove { grid-template-columns:minmax(0,1fr) 28px; grid-template-rows:auto auto; }
.queue-slot.has-remove .queue-song-title, .queue-slot.has-remove .queue-song-artist { grid-column:1; }
.queue-delete { grid-column:2; grid-row:1 / span 2; align-self:center; width:28px; height:28px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); font-family:inherit; font-size:20px; line-height:1; cursor:pointer; }
.queue-delete:hover { background:var(--surface-hover); color:var(--red); }
.queue-slot.is-next { border-color:var(--blue); background:var(--blue-wash); color:var(--blue-deep); }
.queue-slot.is-filled { border-style:solid; border-color:var(--line); background:var(--paper); }
.queue-slot.is-released { opacity:.42; text-decoration:line-through; }
.queue-slot.is-empty { color:var(--muted); }
.queue-area.is-clearing .queue-slot.is-filled { opacity:.45; text-decoration:line-through; }
.queue-feedback { min-height:22px; margin:7px 0 0; color:var(--ink-soft); font-size:16px; }
.adt-actions, .scene-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.insert-position-label { display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:14px; }
.insert-position-label select { min-height:40px; max-width:145px; padding:0 24px 0 9px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:15px; line-height:1.2; }
.scene-actions { margin-top:8px; }
.scene-button { min-height:40px; padding:0 15px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:15px; font-weight:650; line-height:1; cursor:pointer; transition:background .18s,border-color .18s,color .18s,opacity .18s; }
.scene-button:hover:not(:disabled) { border-color:var(--blue); background:var(--surface-hover); }
.scene-button:focus-visible { outline:3px solid rgba(230, 107, 53, .2); outline-offset:2px; }
.scene-button:disabled { cursor:not-allowed; opacity:1; color:var(--muted); border-color:var(--line); background:var(--panel-tint); }
.scene-link-button.scene-course-link { min-height:0; padding:8px 0; border:0; border-radius:0; background:transparent; color:var(--blue-deep); font-family:inherit; font-size:15px; font-weight:650; line-height:1.3; }
.scene-link-button.scene-course-link:hover:not(:disabled) { border:0; background:transparent; color:var(--blue); }
.scene-primary { border-color:var(--blue); background:var(--blue); color:var(--paper); }
.scene-primary:hover:not(:disabled) { border-color:var(--blue-deep); background:var(--blue-deep); }
.scene-secondary { background:var(--paper); }
.sorting-scene.is-busy .song-card { pointer-events:none; }
.sorting-scene.is-busy .adt-actions button:not(#toggleScenePause) { pointer-events:none; }
.sorting-scene.is-view-transitioning .storage-mode-switch { pointer-events:none; }

.memory-panel { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); grid-template-rows:auto auto; align-items:start; column-gap:20px; row-gap:8px; min-width:0; padding:0 0 24px; border-top:1px solid var(--line); background:rgba(255,253,248,.70); }
.memory-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.storage-mode-switch { display:flex; gap:4px; align-items:center; }
.storage-mode-button { min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink-soft); font-family:inherit; font-size:15px; line-height:1.2; font-weight:600; cursor:pointer; }
.storage-mode-button.is-active { border-color:transparent; background:var(--blue-wash); color:var(--blue-deep); }
.memory-view-button { min-height:34px; padding:0 9px; border:1px solid var(--line); border-radius:5px; background:var(--paper); color:var(--ink-soft); font-family:inherit; font-size:14px; line-height:1.2; font-weight:600; cursor:pointer; white-space:nowrap; }
.memory-view-button:disabled { cursor:not-allowed; color:var(--muted); background:var(--panel-tint); border-color:var(--line); }
.memory-view-button:hover { border-color:var(--blue); background:var(--surface-hover); }
.memory-view-button:focus-visible { outline:3px solid rgba(230, 107, 53, .2); outline-offset:2px; }
.storage-mode-button:focus-visible, .insert-position-label select:focus-visible, .queue-delete:focus-visible { outline:3px solid rgba(230, 107, 53, .2); outline-offset:2px; }
.memory-detail { margin:0; color:var(--ink-soft); font-size:14px; }
.memory-detail summary { width:fit-content; min-height:28px; display:flex; align-items:center; cursor:pointer; font-size:14px; line-height:1.2; font-weight:650; }
.memory-detail p { margin:7px 0; line-height:1.5; }
.memory-detail code { color:var(--blue-deep); }
.memory-regions { position:relative; grid-column:1; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-items:start; gap:6px; min-width:0; }
.memory-visual-tools { grid-column:1/-1; grid-row:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; }
.memory-help { min-width:0; }
.memory-help > summary { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:5px; background:var(--paper); white-space:nowrap; }
.memory-help[open] { position:relative; z-index:5; }
.memory-help-content { position:absolute; top:calc(100% + 5px); left:0; z-index:8; box-sizing:border-box; width:min(620px,calc(100vw - 40px)); max-height:min(62vh,520px); overflow:auto; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--paper); box-shadow:0 5px 18px rgba(54,46,34,.12); }
.memory-help-content .trace-definitions { max-height:220px; }
.memory-action { grid-column:2; grid-row:1; min-width:0; margin:0; overflow:hidden; color:var(--ink); font-size:17px; line-height:1.3; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }
.memory-regions.is-full-memory { grid-template-columns:80px minmax(0,1fr); }
.memory-regions.is-full-memory .address-rail { grid-column:1; grid-row:2; }
.memory-regions:not(.is-full-memory) .memory-space { grid-column:1; grid-row:2; }
.memory-regions.is-full-memory .memory-space { grid-column:2; grid-row:2; }
.address-rail { position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; min-width:0; color:var(--muted); text-align:right; font-size:14px; line-height:1.35; }
.memory-regions:not(.is-full-memory) > .address-rail { position:absolute; top:42px; right:auto; bottom:0; left:0; width:80px; opacity:0; pointer-events:none; }
.memory-regions.is-full-memory > .address-rail { position:relative; top:auto; right:auto; bottom:auto; left:auto; width:auto; opacity:1; }
.address-high { padding-top:7px; white-space:nowrap; }
.address-low { max-width:100%; padding-bottom:3px; white-space:normal; overflow-wrap:anywhere; font-size:13px; }
.address-low code { font:inherit; white-space:nowrap; }
.address-direction { position:absolute; right:0; color:var(--blue-deep); font-size:15px; font-weight:700; white-space:nowrap; }
.stack-direction { top:28%; }
.heap-direction { top:66%; }
.memory-space { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto; align-items:start; column-gap:36px; row-gap:6px; min-width:0; transition:background-color .2s ease,border-color .2s ease; }
.memory-space.is-full-view { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(210px,max-content) auto minmax(118px,max-content) auto auto; }
.memory-space.is-full-view { overflow:hidden; row-gap:0; border:1px solid var(--line); border-radius:6px; background:rgba(255,253,248,.64); }
.memory-space.is-full-view > .memory-region { border:0; border-radius:0; background:transparent; padding:10px 12px; }
.memory-space.is-full-view > .stack-region,
.memory-space.is-full-view > .free-region,
.memory-space.is-full-view > .heap-region,
.memory-space.is-full-view > .static-region { border-bottom:1px solid var(--line); }
.memory-space.is-full-view > .free-region { display:flex; align-items:center; justify-content:center; min-height:32px; background:var(--panel-tint); }
.memory-space.is-full-view > .heap-region { border-top:0; }
.memory-space.is-full-view > .static-region,
.memory-space.is-full-view > .code-region { justify-content:space-between; }
.memory-space.is-full-view > .stack-region { grid-column:1; grid-row:1; }
.memory-space.is-full-view > .free-region { grid-column:1; grid-row:2; }
.memory-space.is-full-view > .heap-region { grid-column:1; grid-row:3; }
.memory-space.is-full-view > .static-region { grid-column:1; grid-row:4; }
.memory-space.is-full-view > .code-region { grid-column:1; grid-row:5; }
.memory-links { position:absolute; z-index:3; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#memoryLinkPaths > path { fill:none; stroke:var(--pointer); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; marker-end:url(#memoryArrow); }
#memoryLinkPaths > path.is-active { stroke:var(--blue); }
#memoryLinkPaths > path.is-changing { stroke:var(--amber); stroke-width:1.9; }
#memoryLinkPaths > path.is-detached { stroke:var(--neutral-edge); stroke-dasharray:4 4; }
#memoryArrow path { fill:context-stroke; stroke:none; marker-end:none; }
.memory-region { position:relative; min-width:0; padding:6px 7px; border:1px solid var(--line); border-radius:6px; background:rgba(255,253,248,.68); }
.memory-region h3 { position:relative; z-index:2; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; margin:0 0 5px; color:var(--ink-soft); font-size:23px; line-height:1.2; }
.memory-region h3 span { margin-left:0; color:var(--muted); font-size:14px; font-weight:500; white-space:nowrap; }
.stack-region { grid-column:1; grid-row:1; align-self:start; overflow:visible; }
.memory-space:not(.is-full-view) > .heap-region { padding-right:72px; }
.memory-space.is-full-view > .stack-region,
.memory-space.is-full-view > .heap-region { padding-right:72px; }
.memory-space:not(.is-full-view) #stackFrameStatus { display:none; }
.main-frame, .add-frame { position:relative; z-index:2; padding:6px 7px; border-left:3px solid var(--blue); background:var(--panel-tint); }
.add-frame { margin-top:7px; border-left-color:var(--blue); background:var(--blue-wash); }
.add-frame[hidden] { display:none !important; }
.frame-title { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; color:var(--ink-soft); font-size:15px; }
.frame-title code { color:var(--ink); font-size:18px; font-weight:700; }
.frame-title span { color:var(--muted); font-size:14px; line-height:1.25; }
.frame-title b { white-space:nowrap; }
.main-frame > .frame-title { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:8px; row-gap:1px; }
.main-frame > .frame-title code { grid-column:1; grid-row:1 / span 2; }
.main-frame > .frame-title span { grid-column:2; grid-row:1; text-align:right; }
.main-frame > .frame-title .frame-address { grid-column:2; grid-row:2; justify-self:end; color:var(--muted); font:13px/1.15 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.stack-field { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:33px; padding:4px 5px; border-top:1px solid var(--line-soft); background:var(--code-bg); }
.stack-field span { color:var(--ink-soft); font-size:16px; }
.stack-field code { color:var(--muted); font-size:14px; }
.stack-field b { color:var(--ink); font-size:18px; overflow-wrap:anywhere; }
.main-frame > .frame-title { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 8px; margin-bottom:3px; }
.main-frame > .frame-title code { font-size:16px; white-space:nowrap; }
.main-frame > .frame-title span { margin-left:auto; font-size:13px; }
.main-frame > .frame-title .frame-address { font-size:12px; }
.main-frame .stack-field { min-height:28px; padding:2px 5px; }
.main-frame .stack-field span { flex:1 1 auto; min-width:0; font-size:15px; }
.main-frame .stack-field b { flex:0 0 auto; white-space:nowrap; overflow-wrap:normal; font-size:clamp(16px,1.15vw,18px); }
.main-frame .input-buffer { gap:5px; margin-top:3px; padding:3px 5px; }
.main-frame .input-buffer span { font-size:14px; }
.main-frame .input-buffer b { font-size:16px; }
.stack-field.is-active { background:var(--blue-wash); }
.stack-field.is-dangling { background:var(--red-wash); }
.pointer-anchor { position:absolute; left:-4px; top:50%; width:1px; height:1px; }
.main-frame { display:block; }
.sequence-memory { margin-top:8px; padding-top:7px; border-top:1px solid var(--line); }
.sequence-memory[hidden] { display:none !important; }
.sequence-memory-heading { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:5px; color:var(--blue-deep); font-size:16px; line-height:1.2; }
.sequence-base-anchor { position:absolute; left:2px; top:10px; width:1px; height:1px; }
.sequence-memory-heading strong { white-space:nowrap; }
.sequence-memory-heading span { color:var(--muted); font-size:14px; line-height:1.25; }
.sequence-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin:0; padding:0; list-style:none; }
.sequence-slot { position:relative; min-width:0; min-height:58px; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:5px 6px; border:1px solid var(--line); background:var(--paper); color:var(--ink); transition:background .2s,border-color .2s; }
.sequence-slot.is-active { border-color:var(--blue); background:var(--blue-wash); }
.sequence-slot.is-empty { color:var(--subtle); border-style:dashed; }
.sequence-slot-index { color:var(--muted); font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.sequence-slot-value { overflow:hidden; color:var(--ink); font-size:17px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.sequence-slot.is-stale .sequence-slot-value { color:var(--subtle); text-decoration:none; font-weight:500; font-size:.85em; }
.sequence-slot.is-stale .sequence-slot-cover { opacity:.4; filter:grayscale(1); }
.sequence-slot.is-stale { background:transparent; border-style:dashed; }
.sequence-allocation-note { line-height:1.4; overflow-wrap:anywhere; }
.sequence-slot-anchor { position:absolute; top:50%; width:1px; height:1px; }
.sequence-source-anchor { left:-2px; }
.sequence-target-anchor { right:-2px; }
.memory-panel.is-linked-mode .sequence-memory { display:none; }
.add-frame { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; }
.add-frame .frame-title { grid-column:1/-1; }
.add-frame .stack-field { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:5px; min-width:0; min-height:38px; padding:3px 4px; }
.add-frame .stack-field span { font-size:14px; line-height:1.2; }
.add-frame .stack-field b { max-width:60%; white-space:normal; font-size:clamp(16px,1.2vw,18px); line-height:1.15; text-align:right; overflow-wrap:anywhere; }
.memory-space:not(.is-full-view) .add-frame { grid-template-columns:minmax(0,1fr); }
.memory-space:not(.is-full-view) .add-frame .stack-field b { max-width:62%; white-space:nowrap; overflow-wrap:normal; }
#nameParameterField { display:flex; }
#nameParameterNote { color:var(--muted); font-size:14px; }
.input-buffer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; padding:5px 7px; border-top:1px solid var(--line); background:var(--wash); }
.input-buffer[hidden] { display:none !important; }
.input-buffer span { color:var(--muted); font-size:15px; }
.input-buffer b { color:var(--ink); font-size:18px; }
.input-buffer.is-active { background:var(--amber-wash); }
.free-region { grid-column:1/-1; grid-row:2; align-self:center; justify-self:stretch; min-height:18px; color:var(--muted); font-size:14px; line-height:1.3; text-align:center; }
.heap-region { grid-column:2; grid-row:1; align-self:start; overflow:visible; }
.memory-space:not(.is-full-view) > .heap-region { align-self:start; }
.heap-diagram { position:relative; min-width:0; padding:14px 0 0; container-type:inline-size; }
.heap-nodes { position:relative; display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.heap-node { position:relative; z-index:2; display:grid; grid-template-columns:80px minmax(0,1fr) minmax(0,1fr); gap:0; min-width:0; min-height:66px; margin:0; padding:5px 0; border:1px solid var(--line); border-radius:6px; background:var(--paper); opacity:1; transition:border-color .22s,background .22s; }
.memory-space:not(.is-full-view) .heap-node { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; min-height:0; padding:2px 0; }
.memory-space:not(.is-full-view) .heap-node > .node-address { grid-column:1; grid-row:1; justify-self:start; align-self:start; padding:0 7px 3px; }
.memory-space:not(.is-full-view) .heap-node > .name-field { grid-column:1; grid-row:2; }
.memory-space:not(.is-full-view) .heap-node > .next-field { grid-column:1; grid-row:3; }
.memory-space:not(.is-full-view) .heap-node .node-field + .node-field { border-left:0; border-top:1px solid var(--line-soft); }
.memory-space:not(.is-full-view) .node-address { padding:0 7px 1px; font-size:13px; line-height:16px; }
.memory-space:not(.is-full-view) .node-field { gap:1px; padding:2px 6px; }
.memory-space:not(.is-full-view) .node-field span { font-size:14px; line-height:18px; }
.memory-space:not(.is-full-view) .node-field b { font-size:18px; line-height:22px; }
.memory-space:not(.is-full-view) .heap-node.is-header .name-field span,
.memory-space:not(.is-full-view) .heap-node.is-header .name-field b { font-size:18px; line-height:22px; }
.heap-node.is-pending { border-color:var(--amber-bright); background:var(--amber-wash); }
.heap-node.is-active { border-color:var(--blue); background:var(--blue-wash); }
.heap-node.is-freeing { opacity:.45; border-color:var(--red); }
.heap-node.is-detached { opacity:.58; border-style:dashed; }
.heap-node.is-freed { background:var(--visited); }
.node-address { align-self:center; padding:0 5px; color:var(--muted); font:13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; font-style:normal; white-space:nowrap; }
.node-field { position:relative; z-index:2; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:3px 7px; background:var(--paper); }
.heap-node.is-pending .node-field { background:var(--amber-wash); }
.heap-node.is-active .node-field { background:var(--blue-wash); }
.heap-node.is-detached .node-field, .heap-node.is-freed .node-field { background:var(--visited); }
.node-field + .node-field { border-left:1px solid var(--line-soft); }
.node-field span { color:var(--muted); font-size:16px; line-height:1.15; }
.node-field b { color:var(--ink); font-size:21px; line-height:1.2; overflow-wrap:anywhere; }
.node-field code { color:var(--subtle); font-size:13px; }
.node-anchor, .node-target-anchor { position:absolute; top:50%; width:1px; height:1px; }
.node-anchor { right:-1px; }
.node-target-anchor { right:-1px; }
.next-anchor { position:absolute; right:0; top:50%; width:1px; height:1px; }
.heap-empty { margin:0; padding:4px 6px; color:var(--muted); font-size:17px; line-height:1.3; text-align:center; }
.heap-empty[hidden] { display:none !important; }
.memory-panel.is-array-mode .memory-space:not(.is-full-view) { grid-template-rows:auto auto auto; }
.memory-panel.is-array-mode .heap-region { min-height:0; }
.memory-panel.is-array-mode .heap-empty { padding:3px 4px; font-size:16px; }
@container (min-width:320px) {
  .memory-space:not(.is-full-view) .heap-node { grid-template-columns:80px minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto; }
  .memory-space:not(.is-full-view) .heap-node > .node-address { grid-column:1; grid-row:1; align-self:center; padding:0 4px; }
  .memory-space:not(.is-full-view) .heap-node > .name-field { grid-column:2; grid-row:1; }
  .memory-space:not(.is-full-view) .heap-node > .next-field { grid-column:3; grid-row:1; }
  .memory-space:not(.is-full-view) .heap-node .node-field + .node-field { border-top:0; border-left:1px solid var(--line-soft); }
}
.static-region { grid-column:1; grid-row:3; margin-top:0; }
.code-region { grid-column:2; grid-row:3; margin-top:0; }
.static-region, .code-region { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; padding:7px 9px; }
.static-region h3, .code-region h3 { margin:0; font-size:16px; }
.static-region span, .code-region span { color:var(--muted); font-size:14px; }
.trace-result { grid-column:1; grid-row:2; margin:0; color:var(--muted); font-size:17px; }
.trace-result b { color:var(--ink); font-size:21px; }
.scene-code { position:sticky; top:0; grid-column:2; grid-row:1; align-self:start; min-width:0; margin:0; padding:0 0 8px 18px; border-left:1px solid var(--line); }
.scene-code-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 8px; }
.scene-code-heading h3 { margin:0; font-size:20px; }
.scene-code-heading span { color:var(--muted); font-size:15px; }
.trace-code { position:relative; box-sizing:border-box; width:100%; min-width:0; min-height:420px; max-height:min(65vh,720px); overflow:auto; margin:0; padding:8px 0 16px; border:0; background:var(--code-bg); color:var(--ink); font:18px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; scrollbar-gutter:stable; scroll-padding-block:8px; }
.trace-code-line { position:relative; z-index:1; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:start; min-height:1.6em; white-space:normal; }
.trace-code-line .line-number { padding:0 9px 0 4px; color:var(--subtle); font:14px/28.8px ui-monospace,SFMono-Regular,Menlo,monospace; text-align:right; user-select:none; }
.trace-code-line .line-text { min-width:0; padding:0 10px 0 0; color:var(--ink); font:18px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:normal; overflow-wrap:normal; }
.trace-code-line .code-token { white-space:nowrap; }
.trace-code-highlight { position:absolute; z-index:0; top:0; left:0; right:0; display:none; background:var(--blue-wash); pointer-events:none; will-change:transform,height; }
.trace-code-line.is-current .line-text { color:var(--blue-deep); font-weight:650; }
.trace-teaching-overlay { position:fixed; z-index:150; inset:58px 0 72px; display:grid; place-items:center; padding:24px; background:rgba(244,240,230,.96); pointer-events:none; }
.trace-teaching-overlay[hidden] { display:none !important; }
.trace-teaching-content { width:min(900px,calc(100vw - 48px)); text-align:center; color:var(--ink); }
.trace-teaching-message { margin:0 0 14px; font-size:clamp(22px,3vw,32px); line-height:1.35; font-weight:650; text-wrap:balance; }
.trace-teaching-code { display:inline-block; max-width:100%; min-height:1.5em; margin:0; padding:2px 8px; color:var(--ink); font:clamp(18px,2vw,24px)/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.trace-teaching-code.is-typing::after { content:""; display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-.12em; background:#e66b35; }
.trace-teaching-code.is-typing.caret-hidden::after { opacity:0; }
.trace-teaching-overlay[data-phase="flying"] .trace-teaching-content { visibility:hidden; }
.trace-code-flight { position:fixed; z-index:160; margin:0; padding:0; overflow:hidden; color:var(--ink); font:18px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:normal; pointer-events:none; will-change:left,top,width,height,font-size; }
.trace-step-label { color:var(--muted); }
.trace-definitions { overflow:auto; max-height:260px; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; }
.memory-flight { position:fixed; z-index:150; pointer-events:none; padding:3px 8px; border-radius:4px; background:var(--blue-wash); color:var(--blue-deep); box-shadow:0 0 0 1px rgba(230, 107, 53, .16); font-size:19px; font-weight:750; white-space:nowrap; transform:translate(-50%,-50%); }

.scene-playback { grid-row:3; display:flex; justify-content:center; width:100%; padding:8px 16px max(8px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper); }
.trace-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
.scene-playback > .trace-controls { width:min(100%,1120px); }
.trace-controls .scene-button { min-height:40px; padding-inline:15px; font-size:15px; }
.trace-controls .scene-button:disabled { cursor:not-allowed; opacity:1; color:var(--muted); border-color:var(--line); background:var(--panel-tint); }
.scene-playback #tracePlay:disabled { color:var(--muted); border-color:var(--line); background:var(--panel-tint); }
.trace-controls #tracePlay { min-width:84px; }
.trace-controls .trace-progress { flex:1 1 170px; min-width:105px; max-width:420px; margin:0 3px; }
.trace-progress-count { min-width:48px; color:var(--ink-soft); font-size:14px; font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap; }
.scene-memory-view .scene-main, .scene-memory-view .scene-playback { display:none; }
.scene-memory-view .memory-lessons { display:block; }

.memory-lessons { padding:18px 0 32px; }
.lessons-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.lessons-heading h1 { margin:0; font-size:32px; letter-spacing:-.035em; }
.lessons-heading .scene-kicker { margin:0 0 4px; }
.lesson-picker { display:flex; align-items:center; padding:12px 0 9px; border-bottom:1px solid var(--line); }
.lesson-picker-label { display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:15px; font-weight:600; }
.lesson-picker-select { min-width:min(300px,70vw); min-height:40px; padding:0 36px 0 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.lesson-picker-select:focus-visible { outline:3px solid rgba(230, 107, 53, .2); outline-offset:2px; }
.lesson-workspace { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr); gap:22px; margin-top:16px; align-items:start; }
.lesson-visual, .lesson-code-panel { min-width:0; }
.lesson-visual-heading h2 { margin:0; font-size:25px; }
.lesson-visual-heading p { margin:5px 0 0; color:var(--ink-soft); font-size:16px; }
.lesson-drawing { min-height:390px; margin-top:12px; padding:12px 0; overflow:auto; border-block:1px solid var(--line); background:transparent; }
.lesson-svg { display:block; width:100%; height:100%; min-height:0; }
.lesson-action { min-height:28px; margin:10px 0 0; color:var(--ink); font-size:20px; font-weight:650; }
.lesson-code-panel { min-width:0; padding-left:18px; border-left:1px solid var(--line); }
.lesson-code-panel .trace-code { min-height:280px; max-height:560px; }
.lesson-code-panel .trace-code { position:relative; scroll-behavior:auto; }
.lesson-code-highlight { position:absolute; z-index:0; top:8px; left:0; right:0; display:none; background:var(--blue-wash); pointer-events:none; }
.lesson-code-panel .trace-code-line { position:relative; z-index:1; background:transparent; }
.lesson-code-panel .trace-code-line.is-current { background:transparent; color:var(--blue-deep); }
.lesson-cell.is-motion-target rect { stroke:var(--blue); stroke-width:3; }
.lesson-cell.is-being-freed rect { stroke:var(--red); stroke-dasharray:5 4; }
.lesson-region { fill:var(--panel-tint); stroke:var(--line); stroke-width:1.5; }
.lesson-region-title { fill:var(--ink-soft); font:700 19px/1.2 Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.lesson-region-address { fill:var(--muted); font:14px ui-monospace,SFMono-Regular,Menlo,monospace; }
.lesson-cell-address { fill:var(--muted); font:14px ui-monospace,SFMono-Regular,Menlo,monospace; }
.lesson-cell-size { fill:var(--subtle); font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.lesson-cell rect { fill:var(--paper); stroke:var(--line); stroke-width:1.4; }
.lesson-cell.is-active rect { fill:var(--blue-wash); stroke:var(--blue); stroke-width:2.5; }
.lesson-cell.is-freed rect { fill:var(--visited); stroke:var(--neutral-edge); stroke-dasharray:5 4; }
.lesson-cell.is-placeholder rect { fill:var(--wash); stroke:var(--line); stroke-dasharray:4 4; }
.lesson-cell.is-placeholder .lesson-cell-label, .lesson-cell.is-placeholder .lesson-cell-value { fill:var(--subtle); }
.lesson-cell-label { fill:var(--ink-soft); font:16px Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.lesson-cell-value { fill:var(--ink); font:600 22px ui-monospace,SFMono-Regular,Menlo,monospace; }
.lesson-arrow path { fill:none; stroke:var(--pointer); stroke-width:2.5; }
.lesson-arrow.is-active path { stroke:var(--blue); }
.lesson-arrow text { fill:var(--muted); font:14px Inter,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; text-anchor:middle; }
.lesson-arrow.is-active text { fill:var(--blue-deep); }
.lesson-definitions { margin-top:9px; }
.lesson-definitions #lessonDefinitions { font-size:14px; line-height:1.5; }
.lesson-code-panel .trace-controls { margin-top:12px; }

@media (min-width:1200px) {
  .scene-columns { grid-template-columns:300px minmax(0,1fr); gap:20px; }
  .album-grid { height:362px; grid-template-columns:repeat(3,96px); grid-auto-rows:118px; gap:4px; }
  .scene-left .queue-lane { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1199px) {
  .scene-header, .scene-main, .memory-lessons { width:calc(100% - 32px); }
}
@media (min-width:800px) {
  .memory-panel { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }
  .trace-code { font-size:18px; }
}
@media (min-width:800px) and (max-width:1199px) {
  .memory-panel { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
}
@media (min-width:800px) and (max-width:1000px) {
  .heap-node { grid-template-columns:80px minmax(0,1fr); }
  .node-address { grid-row:1 / span 2; }
  .name-field, .next-field { grid-column:2; }
  .node-field + .node-field { border-left:0; border-top:1px solid var(--line-soft); }
}
@media (max-width:799px) {
  .scene-header, .scene-main, .memory-lessons { width:calc(100% - 24px); }
  .scene-main { padding-top:14px; }
  .album-grid { height:330px; }
  .memory-panel { grid-template-columns:minmax(0,1fr); row-gap:10px; }
  .memory-regions, .trace-result, .scene-code { grid-column:1; }
  .memory-regions { grid-row:1; }
  .trace-result { grid-row:2; }
  .scene-code { grid-row:3; }
  .memory-regions.is-full-memory { grid-template-columns:80px minmax(0,1fr); }
  .memory-space:not(.is-full-view) { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto auto; row-gap:12px; }
  .memory-space:not(.is-full-view) > .stack-region { grid-column:1; grid-row:1; }
  .memory-space:not(.is-full-view) > .free-region { grid-column:1; grid-row:2; }
  .memory-space:not(.is-full-view) > .heap-region { grid-column:1; grid-row:3; }
  .memory-space:not(.is-full-view) > .static-region { grid-column:1; grid-row:4; }
  .memory-space:not(.is-full-view) > .code-region { grid-column:1; grid-row:5; }
  .scene-code { position:static; border-left:0; border-top:1px solid var(--line); padding:12px 0 8px; }
  .trace-code { min-height:360px; max-height:560px; }
  .lesson-workspace { grid-template-columns:minmax(0,1fr); }
  .lesson-code-panel { padding:14px 0 0; border-left:0; border-top:1px solid var(--line); }
  .lesson-drawing { min-height:330px; }
  .scene-playback { padding-inline:5px; }
  .scene-playback .trace-controls { width:100%; gap:5px; }
  .scene-playback .scene-button { flex:1 1 auto; min-width:0; padding-inline:7px; font-size:14px; }
}
@media (max-height:800px) {
  .scene-main { padding-top:8px; padding-bottom:14px; }
  .queue-area { padding-top:8px; }
  .queue-lane { max-height:156px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
  .queue-lane:empty { min-height:0; margin-top:4px; }
  .queue-feedback:empty { display:none; min-height:0; margin:0; }
  .adt-actions { gap:6px; margin-top:6px; }
  .memory-panel { row-gap:5px; }
  .memory-visual-tools { gap:6px; }
  .memory-space:not(.is-full-view) { row-gap:4px; }
  .memory-region { padding:6px 7px; }
  .memory-region h3 { margin-bottom:4px; }
  .main-frame { padding:5px 7px; }
  .frame-title { margin-bottom:2px; }
  .stack-field { min-height:30px; padding:3px 5px; }
  .add-frame .stack-field { min-height:38px; }
  .sequence-memory { margin-top:4px; padding-top:4px; }
  .sequence-memory-heading { margin-bottom:3px; }
  .sequence-slots { gap:3px; }
  .sequence-slot { min-height:50px; padding:4px 5px; }
  .static-region, .code-region { padding:4px 8px; }
  .memory-action { margin:0 0 2px; }
  .scene-code-heading { margin-bottom:4px; }
}
@media (max-width:520px) {
  .scene-header { width:calc(100% - 20px); gap:8px; }
  .scene-header-start { gap:6px; }
  .scene-brand span { display:none; }
  .storage-mode-switch { gap:2px; }
  .storage-mode-button { min-height:34px; padding-inline:7px; font-size:13px; }
  .scene-top-actions { gap:7px; }
  .scene-course-link { font-size:13px; }
  .scene-top-actions.page-switcher { gap:2px; }
  .scene-top-actions .page-switcher-link { padding-inline:4px; font-size:12px; }
  .scene-link-button.scene-course-link { padding-inline:0; font-size:12px; }
  .storage-mode-button { min-height:34px; padding-inline:4px; font-size:12px; }
  .album-grid { height:360px; grid-template-columns:repeat(auto-fit,88px); grid-auto-rows:122px; }
  .song-card { width:88px; height:122px; grid-template-rows:72px minmax(0,1fr); padding:4px; gap:2px; }
  .song-cover { height:72px; }
  .song-copy strong { min-height:0; font-size:16px; line-height:18px; }
  .song-copy span { min-height:14px; font-size:14px; line-height:14px; }
  .scene-playback .scene-button { min-height:40px; padding-inline:4px; font-size:13px; }
  .memory-regions { gap:5px; }
  .memory-visual-tools { grid-template-columns:auto minmax(0,1fr) auto; gap:4px; }
  .memory-help > summary, .memory-view-button { min-height:32px; padding-inline:7px; font-size:13px; }
  .memory-action { font-size:15px; }
  .memory-regions.is-full-memory { grid-template-columns:64px minmax(0,1fr); }
  .memory-regions:not(.is-full-memory) > .address-rail { width:64px; }
  .memory-regions:not(.is-full-memory) { grid-template-columns:minmax(0,1fr); }
  .address-low code { white-space:normal; overflow-wrap:anywhere; }
  .heap-node { grid-template-columns:64px minmax(0,1fr) minmax(0,1fr); }
  .node-address { padding-inline:3px; font-size:12px; }
  .node-field { padding-inline:4px; }
  .node-field b { font-size:18px; }
  .stack-field span { font-size:15px; }
  .stack-field b { font-size:18px; }
  .add-frame { grid-template-columns:minmax(0,1fr); }
  .memory-region h3 { font-size:20px; }
  .memory-action { font-size:17px; }
  .trace-code-line { grid-template-columns:30px minmax(0,1fr); }
  .trace-code-line .line-number { padding-right:5px; font-size:12px; }
  .trace-code-line .line-text { font-size:16px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-button, .song-card, .queue-slot { transition:none !important; }
  .scene-main, .memory-lessons { scroll-behavior:auto !important; }
}

/* Static, readable layout when motion is reduced or the floating script is unavailable. */
.album-grid.is-static { display:grid; grid-template-columns:repeat(auto-fit,96px); grid-auto-rows:118px; align-content:start; justify-content:center; gap:4px; height:auto; min-height:0; max-height:362px; overflow:visible; }
.album-grid.is-static .song-card { position:relative; left:auto; top:auto; transform:none !important; margin:0; }
@media (max-width:520px) {
  .album-grid.is-static { grid-template-columns:repeat(auto-fit,88px); grid-auto-rows:122px; gap:6px; }
}

/* Compact song rows and array cells; preserve the pointer anchor elements. */
.album-grid,
.album-grid.is-static { grid-template-columns:repeat(auto-fit,84px); grid-auto-rows:100px; gap:5px; }
.album-grid.is-floating .song-card { width:84px; height:100px; }
.song-card { width:84px; height:100px; grid-template-rows:72px minmax(0,1fr); gap:2px; padding:4px; }
.song-cover { height:72px; }
.song-copy { justify-content:center; }
.song-copy strong { font-size:15px; line-height:18px; }
.song-card.is-in-playlist { visibility:hidden; opacity:0; pointer-events:none; }
.song-card.is-drag-source { opacity:0 !important; pointer-events:none; }
.song-card-drag-ghost { position:fixed; z-index:1000; left:0; top:0; margin:0; transform:none; opacity:.9; pointer-events:none; box-shadow:0 5px 18px rgba(49,42,31,.2); }
.memory-fragment-layer { contain:layout style; }
.memory-fragment { pointer-events:none; mix-blend-mode:multiply; }
.song-card { touch-action:none; }

.queue-lane { display:flex; flex-direction:column; align-items:stretch; gap:4px; min-height:0; }
.queue-slot.has-remove { box-sizing:border-box; min-height:42px; display:grid; grid-template-columns:28px 36px minmax(0,1fr) 32px; grid-template-rows:minmax(0,1fr); align-items:center; gap:7px; padding:3px 6px; }
.queue-song-index { grid-column:1; grid-row:1; color:var(--muted); font:14px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-align:center; }
.queue-song-cover { grid-column:2; grid-row:1; display:block; width:34px; height:34px; object-fit:contain; background:var(--panel-tint); }
.queue-slot.has-remove .queue-song-title { grid-column:3; grid-row:1; min-width:0; overflow:hidden; font-size:16px; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; }
.queue-slot.has-remove .queue-delete { grid-column:4; grid-row:1; }
.queue-slot.has-remove .queue-song-artist { display:none; }
.queue-lane.is-drop-target { box-shadow:inset 0 0 0 1px rgba(230,107,53,.4); border-radius:6px; background:rgba(230,107,53,.045); }
.queue-lane.is-drop-target .queue-slot.is-empty { color:transparent; border-color:var(--accent); background:rgba(230,107,53,.045); }
.queue-lane.is-drop-target .queue-slot.is-empty::after { content:"松开以添加到歌单"; color:var(--ink-soft); font-size:14px; }

.sequence-slots { grid-template-columns:minmax(0,1fr); gap:3px; }
.sequence-slot { min-height:38px; display:grid; grid-template-columns:52px minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; gap:6px; padding:3px 5px; }
.sequence-slot-index { grid-column:1; grid-row:1; }
.sequence-slot-content { grid-column:2; grid-row:1; min-width:0; display:flex; align-items:center; gap:7px; }
.sequence-slot-cover { display:block; flex:0 0 30px; width:30px; height:30px; object-fit:contain; background:var(--panel-tint); }
.sequence-slot-cover[hidden] { display:none !important; }
.sequence-slot-value { min-width:0; overflow:hidden; font-size:16px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.sequence-slot.is-empty { min-height:29px; }

/* Keep long addresses inside their own memory fields on narrow layouts. */
.memory-region, .memory-space, .main-frame, .add-frame, .stack-field, .node-field { min-width:0; }
.memory-region h3 { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; line-height:1.25; }
.memory-region h3 span { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.frame-title { min-width:0; flex-wrap:wrap; align-items:baseline; }
.frame-title > * { min-width:0; max-width:100%; }
.frame-title code { white-space:normal; overflow-wrap:anywhere; }
.frame-title b { white-space:normal; overflow-wrap:anywhere; text-align:right; }
.stack-field span, .stack-field b { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:normal; }
.memory-space:not(.is-full-view) .add-frame .stack-field b,
.add-frame .stack-field b { white-space:normal; overflow-wrap:anywhere; }
.main-frame .stack-field span { flex:1 1 auto; min-width:0; }
.main-frame .stack-field b { flex:0 0 auto; max-width:none; white-space:nowrap; overflow-wrap:normal; }
.add-frame #rosterPointerValue, .add-frame #elemValue, .add-frame #sValue,
.add-frame #pValue, .add-frame #qValue, .add-frame #savedNextValue,
.add-frame #newbaseValue { font-size:clamp(15px,1.2vw,18px); }
.node-field span, .node-field b { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:normal; }
.memory-space:not(.is-full-view) .node-field { min-width:0; }
.heap-node.is-header .name-field b { white-space:normal; overflow-wrap:anywhere; }
@media (max-width:520px) {
  .album-grid, .album-grid.is-static { grid-template-columns:repeat(auto-fit,84px); grid-auto-rows:100px; }
  .album-grid.is-floating .song-card, .song-card { width:84px; height:100px; }
  .queue-slot.has-remove { grid-template-columns:25px 32px minmax(0,1fr) 30px; gap:5px; }
  .queue-song-cover { width:30px; height:30px; }
  .sequence-slot { grid-template-columns:46px minmax(0,1fr); }
}

@media (min-width:800px) and (max-height:800px) {
  .album-grid { height:300px; }
  .queue-lane { max-height:134px; }
}

/* One playback button, with an explicit escape from an unfinished operation. */
.scene-playback { flex-direction:column; align-items:center; gap:5px; }
.trace-status { margin:0; color:var(--muted); font-size:13px; line-height:1.35; text-align:center; }
#toggleScenePause[hidden], #traceCancel[hidden] { display:none !important; }
#tracePlay { min-width:96px; }
@media (max-width:760px) {
 .trace-controls .trace-progress { order:2; flex-basis:65%; }
 .trace-progress-count { order:2; }
 .trace-status { font-size:12px; }
}
#traceReset[hidden] { display:none !important; }
/* Separate unavoidable wire crossings visually; no false junctions. */
#memoryLinkPaths > path { filter:url(#memoryLinkHalo); }
.memory-space { column-gap:44px; }
.memory-regions.is-full-memory .address-rail { align-self:stretch; }
#memoryLinkPaths > path.is-dangling { stroke:var(--red); stroke-dasharray:3 4; opacity:.65; }

/* Containment pass: content scrolls inside its pane, never behind playback. */
.sorting-scene { grid-template-rows:58px minmax(0,1fr) auto; }
.scene-playback { position:relative; z-index:10; box-sizing:border-box; }
.scene-main { scroll-padding-block:12px; }
.memory-action { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.4; }
.memory-visual-tools { align-items:start; }
.memory-view-button { grid-column:3; grid-row:1; }
.memory-help[open] { grid-column:1/-1; grid-row:2; }
.memory-help-content { position:static; width:100%; max-width:100%; max-height:260px; margin-top:6px; box-shadow:none; }
.memory-help-content pre { max-width:100%; overflow:auto; }
.memory-space.is-full-view .heap-node { grid-template-columns:96px minmax(0,1fr) minmax(0,1fr); }
.node-address { min-width:0; max-width:100%; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; font-size:12px; }
.main-frame .stack-field b { flex:0 1 auto; max-width:68%; white-space:normal; overflow-wrap:anywhere; text-align:right; }
.memory-space:not(.is-full-view) .add-frame .stack-field b { white-space:normal; overflow-wrap:anywhere; }
.input-buffer { min-width:0; flex-wrap:wrap; }
.input-buffer b { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.node-field b { font-size:clamp(17px,1.4vw,21px); }
.trace-code-line .line-text, .trace-code-line .code-token { white-space:pre-wrap; overflow-wrap:anywhere; }
.trace-code-line .line-number { line-height:inherit; }
.trace-teaching-overlay { inset:var(--teaching-top,58px) 0 var(--teaching-bottom,86px); overflow:auto; box-sizing:border-box; }
.trace-teaching-content { min-width:0; max-width:100%; }
@media (min-width:1100px) {
 .scene-main { overflow:hidden; padding:10px 0; }
 .scene-columns { height:100%; min-height:0; grid-template-columns:clamp(240px,21vw,290px) minmax(0,1fr); gap:14px; align-items:stretch; }
 .scene-left { min-height:0; overflow:auto; padding:2px 8px 12px 2px; scrollbar-gutter:stable; overscroll-behavior:contain; }
 .album-grid { height:300px; }
 .memory-panel { height:100%; min-height:0; box-sizing:border-box; overflow:hidden; padding:0; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; column-gap:12px; }
 .memory-regions { min-height:0; height:100%; overflow:auto; align-content:start; box-sizing:border-box; padding:0 6px 16px 0; scrollbar-gutter:stable; overscroll-behavior:contain; }
 .scene-code { position:relative; top:auto; align-self:stretch; min-height:0; height:100%; box-sizing:border-box; display:flex; flex-direction:column; padding:0 0 0 10px; overflow:hidden; }
 .scene-code-heading { flex:0 0 auto; flex-wrap:wrap; }
 .scene-code .trace-code { flex:1 1 0; min-height:0 !important; max-height:none !important; padding-bottom:18px; }
 .trace-result { grid-column:1/-1; padding:5px 8px; border-top:1px solid var(--line); }
}
@media (max-width:1099px) {
 .scene-main { overflow:auto; padding-bottom:24px; }
 .scene-columns { grid-template-columns:minmax(0,1fr); }
 .scene-left { display:grid; grid-template-columns:minmax(230px,1fr) minmax(0,1fr); gap:16px; align-items:start; }
 .queue-area { border-top:0; padding-top:0; }
 .album-grid { height:290px; }
 .memory-panel { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
}
@media (max-width:799px) {
 .scene-left { display:block; }
 .queue-area { padding-top:10px; border-top:1px solid var(--line); }
 .memory-panel { grid-template-columns:minmax(0,1fr); }
 .scene-code { min-width:0; }
 .memory-space.is-full-view .heap-node { grid-template-columns:minmax(0,1fr); }
 .memory-space.is-full-view .heap-node > .node-address { grid-column:1; grid-row:1; }
 .memory-space.is-full-view .heap-node > .name-field { grid-column:1; grid-row:2; }
 .memory-space.is-full-view .heap-node > .next-field { grid-column:1; grid-row:3; border-left:0; border-top:1px solid var(--line-soft); }
}
.song-card { grid-template-rows:64px minmax(0,1fr); }
.song-cover { height:64px; }
.song-copy strong { font-size:13px; line-height:14px; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
@media (min-width:1100px) {
 .scene-left .queue-lane { max-height:none; overflow:visible; }
}
.main-frame .stack-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
.main-frame .stack-field b { max-width:none; white-space:nowrap; overflow-wrap:normal; font-size:clamp(14px,1.1vw,17px); }
.main-frame .stack-field span { font-size:14px; }
@media (min-width:1100px) and (max-width:1350px) {
 .trace-code-line .line-text { font-size:16px; line-height:1.6; }
 .trace-code-line { min-height:25.6px; }
 .trace-code-line .line-number { font-size:12px; line-height:25.6px; }
}
.scene-left::-webkit-scrollbar, .memory-regions::-webkit-scrollbar, .trace-code::-webkit-scrollbar { width:7px; height:7px; }
.scene-left::-webkit-scrollbar-thumb, .memory-regions::-webkit-scrollbar-thumb, .trace-code::-webkit-scrollbar-thumb { border-radius:5px; background:var(--line); }
.scene-left, .memory-regions, .trace-code { scrollbar-color:var(--line) transparent; scrollbar-width:thin; }

/* A single aligned operation panel, with one contextual input area. */
.playlist-tools { margin-top:12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); overflow:hidden; }
.operation-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:5px; gap:4px; border-bottom:1px solid var(--line); }
.operation-button { min-width:0; min-height:37px; padding:7px 8px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--ink-soft); font-size:14px; font-weight:600; line-height:1.3; font-family:inherit; cursor:pointer; }
.operation-button:hover:not(:disabled) { background:var(--panel-tint); }
.operation-button.is-selected { border-color:var(--line); background:var(--panel-tint); color:var(--ink); }
.operation-button:focus-visible, .tools-reset:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.operation-button:disabled { color:var(--subtle); cursor:default; }
.operation-context { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px; }
.operation-context .scene-button { min-height:36px; padding-inline:10px; font-size:14px; }
.operation-context .insert-position-label { flex:1 1 100%; justify-content:space-between; }
.operation-context select { min-width:0; min-height:36px; flex:1; max-width:140px; }
#startArrange { width:100%; }
.search-tools { display:block; }
.search-tools > label { display:block; margin-bottom:7px; font-size:14px; color:var(--ink-soft); }
.search-input-row { display:flex; align-items:stretch; gap:6px; min-width:0; }
.search-input-row input { box-sizing:border-box; width:0; min-width:0; flex:1; padding:7px 9px; border:1px solid var(--line); border-radius:5px; background:var(--code-bg); color:var(--ink); font-size:15px; line-height:1.4; font-family:inherit; }
.search-input-row input:focus { outline:2px solid var(--blue-wash); border-color:var(--blue); }
.search-input-row input[aria-invalid="true"] { border-color:var(--red); }
.search-input-row .scene-button { flex:0 0 auto; }
.search-feedback { margin:6px 0 0; font-size:13px; color:var(--red); line-height:1.4; }
.search-feedback:empty { display:none; }
.tools-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid var(--line-soft); }
.tools-footer span { color:var(--muted); font-size:12px; line-height:1.4; }
.tools-reset { padding:3px 0; border:0; background:transparent; color:var(--muted); font-size:13px; line-height:1.4; font-family:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.queue-slot.is-search-match { border-color:var(--blue); background:var(--blue-wash); }
.queue-area { position:relative; }
.playlist-drop-indicator { position:absolute; z-index:5; left:0; right:0; height:0; border-top:3px solid var(--blue); color:var(--blue-deep); pointer-events:none; text-align:right; font-size:12px; line-height:18px; text-shadow:0 1px var(--paper); }
.operation-button { font-size:14px; line-height:1.3; font-weight:600; }
.search-input-row input { font-size:15px; line-height:1.4; }
.tools-reset { font-size:13px; line-height:1.4; }
.playlist-tools { margin-top:10px; border-radius:7px; }
.operation-switch { grid-template-columns:repeat(4,minmax(0,1fr)); padding:4px; gap:2px; border-bottom:0; }
.operation-button { min-height:34px; padding:5px 3px; font-size:13px; }
.search-tools { padding:3px 7px 8px; }
.search-input-row .scene-button { min-height:34px; font-size:13px; padding-inline:10px; }
.search-input-row input { min-height:34px; padding:5px 8px; font-size:14px; }
.tools-footer { justify-content:flex-end; padding:3px 8px; }
.tools-reset { font-size:12px; }
/* Smaller covers leave space for a readable, gravity-driven pile. */
.album-grid.is-floating .song-card, .song-card { width:70px; height:86px; grid-template-rows:54px minmax(0,1fr); padding:3px; }
.album-grid, .album-grid.is-static { grid-template-columns:repeat(auto-fit,70px); grid-auto-rows:86px; }
.song-cover { height:54px; }
.song-copy strong { font-size:12px; line-height:13px; }
.album-grid { height:270px; }
.album-grid.is-floating .song-card, .song-card { grid-template-rows:50px minmax(0,1fr); }
.song-cover { height:50px; }
/* Reserve room for the rotated corners of a three-layer pile. */
.album-grid { height:300px; }

/* Visual safety gutter for rotated cards, shadows and drag feedback. */
.queue-area { margin-top:8px; }
.playlist-drop-indicator { left:4px; right:4px; border-top-width:2px; }

/* Keep the teaching header away from pane clipping edges. */
.trace-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.memory-visual-tools { box-sizing:border-box; padding:8px 8px 10px; gap:10px; align-items:center; }
.memory-action { font-size:16px; line-height:1.5; padding-block:3px; }
.memory-help > summary { min-height:32px; padding-inline:9px; }
.memory-view-button { min-height:32px; align-self:center; }
.scene-code-heading { box-sizing:border-box; min-height:50px; margin:0 0 8px; padding:10px 12px; gap:8px 12px; align-items:center; border-bottom:1px solid var(--line); }
.scene-code-heading h3 { font-size:18px; line-height:1.4; }
.scene-code-heading span { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
@media (max-width:1200px) {
 .memory-visual-tools { grid-template-columns:auto minmax(0,1fr); }
 .memory-action { grid-column:1/-1; grid-row:2; }
 .memory-view-button { grid-column:2; grid-row:1; justify-self:end; }
 .memory-help[open] { grid-row:3; }
 .scene-code-heading { padding:10px; }
}
/* Match cover gutters on three sides, without enlarging the card. */
.album-grid.is-floating .song-card,.song-card{width:58px;height:86px;padding:3px;grid-template-rows:50px minmax(0,1fr)}
.album-grid,.album-grid.is-static{grid-template-columns:repeat(auto-fit,58px)}
.song-cover{width:50px;height:50px}
.scene-header{box-sizing:border-box;width:100%;max-width:none;margin:0;padding-inline:14px}
.scene-header-start{gap:14px}.scene-brand{font-size:18px;letter-spacing:0;white-space:nowrap}
@media(max-width:600px){.scene-header{padding-inline:10px}.scene-header-start{gap:8px}.scene-brand{font-size:16px}}
/* Distinct working surfaces for memory and code, without extra headings. */
.memory-panel{background:transparent}
.memory-regions,.scene-code{border:1px solid #cfc5b5;border-radius:8px;background:#fffdf7;box-shadow:0 1px 2px rgba(54,46,34,.04)}
.memory-regions{padding:10px 10px 16px;scrollbar-gutter:stable}
.scene-code{padding:0 10px 10px;border-left:1px solid #cfc5b5}
.scene-code-heading{padding-inline:2px}
.album-grid{border:1px solid #d8cebf;border-radius:8px;background:rgba(255,253,247,.32);box-sizing:border-box}
.album-grid[data-motion="floating"]{border-color:#b8aa96;background:rgba(255,253,247,.6)}
/* Parameter values share one right edge; an empty annotation owns no space. */
#nameParameterNote:empty{display:none}
#nameParameterValue{margin-left:auto;text-align:right}
.memory-panel{border-top:0}
.song-card[data-song-id="hey-jude"] .song-copy strong{font-size:10px;line-height:12px}
.song-card[data-song-id="hey-jude"] .song-copy{padding:0}
.song-card[data-song-id="hey-jude"] .song-copy strong{font-size:9.5px;line-height:12px}
/* Controls and list form one playlist panel, in reading order. */
.queue-area{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:0;overflow:visible}
.queue-heading{padding:10px 10px 6px}.queue-heading h2{font-size:19px;margin:0}
.queue-area .playlist-tools{margin:0;border:0;border-radius:0;background:transparent;overflow:visible}
.queue-area .tools-footer{padding:5px 10px;border-top:0}
.queue-area .queue-lane{margin:0;padding:8px;border-top:1px solid var(--line);border-radius:0 0 8px 8px}
.queue-area .queue-feedback{padding-inline:10px}
.queue-area .playlist-drop-indicator{position:relative;left:auto;right:auto;top:auto;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:42px;margin:0;border:1px dashed #df986e;border-radius:5px;background:#faeee3;color:#a95a2c;font-size:13px;text-shadow:none;pointer-events:none;list-style:none}
.queue-area .playlist-drop-indicator[hidden]{display:none}
.queue-lane.is-drop-target{box-shadow:none;background:transparent}
.queue-lane.is-drop-target .queue-slot.is-empty{display:none}
/* Compact playlist chrome; reserve the height for actual songs. */
.queue-area .queue-heading{justify-content:space-between;align-items:center;padding:7px 9px 2px;gap:8px}
.queue-area .queue-heading h2{font-size:17px;line-height:24px}
.queue-area .queue-heading .tools-reset{font-size:12px;padding:3px 0;white-space:nowrap;text-decoration:none}
.queue-area .tools-footer{display:none}
.queue-area .operation-switch{padding:2px 5px 4px;gap:2px}
.queue-area .operation-button{min-height:30px;padding:4px 3px}
.queue-area .queue-lane{padding:6px;gap:4px}
.queue-area .queue-slot.is-empty{box-sizing:border-box;min-height:34px;padding:7px 9px;font-size:14px;line-height:20px;border:0;background:transparent}
.queue-area .queue-feedback:empty{display:none;min-height:0;margin:0}
.memory-space.is-full-view > .stack-region,.memory-space.is-full-view > .heap-region{padding-right:112px}
#memoryLinkPaths > path{stroke-linecap:butt}
.memory-space.is-full-view .add-frame{grid-template-columns:minmax(0,1fr)}
.memory-space.is-full-view .add-frame .stack-field{grid-column:1}
.sequence-slot.is-pending{border-style:solid;border-color:#d59b6f;background:#fbf0e4}
.sequence-slot.is-pending .sequence-slot-value{color:var(--ink);font-weight:700}
.sequence-slot.is-pending .sequence-slot-cover{opacity:1;filter:none}

.album-drag-hint { position:absolute; z-index:30; inset-inline:8px; top:42%; margin:0; padding:12px 8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); box-shadow:0 4px 16px rgba(108,77,44,.1); font-size:clamp(13px,1.1vw,16px); font-weight:600; line-height:1.5; text-align:center; pointer-events:none; animation:album-hint-pop 3.2s both; }
@keyframes album-hint-pop { 0% { opacity:0; transform:translateY(10px) scale(.96); } 12%,84% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-5px); } }
@media (prefers-reduced-motion:reduce) { .album-drag-hint { animation:none; } }