/* A local, two-beat exclamation. The scene's material changes are inherited
 * immediately; neither the overlay nor its decorative SVG catches input. */
.desk-boom {
  --boom-paper:#ffe66f; --boom-ink:#211b32; --boom-face:#fff8d1;
  --boom-accent:#f14e76; --boom-shadow:#d64075; --boom-line:7;
  --boom-family:Impact,'Arial Black','Helvetica Neue',sans-serif;
  --boom-grain:.28; --boom-texture:.5;
  position:absolute; height:auto; aspect-ratio:760/420;
  z-index:8; transform:translate(-50%,-50%); pointer-events:none;
  contain:layout style; isolation:isolate; overflow:visible;
}
.desk-boom[hidden] {display:none}
.desk-boom,.desk-boom * {pointer-events:none!important;user-select:none}
.boom-art {display:block;width:100%;height:100%;overflow:visible}
.boom-art :is(path,ellipse,circle) {stroke-linejoin:round;stroke-linecap:round}
.boom-plate {fill:var(--boom-paper);stroke:var(--boom-ink);stroke-width:var(--boom-line);paint-order:stroke fill}
.boom-plate-shadow {fill:var(--boom-shadow);stroke:var(--boom-ink);stroke-width:3;transform:translate(9px,12px)}
.boom-plate-texture {opacity:var(--boom-texture);mix-blend-mode:multiply}
.boom-lettering {transform-origin:380px 214px}
.boom-lettering text {
  font-family:var(--boom-family);font-size:116px;font-weight:1000;
  font-stretch:condensed;letter-spacing:-2px;paint-order:stroke fill;
  stroke-linejoin:round;stroke-linecap:round;
}
.boom-type-shadow {fill:var(--boom-shadow);stroke:var(--boom-ink);stroke-width:12;transform:translate(5px,9px)}
.boom-type {fill:var(--boom-face);stroke:var(--boom-ink);stroke-width:9}
.boom-type-grain {opacity:var(--boom-grain);mix-blend-mode:multiply}
.boom-grain-dots {fill:var(--boom-ink)}
.boom-grain-lines,.boom-grain-scratches {display:none;fill:none;stroke:var(--boom-ink);stroke-width:.75}
[data-style="watercolor"] .boom-grain-dots {opacity:.35}
[data-style="pop"] .boom-grain-dots {r:2.5px}
:is([data-style="punk"],[data-style="future"],[data-style="renaissance"],[data-style="ink"]) .boom-grain-dots {display:none}
:is([data-style="renaissance"],[data-style="ink"]) .boom-grain-lines {display:block}
[data-style="ink"] .boom-grain-lines {stroke-width:1.2}
:is([data-style="punk"],[data-style="future"]) .boom-grain-scratches {display:block;stroke-width:1.25}
[data-style="graffiti"] .boom-grain-dots {r:1.1px}
[data-style="offset"] .boom-grain-dots {r:1.3px}
.boom-rays {fill:none;stroke:var(--boom-face);stroke-width:8;transform-origin:380px 210px}
.boom-rays path:nth-child(3n) {stroke:var(--boom-accent);stroke-width:11}
.boom-ring {fill:none;stroke:var(--boom-accent);stroke-width:5;opacity:.7;transform-origin:380px 210px}
.boom-ornament {fill:none;stroke:var(--boom-ink);stroke-width:2;opacity:0}
.boom-drips {fill:var(--boom-paper);stroke:var(--boom-ink);stroke-width:3;opacity:0}
.boom-particles {fill:var(--boom-accent);stroke:var(--boom-ink);stroke-width:2;transform-origin:380px 210px}
.boom-particles :nth-child(3n) {fill:var(--boom-paper)}
.boom-particles :nth-child(4n) {fill:var(--boom-face)}
.desk-boom.is-playing .boom-art {animation:desk-boom-burst 900ms both}
.desk-boom.is-playing .boom-lettering {animation:desk-boom-type 900ms both}
.desk-boom.is-playing .boom-rays {animation:desk-boom-rays 900ms both}
.desk-boom.is-playing .boom-ring {animation:desk-boom-ring 900ms both}
.desk-boom.is-playing .boom-particles {animation:desk-boom-particles 900ms both}

/* Dry edges / pooled pigments / broad brush lettering. */
[data-style="watercolor"] .desk-boom {
  --boom-paper:#edacc6;--boom-ink:#51487f;--boom-face:#fcf1de;
  --boom-accent:#c3caef;--boom-shadow:#8999cc;--boom-line:3;
  --boom-family:Georgia,'Times New Roman',serif;--boom-grain:.26;--boom-texture:.88;
}
[data-style="watercolor"] .boom-plate {filter:url(#desk-boom-wash);stroke-opacity:.4}
[data-style="watercolor"] .boom-plate-shadow {filter:url(#desk-boom-wash);opacity:.45;stroke:none;transform:translate(8px,5px)}
[data-style="watercolor"] .boom-type {stroke-width:3;filter:url(#desk-boom-rough);font-style:italic}
[data-style="watercolor"] :is(.boom-type-shadow,.boom-type-grain) {font-style:italic}
[data-style="watercolor"] .boom-type-shadow {stroke-width:2;opacity:.65;transform:translate(3px,5px)}
[data-style="watercolor"] .boom-rays {stroke-width:9;stroke-dasharray:27 8;opacity:.65;filter:url(#desk-boom-wash)}
[data-style="watercolor"] .boom-particles {stroke:none;filter:url(#desk-boom-wash)}
[data-style="watercolor"] .boom-ring {stroke-width:10;stroke-opacity:.35;filter:url(#desk-boom-wash)}

/* Dense comic print dots and bold, decisively inked silhouettes. */
[data-style="comic"] .desk-boom {
  --boom-paper:#f4cf52;--boom-ink:#241829;--boom-face:#fff8da;
  --boom-accent:#e64d62;--boom-shadow:#df384c;--boom-line:9;
  --boom-grain:.33;--boom-texture:.64;
}
[data-style="comic"] .boom-lettering text {font-style:italic}
[data-style="comic"] .boom-plate-shadow {transform:translate(10px,14px);stroke-width:6}
[data-style="comic"] .boom-type {stroke-width:11}
[data-style="comic"] .boom-rays {stroke-width:9;stroke-dasharray:none}

/* Rough Xerox contours, a pasted paper plate, and cut-letter density. */
[data-style="punk"] .desk-boom {
  --boom-paper:#e9e5d4;--boom-ink:#18181b;--boom-face:#f2eddd;
  --boom-accent:#e742bd;--boom-shadow:#c7de35;--boom-line:5;
  --boom-family:'Arial Black',Impact,sans-serif;--boom-grain:.76;--boom-texture:.91;
}
[data-style="punk"] .boom-plate {stroke-dasharray:21 3 8 4;filter:url(#desk-boom-rough)}
[data-style="punk"] .boom-plate-shadow {stroke:none;transform:translate(-8px,15px) rotate(-2deg);transform-origin:center}
[data-style="punk"] .boom-type {stroke-width:17;filter:url(#desk-boom-rough)}
[data-style="punk"] .boom-type-shadow {stroke-width:4;transform:translate(6px,-8px)}
[data-style="punk"] .boom-rays {stroke-dasharray:22 8 6 7;stroke-width:10}
[data-style="punk"] .boom-ring {stroke-dasharray:7 12;stroke-width:4}
[data-style="punk"] .boom-particles {stroke-width:3;stroke-dasharray:3 2}

/* Printed rosette, hand-drawn mandala fillets, and ornamental bold serif. */
[data-style="mandala"] .desk-boom {
  --boom-paper:#e5bf49;--boom-ink:#224b58;--boom-face:#fff2bc;
  --boom-accent:#eb7661;--boom-shadow:#2c9187;--boom-line:5;
  --boom-family:Georgia,'Times New Roman',serif;--boom-grain:.22;--boom-texture:.84;
}
[data-style="mandala"] .boom-ornament {opacity:.8;stroke-width:2.5}
[data-style="mandala"] .boom-type {stroke-width:5}
[data-style="mandala"] .boom-type-shadow {stroke-width:2;transform:translate(3px,6px)}
[data-style="mandala"] .boom-rays {stroke-dasharray:3 8 17 8;stroke-width:6}
[data-style="mandala"] .boom-ring {stroke-dasharray:2 8;stroke-width:6}
[data-style="mandala"] .boom-particles {fill:none;stroke-width:3}

/* Large Ben-Day dots and hard primary-color registration offset. */
[data-style="pop"] .desk-boom {
  --boom-paper:#f9e829;--boom-ink:#111c47;--boom-face:#fffbcf;
  --boom-accent:#f03d92;--boom-shadow:#42bbd8;--boom-line:10;
  --boom-grain:.48;--boom-texture:.88;
}
[data-style="pop"] .boom-type {stroke-width:11}
[data-style="pop"] .boom-type-shadow {fill:#f1388c;stroke:#f1388c;stroke-width:15;transform:translate(-9px,8px)}
[data-style="pop"] .boom-plate-shadow {transform:translate(14px,14px);stroke-width:7}
[data-style="pop"] .boom-ring {stroke-dasharray:7 8;stroke-width:7}
[data-style="pop"] .boom-rays {stroke:var(--boom-ink);stroke-width:6}

/* Angular printed facets, scraped paint, and a displaced technical outline. */
[data-style="future"] .desk-boom {
  --boom-paper:#ec326f;--boom-ink:#17182f;--boom-face:#dbfaf0;
  --boom-accent:#54e3e4;--boom-shadow:#793ac0;--boom-line:5;
  --boom-family:Impact,'Arial Black',sans-serif;--boom-grain:.46;--boom-texture:.89;
}
[data-style="future"] .boom-type {stroke:#213742;stroke-width:6}
[data-style="future"] .boom-type-shadow {fill:none;stroke:#57e3e2;stroke-width:3;transform:translate(-6px,7px)}
[data-style="future"] .boom-plate-shadow {stroke:#50ced7;stroke-width:2;fill:#1f2144;transform:translate(9px,10px)}
[data-style="future"] .boom-rays {stroke-width:4;stroke-dasharray:20 6 5 5}
[data-style="future"] .boom-ring {stroke-width:2;stroke-dasharray:64 10 10 10}
[data-style="future"] .boom-particles {fill:none;stroke:#6aedec;stroke-width:3}

/* Sepia engraved lettering with fine construction lines on parchment. */
[data-style="renaissance"] .desk-boom {
  --boom-paper:#dec397;--boom-ink:#493823;--boom-face:#f4e6c7;
  --boom-accent:#b77943;--boom-shadow:#967042;--boom-line:2;
  --boom-family:Georgia,'Times New Roman',serif;--boom-grain:.64;--boom-texture:.91;
}
[data-style="renaissance"] .boom-type {stroke-width:3;filter:url(#desk-boom-rough)}
[data-style="renaissance"] .boom-lettering text {font-style:italic}
[data-style="renaissance"] .boom-type-shadow {fill:none;stroke-width:1;transform:translate(3px,4px)}
[data-style="renaissance"] .boom-plate-shadow {fill:none;stroke-width:1.5;transform:translate(5px,5px)}
[data-style="renaissance"] .boom-ornament {opacity:.7;stroke-width:1}
[data-style="renaissance"] .boom-rays {stroke:var(--boom-ink);stroke-width:2;stroke-dasharray:31 3 4 3}
[data-style="renaissance"] .boom-rays path:nth-child(3n) {stroke-width:3}
[data-style="renaissance"] .boom-ring {stroke:var(--boom-ink);stroke-width:1;stroke-dasharray:3 3}
[data-style="renaissance"] .boom-particles {fill:none;stroke-width:1.5}

/* Ink-only drawing: dry black contours, paper cutouts, and hatched letters. */
[data-style="ink"] .desk-boom {
  --boom-paper:#f4f3eb;--boom-ink:#171718;--boom-face:#fbfaf4;
  --boom-accent:#171718;--boom-shadow:#171718;--boom-line:4;
  --boom-grain:.72;--boom-texture:.86;
}
[data-style="ink"] .boom-plate {filter:url(#desk-boom-rough)}
[data-style="ink"] .boom-type {stroke-width:7;filter:url(#desk-boom-rough)}
[data-style="ink"] .boom-type-shadow {stroke-width:9;transform:translate(4px,6px)}
[data-style="ink"] .boom-plate-shadow {stroke-width:2;transform:translate(5px,7px)}
[data-style="ink"] .boom-rays {stroke:var(--boom-ink);stroke-width:3;stroke-dasharray:41 4}
[data-style="ink"] .boom-rays path:nth-child(3n) {stroke-width:5}
[data-style="ink"] .boom-ring {stroke-width:1.5;stroke-dasharray:3 5}

/* Thick paint-marker outline, visible spray grain, and short paint drips. */
[data-style="graffiti"] .desk-boom {
  --boom-paper:#6cccb2;--boom-ink:#26233e;--boom-face:#f2f0cb;
  --boom-accent:#ec65c9;--boom-shadow:#9361c8;--boom-line:8;
  --boom-family:'Arial Black',Impact,sans-serif;--boom-grain:.58;--boom-texture:.93;
}
[data-style="graffiti"] .boom-lettering text {font-style:italic;letter-spacing:-4px}
[data-style="graffiti"] .boom-type {stroke-width:12;filter:url(#desk-boom-rough)}
[data-style="graffiti"] .boom-type-shadow {stroke:#faedc4;stroke-width:16;transform:translate(4px,6px)}
[data-style="graffiti"] .boom-plate {filter:url(#desk-boom-rough)}
[data-style="graffiti"] .boom-drips {opacity:1}
[data-style="graffiti"] .boom-rays {stroke-width:9;stroke-dasharray:20 6;filter:url(#desk-boom-rough)}
[data-style="graffiti"] .boom-ring {stroke-width:8;stroke-dasharray:1 15;filter:url(#desk-boom-wash)}
[data-style="graffiti"] .boom-particles {stroke:none;filter:url(#desk-boom-rough)}

/* Misregistered offset lithography with fine plate outlines and dense grain. */
[data-style="offset"] .desk-boom {
  --boom-paper:#efbd63;--boom-ink:#243f48;--boom-face:#faeacd;
  --boom-accent:#db5078;--boom-shadow:#4d9ca2;--boom-line:4;
  --boom-grain:.52;--boom-texture:.89;
}
[data-style="offset"] .boom-type {stroke-width:5}
[data-style="offset"] .boom-type-shadow {fill:#dc5677;stroke:#dc5677;stroke-width:5;transform:translate(-7px,5px)}
[data-style="offset"] .boom-plate-shadow {stroke:#358f9b;stroke-width:3;transform:translate(7px,-5px)}
[data-style="offset"] .boom-type-grain {transform:translate(1px,-1px)}
[data-style="offset"] .boom-rays {stroke-width:4;stroke-dasharray:3 3}
[data-style="offset"] .boom-ring {stroke-width:4;stroke-dasharray:2 4}

@keyframes desk-boom-burst {
  0% {opacity:0;transform:scale(.28) rotate(-10deg)}
  9% {opacity:1;transform:scale(1.1) rotate(-4deg)}
  19% {opacity:1;transform:scale(.91) rotate(-5deg)}
  29% {opacity:1;transform:scale(1.16) rotate(2deg)}
  43%,65% {opacity:1;transform:scale(1) rotate(-2deg)}
  100% {opacity:0;transform:scale(1.12) rotate(1deg)}
}
@keyframes desk-boom-type {
  0% {transform:scale(.73) skewY(-4deg)}
  10% {transform:scale(1.03) skewY(-4deg)}
  19% {transform:scale(.92) skewY(-4deg)}
  29% {transform:scale(1.1) skewY(-4deg)}
  47%,100% {transform:scale(1) skewY(-4deg)}
}
@keyframes desk-boom-rays {
  0% {opacity:0;transform:scale(.55)}
  12% {opacity:1;transform:scale(1.05)}
  20% {opacity:.2;transform:scale(.85)}
  32% {opacity:1;transform:scale(1.13)}
  75%,100% {opacity:0;transform:scale(1.38)}
}
@keyframes desk-boom-ring {
  0% {opacity:0;transform:scale(.5)}
  12% {opacity:.8;transform:scale(.8)}
  19% {opacity:0;transform:scale(1.1)}
  20% {opacity:.8;transform:scale(.7)}
  62%,100% {opacity:0;transform:scale(1.5)}
}
@keyframes desk-boom-particles {
  0% {opacity:0;transform:scale(.4) rotate(-8deg)}
  10% {opacity:1;transform:scale(.75) rotate(-5deg)}
  20% {opacity:1;transform:scale(.89) rotate(-2deg)}
  35% {opacity:1;transform:scale(1.16) rotate(3deg)}
  75% {opacity:.5;transform:scale(1.49) rotate(9deg)}
  100% {opacity:0;transform:scale(1.62) rotate(12deg)}
}

/* Toggle stays visually quiet next to the existing scene-switch hint. */
.switch-hint {display:flex;align-items:center;justify-content:flex-end;gap:8px}
.switch-hint p {margin:0}
.boom-sound-button {
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:32px;height:32px;margin:0;padding:7px;flex:none;
  border:1px solid #ffffff3d;border-radius:50%;background:#14182045;
  color:#fffcf1;box-shadow:none;cursor:pointer;line-height:1;
}
.boom-sound-button svg {width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.boom-sound-button:hover {background:#ffffff24;border-color:#ffffff9c}
.boom-sound-button:focus-visible {outline:2px solid #f9e9b6;outline-offset:4px}
.boom-sound-button[aria-pressed="true"] .speaker-off,
.boom-sound-button[aria-pressed="false"] .speaker-on {display:none}
.boom-sound-button[aria-pressed="false"] {color:#ffffff94}
@media(max-width:600px) {
  .switch-hint {gap:5px}
  .switch-hint p {font-size:0;line-height:1.5}
  .switch-hint p::before {content:'点蜘蛛切换画风';font-size:9px}
  .boom-sound-button {width:28px;height:28px;padding:6px}
}
@media(prefers-reduced-motion:reduce) {
  .desk-boom.is-playing .boom-art {opacity:1;transform:rotate(-2deg)}
  .desk-boom.is-playing .boom-lettering {transform:skewY(-4deg)}
  .desk-boom.is-playing :is(.boom-rays,.boom-ring,.boom-particles) {opacity:0}
}