@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Mono:wght@400;500&family=UnifrakturMaguntia&display=swap');

/* Structure, desk mechanics and the original dark skin. moonlight.css loads
   after this file and owns the live palette, so visual changes belong there. */

:root {
  --night: #101118; --deep: #171922; --panel: #1e202a; --blue: #a9c7e4;
  --red: #bb334b; --red-bright: #e05269; --bone: #e9e5da; --ink: #282a34;
  --muted: #9296a8; --line: #343541; --mono: 'DM Mono', monospace;
  --serif: 'Cormorant Garamond', Georgia, serif; --hand: 'Caveat', cursive;
  --gothic: 'UnifrakturMaguntia', Georgia, serif;
  font-synthesis: none; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--bone); font: 14px/1.5 var(--serif); background-image: radial-gradient(ellipse at 70% 0%, #2830446b, transparent 52%), repeating-linear-gradient(0deg, transparent 0 3px, #0000000b 3px 4px); }
body:has(dialog[open]) { overflow: hidden; }
body::selection, ::selection { background: var(--red); color: white; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
a { color: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--blue); outline-offset: 1px; }
.site-wrap { width: min(1240px, calc(100% - 64px)); margin: 0 auto; border: 1px solid var(--line); box-shadow: 0 0 100px #0006; }
.eyebrow { margin: 0; font: 9px/1.6 var(--mono); letter-spacing: .16em; color: var(--blue); }
.masthead { position: relative; min-height: 350px; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; background: radial-gradient(ellipse at 75% 50%, #2e33466b, transparent 60%), #171922; padding: 36px 48px 54px; }
.masthead::before { content: ''; position: absolute; left: 22px; top: 0; height: 100%; border-left: 1px solid #92324570; }
.masthead-copy { position: relative; z-index: 2; }
.masthead h1 { font: 500 clamp(72px, 9vw, 123px)/.92 var(--serif); letter-spacing: -.045em; margin: 15px 0 2px; color: #eeeae0; text-shadow: 0 3px 0 #000; }

.layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); border-top: 1px solid #542b37; }
.sidebar { padding: 27px 24px; background: #15161e; border-right: 1px solid #35323f; }
.keeper-card { text-align: center; }
.portrait-frame { position: relative; transform: rotate(-3deg); padding: 7px 7px 24px; background: #dce2e5; box-shadow: 4px 6px 0 #070810; margin: 0 8px 25px; }
.portrait-frame img { display: block; width: 100%; aspect-ratio: 3/3.7; object-fit: cover; image-rendering: pixelated; filter: contrast(1.06); }

.portrait-tape { position: absolute; top: -9px; left: calc(50% - 25px); width: 50px; height: 23px; background: #b7405799; transform: rotate(10deg); clip-path: polygon(4% 0, 100% 5%, 95% 100%, 0 90%); }

.side-nav { margin-top: 29px; }.side-nav > p { font-size: 8px; color: #707b93; margin-bottom: 8px; }
.nav-link { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 36px; background: transparent; border: 0; border-left: 2px solid transparent; text-align: left; color: #9297a9; padding: 6px 8px; font: 9px var(--mono); }
.nav-link span { color: #bd687d; font: 17px var(--serif); width: 18px; text-align: center; }.nav-link b { margin-left: auto; font-weight: 400; font-size: 9px; color: #8fa6c3; }
.nav-link:hover { background: #22242e; color: #d5dbe7; }.nav-link.active { background: #222737; border-color: #a5c5e4; color: #c0d4ec; }
.small-shrine { margin: 27px 0 23px; border-top: 1px solid #30303b; border-bottom: 1px solid #30303b; padding: 18px 0; text-align: center; }
.small-shrine img { opacity: .8; }
.binder-tools { display: grid; gap: 8px; }.binder-tools button { display: flex; justify-content: space-between; align-items: center; padding: 9px 8px; background: #1d1f29; border: 1px solid #343643; font: 9px var(--mono); color: #aebad0; }.binder-tools small { font-size: 6px; color: #778098; }.binder-tools button:hover { border-color: #6b4a5c; }

.main-column { position: relative; min-width: 0; padding: 20px 16px 24px 18px; background: #20222d; background-image: radial-gradient(#b6bfce0b .8px, transparent .8px); background-size: 7px 7px; }
.make-button { border: 1px solid #d66479; background: #a73249; color: #ffeded; padding: 10px 15px; font: 12px var(--hand); font-weight: 600; box-shadow: 3px 3px 0 #0f1017; transform: rotate(-1deg); white-space: nowrap; }.make-button:hover { background: #c0415b; transform: rotate(1deg); }.make-button span { font-size: 18px; margin: 0 3px; }
/* The making desk sits in the corner of the banner, out of the album's way. */
.masthead-compose { position: absolute; z-index: 6; right: 44px; bottom: 18px; }
.binder-meta { margin: 6px 0 0; padding-top: 12px; border-top: 1px dashed #42414f; display: flex; align-items: center; justify-content: center; gap: 15px; }.search-box { display: flex; align-items: center; gap: 8px; color: #8997af; }.search-box span { font-size: 23px; }.search-box input { width: 155px; background: transparent; border: 0; border-bottom: 1px solid #494b5c; border-radius: 0; color: #d0d8e9; font: 10px var(--mono); padding: 5px 0; outline-offset: 3px; }#filter-status { color: #82899e; font: 8px var(--mono); text-align: right; }
.empty-state { text-align: center; padding: 65px 15px; color: #aeb7cb; }.empty-state > span { font-size: 40px; color: #a7536c; }

/* The toy box. Canvas contents have a fixed reference size and are scaled as a whole. */
dialog { color: var(--bone); border: 1px solid #595465; padding: 0; max-height: calc(100dvh - 30px); box-shadow: 0 25px 100px #000b; background: var(--deep); }
dialog::backdrop { background: #05060bd9; backdrop-filter: blur(5px); }
.composer-dialog { width: min(1180px, calc(100% - 32px)); max-width: none; overflow: auto; }.composer-dialog form { padding: 24px; }
.composer-top { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding-bottom: 18px; border-bottom: 1px dashed #4a4052; }.composer-top .eyebrow { font-size: 7px; color: #9ba8c2; }.composer-top h2 { margin: 4px 0 0; font: 500 35px/1 var(--serif); }.desk-top-actions { display: flex; align-items: center; gap: 12px; }.desk-top-actions > span { font: 8px var(--mono); color: #8e9db5; }.close-button { border: 0; background: transparent; font: 30px/1 var(--serif); padding: 0 4px; color: #c1b7c6; }.close-button:hover { color: #eb6681; }
.desk-date { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; font: 8px var(--mono); letter-spacing: .05em; color: #949bb1; }.desk-date input { border: 1px solid #494351; color: #e2dce7; background: #242331; height: 36px; padding: 6px 9px; border-radius: 0; font: 11px var(--mono); }
.toy-tray { display: flex; flex-wrap: wrap; gap: 9px; padding: 5px 0 14px; }.toy-tray button { display: flex; align-items: center; gap: 7px; border: 1px solid #a0b3c3; padding: 7px 11px; background: #b6cbe0; color: #252c42; font: 17px/1 var(--hand); box-shadow: 2px 3px 0 #070911; transform: rotate(-1deg); }.toy-tray button:nth-child(2n) { transform: rotate(1deg); background: #ddc4cd; border-color: #bea0b1; }.toy-tray button:nth-child(3n) { background: #e5dfce; border-color: #bdb6a9; }.toy-tray button:hover { transform: translateY(-2px) rotate(0); }.toy-tray button span { font: 18px var(--serif); }
.sticker-drawer { border: 1px dashed #7d6576; background: #28222f; padding: 10px 14px; margin: 0 0 12px; }.sticker-drawer > div { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 9px; }.sticker-drawer button { min-width: 46px; height: 44px; border: 1px solid #c7c7d4; background: #eae5df; color: #8c2942; font: 27px var(--serif); box-shadow: 2px 2px 0 #070810; transform: rotate(-3deg); }.sticker-drawer button:nth-child(2n) { transform: rotate(3deg); }.sticker-drawer button:hover { background: #b9cde4; }.sticker-drawer button[data-sticker="twins"] { background: #a9bad0; padding: 5px; }.sticker-drawer img { display: block; width: 40px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.media-link-tray { display: grid; grid-template-columns: 145px 1fr auto; gap: 8px; padding: 12px; background: #282b39; border: 1px dashed #73809a; margin-bottom: 12px; }.media-link-tray input, .media-link-tray select { background: #181b25; border: 1px solid #444a5e; color: #cfdaeb; padding: 8px; font: 10px var(--mono); min-width: 0; }.media-link-tray button { background: #9e3450; border: 1px solid #cb6b85; padding: 5px 10px; font: 17px var(--hand); }
.desk-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 260px; border: 1px solid #4b414e; }.paper-desk { min-width: 0; padding: 14px 25px 8px; background-color: #38313b; background-image: repeating-linear-gradient(90deg, #0000 0 60px, #17101d25 61px 62px), radial-gradient(ellipse, #594552 0%, transparent 65%); }.paper-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }.paper-swatches { display: flex; gap: 6px; }.paper-swatches button { width: 20px; height: 23px; border: 1px solid #ffffff60; box-shadow: 1px 2px 0 #101019; transform: rotate(-5deg); }.paper-swatches button.active { outline: 1px solid #e37d91; outline-offset: 3px; }.paper-swatches [data-background="bone"] { background: #ece6da; }.paper-swatches [data-background="blue"] { background: #b3c8de; }.paper-swatches [data-background="night"] { background: #171924; }.paper-swatches [data-background="rose"] { background: #dcc1c9; }.paper-swatches [data-background="grid"] { background: repeating-linear-gradient(0deg, #b2c1d2 0 1px, #eae9df 1px 6px); }.history-buttons { display: flex; gap: 6px; }.history-buttons button { font: 23px/1 var(--serif); padding: 0 5px; border: 1px solid #755c6e; background: #2a2431; color: #e2c1ce; }.editor-canvas-wrap { width: min(100%, 540px); margin: 0 auto; box-shadow: 7px 9px 0 #0c07184a; }.desk-hint { text-align: center; color: #c3a9b9; font: 15px/1.3 var(--hand); margin: 12px 0 3px; }.desk-hint span { font: 7px var(--mono); color: #98859e; }
.canvas-shell { position: relative; width: 100%; overflow: hidden; isolation: isolate; aspect-ratio: 4/5; }
.page-canvas { position: absolute; left: 0; top: 0; width: 720px; height: 900px; transform-origin: top left; overflow: hidden; background-color: #ebe5d9; color: #292b36; }
.background-bone { background-image: radial-gradient(#74625113 .9px, transparent .9px), repeating-linear-gradient(0deg, transparent 0 35px, #aa9cb220 36px 37px); background-size: 5px 5px, auto; }
.background-blue { background-color: #b3c6dc; background-image: repeating-linear-gradient(0deg, transparent 0 35px, #51638125 36px 37px), linear-gradient(90deg, transparent 0 45px, #b4485c65 46px 47px, transparent 48px); }
.background-night { background-color: #171923; color: #eee6df; background-image: radial-gradient(ellipse at 70% 25%, #3c3e544d, transparent 60%), radial-gradient(#d0dbea30 .8px, transparent .8px); background-size: auto, 25px 25px; }
.background-rose { background-color: #dbc0c9; background-image: radial-gradient(#8c476a18 1px, transparent 1px); background-size: 6px 6px; }
.background-grid { background-color: #e6e5dc; background-image: linear-gradient(#7f9cb82d 1px, transparent 1px), linear-gradient(90deg, #7f9cb82d 1px, transparent 1px); background-size: 24px 24px; }
.page-canvas::before { content: ''; position: absolute; top: 22px; bottom: 22px; left: 22px; width: 13px; background: radial-gradient(circle, #2b223660 0 6px, transparent 7px) center top/13px 72px repeat-y; pointer-events: none; }
.page-canvas::after { content: '†  LILITH / 00'; position: absolute; right: 22px; bottom: 16px; font: 10px var(--mono); letter-spacing: .13em; color: #786b8199; pointer-events: none; }
.background-night::after { color: #9aa8c578; }
.stage-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20%; text-align: center; pointer-events: none; opacity: .65; }.stage-placeholder span { font: 90px var(--serif); color: #a64963; }
.stage-layer { position: absolute; transform: rotate(var(--tilt, 0deg)); transform-origin: center; color: var(--ink); opacity: var(--opacity, 1); }
.editing .stage-layer { cursor: grab; touch-action: none; user-select: none; }.editing .stage-layer:active { cursor: grabbing; }.editing .stage-layer.locked { cursor: not-allowed; }.stage-layer.selected { outline: 2px dashed #cf375b; outline-offset: 7px; }
.layer-words { width: 100%; min-height: 1.1em; padding: 12px 16px; color: var(--ink); font-size: var(--letter-size); line-height: 1.15; overflow-wrap: anywhere; white-space: pre-wrap; font-weight: var(--weight, 400); font-style: var(--font-style, normal); text-align: var(--align, left); }
.font-hand { font-family: var(--hand); }.font-serif { font-family: var(--serif); }.font-gothic { font-family: var(--gothic); }.font-mono { font-family: var(--mono); line-height: 1.4; }.font-sans { font-family: Arial, sans-serif; }.font-script { font-family: var(--serif); font-style: italic; }
.paper-none { background: none; }.paper-cream { background: #f5efdf; box-shadow: 3px 5px 3px #33253a25; }.paper-blue { background: #cbdaeb; box-shadow: 3px 5px 3px #33253a25; background-image: repeating-linear-gradient(0deg, transparent 0 27px, #54769f24 28px 29px); }.paper-rose { background: #edcbd5; box-shadow: 3px 5px 3px #33253a25; }.paper-lilac { background: #d6cce4; box-shadow: 3px 5px 3px #33253a25; }.paper-black { background: #22212c; box-shadow: 3px 5px 3px #33253a25; }.layer-words:not(.paper-none) { clip-path: polygon(0 2%, 9% 0, 18% 2%, 27% 0, 42% 1%, 53% 0, 63% 2%, 77% 0, 86% 1%, 100% 0, 99% 100%, 89% 98%, 77% 100%, 64% 98%, 49% 100%, 31% 98%, 19% 100%, 0 98%); padding: 20px; }
.layer-image { background: none; }
.layer-content { position: relative; width: 100%; height: 100%; background: #efebe2; box-shadow: 4px 7px 8px #09050f42; }
.layer-image img, .layer-video video { width: 100%; height: 100%; display: block; object-fit: var(--fit, cover); }
.layer-image img.pixel-art { image-rendering: pixelated; }
.editing .layer-image img { pointer-events: none; }
.frame-polaroid { padding: 12px 12px 42px; }
.frame-polaroid .photo-label { position: absolute; bottom: 7px; left: 12px; right: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font: 24px var(--hand); color: #77707d; }
.frame-plain { padding: 0; background: transparent; }
.frame-torn { padding: 0; clip-path: polygon(1% 2%, 12% 0, 25% 2%, 41% 0, 51% 2%, 67% 0, 82% 1%, 99% 0, 100% 98%, 86% 100%, 72% 98%, 50% 100%, 37% 98%, 22% 100%, 0 98%); }
.frame-circle { padding: 5px; border-radius: 50%; }
.frame-circle img { border-radius: 50%; }
.layer-video { padding: 8px; background: #efebe2; box-shadow: 4px 7px 8px #09050f42; }
.layer-video video { background: #161521; }
.media-label { font: 12px var(--mono); letter-spacing: .08em; color: #b6496a; margin-bottom: 12px; }
.layer-audio { padding: 19px 18px; background: #ede7e3; color: #393444; box-shadow: 4px 7px 8px #09050f42; border: 1px solid #c2a9bd; }
.layer-audio audio { width: 100%; height: 45px; display: block; color-scheme: light; }
.media-grip { position: absolute; right: 5px; top: 2px; font: 17px var(--mono); color: #846a7f; }
.layer-sticker .layer-words { background: none; box-shadow: none; padding: 0; text-shadow: 2px 2px 0 #fff9; text-align: center; line-height: 1; }
.sigil-sticker { width: 100%; height: 100%; }
.sigil-sticker img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(2px 3px 0 #dde5f055); }
.tape-surface { width: 100%; height: 100%; min-height: 20px; background: var(--ink); background-image: repeating-linear-gradient(135deg, #ffffff20 0 8px, transparent 8px 16px); clip-path: polygon(3% 0, 100% 4%, 96% 100%, 0 94%); opacity: .8; }
.transform-handle { position: absolute; padding: 0; width: calc(22px / var(--canvas-scale, 1)); height: calc(22px / var(--canvas-scale, 1)); border: 2px solid #fff1f5; background: #b33354; box-shadow: 0 0 0 2px #b33354; z-index: 500; touch-action: none; }
.handle-resize { right: calc(-14px / var(--canvas-scale, 1)); bottom: calc(-14px / var(--canvas-scale, 1)); cursor: nwse-resize; }
.handle-rotate { top: calc(-36px / var(--canvas-scale, 1)); left: calc(50% - 11px / var(--canvas-scale, 1)); border-radius: 50%; cursor: crosshair; }
.handle-rotate::after { content: ''; position: absolute; top: calc(21px / var(--canvas-scale, 1)); left: calc(9px / var(--canvas-scale, 1)); height: calc(11px / var(--canvas-scale, 1)); border-left: 2px solid #b33354; }
.locked .transform-handle { display: none; }
.layer-panel { background: #201e29; border-left: 1px solid #4b414e; padding: 15px; min-width: 0; }.panel-title { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed #534657; padding-bottom: 12px; font: 8px var(--mono); color: #a593ac; }.panel-title span:last-child { color: #c8607b; }
.control-label { display: block; font: 8px var(--mono); letter-spacing: .04em; color: #a699b1; margin: 12px 0 6px; }.control-label output { float: right; color: #bd718c; }#layer-properties select, #layer-properties textarea, #layer-properties input:not([type="range"]):not([type="color"]) { width: 100%; background: #2c2837; color: #d5c9df; border: 1px solid #4f4057; padding: 7px; font: 11px var(--mono); border-radius: 0; }#layer-properties textarea { resize: vertical; min-height: 80px; }#layer-properties select { font-size: 10px; height: 31px; }.layer-panel input[type="range"] { width: 100%; height: 13px; accent-color: #b75e80; margin: 0; }.text-style-buttons { display: flex; gap: 4px; margin-top: 8px; }.text-style-buttons button { flex: 1; min-width: 0; height: 25px; border: 1px solid #564357; background: #302635; color: #c5aec9; font: 12px var(--serif); }.text-style-buttons button[aria-pressed="true"] { background: #815369; color: #fff; }.ink-label { width: 29px; }.ink-label input { padding: 0; width: 29px; height: 25px; background: transparent; border: 1px solid #71556e; }
.piece-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 17px; }.piece-actions button { padding: 6px 4px; font: 9px var(--mono); border: 1px solid #524254; background: #302633; color: #bfa9c9; }.piece-actions button:hover { background: #483047; }.piece-actions .danger { color: #e08199; }.piece-actions #layer-lock { color: #adc4df; }.layers-details { margin-top: 17px; border-top: 1px dashed #514054; padding-top: 13px; }.layers-details summary { display: flex; justify-content: space-between; cursor: pointer; font: 16px var(--hand); color: #bdb0c7; }.layer-list { margin-top: 9px; display: grid; gap: 5px; max-height: 210px; overflow-y: auto; }.layer-row { display: grid; grid-template-columns: 1fr 28px; background: #262431; border: 1px solid #383343; }.layer-row.selected { background: #3a2b3d; border-color: #895a78; }.layer-row button { border: 0; background: none; min-width: 0; padding: 6px 7px; text-align: left; font: 8px var(--mono); color: #bbaac5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.layer-row button span { color: #9cafce; margin-right: 8px; font: 13px var(--serif); }.layer-row .row-lock { text-align: center; padding: 3px; color: #a599b5; }.clear-desk { width: 100%; margin-top: 17px; background: none; border: 0; color: #8b7d97; font: 14px var(--hand); }.caption-fold { margin-top: 17px; }.caption-fold summary { cursor: pointer; color: #bbafc7; font: 19px var(--hand); }.caption-fold summary span { color: #776c84; font-size: 14px; margin-left: 7px; }.editor-shell { border: 1px solid #4b3e51; margin-top: 9px; }.editor-tools { display: flex; gap: 5px; padding: 5px; border-bottom: 1px solid #473b4f; background: #26212e; }.editor-tools button { width: 26px; height: 25px; border: 0; background: none; color: #c9b2ca; }.rich-editor { padding: 14px; min-height: 90px; max-height: 220px; overflow: auto; font: 18px/1.5 var(--serif); background: #201c28; color: #c9bed4; outline: none; }.rich-editor:empty::before { content: attr(data-placeholder); color: #796d83; pointer-events: none; }.rich-editor blockquote { margin: 8px 0; border-left: 2px solid #a74d6d; padding-left: 12px; font-style: italic; }.composer-bottom { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 20px; }.composer-bottom .make-button { font-size: 18px; padding: 9px 15px; }
.reader-dialog { width: min(740px, calc(100% - 30px)); max-width: none; padding: 23px; overflow: auto; }.reader-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 16px; }.reader-header h2 { font: 500 32px/1.1 var(--serif); margin: 5px 0 0; }.reader-header .eyebrow { font-size: 8px; }.reader-dialog .canvas-shell { width: min(100%, 600px); margin: auto; }.reader-foot { display: flex; justify-content: center; margin: 24px 0 2px; }.post-body { color: #b5b9cd; font: 19px/1.6 var(--serif); margin-top: 22px; overflow-wrap: anywhere; }.post-body p { margin: 0 0 12px; }.post-body blockquote { border-left: 2px solid #b44464; margin: 12px 0; padding: 6px 15px; font-style: italic; color: #c88ca6; }.toast { position: fixed; z-index: 1000; bottom: 25px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 30px); padding: 13px 18px; background: #e2d9dd; color: #3c2f40; border: 1px solid #9e5675; box-shadow: 4px 5px 0 #090711; font: 13px/1.4 var(--mono); }.composer-dialog .toast { position: sticky; bottom: 10px; margin: 10px auto; left: auto; transform: none; }
@media (max-width: 1000px) {
  .site-wrap { width: calc(100% - 36px); margin-top: 0; }.masthead { padding: 32px 35px 56px; }.layout { grid-template-columns: 215px minmax(0, 1fr); }.sidebar { padding: 24px 18px; }.main-column { padding: 18px 14px 22px 16px; }.binder-meta { flex-wrap: wrap; }.desk-workbench { grid-template-columns: minmax(0, 1fr) 230px; }.paper-desk { padding: 13px 18px 8px; }
}
@media (max-width: 760px) {
  .site-wrap { width: calc(100% - 20px); margin-top: 0; }.masthead { min-height: 300px; padding: 28px 27px 54px; grid-template-columns: 1fr .7fr; }.masthead h1 { font-size: 90px; }.layout { grid-template-columns: 175px minmax(0, 1fr); }.sidebar { padding: 20px 13px; }.portrait-frame { margin: 0 3px 22px; }.nav-link { font-size: 8px; gap: 5px; padding-left: 4px; }.binder-tools button { display: block; text-align: left; line-height: 1.6; }.binder-tools small { display: block; }.main-column { padding: 16px 12px 20px 12px; }.make-button { padding: 8px 9px; font-size: 11px; }.composer-dialog form { padding: 17px; }.composer-top h2 { font-size: 31px; }.desk-top-actions > span { display: none; }.desk-workbench { grid-template-columns: minmax(0, 1fr) 210px; }.paper-desk { padding: 10px; }.paper-options { flex-wrap: wrap; gap: 8px; }.layer-panel { padding: 10px; }.desk-hint { font-size: 13px; }.desk-hint span { font-size: 6px; }.toy-tray { gap: 7px; }.toy-tray button { font-size: 15px; padding: 6px 8px; }
}
@media (max-width: 540px) {
  .site-wrap { width: 100%; margin: 0; border-left: 0; border-right: 0; }.masthead { padding: 26px 23px 50px; min-height: 325px; display: block; }.masthead::before { left: 11px; }.masthead-copy { max-width: 85%; }.masthead h1 { font-size: 87px; margin-top: 19px; }.layout { display: block; }.sidebar { display: grid; grid-template-columns: 80px 1fr; gap: 0 15px; padding: 19px 20px 16px; border-bottom: 1px solid #3a3544; border-right: 0; }.keeper-card { display: contents; }.portrait-frame { grid-column: 1; grid-row: 1/4; width: 75px; margin: 0; padding: 4px 4px 15px; align-self: start; }.portrait-frame img { aspect-ratio: 3/3.7; }.portrait-tape { width: 30px; left: calc(50% - 15px); height: 14px; top: -5px; }.small-shrine { display: none; }.side-nav { grid-column: 1/-1; display: flex; gap: 6px; overflow-x: auto; margin-top: 17px; padding-bottom: 3px; }.side-nav > p { display: none; }.nav-link { width: auto; flex-shrink: 0; font-size: 7px; min-height: 31px; padding: 4px 7px; border-bottom: 1px solid transparent; border-left: 0; }.nav-link.active { border-bottom-color: #a6c9e8; }.nav-link span { font-size: 13px; width: auto; }.nav-link b { display: none; }.binder-tools { grid-column: 1/-1; display: flex; gap: 10px; margin-top: 12px; }.binder-tools button { background: none; border: 0; padding: 0; font-size: 7px; color: #9dabc5; }.binder-tools small { display: inline; margin-left: 4px; font-size: 5px; }.main-column { padding: 12px 14px 20px 8px; }.binder-meta { margin-top: 2px; gap: 8px; }.search-box input { width: 130px; font-size: 8px; }#filter-status { font-size: 6px; }
  .composer-dialog { width: calc(100% - 10px); max-height: calc(100dvh - 10px); }.composer-dialog form { padding: 13px; }.composer-top h2 { font-size: 28px; }.composer-top .eyebrow { font-size: 6px; }.composer-top { padding-bottom: 13px; }.toy-tray { gap: 7px; }.toy-tray button { font-size: 15px; padding: 6px 9px; }.desk-workbench { display: block; }.paper-desk { padding: 12px; }.paper-options { flex-wrap: nowrap; }.paper-swatches { gap: 5px; }.paper-swatches button { width: 16px; height: 20px; }.history-buttons button { font-size: 20px; }.layer-panel { border-left: 0; border-top: 1px solid #564553; padding: 13px; }.panel-title { padding-bottom: 10px; }#layer-properties { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }#text-controls, #image-controls, .piece-actions { grid-column: 1/-1; }#layer-properties > .control-label, #layer-properties > input { grid-column: 1/-1; }#height-control { grid-column: 1/-1; }.text-style-buttons button { height: 30px; }.layers-details { margin-top: 16px; }.layer-list { max-height: 150px; }.media-link-tray { grid-template-columns: 1fr auto; }.media-link-tray input { grid-column: 1/-1; order: -1; }.composer-bottom { align-items: end; gap: 10px; }.composer-bottom .make-button { font-size: 15px; padding: 9px 10px; }.reader-dialog { width: calc(100% - 14px); padding: 14px; }.reader-header h2 { font-size: 28px; }.reader-header .eyebrow { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* One-word visual mode: Rei, the red sea, and image-only scrapbook leaves. */
html, body { min-height: 100%; background: #09070d; }
body { position: relative; isolation: isolate; background-image: radial-gradient(ellipse at 50% 15%, #a8173122, transparent 52%); color: #f5e9e5; }
body::before { content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0b07116e 0%, #10081025 48%, #08070cc2 100%), url('assets/blood-impact.svg') center 48% / cover no-repeat; }
body::after { content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 30%, #05050ab3 100%); }
.site-wrap { position: relative; z-index: 1; width: min(1480px, calc(100% - 30px)); margin: 0 auto; border: 1px solid #e43d5540; box-shadow: 0 0 120px #bd15362d; background: #100d17a8; }
.masthead { min-height: 405px; grid-template-columns: 1fr 1fr; align-items: center; padding: 25px 45px 25px; background: linear-gradient(90deg, #090810b8 0%, #11091237 52%, #0a08105c 100%), url('assets/blood-impact.svg') center 52% / cover; border-bottom: 1px solid #f0394c60; }
.masthead::before { left: 18px; border-color: #f23b524d; }
.masthead-copy { display: flex; align-items: center; min-height: 250px; }
.masthead h1 { margin: 0 0 0 1vw; font: 500 clamp(84px, 13vw, 186px)/.8 var(--serif); color: #f0e5df; letter-spacing: -.065em; text-transform: none; text-shadow: 0 2px #fff4, 0 0 18px #ffbdc34f, 7px 9px #5709198c; }

.layout { border-top: 1px solid #f044574a; grid-template-columns: 220px minmax(0,1fr); background: #100d17a8; }
.sidebar { background: #0a0911cf; border-color: #ff3c5346; padding: 22px 18px; }
.portrait-frame { display: block; padding: 6px 6px 8px; background: #d9d9de; box-shadow: 4px 6px 0 #03030a, 0 0 20px #dc27432e; border: 1px solid #fff9; }
.portrait-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3/3.7; object-fit: cover; object-position: center 37%; filter: saturate(.82) contrast(1.12); }
.portrait-tape { background: #ed183bbd; }
.source-image { color: inherit; text-decoration: none; }.source-image:hover { outline: 1px solid #f54d62; outline-offset: 3px; }
.side-nav > p, #filter-status, .composer-top .eyebrow, .composer-top h2, #draft-status, #selected-label, #layer-count, #entry-count, .layers-details summary, .clear-desk, #toast { display: none !important; }
.nav-link { font-size: 0; min-height: 39px; justify-content: center; border-left: 0; border-bottom: 1px solid #a51d3433; }
.nav-link > span { width: auto; font-size: 21px; color: #ec6276; }.nav-link.active { background: #48111f9e; border-color: #ec405857; }
.binder-tools { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }.binder-tools button { display: grid; place-items: center; width: 40px; height: 39px; padding: 0; border-color: #93233c80; color: #e9959d; font-size: 0; background: #180d18a8; }.binder-tools small { display: none; }
#export-open::before { content: '⇩'; font: 23px var(--serif); }#import-open::before { content: '⇧'; font: 23px var(--serif); }#sync-open::before { content: '↻'; font: 23px var(--serif); }
.main-column { min-height: 70vh; padding: 16px 12px 26px 14px; background: #100a17a3; background-image: radial-gradient(#f1d6e10b .8px, transparent .8px); }
.make-button { font-size: 0; padding: 7px 12px; color: #fff0ef; border-color: #f16b7080; background: #92142cc9; }.make-button span { display: inline; font: 25px/1 var(--serif); margin: 0; }.make-button:not(:has(span))::before { content: '＋'; font: 25px/1 var(--serif); }
.binder-meta { margin: 4px 0 0; padding-top: 10px; border-color: #e936493b; }.search-box { font-size: 0; }.search-box>span { color: #e95d70; font-size: 20px; }.search-box input { width: 115px; height: 24px; color: transparent; caret-color: #e96c7c; font-size: 0; border-color: #aa354842; }
.post-actions button { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #d75d6c; background: #120912de; color: #ffe5e3; font: 16px var(--serif); padding: 0; box-shadow: 1px 2px 5px #050308aa; }.post-actions button:hover { background: #a91531; }.post-actions button:disabled { opacity: .3; cursor: default; }
.legacy-canvas { border: 0; background: #090810; }.legacy-canvas img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.page-canvas .photo-label, .page-canvas .media-label { display: none !important; }
.layer-audio { padding: 10px; }.layer-audio .media-label { display: none; }
.empty-state { color: transparent; }.empty-state>span { color: #eb4a5c; }.empty-state .make-button { color: transparent; }

/* Keep the visual interface icon-only without sacrificing accessible names. */
.composer-dialog .composer-top { padding-bottom: 12px; }.desk-top-actions { gap: 0; }.desk-top-actions>span { display: none; }
.close-button { font-size: 0; width: 34px; height: 34px; }.close-button::before { content: '×'; font: 26px var(--serif); }
/* The reader's way out is a backspace key under the print, not a tiny × in the
   corner: a thumb reaches the bottom of a page, and the empty paper around the
   print closes it too. */
#reader-close { width: 122px; height: 48px; padding: 0; border: 1px solid; border-radius: 3px; transition: transform .12s ease, box-shadow .12s ease, color .12s ease; }
#reader-close::before { content: '⌫'; font: 30px/1 var(--serif); }
#reader-close:active { transform: translate(2px, 3px); }
.toy-tray { gap: 6px; }.toy-tray button { font-size: 0; min-width: 36px; min-height: 36px; padding: 5px 8px; justify-content: center; }.toy-tray button span { font-size: 0; }.toy-tray button span::before { font: 22px var(--serif); }.toy-tray #add-text-layer { display: flex !important; }.toy-tray #add-text-layer span { font: 600 15px/1 var(--hand); color: #8e3850; }
#add-image-layer span::before { content: '▧'; }#sticker-open span::before { content: '✶'; }#add-tape-layer span::before { content: '▰'; }#add-audio-layer span::before { content: '♫'; }#add-video-layer span::before { content: '▷'; }#add-youtube-layer span::before { content: '▶'; }#add-link-layer span::before { content: '↗'; }
.sticker-drawer button { font-size: 0; }.sticker-drawer button[data-sticker="cross"]::before { content: '†'; font: 27px var(--serif); }.sticker-drawer button[data-sticker="moon"]::before { content: '☾'; font: 27px var(--serif); }.sticker-drawer button[data-sticker="star"]::before { content: '✶'; font: 27px var(--serif); }.sticker-drawer button[data-sticker="heart"]::before { content: '♡'; font: 27px var(--serif); }.sticker-drawer button[data-sticker="flower"]::before { content: '✿'; font: 27px var(--serif); }.sticker-drawer button[data-sticker="sparkle"]::before { content: '✧'; font: 27px var(--serif); }
.media-link-tray select, .media-link-tray input { color: transparent; font-size: 0; }.media-link-tray input::placeholder { color: transparent; }.media-link-tray select { appearance: none; }.media-link-tray button { font-size: 0; }.media-link-tray button::before { content: '↗'; font: 20px var(--serif); }
.paper-options { margin-bottom: 11px; }.paper-swatches button { width: 21px; height: 24px; border: 1px solid #f7d8db88; }.history-buttons button { width: 31px; height: 29px; font-size: 21px; }.desk-hint { display: none; }
.layer-panel { padding: 12px; }.panel-title { display: none; }
.caption-fold { display: none !important; }
.control-label { font-size: 0; color: transparent; margin: 5px 0; }.control-label output, output { display: none; }
#layer-properties select, #layer-properties input:not([type="range"]):not([type="color"]), #layer-properties textarea { color: transparent; font-size: 0; caret-color: transparent; }.layer-panel input[type="range"] { height: 12px; accent-color: #ee405a; }
.layer-panel #image-controls input::placeholder { color: transparent; }.piece-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }.piece-actions button { width: 31px; height: 29px; flex: 0 0 auto; padding: 0; font-size: 0; text-align: center; }.piece-actions button::before { font: 17px var(--serif); }.piece-actions #layer-back::before { content: '↓'; }.piece-actions #layer-front::before { content: '↑'; }.piece-actions #layer-duplicate::before { content: '⧉'; }.piece-actions #layer-lock::before { content: '⌑'; }.piece-actions #layer-delete::before { content: '×'; }
.layers-details { margin-top: 10px; }.layers-details summary { display: block; font-size: 0; }.layers-details summary::before { content: '▤'; color: #d6778d; font: 18px var(--serif); }.layer-row button { font-size: 0; }.layer-row button span { font-size: 16px; }.layer-row .row-lock { font-size: 0; }.clear-desk { font-size: 0; }.clear-desk::before { content: '↺'; font: 18px var(--serif); }
.composer-bottom { justify-content: flex-end; margin-top: 11px; }.composer-bottom .make-button { font-size: 0; padding: 7px 13px; }.composer-bottom .make-button::before { content: '✓'; font: 22px var(--serif); }.composer-bottom .make-button span { display: none; }
#reader .reader-header h2, #reader .reader-header .eyebrow, #reader-caption, .reader-dialog .post-body, #toast { display: none !important; }

@media (max-width: 760px) {
  .site-wrap { width: calc(100% - 12px); margin-top: 0; }.masthead { min-height: 295px; padding: 22px 18px 20px; }.masthead-copy { min-height: 225px; }.masthead h1 { font-size: clamp(76px, 20vw, 130px); }.layout { grid-template-columns: 142px minmax(0,1fr); }.sidebar { padding: 17px 11px; }.main-column { padding: 12px 10px 18px 10px; }#reader-close { width: 142px; height: 54px; }#reader-close::before { font-size: 34px; }
}
@media (max-width: 540px) {
  .site-wrap { width: 100%; margin: 0; border-left: 0; border-right: 0; }.masthead { min-height: 260px; padding: 15px 12px; }.masthead-copy { min-height: 190px; }.masthead h1 { margin-left: 2vw; font-size: clamp(70px, 21vw, 94px); }.layout { display: block; }.sidebar { display: grid; grid-template-columns: 72px 1fr; padding: 13px 14px 8px; gap: 0 11px; }.keeper-card { display: contents; }.portrait-frame { grid-column: 1; grid-row: 1/2; width: 68px; margin: 0; padding: 3px; }.portrait-frame img { aspect-ratio: 3/3.7; }.portrait-tape { width: 27px; height: 12px; left: calc(50% - 13px); top: -5px; }.side-nav { grid-column: 1/-1; margin: 8px 0 0; }.nav-link { min-height: 29px; padding: 3px 7px; }.binder-tools { grid-column: 1/-1; margin-top: 7px; }.main-column { min-height: 70vh; padding: 10px 12px 16px 6px; }.binder-meta { margin: 2px 0 0; }.masthead-compose { right: 40px; bottom: 14px; }.composer-dialog { width: calc(100% - 8px); max-height: calc(100dvh - 8px); }.composer-dialog form { padding: 10px; }.composer-top { padding: 0 0 8px; }.desk-workbench { display: block; }.paper-desk { padding: 8px; }.layer-panel { border-top: 1px solid #713347; padding: 8px; }.media-link-tray { grid-template-columns: 1fr auto; }.reader-dialog { width: calc(100% - 10px); padding: 10px; }#reader-close { width: 162px; height: 62px; }#reader-close::before { font-size: 38px; }.reader-foot { margin-top: 18px; }
}

.visually-silent { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Values stay usable by keyboards and assistive tools, but the visual skin stays silent.
   The search line is the exception: a field where the letters you type are the
   only feedback there is, so #search-input keeps its ink (see moonlight.css). */
#post-title, #media-url, #layer-properties input:not([type="range"]):not([type="color"]), #layer-properties textarea { font-size: 12px !important; color: transparent !important; caret-color: transparent !important; }

/* Clearer icon desk: remove inactive inspector panes and turn layer rows into legible symbol tiles. */
.desk-meta { display: none !important; }
.desk-workbench.without-selection { grid-template-columns: minmax(0,1fr) 210px; }
.desk-workbench.empty-workbench { grid-template-columns: minmax(0,1fr); }
.desk-workbench.empty-workbench .layer-panel { display: none !important; }

.stage-placeholder span { font-size: clamp(36px, 7vw, 72px); color: #b74863; opacity: .58; }
.layer-list { grid-template-columns: repeat(auto-fill, minmax(46px,1fr)); gap: 6px; max-height: 160px; }
.layer-row { display: block; position: relative; min-width: 0; border: 0; background: transparent; }
.layer-row.selected { background: transparent; border: 0; }
.layer-row > button:first-child { width: 100%; height: 40px; display: grid; place-items: center; padding: 2px; border: 1px solid #62505d; background: #292430; box-shadow: 2px 3px 0 #08070d; }
.layer-row.selected > button:first-child { border-color: #f17a84; background: #562232; box-shadow: 0 0 0 2px #b33c55, 2px 3px 0 #08070d; }
.layer-row > button:first-child span { margin: 0; color: #a8c6df; font: 19px var(--serif); }
.layer-row .row-lock { position: absolute; right: -3px; top: -3px; z-index: 2; width: 17px; height: 17px; padding: 0; border: 1px solid #78536a; background: #14101b; font-size: 0; }
.layer-row .row-lock::before { content: '○'; color: #d5adbd; font: 12px/1 var(--sans); }
.layer-row .row-lock[aria-pressed="true"]::before { content: '●'; color: #f3828f; }
.shape-icons, .icon-control-group, .link-type-icons { display: flex; align-items: center; justify-content: center; gap: 5px; }
.shape-icons button, .icon-control-group button, .link-type-icons button { display: grid; place-items: center; min-width: 31px; height: 30px; padding: 2px 5px; border: 1px solid #735368; color: #cbb8cc; background: #28222e; font: 19px/1 var(--serif); box-shadow: 1px 2px 0 #0a0810; }
.shape-icons button { width: 32px; height: 27px; font-size: 17px; color: #b7c9dc; }
.shape-icons button.active, .icon-control-group button.active, .link-type-icons button.active { border-color: #f08990; color: #ffe9e7; background: #642337; box-shadow: 0 0 0 1px #bd465e, 1px 2px 0 #0a0810; }
#page-shape, #layer-frame, #layer-fit { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; font-size: 0 !important; color: transparent !important; }
.shape-label { display: none !important; }
.icon-control-group { justify-content: flex-start; margin: 6px 0 8px; padding-bottom: 7px; border-bottom: 1px dotted #594457; }
#image-controls .control-label, #image-controls > input { display: none !important; }
.control-label { display: flex !important; align-items: center; min-height: 14px; margin: 7px 0 1px; font-size: 0 !important; color: #947d9c; }
.control-label output { display: none !important; }
label[for="layer-width"]::before { content: '↔'; }
label[for="layer-height"]::before { content: '↕'; }
label[for="layer-rotation"]::before { content: '⟳'; }
label[for="layer-opacity"]::before { content: '◐'; }
#tape-controls .control-label::before { content: '▰'; }
.control-label::before { width: 20px; color: #d68397; font: 15px/1 var(--serif); text-align: center; }
#tape-controls input[type="color"] { width: 31px; height: 27px; padding: 2px; border: 1px solid #785568; background: #251f2b; }
.layer-panel input[type="range"] { height: 15px; accent-color: #ee536a; }
.paper-swatches { gap: 8px; }
.paper-swatches button { width: 24px; height: 27px; border-radius: 2px; box-shadow: 1px 3px 0 #09070d; }
.paper-swatches button.active { outline-color: #ff9da3; }
.history-buttons button { min-width: 32px; height: 29px; }
.link-type-icons button { width: 31px; min-width: 31px; height: 30px; }
.media-link-tray { grid-template-columns: auto 17px minmax(60px,1fr) auto; align-items: center; gap: 7px; padding: 8px; }
.link-field-glyph { color: #d77a90; font: 17px var(--serif); }
.media-link-tray input { height: 31px; min-width: 0; background: #17131c; border: 1px solid #614757; padding: 4px; }
.media-link-tray button { min-width: 34px; height: 31px; display: grid; place-items: center; padding: 0; }
.layers-details { padding-top: 8px; }
@media (max-width: 540px) { .desk-workbench.without-selection { display: block; }.shape-icons { gap: 3px; }.shape-icons button { width: 26px; min-width: 26px; height: 25px; padding: 0; }.icon-control-group { gap: 4px; }.icon-control-group button { min-width: 29px; height: 27px; }.media-link-tray { grid-template-columns: auto 15px minmax(50px,1fr) 32px; gap: 4px; } }

/* Story lettering: typed directly in the inspector, previewed live on the paper. */
#text-controls { display: grid !important; gap: 4px; }
#text-controls #layer-text { display: block !important; width: 100%; min-height: 66px; resize: vertical; padding: 9px 10px; background: #26212e !important; border: 1px solid #765469; color: #eee4e6 !important; caret-color: #ff7885 !important; font: 19px/1.25 var(--hand) !important; font-size: 19px !important; }
#text-controls .control-label { display: flex !important; }
label[for="layer-text"]::before { content: '✎'; }
label[for="layer-font-size"]::before { content: 'Aa'; width: 25px; font: 15px var(--hand); }
label[for="layer-paper"]::before { content: '▤'; }
label[for="layer-effect-strength"]::before { content: '✧'; }
.text-font-icons { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; margin: 5px 0 8px; }
.text-font-icons button { min-width: 0; height: 29px; padding: 0; border: 1px solid #544356; color: #d9c7d8; background: #292430; font-size: 14px; box-shadow: 1px 2px 0 #09070d; }
.text-font-icons button.active { background: #532337; color: #ffe5e6; border-color: #ef7d8d; box-shadow: 0 0 0 1px #b8405c; }
.text-effect-icons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin: 6px 0; }
.text-effect-icons button { display: grid; place-items: center; min-width: 0; height: 32px; padding: 0; border: 1px solid #59445a; background: #28222f; color: #e1d2df; box-shadow: 1px 2px 0 #08070d; }
.text-effect-icons button.active { border-color: #fa7f8c; background: #602338; box-shadow: 0 0 0 1px #b83655; }
.effect-sample { font: 18px/1 var(--hand); }
.text-effect-icons [data-effect="outline"] .effect-sample { color: transparent; -webkit-text-stroke: .8px #f1ccda; text-shadow: 1px 1px #a3355c; }
.text-effect-icons [data-effect="shadow"] .effect-sample { text-shadow: 2px 2px #08060d, 4px 4px #bd3152; }
.text-effect-icons [data-effect="glow"] .effect-sample { color: #ffd8e0; text-shadow: 0 0 4px #ff7397, 0 0 10px #d5266f; }
.text-effect-icons [data-effect="neon"] .effect-sample { color: #fff1f9; text-shadow: 0 0 2px white, 0 0 6px #fd4d91, 0 0 12px #b523ea; }
.text-effect-icons [data-effect="glitch"] .effect-sample { color: #f4e9ff; text-shadow: -2px 0 #3be2ec, 2px 1px #ff345f; }
.text-effect-icons [data-effect="gradient"] .effect-sample { background: linear-gradient(90deg,#f43c5c,#ffb3c5 50%,#79cde8); background-clip: text; -webkit-background-clip: text; color: transparent; }
.text-effect-icons [data-effect="label"] .effect-sample { padding: 2px 4px; color: #f5dce2; background: #9e2947; border: 1px solid #ef8b9b; }
.layer-words.effect-outline { color: transparent; -webkit-text-stroke: var(--stroke-width) var(--ink); paint-order: stroke fill; text-shadow: 1px 1px #f7e4e944; }
.layer-words.effect-shadow { text-shadow: var(--shadow-shift) var(--shadow-shift) 0 #0a0712, calc(var(--shadow-shift) * 2) calc(var(--shadow-shift) * 2) 0 #b62d4c; }
.layer-words.effect-glow { text-shadow: 0 0 var(--glow-radius) currentColor, 0 0 calc(var(--glow-radius) * 1.8) var(--ink); filter: drop-shadow(0 0 var(--glow-radius) var(--ink)); }
.layer-words.effect-neon { color: #fff5fb; -webkit-text-stroke: .5px #fff; text-shadow: 0 0 3px #fff, 0 0 var(--glow-radius) var(--ink), 0 0 calc(var(--glow-radius) * 2) #d82782; }
.layer-words.effect-glitch { text-shadow: calc(var(--glitch-shift) * -1) 0 #40dfed, var(--glitch-shift) 1px #ff3a61; }
.layer-words.effect-gradient { background: linear-gradient(90deg,#f23c5e,#f6c6d1 50%,#78c5e2); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.layer-words.effect-label { display: inline-block; border: 2px solid currentColor; background: #a11c3bc9; padding: 12px 18px; box-shadow: 4px 5px 0 #101019; }
@media (max-width: 760px) { .text-font-icons { grid-template-columns: repeat(6,minmax(0,1fr)); }.text-font-icons button { height: 32px; }.text-effect-icons button { height: 35px; } }

/* Swap a picture (file, faraway URL, or this site's own art) and slide it inside its frame. */
.editing.pan-mode .stage-layer.layer-image { cursor: move; }
.page-canvas:not(.editing) .layer-image { perspective: 700px; }
.page-canvas:not(.editing) .layer-image .layer-content, .page-canvas:not(.editing) .layer-image img { cursor: grab; touch-action: pan-y; user-select: none; }
/* Inside the zoom there is no book to pan: the finger belongs to the lift. */
#reader .layer-image .layer-content, #reader .layer-image img { touch-action: none; }
.page-canvas:not(.editing) .layer-image .layer-content:active { cursor: grabbing; }
.page-canvas:not(.editing) .layer-image .layer-content { transform-origin: 50% 0; transition: transform .28s ease-out, box-shadow .28s ease-out, filter .28s ease-out; }
.page-canvas:not(.editing) .layer-image.lifting .layer-content { will-change: transform; transition-duration: .1s; }
/* A see-through picture keeps no paper behind it, so at rest its shadow follows its own
   alpha instead of the card's rectangle. */
.page-canvas:not(.editing) .layer-image[data-silhouette="true"] .layer-content { box-shadow: none; filter: drop-shadow(4px 6px 4px #09050f45); }
/* A print is taped along its top edge, so the bottom edge is the one that comes up. */
.page-canvas:not(.editing) .layer-image::after { content: ''; position: absolute; top: -8px; left: 50%; width: 24%; height: 19px; margin-left: -12%; transform: rotate(-1.6deg); pointer-events: none; z-index: 2; background: repeating-linear-gradient(135deg, #eaded0c9 0 8px, #dccdaec9 8px 16px); border: 1px solid #05030a2e; box-shadow: 0 1px 3px #05030a4d; opacity: .82; }
.page-canvas:not(.editing) .layer-image.lifting::after { opacity: .95; box-shadow: 0 2px 5px #05030a66; }
/* The cast shadow: the print's projection on the paper, hinged at the tape. The tight copy
   is the plate itself lying on the page; the loose copy behind it is the lifted edge — the
   farther it gets from the paper, the wider and blurrier its shadow falls. Both swing with
   the print and narrow as it leans off the light. */
.page-canvas:not(.editing) .layer-image .print-shadow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-canvas:not(.editing) .layer-image .print-shadow::before, .page-canvas:not(.editing) .layer-image .print-shadow::after { content: ''; position: absolute; inset: 0; transform-origin: 50% 0; }
.page-canvas:not(.editing) .layer-image .print-shadow::before { background: rgba(4, 3, 8, var(--shadow-alpha, 0)); transform: perspective(440px) rotateZ(var(--shadow-spin, 0deg)) rotateX(calc(var(--shadow-splay, 0deg) * .5)) skewX(var(--shadow-skew, 0deg)) scaleX(var(--shadow-narrow, 1)) scaleY(var(--shadow-fold, 1)); filter: blur(var(--shadow-soft, 0px)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .8) 42%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .8) 42%, transparent 92%); transition: transform .28s ease-out, filter .28s ease-out, background-color .28s ease-out; }
.page-canvas:not(.editing) .layer-image .print-shadow::after { background: rgba(4, 3, 8, var(--shadow-alpha-wide, 0)); transform: perspective(380px) rotateZ(var(--shadow-spin, 0deg)) rotateX(var(--shadow-splay, 0deg)) skewX(var(--shadow-skew, 0deg)) scaleX(var(--shadow-wide, 1)) scaleY(var(--shadow-fold-wide, 1)); filter: blur(var(--shadow-soft-wide, 0px)); transition: transform .28s ease-out, filter .28s ease-out, background-color .28s ease-out; }
.page-canvas:not(.editing) .layer-image[data-shadow-shape="frame-circle"] .print-shadow::before, .page-canvas:not(.editing) .layer-image[data-shadow-shape="frame-circle"] .print-shadow::after { border-radius: 50%; }
.page-canvas:not(.editing) .layer-image[data-shadow-shape="frame-torn"] .print-shadow::before, .page-canvas:not(.editing) .layer-image[data-shadow-shape="frame-torn"] .print-shadow::after { clip-path: polygon(1% 2%, 12% 0, 25% 2%, 41% 0, 51% 2%, 67% 0, 82% 1%, 99% 0, 100% 98%, 86% 100%, 72% 98%, 50% 100%, 37% 98%, 22% 100%, 0 98%); }
/* The silhouette shadow: two black copies of the picture itself (colour burned away, alpha
   kept) hung on the same hinge and splayed like the rectangle copies — the tight one melts
   into the loose one with the same downward fade. Opaque pictures never show them. */
.layer-image .print-shadow .print-shadow-copy { display: none; }
.page-canvas:not(.editing) .layer-image .print-shadow .print-shadow-copy { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--fit, cover); transform-origin: 50% 0; opacity: 0; transition: transform .28s ease-out, filter .28s ease-out, opacity .28s ease-out; }
.page-canvas:not(.editing) .layer-image[data-shadow-shape="silhouette"] .print-shadow::before, .page-canvas:not(.editing) .layer-image[data-shadow-shape="silhouette"] .print-shadow::after { content: none; }
.page-canvas:not(.editing) .layer-image[data-shadow-shape="silhouette"] .print-shadow .print-shadow-copy { display: block; }
.page-canvas:not(.editing) .layer-image .print-shadow .print-shadow-core { opacity: var(--shadow-alpha, 0); transform: perspective(440px) rotateZ(var(--shadow-spin, 0deg)) rotateX(calc(var(--shadow-splay, 0deg) * .5)) skewX(var(--shadow-skew, 0deg)) scaleX(var(--shadow-narrow, 1)) scaleY(var(--shadow-fold, 1)); filter: brightness(0) blur(var(--shadow-soft, 0px)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .8) 42%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .8) 42%, transparent 92%); }
.page-canvas:not(.editing) .layer-image .print-shadow .print-shadow-loose { opacity: var(--shadow-alpha-wide, 0); transform: translateY(var(--shadow-fall, 0px)) perspective(380px) rotateZ(var(--shadow-spin, 0deg)) rotateX(var(--shadow-splay, 0deg)) skewX(var(--shadow-skew, 0deg)) scaleX(var(--shadow-wide, 1)) scaleY(var(--shadow-fold-wide, 1)); filter: brightness(0) blur(var(--shadow-soft-wide, 0px)); }
.page-canvas:not(.editing) .layer-image[data-shadow-shape="silhouette"] .print-shadow .print-shadow-loose { opacity: calc(var(--shadow-alpha-wide, 0) + .06); }
.page-canvas:not(.editing) .layer-image.lifting .print-shadow .print-shadow-copy { transition-duration: .1s; }
.page-canvas:not(.editing) .layer-image.lifting .print-shadow::before, .page-canvas:not(.editing) .layer-image.lifting .print-shadow::after { transition-duration: .1s; }
.source-icons { justify-content: flex-start; gap: 6px; }
#layer-src-tray { display: grid; grid-template-columns: 17px minmax(60px, 1fr) auto; align-items: center; gap: 7px; padding: 8px; margin-bottom: 8px; background: #17131c; border: 1px dashed #614757; }
#layer-src-tray[hidden] { display: none !important; }
#layer-src-tray .link-field-glyph { color: #d77a90; font: 17px var(--serif); }
#layer-src-tray #layer-src-url { display: block; height: 31px; min-width: 0; background: #1d1722; border: 1px solid #614757; padding: 4px 6px; }
#layer-src-apply { min-width: 34px; height: 31px; display: grid; place-items: center; padding: 0; background: #9e3450; border: 1px solid #cb6b85; color: #ffe5e3; font-size: 0; box-shadow: 1px 2px 0 #0a0810; }
#layer-src-apply::before { content: '↗'; font: 17px var(--hand); }
#layer-pan[aria-pressed="true"] { border-color: #f08990; color: #ffe9e7; background: #642337; box-shadow: 0 0 0 1px #bd465e, 1px 2px 0 #0a0810; }
.asset-shelf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.asset-chip, .media-link-tray button.asset-chip { width: 42px; min-width: 42px; height: 34px; padding: 2px; border: 1px solid #735368; background: #28222e; box-shadow: 1px 2px 0 #0a0810; }
.asset-chip::before, .media-link-tray button.asset-chip::before { content: none; }
.asset-chip:hover, .media-link-tray button.asset-chip:hover { border-color: #f08990; background: #342b3a; }
.asset-chip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.asset-chip[data-asset-src$=".svg"] img { object-fit: contain; background: #efebe2; }
/* URL fields stay part of the silent desk, but a URL must be legible while it is typed. */
#media-link-tray #media-url, #layer-src-tray #layer-src-url { font-size: 11px !important; color: #cfdaeb !important; caret-color: #ff7885 !important; font-family: var(--mono); }
#media-link-tray #media-url::placeholder, #layer-src-tray #layer-src-url::placeholder { color: #7b8299 !important; }

/* The picture slides in its frame like a print in a pocket: pixel offsets from the middle. */
.layer-image img { object-position: calc(50% + var(--pan-x, 0px)) calc(50% + var(--pan-y, 0px)); }
#pan-control { grid-column: 1 / -1; }
label[for="layer-pan-x"]::before { content: '←→'; width: 26px; font: 13px var(--serif); }
label[for="layer-pan-y"]::before { content: '↑↓'; width: 26px; font: 13px var(--serif); }

/* A living contact sheet: the glowing square snake is both the timeline and the pause handle. */
#add-slideshow-layer span::before { content: '▤'; }
#slideshow-controls { grid-column: 1 / -1; padding: 8px 0 10px; border-top: 1px dashed #654251; border-bottom: 1px dashed #654251; }
.slideshow-inspector-head, .slideshow-speed-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#slideshow-controls .control-label { display: flex !important; align-items: center; margin: 4px 0; color: #c596a8; font: 8px var(--mono); }
#slideshow-controls .control-label::before { content: '▤'; width: 20px; color: #e36a83; font: 15px var(--serif); text-align: center; }
#slideshow-add { width: 29px; height: 27px; padding: 0; border: 1px solid #8a5267; background: #321724; color: #ffb5c2; font: 19px/1 var(--serif); }
.slideshow-image-list { display: grid; gap: 3px; margin: 4px 0 8px; max-height: 110px; overflow: auto; }
.slideshow-image-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; background: #211a27; border: 1px solid #3d2a3a; }
.slideshow-image-row > span { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #c9bbce; font: 8px var(--mono); }
.slideshow-image-row i { flex: 0 0 auto; padding: 4px 5px; color: #f0869a; background: #3d2032; font: normal 7px var(--mono); }
.slideshow-image-row button { flex: 0 0 auto; width: 25px; height: 23px; padding: 0; border: 0; background: transparent; color: #ed8091; font: 18px/1 var(--serif); }
.slideshow-speed-row { justify-content: flex-start; gap: 5px; }
.slideshow-speed-row .control-label::before { content: '◷'; }
.slide-speed-readout { margin-left: auto; color: #f3b1bc; font: 9px var(--mono); }
.slideshow-speed-dial { --dial-turn: 30deg; position: relative; display: grid; place-items: center; width: 61px; height: 61px; margin: 7px auto 1px; padding: 0; border: 1px solid #7c5365; border-radius: 50%; color: #f8dbe2; background: radial-gradient(circle, #251722 0 56%, transparent 58%), conic-gradient(from -135deg, #ff6685 0deg, #ff6685 var(--dial-turn), #533747 var(--dial-turn), #533747 270deg, transparent 270deg 360deg); box-shadow: 0 0 13px #f13d6730, inset 0 0 8px #07050a; touch-action: none; }
.slideshow-speed-dial::before { content: ''; position: absolute; inset: 5px; border: 1px dashed #bc748a77; border-radius: 50%; pointer-events: none; }
.speed-dial-pointer { position: absolute; z-index: 1; top: 7px; left: calc(50% - 1px); width: 2px; height: 18px; border-radius: 3px; background: #ffafbd; box-shadow: 0 0 7px #ff6988; transform: rotate(calc(-135deg + var(--dial-turn))); transform-origin: 50% 23px; pointer-events: none; }
.speed-dial-center { z-index: 1; color: #ffe3e9; font: 9px var(--mono); pointer-events: none; }
.slideshow-speed-dial:focus-visible { outline: 2px solid #ffc3cf; outline-offset: 4px; }
.layer-slideshow { background: transparent; overflow: visible; }
.slideshow-frame { position: relative; width: 100%; height: 100%; overflow: visible; border: 1px solid #f58b9a; background: #090911; box-shadow: 0 5px 12px #05030c99, 0 0 16px #e535583f; isolation: isolate; }
.slideshow-pictures { position: absolute; inset: 0; overflow: hidden; background: #090911; }
.page-canvas:not(.editing) .slideshow-pictures { cursor: pointer; }
.slideshow-picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: var(--fit, cover); opacity: 0; transition: opacity .35s ease; user-select: none; }
.slideshow-picture.active { opacity: 1; }
.slide-snake-rail { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.slide-snake-track, .slide-snake-body { fill: none; vector-effect: non-scaling-stroke; }
.slide-snake-track { stroke: #ff5174; stroke-width: 2; stroke-dasharray: 2 3; opacity: .8; filter: drop-shadow(0 0 3px #ff345b); }
.slide-snake-body { stroke: #baffef; stroke-width: 3; stroke-dasharray: 13 87; stroke-linecap: square; filter: drop-shadow(0 0 3px #baffef) drop-shadow(0 0 7px #ff4777); }
.slide-snake-head { position: absolute; z-index: 3; left: 0; top: 0; width: calc(18px / var(--canvas-scale, 1)); height: calc(18px / var(--canvas-scale, 1)); min-width: 0; padding: 0; border: 2px solid #fff5fa; border-radius: 3px; background: #f04e77; box-shadow: 0 0 0 2px #8e2454, 0 0 8px 3px #ff6289, 0 0 18px #ff315d; transform: translate3d(var(--snake-x, 5px), var(--snake-y, 5px), 0) translate(-50%, -50%); will-change: transform; cursor: grab; touch-action: none; }
.slide-snake-head::after { content: ''; position: absolute; inset: 4px; background: #baffef; box-shadow: 0 0 5px #baffef; }
.slide-snake-head[data-paused="true"] { background: #dd6a8e; box-shadow: 0 0 0 2px #8e2454, 0 0 5px 2px #ff6289; }
.slide-snake-head[data-paused="true"]::after { background: #ffc9d4; }
.page-canvas:not(.editing) .layer-slideshow { cursor: default; }
#slideshow-controls[hidden] { display: none !important; }
@media (max-width: 540px) {
  #slideshow-controls { grid-column: 1 / -1; }
  .slideshow-speed-dial { width: 56px; height: 56px; }
  .speed-dial-pointer { transform-origin: 50% 23px; }
}

/* --- The album: an open book, two collages pasted on each leaf -------------- */
.book { position: relative; margin: 8px 0 18px; perspective: 2600px; perspective-origin: 50% 42%; touch-action: pan-y; }
.book-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; filter: drop-shadow(0 16px 20px #26364f2e); }
.book-gutter { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 36px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, #0000, #00000024 38%, #00000045 50%, #00000024 62%, #0000); }
.book-leaf { position: relative; display: flex; flex-direction: column; min-width: 0; aspect-ratio: .44; padding: 2.6% 5% 3.2% ; background: linear-gradient(170deg, #fdfbf6, #f4f0e7 62%, #ece7db); border: 1px solid #d9d1c0; box-shadow: 0 3px 0 -1px #f8f4ec, 0 6px 0 -2px #e3ddcf, 0 13px 22px #35507b26; }
.book-leaf-left { border-radius: 2px 10px 10px 2px; box-shadow: inset -24px 0 26px -26px #2b1f1259, 0 3px 0 -1px #f8f4ec, 0 6px 0 -2px #e3ddcf, 0 13px 22px #35507b26; }
.book-leaf-right { border-radius: 10px 2px 2px 10px; box-shadow: inset 24px 0 26px -26px #2b1f1259, 0 3px 0 -1px #f8f4ec, 0 6px 0 -2px #e3ddcf, 0 13px 22px #35507b26; }
.book-leaf::after { content: ''; position: absolute; top: 7%; bottom: 7%; width: 9px; pointer-events: none; background: radial-gradient(circle, #2b1f1226 0 2.6px, #0000 3.2px) center top / 9px 30px repeat-y; }
.book-leaf-left::after { right: 6px; }.book-leaf-right::after { left: 6px; }
.leaf-slots { display: grid; grid-template-rows: 1fr 1fr; gap: 3%; flex: 1; min-height: 0; }
.leaf-post { position: relative; min-height: 0; display: grid; place-items: center; }
.leaf-sheet { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: var(--print-ratio, .8); display: grid; place-items: center; }
.leaf-post .canvas-shell { position: relative; z-index: 1; height: 100%; width: 100%; max-width: 100%; aspect-ratio: var(--print-ratio, .8) !important; background: #f1ece3; box-shadow: 1px 2px 6px #2c2a3233; }
/* Pasted by hand, not aligned by a machine: each print leans a little, the way
   the photos on the old paper cards always did. */
.leaf-slots > .leaf-post:first-child .leaf-sheet { transform: translateX(-3.2%) rotate(-1.3deg); }
.leaf-slots > .leaf-post:last-child .leaf-sheet { transform: translateX(3.2%) rotate(1.4deg); }
.leaf-slots > .leaf-post:first-child .leaf-post-tape { transform: translateX(-50%) rotate(-3.2deg); }
.leaf-slots > .leaf-post:last-child .leaf-post-tape { transform: translateX(-50%) rotate(2.6deg); }
/* The way into the reader: a coloured tab on the outer edge of each print. */
.leaf-post-zoom { --zoom-tab-width: 24px; position: absolute; z-index: 0; top: 8px; width: var(--zoom-tab-width); height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--red-bright); background: var(--red); color: #fff7f8; box-shadow: 1px 2px 0 #5a1c2a66; cursor: pointer; transition: background .15s, transform .15s; }
.leaf-post-zoom::before { content: ''; position: absolute; inset: -8px; }
.leaf-post-zoom svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.book-leaf-left .leaf-post-zoom { left: calc(4px - var(--zoom-tab-width)); border-radius: 5px 0 0 5px; }
.book-leaf-right .leaf-post-zoom { right: calc(4px - var(--zoom-tab-width)); border-radius: 0 5px 5px 0; }
.leaf-post-zoom:hover { background: var(--red-bright); transform: translateY(-1px); }
.leaf-post-zoom:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.book-leaf.dormant * { animation-play-state: paused !important; }
.leaf-post .post-actions { position: absolute; z-index: 5; right: 6px; bottom: 6px; display: flex; gap: 3px; opacity: 0; transition: opacity .16s; }
.leaf-post:hover .post-actions, .leaf-post:focus-within .post-actions { opacity: 1; }
.leaf-post .post-actions button { width: 22px; height: 22px; font-size: 12px; box-shadow: 1px 1px 3px #05102255; }
@media (hover: none) {
  /* A thumb leaves them visible, so they have to be small and quiet. */
  .leaf-post .post-actions { opacity: .55; }
  .leaf-post .post-actions button { width: 19px; height: 19px; font-size: 10px; }
  .leaf-post:focus-within .post-actions { opacity: 1; }
}
.leaf-post-tape { position: absolute; z-index: 4; top: -7px; left: 50%; transform: translateX(-50%) rotate(-2.2deg); min-width: 58px; max-width: 70%; padding: 0 8px; height: 17px; display: flex; align-items: center; justify-content: center; white-space: nowrap; background: #b7c8dcb3; clip-path: polygon(3% 0, 100% 7%, 96% 100%, 0 88%); font: 600 7px/1 var(--mono); letter-spacing: .1em; color: #35486a; text-shadow: 0 1px 0 #ffffff90; pointer-events: none; }
.leaf-blank { display: grid; place-items: center; border: 1px dashed #d4cbbb; border-radius: 2px; color: #c3b8a4; font: 22px var(--serif); }
.leaf-mark { position: absolute; right: 15px; bottom: 8px; font: 6px var(--mono); letter-spacing: .16em; color: #ab9f8b; pointer-events: none; }
.book .page-canvas::before, .book .page-canvas::after { display: none; }

/* Turning: a sheet with the leaving leaf on the front and the arriving leaf on the back. */
.flip-sheet { position: absolute; z-index: 6; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; pointer-events: none; transition: transform .8s cubic-bezier(.42, .06, .32, 1); }
.flip-sheet.flip-forward { left: 50%; transform-origin: left center; }
.flip-sheet.flip-back { left: 0; transform-origin: right center; }
/* Both faces carry a transform of their own: an untransformed child of a
   preserve-3d box can be painted flat by the engine while its sibling is not,
   which mixes the leaving leaf with the arriving one. */
.flip-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; transform: rotateY(0deg); }
.flip-face .book-leaf { height: 100%; box-shadow: none; }
.flip-face.flip-back { transform: rotateY(180deg); }
.flip-face::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(90deg, #0000 42%, #00000038); transition: opacity .8s ease-in; }
.book.turning .flip-forward { transform: rotateY(-179deg); }
.book.turning .flip-back { transform: rotateY(179deg); }
.book.turning .flip-face::after { opacity: 1; }
.book[data-pan="true"], .book.turning { overflow: hidden; }

/* A phone keeps the open spread, wider than the screen: drag it like a manga
   page, and pull past the edge to turn. The leaves take 86% of the book and sit
   flush with its left edge, so a strip (~50px) of the next collage shows: the
   paper reads as open, and a thumb understands it can swipe towards it. */
.book[data-pan="true"] .book-spread { display: flex; width: 172%; transition: transform .32s cubic-bezier(.3, .7, .3, 1); }
.book[data-pan="true"].dragging .book-spread { transition: none; will-change: transform; }
.book[data-pan="true"] .book-leaf { flex: 0 0 50%; width: 50%; padding: 2.8% 3.9% 2.8%; }
.book[data-pan="true"] .flip-sheet { left: 0; width: 86%; transform-origin: right center; }
/* The leaf on the sheet fills the sheet, at the same size as the paper beneath
   it: the pan rule above would halve it, and its padding is a share of its own
   box here instead of the whole spread, so it is doubled to match. */
.book[data-pan="true"] .flip-sheet .book-leaf { flex: 1 1 auto; width: auto; padding: 5.6% 7.8% 5.6%; }
/* The spine shadow only has the peeking strip to fall on: keep it narrow. */
.book[data-pan="true"] .book-gutter { width: 20px; }
/* The sheet covers the left leaf and hangs on the spine at its right edge, so the
   free edge lifts and the paper swings out over the right leaf instead of pivoting
   on the outer edge of the book. */
.book[data-pan="true"] .flip-sheet.flip-back { transform: rotateY(179deg); }
.book[data-pan="true"].turning .flip-sheet.flip-forward { transform: rotateY(179deg); }
.book[data-pan="true"].turning .flip-sheet.flip-back { transform: rotateY(0deg); }

/* Page controls: two arrows, the paper tabs, and a flower at each end. */
.book-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 10px; }
.book-arrow { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0 0 2px; border: 1px solid #b4536a; border-radius: 50%; background: #f5f2ec; color: #a5314b; font: 20px/1 var(--serif); }
.book-arrow:hover { background: #fbeaee; }.book-arrow:disabled { opacity: .32; }
.book-strip-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.book-flower { color: #b3415c; font: 12px var(--serif); opacity: .75; }
.book-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.strip-page { display: grid; place-items: center; gap: 1px; min-width: 34px; padding: 5px 7px 4px; border: 1px solid #b8c8dc; border-radius: 2px; background: #eef3f9; color: #55719a; font: 8px var(--mono); box-shadow: 1px 2px 0 #a9bacd55; }
.strip-page small { font-size: 6px; letter-spacing: .02em; opacity: .75; }
.strip-page:hover { background: #e2ecf7; }
.strip-page.active { background: #f8e8ed; border-color: #be2544; color: #a3223e; box-shadow: 0 0 0 1px #be254455; }
@media (max-width: 760px) {
  .book { perspective: 1800px; }
  .book-leaf::after { display: none; }
  .leaf-slots > .leaf-post:first-child .leaf-sheet,
  .leaf-slots > .leaf-post:last-child .leaf-sheet { transform: rotate(-.5deg); }
  .leaf-slots > .leaf-post:last-child .leaf-sheet { transform: rotate(.6deg); }
  .book-nav { gap: 6px; }
  .book-arrow { width: 30px; height: 30px; font-size: 17px; }
  .book-flower { font-size: 10px; }
  .book-strip-wrap { gap: 4px; }
  .strip-page { min-width: 30px; padding: 4px 6px 3px; }
  .leaf-post-zoom { top: 6px; height: 34px; }
  .leaf-post-zoom svg { width: 12px; height: 12px; }
}