/* Five genuinely different scene compositions around one stable component tree. */
.sidebar {
  --scene-accent: var(--scene-accent-live, #df6388);
  --scene-ink: #3f3035;
}

.scene-context[hidden] { display: none !important; }
.scene-context { min-width: 0; color: var(--scene-ink); }
.scene-context__content { min-width: 0; }
.scene-composition { position: relative; min-width: 0; animation: sceneComposeIn 280ms cubic-bezier(.2, 0, 0, 1) both; }
.scene-composition__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scene-composition__header h2 { margin: 5px 0 0; font-size: 1.45rem; line-height: 1.15; }
.scene-kicker { color: var(--scene-accent); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.scene-mark { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--scene-accent); font-size: .75rem; font-weight: 900; }
.scene-muted { color: color-mix(in srgb, var(--scene-ink) 65%, transparent); font-size: .8rem; line-height: 1.55; }
.scene-post-link { color: inherit; font-weight: 900; line-height: 1.45; text-decoration: none; }
.scene-post-link:hover { color: var(--scene-accent); }
.scene-post-link:focus-visible,
.scene-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--scene-accent) 48%, white); outline-offset: 3px; }
.scene-action { min-height: 44px; padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--scene-accent) 42%, white); border-radius: 10px; color: color-mix(in srgb, var(--scene-accent) 80%, #34272c); background: rgba(255,255,255,.72); font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer; }
.scene-action:hover { background: color-mix(in srgb, var(--scene-accent) 13%, white); }
.scene-action--quiet { width: 100%; margin-top: 8px; }

/* Home: no scene module. Only the three stable core widgets remain. */
[data-sidebar-layout="home-minimal"] { gap: clamp(16px, 2vw, 28px); }

/* Life: one continuous cloth-bound ledger, with the stable widgets as book furniture. */
[data-sidebar-layout="chronicle-ledger"] { gap: 0; padding: 10px 8px 14px 18px; border-radius: 10px 24px 24px 10px; background: linear-gradient(90deg, #9d5e39 0 9px, rgba(255,244,226,.83) 10px); box-shadow: 0 22px 45px rgba(91,55,35,.2); }
[data-sidebar-layout="chronicle-ledger"]::before { position: absolute; z-index: 2; top: 18px; bottom: 18px; left: 13px; width: 8px; content: ''; background: repeating-linear-gradient(to bottom, transparent 0 15px, #ead0ae 16px 20px, transparent 21px 34px); }
[data-sidebar-layout="chronicle-ledger"] > * { border-radius: 0; box-shadow: none; }
[data-sidebar-layout="chronicle-ledger"] .profile-widget { align-items: flex-start; padding: 18px 18px 10px; border-bottom: 1px solid rgba(157,94,57,.2); background: transparent; text-align: left; }
[data-sidebar-layout="chronicle-ledger"] .profile-avatar-container { width: 66px; height: 66px; border-radius: 8px; transform: rotate(-2deg); }
[data-sidebar-layout="chronicle-ledger"] .profile-avatar { border-radius: 5px; }
[data-sidebar-layout="chronicle-ledger"] .profile-motto { margin: 0; font-family: Georgia, 'Noto Serif SC', serif; }
[data-sidebar-layout="chronicle-ledger"] .social-links { align-self: stretch; justify-content: flex-end; }
.chronicle-ledger { padding: 18px; background: rgba(255,249,237,.78); border-bottom: 1px solid rgba(157,94,57,.2); }
.ledger-cover { display: grid; gap: 8px; margin: 18px -5px 12px; padding: 17px; border-left: 5px solid #9d5e39; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.76) 0 29px, rgba(157,94,57,.1) 30px); }
.ledger-cover__month { color: #9d5e39; font: 800 .72rem ui-monospace, monospace; letter-spacing: .08em; }
.ledger-cover p { margin: 0; color: #765f51; font-size: .82rem; line-height: 1.6; }
.ledger-ruler { display: flex; justify-content: space-between; margin: 16px 2px; padding-top: 10px; border-top: 2px solid #c98d65; color: #755140; font-size: .66rem; font-weight: 800; }
.ledger-ruler span { position: relative; }
.ledger-ruler span::before { position: absolute; top: -15px; left: 50%; width: 7px; height: 7px; content: ''; border-radius: 50%; background: #a9673e; transform: translateX(-50%); }
.ledger-directory { max-height: 184px; margin-top: 12px; overflow-y: auto; }
.ledger-directory[hidden] { display: none; }
.ledger-directory__row { display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: baseline; margin: 0; padding: 8px 0; border-bottom: 1px dashed rgba(157,94,57,.25); font-size: .75rem; }
.ledger-directory__row b,
.ledger-directory__row time { color: #a9673e; font-size: .66rem; }
[data-sidebar-layout="chronicle-ledger"] .clock-weather-widget { padding-block: 15px; border-top: 1px solid rgba(157,94,57,.15); background: transparent; }
[data-sidebar-layout="chronicle-ledger"] .analog-clock { width: 116px; height: 116px; border-radius: 12px; }
[data-sidebar-layout="chronicle-ledger"] .music-player-widget { margin: 0 15px 12px; padding: 16px; border-radius: 3px 3px 14px 14px; background: rgba(169,103,62,.1); }

/* ACG: a dark projection cabinet with screen, ticket and turntable deck. */
[data-sidebar-layout="screening-booth"] { gap: 12px; padding: 14px; border: 7px solid #252535; border-radius: 15px; background: linear-gradient(160deg, rgba(31,31,49,.97), rgba(57,47,76,.94)); box-shadow: 9px 12px 0 rgba(20,19,31,.24), 0 25px 48px rgba(20,19,31,.3); }
[data-sidebar-layout="screening-booth"] .profile-widget { display: grid; grid-template-columns: 72px 1fr; gap: 5px 13px; padding: 14px; border: 1px solid rgba(201,188,255,.25); border-radius: 6px; background: rgba(255,255,255,.06); color: #fff; text-align: left; }
[data-sidebar-layout="screening-booth"] .profile-avatar-container { grid-row: 1 / 4; width: 70px; height: 82px; border-radius: 5px; }
[data-sidebar-layout="screening-booth"] .profile-avatar { border-radius: 3px; }
[data-sidebar-layout="screening-booth"] .profile-name { color: #fff; }
[data-sidebar-layout="screening-booth"] .profile-motto { max-height: 2.8em; margin: 0; overflow: hidden; color: #cfc8dc; font-size: .72rem; }
[data-sidebar-layout="screening-booth"] .social-links { gap: 6px; }
[data-sidebar-layout="screening-booth"] .social-btn { width: 32px; height: 32px; color: #fff; background: rgba(255,255,255,.08); }
.screening-booth { padding: 15px; color: #faf7ff; border: 1px solid rgba(201,188,255,.25); border-radius: 6px; background: #171722; }
.screening-booth .scene-composition__header h2,
.screening-booth .scene-post-link { color: #faf7ff; }
.screening-screen { position: relative; display: grid; min-height: 150px; place-items: center; margin: 17px 0 12px; padding: 28px 14px 15px; overflow: hidden; border: 8px solid #343448; border-radius: 3px; background: radial-gradient(circle at 50% 35%, rgba(130,115,191,.4), transparent 55%), #0d0d14; box-shadow: inset 0 0 28px rgba(0,0,0,.65); }
.screening-screen::after { position: absolute; inset: 0; content: ''; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.025) 4px); pointer-events: none; }
.screening-screen__label { position: absolute; top: 8px; left: 10px; color: #a99bdd; font: 800 .6rem ui-monospace, monospace; letter-spacing: .12em; }
.screening-result { display: grid; gap: 7px; text-align: center; }
.screening-result[hidden] { display: none; }
.screening-result__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(201,188,255,.28); border-radius: 2px; background: #171722; }
.screening-result time { color: #b8acce; font-size: .7rem; }
.screening-ticket { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 10px 12px; color: #3d3152; background: #f0d6a6; clip-path: polygon(0 0, 96% 0, 100% 18%, 96% 36%, 100% 54%, 96% 72%, 100% 100%, 0 100%, 4% 78%, 0 58%, 4% 38%, 0 18%); transform: rotate(-1.5deg); }
.screening-ticket span,
.screening-ticket small { font: 800 .6rem ui-monospace, monospace; }
.screening-ticket small { grid-column: 1 / -1; }
.screening-control { width: 100%; color: #fff; border-color: #8071b6; background: #3d3457; }
[data-sidebar-layout="screening-booth"] .music-player-widget { color: #f8f2ff; border: 1px solid rgba(201,188,255,.25); border-radius: 7px; background: #222231; }
[data-sidebar-layout="screening-booth"] .song-title { color: #fff; }
[data-sidebar-layout="screening-booth"] .clock-weather-widget { flex-direction: row; padding: 14px; border: 1px dashed rgba(201,188,255,.32); border-radius: 4px; background: rgba(255,255,255,.05); }
[data-sidebar-layout="screening-booth"] .analog-clock { width: 92px; height: 92px; flex: none; }

/* Notes: squared writing mat, author clip, paper pad and radio-like player. */
[data-sidebar-layout="writer-desk"] { gap: 14px; padding: 14px; border-radius: 4px; background-color: rgba(236,247,241,.92); background-image: linear-gradient(rgba(63,126,112,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(63,126,112,.1) 1px, transparent 1px); background-size: 18px 18px; box-shadow: 0 20px 40px rgba(40,78,68,.2); }
[data-sidebar-layout="writer-desk"] .profile-widget { position: relative; align-items: flex-start; padding: 16px 15px 14px 88px; border: 0; border-radius: 2px; background: #fff9e9; text-align: left; transform: rotate(.5deg); }
[data-sidebar-layout="writer-desk"] .profile-widget::before { position: absolute; top: -8px; left: 48%; width: 40px; height: 16px; content: ''; background: rgba(215,190,142,.65); transform: rotate(-3deg); }
[data-sidebar-layout="writer-desk"] .profile-avatar-container { position: absolute; top: 18px; left: 14px; width: 62px; height: 62px; border-radius: 3px; }
[data-sidebar-layout="writer-desk"] .profile-avatar { border-radius: 2px; }
[data-sidebar-layout="writer-desk"] .profile-name { font-size: 1.05rem; }
[data-sidebar-layout="writer-desk"] .profile-motto { max-height: 3.2em; margin: 0; overflow: hidden; font-size: .7rem; }
[data-sidebar-layout="writer-desk"] .social-links { gap: 5px; }
[data-sidebar-layout="writer-desk"] .social-btn { width: 30px; height: 30px; }
.writer-desk { padding: 17px; border: 2px solid rgba(63,126,112,.28); background: rgba(255,255,255,.6); }
.writer-pad { position: relative; display: grid; gap: 8px; min-height: 142px; margin: 16px 0 9px; padding: 25px 17px 16px; background: #fff1a8; box-shadow: 5px 7px 0 rgba(63,126,112,.12); transform: rotate(-1deg); }
.writer-pad__pin { position: absolute; top: 6px; left: 50%; color: #df6875; transform: translateX(-50%); }
.writer-pad small,
.writer-pad time { color: #607167; font-size: .65rem; font-weight: 800; }
.writer-pencil { display: block; margin: 10px 0; color: #3f7e70; font-size: .73rem; font-weight: 800; }
.writer-drawer { display: flex; max-height: 132px; flex-wrap: wrap; gap: 7px; margin-top: 10px; overflow-y: auto; padding: 13px; border: 1px solid rgba(63,126,112,.25); background: rgba(255,255,255,.8); box-shadow: inset 0 4px 8px rgba(40,78,68,.08); }
.writer-drawer[hidden] { display: none; }
.writer-drawer span { padding: 5px 8px; border-radius: 999px; color: #326759; background: #dff0e8; font-size: .7rem; font-weight: 800; }
[data-sidebar-layout="writer-desk"] .clock-weather-widget { border-radius: 50% 50% 12px 12px; background: rgba(255,255,255,.76); }
[data-sidebar-layout="writer-desk"] .music-player-widget { border: 5px solid #477b70; border-radius: 10px; background: #d7e8e2; }

/* Guestbook: postal counter, identity card, postmark clock and waiting-room radio. */
[data-sidebar-layout="post-office"] { gap: 0; padding: 14px; border: 2px solid rgba(191,96,123,.35); border-radius: 18px 18px 4px 4px; background: linear-gradient(90deg, rgba(255,247,249,.95), rgba(255,232,239,.92)); box-shadow: 0 22px 44px rgba(117,55,75,.2); }
[data-sidebar-layout="post-office"] .profile-widget { display: grid; grid-template-columns: 78px 1fr; gap: 7px 12px; padding: 16px; border: 1px dashed #cf8ca0; border-radius: 4px; background: #fffdf7; text-align: left; }
[data-sidebar-layout="post-office"] .profile-avatar-container { grid-row: 1 / 4; width: 76px; height: 92px; border-radius: 2px; }
[data-sidebar-layout="post-office"] .profile-avatar { border-radius: 1px; }
[data-sidebar-layout="post-office"] .profile-name { font-size: 1.05rem; }
[data-sidebar-layout="post-office"] .profile-motto { max-height: 3.2em; margin: 0; overflow: hidden; font-size: .7rem; }
[data-sidebar-layout="post-office"] .social-links { gap: 5px; }
[data-sidebar-layout="post-office"] .social-btn { width: 30px; height: 30px; }
.post-office { padding: 19px 12px; }
.post-counter { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3px 10px; margin: 18px 0 12px; padding: 14px; border-top: 5px solid #ba5a78; background: #fff7f0; }
.post-counter span,
.post-counter small { color: #966074; font-size: .65rem; font-weight: 800; }
.post-counter strong { grid-row: 1 / 3; grid-column: 2; font: 900 2.4rem Georgia, serif; color: #ba5a78; }
.post-envelope { position: relative; min-height: 112px; padding: 48px 18px 14px; border: 1px solid #dfa6b8; background: linear-gradient(145deg, #fffdf8 0 49%, #ffe2eb 50% 100%); text-align: center; }
.post-envelope::before { position: absolute; inset: 0 0 auto; height: 46px; content: ''; border-bottom: 1px solid #dfa6b8; background: linear-gradient(135deg, transparent 49%, #ffd5e2 50% 52%, transparent 53%), linear-gradient(225deg, transparent 49%, #ffd5e2 50% 52%, transparent 53%); }
.post-envelope__seal { position: absolute; z-index: 1; top: 29px; left: 50%; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: #ba5a78; transform: translateX(-50%); }
.post-envelope p { margin: 10px 0 0; color: #704351; font-size: .78rem; }
.post-letter { max-height: 190px; overflow-y: auto; padding: 12px; border: 1px dashed #d895aa; border-top: 0; background: rgba(255,255,255,.72); }
.post-letter[hidden] { display: none; }
.post-letter p { color: #754d5b; font-size: .78rem; line-height: 1.6; }
[data-sidebar-layout="post-office"] .clock-weather-widget { margin: 0 12px; padding: 15px; border: 2px dashed #c77991; border-radius: 50%; background: rgba(255,253,247,.78); transform: rotate(-2deg); }
[data-sidebar-layout="post-office"] .analog-clock { width: 112px; height: 112px; }
[data-sidebar-layout="post-office"] .music-player-widget { margin-top: 14px; border-radius: 8px; background: #f8e5e9; }

/* Tools: pixel cabinet with operator badge, LCD, LEDs and speaker deck. */
[data-sidebar-layout="arcade-console"] { gap: 10px; padding: 13px; border: 6px solid #284d68; border-radius: 12px 12px 28px 28px; background: linear-gradient(160deg, #d5e8f2, #80a4b9); box-shadow: 8px 10px 0 rgba(40,77,104,.24), 0 24px 45px rgba(40,77,104,.22); image-rendering: pixelated; }
[data-sidebar-layout="arcade-console"] .profile-widget { display: grid; grid-template-columns: 68px 1fr; gap: 5px 12px; padding: 13px; border: 3px solid #315d7c; border-radius: 3px; background: #eaf4f8; text-align: left; }
[data-sidebar-layout="arcade-console"] .profile-avatar-container { grid-row: 1 / 4; width: 66px; height: 66px; border-radius: 3px; box-shadow: 3px 3px 0 #315d7c; }
[data-sidebar-layout="arcade-console"] .profile-avatar { border-radius: 1px; }
[data-sidebar-layout="arcade-console"] .profile-name { font: 900 1rem ui-monospace, monospace; }
[data-sidebar-layout="arcade-console"] .profile-motto { display: none; }
[data-sidebar-layout="arcade-console"] .social-links { gap: 5px; }
[data-sidebar-layout="arcade-console"] .social-btn { width: 30px; height: 30px; border-radius: 3px; }
.arcade-console { padding: 15px; border: 3px solid #315d7c; border-radius: 3px; background-color: #e6f1f6; background-image: linear-gradient(rgba(49,93,124,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(49,93,124,.07) 1px, transparent 1px); background-size: 9px 9px; }
.arcade-lcd { display: grid; gap: 7px; min-height: 115px; margin: 16px 0 12px; padding: 15px; border: 6px solid #25475f; border-radius: 3px; color: #b8f0cf; background: #173129; box-shadow: inset 0 0 20px rgba(0,0,0,.55); font-family: ui-monospace, monospace; }
.arcade-lcd span,
.arcade-lcd small { color: #79c997; font-size: .65rem; }
.arcade-status { display: grid; gap: 7px; }
.arcade-status span { display: flex; justify-content: space-between; color: #284d68; font: 800 .72rem ui-monospace, monospace; }
.arcade-status span::after { width: 9px; height: 9px; content: ''; border: 2px solid #315d7c; background: #8099aa; }
.arcade-status span[data-active="true"]::after { background: #6bd58c; box-shadow: 0 0 8px rgba(54,173,91,.7); }
.arcade-memory { max-height: 150px; margin-top: 10px; overflow-y: auto; padding: 11px; border: 3px double #315d7c; background: rgba(255,255,255,.65); }
.arcade-memory[hidden] { display: none; }
.arcade-memory p { margin: 5px 0; color: #284d68; font: 700 .72rem ui-monospace, monospace; }
[data-sidebar-layout="arcade-console"] .scene-action { width: 100%; border: 3px solid #315d7c; border-radius: 2px; color: #23465f; background: #eef8fb; box-shadow: 3px 3px 0 #315d7c; }
[data-sidebar-layout="arcade-console"] .clock-weather-widget { flex-direction: row; padding: 12px; border: 3px solid #315d7c; border-radius: 3px; background: #dcebf1; }
[data-sidebar-layout="arcade-console"] .analog-clock { width: 92px; height: 92px; flex: none; border-radius: 3px; }
[data-sidebar-layout="arcade-console"] .music-player-widget { border: 4px solid #284d68; border-radius: 5px 5px 18px 18px; background: #527891; }
[data-sidebar-layout="arcade-console"] .song-title,
[data-sidebar-layout="arcade-console"] .song-artist { color: #fff; }

@keyframes sceneComposeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1179px) {
  [data-sidebar-layout="chronicle-ledger"],
  [data-sidebar-layout="screening-booth"],
  [data-sidebar-layout="writer-desk"],
  [data-sidebar-layout="post-office"],
  [data-sidebar-layout="arcade-console"] { padding: 12px; }
  .scene-context { min-height: 100%; }
}

@media (max-width: 720px) {
  .scene-context { min-height: 0; }
  .ledger-directory,
  .writer-drawer,
  .post-letter,
  .arcade-memory { max-height: 150px; }
  [data-sidebar-layout="chronicle-ledger"] .profile-widget,
  [data-sidebar-layout="screening-booth"] .profile-widget,
  [data-sidebar-layout="writer-desk"] .profile-widget,
  [data-sidebar-layout="post-office"] .profile-widget,
  [data-sidebar-layout="arcade-console"] .profile-widget { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-composition,
  [data-sidebar-layout] > * { animation: none !important; transition: none !important; transform: none !important; }
}