/* Plain dark surfaces; legacy glass-* hooks also drive editing and gravity. */
:root { --page-width: 66.25rem; --glass-fill: rgba(9, 13, 16, .94); --glass-edge: rgba(213, 220, 226, .22); --pink: #ff78bd; }
body { font-size: 1rem; line-height: 1.6; }
@font-face { font-family: Charis; src: url('../fonts/charis/Charis-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Charis; src: url('../fonts/charis/Charis-Italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: Charis; src: url('../fonts/charis/Charis-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: Charis; src: url('../fonts/charis/Charis-BoldItalic.woff2') format('woff2'); font-style: italic; font-weight: 700; font-display: swap; }
.page-shell { justify-content: flex-start; }
.profile-panel, .music-note, .project-panel { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; gap: 24px; align-items: start; }
.profile-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.page-section-label { grid-column: 1 / -1; width: fit-content; max-width: 100%; margin: 0; padding: 8px 12px; border-radius: 7px; background: #090d10eb; color: var(--text); font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.page-section-divider { --glass-edge: #776c85; --pane-pad: 0px; position: relative; isolation: isolate; width: 100%; height: 1px; min-height: 1px; margin: 12px 0; border: 0; background: #776c85; }
.page-section-divider[data-pane-ready] { background: transparent; }
.domain-note { grid-column: 1 / -1; }
.domain-note h3 { margin: 0 0 12px; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.domain-note p { margin: 0; color: var(--muted); }
.domain-note p + p { margin-top: 10px; }
.glass-pane { position: relative; isolation: isolate; min-width: 0; padding: 30px; border: 1px solid var(--glass-edge); border-radius: 8px; background: var(--glass-fill); }
.about, .work { margin: 0; padding: 30px; }
.work { border-left: 1px solid var(--glass-edge); }
h1 { font-size: clamp(2.75rem, 4.8vw, 3.6rem); }
.wordmark { font-size: 1.5rem; min-height: 44px; }
.brand-mark { width: 38px; height: 38px; }
.bio, .music-copy p, .music-tools p, .project-panel p, .project-panel li, .project-panel dd, .example-result { font-size: 1rem; line-height: 1.6; }
.bio { max-width: 55ch; }
.bio, .music-copy p:not(.technique-references), .music-tools p, .domain-note p, .project-panel p:not(.build-label):not(.compatibility-note), .project-panel li, .project-panel dd, .error-message {
  font-family: Charis, Georgia, serif; font-size: 1rem; line-height: 1.65;
}
.project-panel .shortcut-list p { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: .8125rem; line-height: 1.6; }
.profile-link, .project-description, .player-heading > span, .section-heading > span, .tool-type, .tool-count, .work-note, .build-label, .paste-comparison figcaption, .project-back { font-size: .8125rem; line-height: 1.6; }
.profile-link { gap: 10px; }
.profile-links { gap: 0 20px; }
.section-heading h2, .project-title, .player-heading h2, .player-heading h3, .music-tools h3, .tool-link { font-size: 1rem; }
.section-heading > span { letter-spacing: .03em; }
.project-copy { min-width: 0; gap: 3px; }
.project-link { min-height: 88px; gap: 14px; }
.project-icon { width: 38px; height: 38px; }
.project-icon svg { width: 23px; height: 23px; }
.extensions, .games { margin-top: 24px; }
.work-note { padding-top: 20px; }
.music-note { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.music-copy h2 { font-size: 1.5rem; }
.music-copy h3, .tool-group h4 { font-size: .9375rem; }
.music-copy .technique-references { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8125rem; }
.music-tools { padding: 0; border: 0; }
.music-tools h3 { font-size: 1.25rem; }
.tool-groups, .project-columns { gap: 24px; }
.tool-group { padding: 28px; }
.tool-more > summary, .project-details summary { font-size: .9375rem; }
.tool-more > summary::marker { font-size: .8125rem; }
.tool-link { min-height: 44px; padding-block: 8px; }
.tool-list li { overflow-wrap: anywhere; }
.soundcloud-section { margin: 0; padding: 30px; border-top: 1px solid var(--glass-edge); }
.playlist-link, .soundcloud-link, .project-action { font-size: .875rem; }
.player-heading { flex-wrap: wrap; }
.site-header { height: auto; min-height: calc(84px + env(safe-area-inset-top, 0px)); padding-block: calc(16px + env(safe-area-inset-top, 0px)) 16px; }
.site-footer { height: auto; min-height: 64px; gap: 4px 16px; font-size: 1rem; line-height: 1.6; }
.motion-toggle { margin-left: auto; min-height: 44px; font-size: 1rem; line-height: 1.6; white-space: nowrap; }
#pixel-field { z-index: 2; }
#letter-field { position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }

/* These decoration layers follow the same outline; contents remain real DOM. */
.pane-glass, .pane-outline { display: none; }
.glass-pane { --pane-pad: min(var(--pane-pad-x, 48px), var(--pane-pad-cap, 48px)); }
[data-pane-ready] > .pane-glass, [data-pane-ready] > .pane-outline { display: block; }
.comparison-section > h2, .paste-comparison figcaption, .project-back { background: #090d10eb; border-radius: 7px; padding: 10px 12px; width: fit-content; max-width: 100%; }
.glass-pane[data-pane-ready] { border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.glass-pane[data-pane-ready], .page-section-divider[data-pane-ready], [data-pane-standalone][data-pane-ready] { opacity: var(--pane-opacity, 1); transform: translate3d(var(--pane-x, 0px), var(--pane-y, 0px), 0) rotate(var(--pane-axis, 0deg)) scale(calc(var(--pane-scale, 1) * var(--pane-longitudinal, 1)), calc(var(--pane-scale, 1) * var(--pane-transverse, 1))) rotate(calc(var(--pane-angle, 0deg) - var(--pane-axis, 0deg))); }
.glass-pane[data-pane-capture], .page-section-divider[data-pane-capture], [data-pane-standalone][data-pane-capture] { pointer-events: none; z-index: 4; }
.glass-pane[data-pane-ready]::before { display: none; }
.pane-glass { position: absolute; inset: -48px; z-index: -2; pointer-events: none; background: var(--glass-fill); }
.glass-pane[data-pane-capture] > .pane-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
.pane-outline { position: absolute; inset: -48px; z-index: -1; overflow: visible; pointer-events: none; width: calc(100% + 96px); height: calc(100% + 96px); }
.pane-outline path { fill: none; stroke: var(--glass-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pane-outline .pane-highlight { stroke: #ffffff18; stroke-width: 1; }
.pane-outline .pane-selected { stroke: var(--pink); stroke-width: 2; stroke-dasharray: 7 5; display: none; }
.pane-outline .pane-proximity { stroke-width: 2; stroke-dasharray: none; }
.pane-outline .pane-reassembly { stroke: #e3d1ff; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1000; opacity: 0; }
.pane-outline .pane-capture-rim { stroke: #f0c2fa; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 160 840; opacity: 0; }
:is([data-pane-capture="flight"],[data-deletion-flight]) > .pane-outline .pane-capture-rim { animation: pane-rim-intake var(--pane-flight-duration, 1400ms) linear both; }
@keyframes pane-rim-intake {
  0% { stroke-dashoffset: 0; opacity: 0; }
  18% { opacity: .8; }
  55% { opacity: .55; }
  100% { stroke-dashoffset: -1000; opacity: 0; }
}
.pane-glass, .pane-outline { inset-inline: calc(-1 * var(--pane-pad)); }
.pane-outline { width: calc(100% + 2 * var(--pane-pad)); }
.glass-pane[data-play-selected] { outline: 2px dashed var(--pink); outline-offset: 5px; }
.glass-pane[data-pane-ready][data-play-selected] { outline: none; }
.glass-pane[data-play-selected] .pane-selected { display: block; }
.pane-editor { display: flow-root; min-width: 0; }
:is(.pane-editor, [data-play-text])[contenteditable="true"] { caret-color: var(--pink); outline: none; cursor: text; }
[data-play-text] { overflow-wrap: anywhere; }
[data-play-text]:empty::before { content: '\200b'; }
.pasted-note, .pasted-text { white-space: pre-wrap; }
.play-menu { position: fixed; z-index: 50; width: min(232px, calc(100vw - 24px)); padding: 6px; border: 1px solid #776c85; border-radius: 12px; background: #151a1df5; box-shadow: 0 16px 60px #0009; backdrop-filter: blur(12px); }
.play-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px; padding: 8px 12px; color: var(--text); background: none; border: 0; border-radius: 6px; text-align: left; font-size: .875rem; cursor: pointer; }
.play-menu button:hover, .play-menu button:focus { color: #fff; background: #3b2d45; outline: 2px solid var(--accent); outline-offset: -2px; }
.play-menu button:disabled { opacity: .45; cursor: default; }
.play-menu .destructive { color: var(--pink); }
.play-menu .menu-divider { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.restore-page { min-height: 44px; padding: 8px 16px; color: var(--text); border: 1px solid #877698; background: #322238; border-radius: 8px; cursor: pointer; }
.restore-scene { position: fixed; z-index: 60; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--text); background: transparent; }
.restore-scene p { margin: 0; font-size: .875rem; }
.ready-pulse { position: fixed; z-index: 20; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, #ff78bd25, transparent 65%); opacity: 0; }
.ready-pulse::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(210px, 50vw); height: 56px; border: 1px solid #f4a2ca38; border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); box-shadow: 0 0 25px #ff78bd12, inset 0 0 18px #ff78bd0c; }
.destruction-space, .destruction-debris { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.destruction-space { z-index: 2; }
.destruction-debris { z-index: 25; }
html[data-sequence="collapsing"] .glass-pane, html[data-sequence="collapsing"] .pane-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
.visually-hidden, .play-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html:is([data-entrance="pending"],[data-sequence="planet"]) :is(.page-content,.site-header,.site-footer) { opacity: 0; }
html[data-arrival-cue] .site-header { opacity: 1; visibility: visible; }
html[data-arrival="waiting"] :is(.page-content,.site-footer) { opacity: 0; }
html[data-arrival] .page-shell { visibility: visible; }
html[data-arrival] :is(.site-header,.site-footer) { visibility: visible; }
/* Keep the destination field hidden throughout either outward arrival pass. */
html:is([data-entrance="pending"],[data-sequence="planet"],[data-star-spawn]) #scene-stars { visibility: hidden; }
html[data-sequence="empty"] .page-shell, html[data-sequence="empty"] .site-header, html[data-sequence="empty"] .site-footer { visibility: hidden; }
html[data-sequence="empty"] { overflow: hidden; }
/* A complete held capture leaves only the unchanged planet and its glow. */
::highlight(cb-hold-missing) { color: transparent; text-shadow: none; text-decoration-color: transparent; }
.hold-space, .hold-ink { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hold-space { z-index: 2; }
.hold-ink, .hold-icon { z-index: 25; }
.hold-icon { position: fixed; pointer-events: none; transform-origin: center; }
html:is([data-sequence="engulfing"],[data-sequence="quiet"],[data-sequence="starbirth"]) #scene-stars { visibility: hidden; }
html:is([data-sequence="quiet"],[data-sequence="starbirth"]):not([data-arrival]) :is(.page-shell,.site-header,.site-footer) { visibility: hidden; }
html[data-sequence="quiet"][data-arrival-cue] .site-header { visibility: visible; }
.hold-restore { position: fixed; z-index: 40; bottom: 20px; right: 20px; opacity: 0; pointer-events: none; min-height: 44px; padding: 10px 18px; color: var(--text); background: #151a1c; border: 1px solid var(--accent); border-radius: 8px; }
.play-menu button:not(:disabled):hover, .play-menu button:not(:disabled):focus { color: var(--pink); outline-color: var(--pink); background: #352334; }
.restore-page, .hold-restore { color: var(--pink); border-color: var(--pink); background: #281a27; }
.project-action, .error-home { color: var(--pink); border-color: var(--pink); }
.hold-restore:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--accent); outline-offset: 3px; }

/* A shorter product story, with technical details in native disclosures. */
.project-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.project-panel .project-intro { display: block; }
.project-panel .project-identity h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.project-panel .project-tagline { font-size: 1.6rem; line-height: 1.35; }
.project-panel .build-label, .project-panel .compatibility-note { font-size: .8125rem; }
.project-panel .build-label { margin: 16px 0 0; }
.project-section { margin: 0; padding: 30px; border-top: 1px solid var(--glass-edge); }
.project-section h2 { font-size: 1.5rem; }
.comparison-section { padding: 0; border: 0; }
.comparison-section > h2 { padding-inline: 2px; }
.paste-examples { gap: 24px; border: 0; border-radius: 0; overflow: visible; }
.paste-example + .paste-example:not([data-pane-ready]) { border: 1px solid var(--glass-edge); }
.paste-example h3 { font-size: .9375rem; }
.project-panel .example-source { font-size: 1.2rem; }
.project-panel .example-result { font-size: 1rem; }
.paste-comparison figcaption { margin: 16px 2px 0; }
.benefit-list { padding-left: 22px; margin-bottom: 0; }
.benefit-list li { margin-bottom: 12px; }
.benefit-list li:last-child { margin-bottom: 0; }
.project-panel ol { margin-top: 16px; }
.shortcut-list p, .shortcut-list kbd { font-size: .8125rem; }
.project-details summary { min-height: 44px; }
.project-details + .project-details { border-top: 1px solid var(--line); }
.project-details-group { padding-block: 18px; }

@media (max-width: 850px) {
  :root { --page-width: 42rem; --page-gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .profile-panel, .music-note, .tool-groups, .project-columns { grid-template-columns: minmax(0, 1fr); }
  .glass-pane, .about, .work, .soundcloud-section { padding: 26px; margin: 0; }
  .glass-pane { --pane-pad-cap: max(0px, calc(var(--page-gutter) - 10px)); }
  .music-tools { padding: 0; }
  .site-footer { justify-content: space-between; }
  .music-note, .project-panel, .comparison-section { padding: 0; }
  .page-content { gap: 28px; }
  .glass-pane[data-pane-ready] { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 600px) {
  .paste-examples { grid-template-columns: minmax(0, 1fr); }
  .section-heading > span { font-size: .8125rem; }
  .project-identity img { width: 48px; height: 48px; }
}
@media (max-width: 380px) {
  :root { --page-gutter: max(18px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .glass-pane, .about, .work, .soundcloud-section { padding: 22px; }
  .project-identity { gap: 10px; }
  .project-identity img { width: 38px; height: 38px; }
  .project-panel .project-identity h1 { font-size: 2.1rem; }
  .section-heading { flex-wrap: wrap; }
  .site-footer { gap: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .ready-pulse { display: none; } }
@media (forced-colors: active) {
  .glass-pane { background: Canvas !important; border: 1px solid CanvasText !important; }
  .pane-glass, .pane-outline { display: none; }
  .glass-pane[data-play-selected] { outline: 2px dashed Highlight !important; }
}

.deleted-slot { visibility: hidden !important; pointer-events: none !important; contain: size; }