main { max-width: 660px; }
.stage { display: grid; place-items: center; min-height: 430px; overflow: visible; }
.book { --shift: -25%; --blur: 0px; --cover-opacity: 1; --inner-opacity: 0; --base-opacity: 0; --foil-strength: .62; position: relative; width: min(440px, 100%); aspect-ratio: 22 / 15; transform: translateX(var(--shift)); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.book.dragging { cursor: grabbing; }
.base, .leaf { position: absolute; inset: -25% 0; isolation: isolate; }
.base { clip-path: var(--base-clip); }
.leaf { clip-path: var(--leaf-clip); }
.shell { position: absolute; width: 100%; height: 66.6667%; top: 16.6667%; overflow: visible; }
.shell path { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.screen { position: absolute; top: 16.6667%; height: 66.6667%; width: 50%; padding: clamp(12px, 2.8vw, 21px); display: flex; flex-direction: column; filter: blur(var(--blur)); }
.right-screen { left: 50%; }
.left-screen { left: 0; }
.base .screen { opacity: var(--base-opacity); transform: translateX(var(--content-shift, 0px)); }
.face { position: absolute; inset: 0; }
.cover { opacity: var(--cover-opacity); }
.inner { opacity: var(--inner-opacity); }
.inner .screen { transform: translateX(var(--inner-shift, 0px)); }
.foil, .glare { position: absolute; inset: 0; pointer-events: none; }
.foil { opacity: var(--foil-strength); background: repeating-linear-gradient(var(--rainbow-angle, 115deg), #cc9fed 0%, #8fd6e5 12%, #dce79e 24%, #f0aebb 36%, #bea0ed 48%, #8fd6e5 60%); background-size: 260% 260%; background-position: var(--spectrum-x, 50%) var(--spectrum-y, 50%); mix-blend-mode: multiply; mask-image: radial-gradient(ellipse at var(--light-x, 60%) var(--light-y, 30%), #000 0%, #000b 30%, transparent 78%); }
.glare { opacity: var(--specular, .4); background: radial-gradient(ellipse 33% 32% at var(--light-x, 60%) var(--light-y, 30%), #fff 0%, #fffc 5%, #fff2 42%, transparent 75%), linear-gradient(var(--rainbow-angle, 115deg), transparent 25%, #ffffff45 48%, transparent 70%); mix-blend-mode: screen; }
.rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rim path { fill: none; stroke: var(--ink); stroke-opacity: .7; stroke-width: 1.1; }
.rim .hinge-line { stroke: var(--muted); stroke-opacity: var(--hinge-alpha, .1); stroke-width: 1; }
.book[data-foil="false"] { --foil-strength: 0; }
:root[data-theme="dark"] .foil { mix-blend-mode: screen; }
:root[data-theme="dark"] .glare { opacity: calc(var(--specular, .4) * .5); }
.topline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.monogram { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 4vw, 30px); line-height: 1; font-weight: 400; letter-spacing: -.08em; }
.edition { color: var(--muted); font: 9px/1.3 ui-monospace, monospace; text-align: right; }
.identity { margin-top: auto; display: grid; gap: 6px; }
.identity strong { font-size: clamp(17px, 3vw, 20px); font-weight: 500; letter-spacing: -.03em; }
.identity span, .message span { font-size: clamp(10px, 2vw, 12px); color: var(--muted); line-height: 1.5; }
.cover-mark { margin: auto; font: 50px/1 Georgia, serif; color: var(--line); }

.stamp { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #798780; border-radius: 50%; color: #556a5b; background: #dfe9e0; font-family: Georgia, 'Songti SC', serif; font-size: 21px; }
.message { margin-top: auto; }
.message p { font-size: clamp(12px, 2.7vw, 17px); line-height: 1.4; font-weight: 500; letter-spacing: -.025em; margin: 0 0 9px; }
.edge-note { margin-top: 18px; color: var(--muted); font: 9px ui-monospace, monospace; }
.contact-list { margin: auto 0; font: 10px/1.6 ui-monospace, monospace; }
.contact-list div { display: flex; justify-content: space-between; gap: 8px; margin-block: 7px; }
.contact-list dt { color: var(--muted); }
.contact-list dd { margin: 0; text-align: right; }
.contact-list a { display: inline-block; padding: 3px 0; }
.fold-controls { width: min(350px, 100%); margin: 5px auto 0; }
.control-heading { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; gap: 8px; }
output { font: 11px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
input[type=range] { display: block; width: 100%; margin: 10px 0; height: 26px; accent-color: var(--ink); cursor: ew-resize; }
input:focus-visible { outline: 2px solid #7181a5; outline-offset: 4px; border-radius: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.actions button { font-size: 11px; padding: 8px 11px; }
.status { text-align: center; font-size: 11px; }
.credit { margin-top: 44px; text-align: center; font-size: 11px; line-height: 1.8; color: var(--muted); }
:root[data-preview] .stage { width: 600px; height: 400px; min-height: 0; }
:root[data-preview] .fold-controls, :root[data-preview] .credit { display: none; }
:root[data-preview] .book { width: 380px; }
@media (max-width: 480px) { .stage { min-height: 340px; } .book { width: min(380px, 100%); } .screen { padding: 12px; } .edition { font-size: 8px; } .credit { margin-top: 24px; } }

.glare::after { content: ""; position: absolute; inset: 0; opacity: .1; background: repeating-linear-gradient(115deg, #fff 0px, #fff 1px, transparent 1px, transparent 3px); mask-image: radial-gradient(ellipse at var(--light-x) var(--light-y), #000, transparent 60%); }