/* The notebook is a reading surface, with the original handwriting and pinned photographs. */
.pages.reading-essay { padding-top:96px; }
.reading-essay .page-meta { margin-bottom:0; }
.reading-essay #page-title { font-size:30px; line-height:32px; margin-bottom:32px; }
.pages:not(.reading-essay) #page-title { margin-bottom:0; }
#essay-date { position:absolute; top:64px; right:30px; color:#74766b; font:15px/32px var(--hand); }
#essay-subtitle { font:20px/32px var(--hand); margin:0 0 32px; }
.essay-body { font:20px/32px var(--hand); overflow-wrap:anywhere; }
.essay-body p,.essay-body h2,.essay-body h3,.essay-body h4,.essay-body h5,.essay-body h6,.essay-body ul,.essay-body ol,.essay-body blockquote { margin:0 0 32px; font:inherit; line-height:32px; }
.essay-body h2,.essay-body h3,.essay-body h4 { font-weight:700; }
.essay-body blockquote { padding-left:14px; border-left:2px solid #9b9a88; }
.essay-body ul,.essay-body ol { padding-left:24px; }
.essay-body li { margin:0; }
.essay-body hr { height:32px; border:0; margin:0 0 32px; text-align:center; }
.essay-body hr::after { content:'· · ·'; }
.essay-body a { text-decoration-thickness:1px; text-underline-offset:4px; }
.essay-body figure { position:relative; margin:32px 0; padding:8px; background:#fffefa; box-shadow:1px 3px 5px #453e3529; transform:rotate(-1.4deg); }
.essay-body figure:nth-of-type(even) { transform:rotate(1.1deg); }
.essay-body figure::before,.essay-body figure::after { content:''; position:absolute; z-index:1; top:-9px; width:58px; height:23px; background:linear-gradient(90deg,#dbc39774,#e8d1a698,#d0bb9380); box-shadow:0 1px 1px #745d3920; }
.essay-body figure::before { left:8%; transform:rotate(-13deg); }
.essay-body figure::after { right:7%; transform:rotate(10deg); }
.essay-body img { display:block; width:100%; height:auto; }
.essay-body figcaption { color:#77766d; font:15px/32px var(--hand); text-align:center; }
.essay-original { display:inline-block; font:15px/32px var(--hand); color:#78796e; }
.reading-essay .page-bottom { flex-wrap:wrap; }
#essay-contents,#essay-next { font:17px/32px var(--hand); }
/* A small pair of tactile controls under whichever skin is playing. */
.music-toolbar { gap:8px; border:0; padding:0; box-shadow:none; background:none; margin-top:14px; }
.music-toolbar button { font:14px Tahoma,sans-serif; min-height:38px; padding:5px 14px; color:#26292e; background:linear-gradient(#f9fafb,#bfc5cb); border:1px solid #727980; border-radius:4px; box-shadow:inset 1px 1px 0 #fff,0 2px 4px #0003; }
.music-toolbar button:active { background:#bfc5cb; box-shadow:inset 1px 1px 3px #313b4b50; }
.music-toolbar button:disabled { opacity:.45; cursor:default; }
#music-room .skin-credit { margin-top:6px; opacity:.65; }
.music-source { margin-bottom:5px; }
/* All clippings stay on one spatial board. The visitor moves the viewport. */
.object-dialog[data-room="board"] { width:min(1200px,calc(100vw - 20px)); overflow:hidden; }
.dry-erase-board { padding:22px 20px 10px; }
.board-title { font-size:23px; margin:0 60px 18px 9px; }
.board-viewport { position:relative; width:100%; height:min(68svh,660px); min-height:280px; overflow:auto; overscroll-behavior:contain; cursor:grab; scrollbar-width:thin; scrollbar-color:#bdc5c4 transparent; touch-action:pan-x pan-y; }
.board-viewport.is-dragging,.board-viewport.is-dragging * { cursor:grabbing; user-select:none; }
.board-space { position:relative; }
.board-canvas { display:grid; grid-template-columns:repeat(4,350px); gap:48px; align-items:center; width:1744px; padding:85px 100px; transform-origin:0 0; }
.board-clipping { position:relative; display:block; width:350px; border:0; padding:25px 23px; color:#37332c; background:linear-gradient(115deg,#f0e7d3,#fffdf5 45%,#f3eee3); font:700 23px/1.23 'Times New Roman',serif; text-align:left; cursor:pointer; box-shadow:1px 3px 5px #25322e2a; transform:rotate(var(--tilt)); transition:box-shadow .25s; }
.board-clipping:nth-child(3n) { background:#fffef9; }
.board-clipping:nth-child(5n) { background:#e8decb; }
.board-clipping::before { content:''; position:absolute; left:48%; top:-9px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 25%,#efb2a0,#af423b 65%,#662826); box-shadow:1px 3px 3px #27382d55; }
.board-clipping:nth-child(even)::before { background:radial-gradient(circle at 35% 25%,#b9d5de,#417381 65%,#254951); }
.board-clipping:nth-child(3n)::before { background:radial-gradient(circle at 35% 25%,#ede19a,#b6a64c 65%,#756620); }
.board-clipping:hover,.board-clipping.is-selected { box-shadow:2px 6px 12px #25322e3d; }
.board-clipping img { display:block; width:100%; height:auto; pointer-events:none; }
.board-clipping:has(img) { padding:6px; }
.board-quote { display:block; }
.board-source { display:block; margin-top:20px; font:italic 17px/1.3 Georgia,serif; }
.board-tools { display:flex; justify-content:space-between; align-items:center; padding:10px 5px 0; }
.board-tools button { font:13px Tahoma,sans-serif; border:0; background:transparent; color:#4a605f; min-width:40px; min-height:36px; padding:5px 10px; cursor:pointer; }
.board-tools button:hover { background:#dbe2df; border-radius:3px; }
.board-tools div button { font-size:22px; }
/* Video is aligned to the actual glass opening in the photograph. */
.object-dialog[data-room="video"] { width:min(820px,calc(100vw - 16px)); border:0; background:transparent; border-radius:0; box-shadow:none; }
[data-room="video"] .dialog-inner { padding:0 10px 14px; }
[data-room="video"] .dialog-head { position:absolute; right:18px; top:6px; z-index:5; }
[data-room="video"] .dialog-head > div { display:none; }
.television { position:relative; padding:0; background:none; border:0; border-radius:0; box-shadow:none; }
.tv-hardware { position:relative; aspect-ratio:1; }
.tv-photo { display:block; width:100%; height:auto; clip-path:inset(3.5% 0 0); filter:drop-shadow(0 12px 12px #14211d55); }
.tv-hardware .tv-screen { position:absolute; left:16.75%; top:14.91%; width:66.67%; height:50%; min-height:0; aspect-ratio:auto; border:0; border-radius:4% / 6%; box-shadow:inset 0 0 20px #000; background:#10121a; }
.tv-screen::after { content:''; position:absolute; z-index:3; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 20px 5px #0005; background:linear-gradient(135deg,#ffffff0c,transparent 35%,transparent 80%,#ffffff03); }
.tv-idle { font:clamp(10px,2.3vw,18px)/1.4 var(--digital); padding:6%; background:#12194d; }
.tv-idle strong { font:inherit; }
.tv-hardware .vhs-tape { position:absolute; z-index:4; top:70%; left:24%; width:52%; margin:0; max-width:none; transform:translateY(6%) scale(1.08); }
.tv-hardware .vhs-tape img { width:100%; max-height:none; }
[data-tape="loading"] .tv-hardware .vhs-tape { transform:translateY(-2%) scale(.8,.08); opacity:0; }
.vcr-deck { width:85%; margin:-1% auto 0; padding:12px 16px; border:1px solid #929798; border-radius:5px; background:linear-gradient(#dce0e0,#a7acac); color:#20292e; box-shadow:0 4px 9px #10221e40; }
.vcr-buttons { gap:8px; }
.vcr-buttons button { min-width:44px; min-height:38px; padding:4px 12px; color:#17212b; font:18px var(--ui); background:linear-gradient(#f2f4f4,#a9afaf); border:1px outset #e3e8e7; border-radius:4px; }
.vcr-buttons button:disabled { opacity:.4; }
.vcr-buttons label,.vhs-progress { font:12px var(--ui); }
.vcr-buttons input,.vhs-progress input { accent-color:#51686d; min-width:0; }
.vcr-buttons label { flex:1; }
#vhs-time { font:13px var(--digital); color:#33474a; }
@media(max-width:650px) {
 .dry-erase-board { padding:18px 8px 8px; }
 .board-title { font-size:20px; }
 .board-viewport { height:66svh; }
 .vcr-deck { width:96%; padding:10px; }
 .vcr-buttons label { flex-basis:100px; }
 .pages.reading-essay { padding-top:96px; }
 #essay-date { right:22px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .board-clipping,.vhs-tape { transition:none!important; } }
/* Navigation belongs to the cover, outside the scrolling paper. */
.notebook-nav { position:absolute; top:14px; right:18px; z-index:5; display:flex; gap:7px; }
.notebook:not(.is-open) .notebook-nav { display:none; }
.notebook-nav button,.notebook-nav .home-tab { position:static; min-height:32px; margin:0; padding:4px 11px; border:1px solid #aaa99f; border-radius:999px; background:#fffdf4f5; color:#393a32; font:16px/24px var(--hand); box-shadow:0 2px 3px #33291420; cursor:pointer; }
/* Book type stays book type, even though each clipping is a button. */
.object-dialog[data-room="board"] { width:min(1450px,calc(100vw - 16px)); }
.dry-erase-board { border:0; border-radius:0; background: url('./assets/cork-board.png') center / 100% 100% no-repeat; padding:4.5% 4.2% 3.4%; box-shadow:none; }
.board-viewport { height:min(64svh,760px); scrollbar-color:#84644999 transparent; }
.board-canvas { grid-template-columns:repeat(9,350px); width:3670px; padding:85px 100px; gap:40px; }
.object-dialog .board-clipping,.object-dialog .board-quote { font-family:'Times New Roman',Times,serif; font-size:23px; font-weight:600; line-height:1.18; letter-spacing:-.02em; }
.object-dialog .board-clipping { color:#29231d; padding:20px 19px; background:#f4eedf url('./assets/letter-paper.png') center / 540px; text-shadow:.2px .2px .3px #42302260; box-shadow:1px 2px 3px #34220f45; }
.object-dialog .board-clipping:nth-child(3n) { background-color:#fffdf7; background-blend-mode:screen; }
.object-dialog .board-clipping:nth-child(5n) { background-color:#c3aa7d; background-blend-mode:multiply; }
.object-dialog .board-clipping:has(img) { padding:0; background:none; }
.object-dialog .board-source { font:italic 17px/1.3 'Times New Roman',Times,serif; }
.board-tools { padding-top:2px; }
.board-tools button { color:#f9eed7; text-shadow:0 1px 2px #281808; }
.board-tools button:hover { background:#5f3e2a70; }
#board-overview { font-size:23px; }
[data-room="board"] .dialog-head { top:3.7%; right:3.5%; }
[data-room="board"] .dialog-close { width:34px; height:34px; min-height:34px; padding:0; font:26px/1 var(--ui); background:#f0e4c9e6; }
/* Stationery: quiet typography, paper fibers, and a crease through the sheet. */
.object-dialog[data-room="mailbox"] { width:min(650px,calc(100vw - 24px)); background:transparent; border:0; box-shadow:none; border-radius:0; }
[data-room="mailbox"] .dialog-inner { padding:10px 16px 22px; }
[data-room="mailbox"] .dialog-head { position:absolute; top:75px; right:25px; z-index:4; }
[data-room="mailbox"] .dialog-head > div { display:none; }
[data-room="mailbox"] .dialog-close { width:30px; min-height:30px; height:30px; font-size:24px; background:transparent; border:0; box-shadow:none; }
.mail-links { padding-bottom:22px; }
.mail-links a { color:#fffcef; text-shadow:0 1px 3px #222; }
.letter-paper { position:relative; min-height:540px; padding:42px 44px 48px; background:#f7efdc url('./assets/letter-paper.png') center / 100% 100%; box-shadow:0 2px 3px #31251930,3px 16px 30px #191a2245; transform:rotate(-.6deg); }
.letter-paper::after { content:''; position:absolute; pointer-events:none; left:0; right:0; top:53%; height:2px; background:linear-gradient(#806c4520,#ffffff65); box-shadow:0 1px 5px #735c3210; }
.object-dialog .letter-paper h3 { color:#354353; font:italic 25px/1.4 Georgia,'Times New Roman',serif; margin:0 0 25px; }
.letter-date { font:14px/1.4 Georgia,serif; margin-bottom:40px; color:#7a7363; padding-right:12px; }
.object-dialog .letter-paper textarea { color:#36424c; background:transparent; font:21px/1.52 var(--hand); min-height:250px; resize:vertical; }
.object-dialog .letter-paper input { font:21px/1.5 var(--hand); color:#36424c; border:0; background:transparent; box-shadow:none; }
.letter-signoff { display:flex; align-items:baseline; gap:0; margin:24px 0 3px; color:#36424c; font:italic 20px/1.5 Georgia,serif; }
.object-dialog #letter-signoff { width:7ch; max-width:90%; min-width:0; margin:0; padding:0; }
.object-dialog #letter-name { margin:0; padding:0; width:100%; }
#letter-send { background:#f6efde; margin-top:20px; border:1px solid #a99b80; box-shadow:0 2px 4px #20150830; }
/* Native photographic TV controls. Hit areas include the printed labels. */
.tv-buttons { position:absolute; inset:0; pointer-events:none; }
.object-dialog .tv-buttons button { position:absolute; top:83.5%; width:4.2%; height:6.3%; padding:0; min-height:0; border:0; border-radius:30%; background:transparent; color:transparent; pointer-events:auto; cursor:pointer; }
.tv-buttons button:hover { box-shadow:0 0 9px #e9f6ff75,inset 0 0 0 1px #e7f2ff80; }
.tv-buttons button:active { background:#18344a35; }
.tv-buttons #tv-power { left:16.4%; width:5.5%; }
.tv-buttons #vhs-volume-down { left:49.8%; }
.tv-buttons #vhs-volume-up { left:53.9%; }
.tv-buttons #vhs-rewind { left:59.5%; }
.tv-buttons #vhs-play { left:64.2%; }
.tv-buttons #vhs-forward { left:68.9%; }
.tv-buttons #vhs-eject { left:73.9%; }
.tv-scrub { display:flex; align-items:center; gap:14px; width:82%; margin:0 auto; color:#e5eee7; }
.tv-scrub input { flex:1; min-width:0; accent-color:#afbec0; height:14px; }
.tv-scrub #vhs-time { margin:0; color:#e5eee7; font:12px var(--digital); text-shadow:0 1px 2px #000; }
[data-room="video"] #vhs-message { color:#fff; text-align:center; }
#television[data-power="off"] .tv-screen > * { visibility:hidden; }
#television[data-power="off"] .tv-screen { background:#151718; }
/* Internet Explorer-inspired chrome around the real linked website. */
.internet-window { width:min(1000px,calc(100vw - 20px)); height:min(760px,calc(100svh - 24px)); padding:3px; border:2px outset #e9e8e3; border-radius:0; background:#d4d0c8; color:#171717; font:13px Tahoma,Verdana,sans-serif; box-shadow:4px 9px 30px #0007; }
.internet-window[open] { display:flex; flex-direction:column; }
.internet-window::backdrop { background:#17223265; }
.internet-titlebar { display:flex; justify-content:space-between; align-items:center; padding:4px 5px 4px 9px; color:white; background:linear-gradient(90deg,#0a246a,#4277b3); font-weight:bold; min-height:28px; }
.internet-titlebar span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.internet-window button,.internet-toolbar a { border:2px outset #eeeae3; border-radius:0; background:#d4d0c8; color:#161616; cursor:pointer; font:13px Tahoma,sans-serif; }
.internet-titlebar button { margin-left:10px; width:23px; height:23px; padding:0; font:bold 20px/18px Arial,sans-serif; }
.internet-toolbar { display:flex; gap:5px; padding:7px 5px; border-bottom:1px solid #aaa79e; }
.internet-toolbar button,.internet-toolbar a { display:grid; place-items:center; width:35px; height:32px; text-decoration:none; font:22px/1 Arial,sans-serif; }
.internet-toolbar button:disabled { color:#999; cursor:default; }
.internet-toolbar a { margin-left:auto; }
.internet-address { display:flex; gap:10px; padding:5px 8px 8px; align-items:center; }
.internet-address button { padding:4px 10px; }
.internet-address input { min-width:0; width:100%; border:2px inset #e7e5df; padding:4px 6px; background:white; color:#222; font:13px Tahoma,sans-serif; }
.internet-content { position:relative; flex:1; min-height:0; border:2px inset #f1eee8; background:white; }
#internet-frame[hidden] { display:none; }
#internet-frame { display:block; width:100%; height:100%; border:0; background:white; }
#internet-fallback { padding:40px; font:16px/1.6 Tahoma,sans-serif; }
#internet-fallback h2 { font-size:22px; font-weight:400; }
#internet-fallback a { color:#0000ee; }
.internet-status { display:flex; gap:10px; justify-content:space-between; align-items:center; padding:5px; font:12px Tahoma,sans-serif; }
.internet-status button { border:0; text-decoration:underline; background:transparent; white-space:nowrap; font-size:12px; }
@media(max-width:650px) {
 .notebook-nav { right:10px; }
 .notebook-nav button,.notebook-nav .home-tab { font-size:14px; padding:3px 9px; }
 .board-viewport { height:60svh; }
 .dry-erase-board { padding:7% 5% 5%; }
 .letter-paper { padding:35px 27px; min-height:500px; }
 .letter-date { font-size:12px; }
 .tv-scrub { width:90%; gap:7px; }
 .tv-scrub #vhs-time { font-size:10px; }
 .internet-status { font-size:10px; }
}

.board-space { overflow:hidden; }

/* A photographic disposable camera opens a print, with no album chrome to get in the way. */
.film-camera .object-photo {
  aspect-ratio:3 / 2;
  clip-path:polygon(15% 14.7%,28% 14.7%,31% 14.5%,31% 14.1%,67% 14.1%,71% 13.8%,76% 12.7%,83% 12.7%,87% 13.6%,90% 15.4%,92% 18%,93.7% 22%,94.6% 27%,95% 32%,94.7% 37%,93.5% 43%,92% 48%,91.7% 54%,92.5% 61%,92.6% 70%,91.8% 77%,90% 81.2%,87% 84%,81% 85.5%,69% 85.5%,54% 85%,31% 85%,18% 84.9%,13% 84%,10% 82%,8% 78%,6.8% 71%,6.8% 65%,7.4% 58%,8% 53%,8% 49%,6.8% 42%,5.5% 36%,5% 30%,5.8% 24%,7.3% 20%,9.5% 17%,12% 15.5%);
}
.object-dialog[data-room="photos"] { width:min(1050px,calc(100vw - 20px)); border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
[data-room="photos"] .dialog-inner { padding:32px 12px 18px; }
[data-room="photos"] .dialog-head { position:absolute; top:0; right:0; z-index:3; }
[data-room="photos"] .dialog-head > div { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
[data-room="photos"] .dialog-close { width:34px; height:34px; min-height:34px; padding:0; font:26px/1 var(--ui); }
.photo-print { width:fit-content; margin:0 auto; padding:clamp(8px,1.6vw,18px); background:#fffdf8; box-shadow:0 2px 3px #0003,4px 18px 45px #14201780; transform:rotate(-1deg); }
.photo-print img { display:block; width:auto; height:auto; max-width:100%; max-height:73svh; object-fit:contain; }
.photo-navigation { justify-content:center; align-items:center; gap:12px; padding-top:12px; color:#fffdf6c7; font:11px/1.2 var(--ui); letter-spacing:.08em; text-transform:lowercase; text-shadow:0 1px 3px #101b19; }
.photo-navigation:not([hidden]) { display:flex; }
.photo-navigation button { min-width:36px; min-height:30px; padding:0; border:0; background:transparent; color:inherit; border-radius:0; font:19px/1 var(--ui); cursor:pointer; opacity:.72; }
.photo-navigation button:hover,.photo-navigation button:focus-visible { opacity:1; }
.photo-hint { margin-left:6px; opacity:.65; }

/* Clippings read like small pieces cut from printed pages, rather than quote cards. */
@font-face { font-family:'Clipping Pica'; src:url('./assets/IMFellDWPica-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
.object-dialog[data-room="board"] { width:min(1450px,calc(100vw - 16px),calc(76svh * var(--board-ratio,1.9))); }
[data-room="board"] .dry-erase-board { padding:5.2% 4.4% 3.4%; }
[data-room="board"] .board-viewport { height:auto; min-height:0; max-height:none; aspect-ratio:var(--board-ratio,1.9); }
.board-canvas { display:block; position:relative; width:1510px; padding:0; }
.board-canvas .board-clipping,.board-preview .board-clipping { position:absolute; margin:0; min-height:58px; padding:10px 13px 12px; border:0; border-radius:0; background:#fbfaf6; color:#1e1b17; text-align:justify; box-shadow:1px 3px 4px #3e230f58; }
.object-dialog .board-quote,.board-preview .board-quote { font:400 22px/1.13 'Clipping Pica','Times New Roman',serif; letter-spacing:.005em; text-indent:1em; text-shadow:.2px 0 #221b1780,-.1px .2px #221b1760; }
.board-canvas .board-clipping:nth-child(3n),.board-preview .board-clipping:nth-child(3n) { background:#fffefb; }
.board-canvas .board-clipping:nth-child(5n),.board-preview .board-clipping:nth-child(5n) { background:#efe1c7; }
.board-canvas .board-clipping::after,.board-preview .board-clipping::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23918575' filter='url(%23n)' opacity='.8' d='M0 0h140v140H0z'/%3E%3C/svg%3E"); }
.board-canvas .board-clipping:has(img),.board-preview .board-clipping:has(img) { padding:0; min-height:0; background:none; }
.board-canvas .board-clipping:has(img)::after,.board-preview .board-clipping:has(img)::after { display:none; }
.board-canvas .board-clipping::before,.board-preview .board-clipping::before { z-index:2; width:13px; height:13px; top:-6px; }
.board-canvas .board-clipping:hover,.board-canvas .board-clipping.is-selected,.board-canvas .board-clipping:focus-visible { z-index:50; box-shadow:2px 8px 14px #30201466; }
.board-canvas .board-clipping:focus-visible { outline:2px solid #493326; outline-offset:3px; }
/* The desk object previews the actual collection, not a photograph of an empty frame. */
.stage .quote-board .object-photo { aspect-ratio:calc(var(--board-ratio,1.9) * .95); object-fit:fill; }
.board-preview { position:absolute; left:5.5%; right:5.5%; top:9%; aspect-ratio:var(--board-ratio,1.9); overflow:hidden; pointer-events:none; }
#board-preview-canvas { position:absolute; display:block; left:0; top:0; transform-origin:0 0; }

/* The letter stays a sheet of paper while writing; focus is a quiet ink-colored cue. */
.letter-form textarea:focus-visible,.letter-form input:focus-visible { outline:none; box-shadow:0 1px 0 #6e71635c; caret-color:#34443e; }
.photo-print { position:relative; }
.photo-print img[hidden],.photo-print video[hidden] { display:none; }
.photo-print video { display:block; width:auto; height:auto; max-width:100%; max-height:73svh; object-fit:contain; background:#111; }
#photo-live { position:absolute; left:26px; top:26px; padding:4px 9px; min-height:30px; border:1px solid #ffffff80; border-radius:4px; background:#1c2329a8; color:#fff; font:12px var(--ui); cursor:pointer; }
#photo-live[aria-pressed="true"] { color:#ffdc67; }

/* The quote board becomes the whole surface: browse instead of managing zoom. */
.object-dialog[data-room="board"] { inset:0; width:calc(100vw - 24px); max-width:none; height:calc(100dvh - 24px); max-height:none; margin:auto; overflow:hidden; border:0; border-radius:0; }
.object-dialog[data-room="board"]::backdrop { background:#172119d9; backdrop-filter:blur(5px); }
[data-room="board"] .dialog-inner,[data-room="board"] #board-room,[data-room="board"] .dry-erase-board { width:100%; height:100%; }
[data-room="board"] .dry-erase-board { position:relative; display:flex; flex-direction:column; padding:4.8vh 4.2vw 2.2vh; }
[data-room="board"] .board-viewport { flex:1; height:auto; min-height:0; max-height:none; aspect-ratio:auto; overflow:hidden; touch-action:none; scrollbar-width:none; }
[data-room="board"] .dialog-head { position:fixed; top:18px; right:20px; z-index:80; }
[data-room="board"] .dialog-close { width:38px; height:38px; min-height:38px; background:#f0e4c9e8; }
.object-dialog:focus,.clipping-dialog:focus,.internet-window:focus { outline:none; }
.board-hint { flex:none; margin:0; padding:7px 54px 0; color:#fff8e7c2; text-align:center; text-shadow:0 1px 3px #281808; font:11px/1.2 Tahoma,sans-serif; letter-spacing:.06em; }
.board-hint-touch { display:none; }
@media(max-width:650px) {
  [data-room="board"] .dry-erase-board { padding:54px 12px 16px; }
  [data-room="board"] .dialog-head { top:10px; right:10px; }
  .board-hint { padding:8px 44px 0; }
  .board-hint-keys { display:none; }
  .board-hint-touch { display:inline; }
  .photo-hint { display:none; }
}

/* Printed semester table on the inside cover. */
.semester-learning { margin:78px 36px; color:#454948; }
.semester-learning h2 { margin:0 0 30px; text-align:center; text-transform:uppercase; font:700 23px/1.2 var(--ui); letter-spacing:.02em; }
.semester-learning h2 span { white-space:nowrap; }
.semester-learning table { border-collapse:collapse; width:100%; }
.semester-learning td { border:1px solid #747974; padding:22px 14px; font:24px/1.4 var(--hand); }
.object-dialog .letter-paper h3 { font:20px/32px var(--ui); margin:0 0 24px; }
.letter-date { display:block; text-align:right; font:13px/24px var(--ui); margin:0 0 24px; }
.object-dialog .letter-paper textarea { font:21px/32px var(--hand); background:repeating-linear-gradient(to bottom,transparent 0 31px,#8297a24d 31px 32px); background-attachment:local; min-height:256px; padding:0; }
.letter-signoff { font:16px/32px var(--ui); }
.object-dialog #letter-signoff { font:16px/32px var(--ui); }
.letter-platforms { margin-top:16px; padding:18px; color:#354353; background:#f7efdc; border:1px solid #b7aa90; box-shadow:0 4px 12px #0002; }
.letter-platforms > p:first-child { margin:0 0 14px; font:16px var(--ui); }
.letter-platforms nav { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.letter-platforms a { display:flex; flex-direction:column; gap:8px; align-items:center; padding:12px 4px; text-decoration:none; font:12px var(--ui); border:1px solid #b7aa90; }
.letter-platforms a:hover { background:#fffaf0; }
.letter-platforms svg { width:24px; height:24px; fill:currentColor; }
.letter-help { margin:14px 0; }
.letter-status { background:#f7efdc; color:#354353; padding:6px; }
#letter-copy { min-height:180px; font:14px/1.5 var(--ui); }
@media(max-width:600px) { .semester-learning { margin:60px 20px; } .semester-learning h2 { font-size:18px; } .semester-learning td { padding:18px 10px; font-size:20px; } }

.letter-form:has(#letter-platforms:not([hidden])) .letter-paper,
.letter-form:has(#letter-platforms:not([hidden])) #letter-send { display:none; }
.object-dialog #letter-signoff { width:6ch; }

/* Keep the inside cover and writing page side by side at every width. */
.stage .notebook.is-open { width:min(430px,calc((100vw - 40px) / 2)); transform:translateX(50%); }
.notebook.is-open .cover { transform:rotateY(-180deg); visibility:visible; }
@media(max-width:650px) {
 .stage .notebook.is-open { height:540px; min-height:540px; }
 .notebook.is-open .semester-learning { margin:54px 12px; }
 .notebook.is-open .semester-learning h2 { font-size:clamp(12px,3vw,18px); margin-bottom:24px; }
 .notebook.is-open .semester-learning td { padding:18px 8px; font-size:clamp(15px,3.6vw,20px); }
 .notebook.is-open .pages { padding:48px 12px 24px 20px; }
 .notebook.is-open .pages::before { left:12px; }
 .notebook.is-open .page-meta { font-size:8px; line-height:16px; margin-bottom:20px; }
 .notebook.is-open h1 { font-size:28px; line-height:36px; margin-bottom:24px; }
 .notebook.is-open .toc-line { padding-left:18px; font-size:16px; line-height:24px; }
 .notebook.is-open .toc-line .essay-number { font-size:11px; }
 .notebook.is-open .toc li { margin-bottom:24px; }
}