/* The desk owns the viewport; only the paper and dialogs can scroll. */
:root { --desk: #dfd6c5; --paper: #faf8f0; --folder: #62796e; --desk-ink: #35463c; }
html, body.desk-app { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body.desk-app { background: radial-gradient(ellipse at 27% 20%, #fff8dc90, transparent 55%), repeating-linear-gradient(2deg, #ffffff04 0 2px, #604c3610 3px, transparent 4px 8px), var(--desk); color: var(--desk-ink); }
.desk-app .site-header { position: absolute; inset: 0 0 auto; max-width: none; height: 100px; padding: 20px 42px; gap: 16px; }
.desk-app .brand { font: 700 31px/1 Georgia, serif; letter-spacing: -1.8px; gap: 0; }
.brand-period { color: #9f683e; }
.desk-caption { position: absolute; top: 63px; left: 43px; font-size: 8px; letter-spacing: 1.8px; color: #7e7b69; }
.desk-app #theme-shortcut { margin-left: auto; color: #6f7467; }
.music-player { position: absolute; z-index: 4; top: 28px; left: 50%; transform: translateX(-50%); width: min(530px, 48vw); height: 66px; display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 12px; border: 1px solid #fdfcf3a6; border-radius: 12px; background: #f4f1e6d9; box-shadow: 0 6px 15px #5d503512, inset 0 1px #fff; }
.record { flex: 0 0 44px; height: 44px; border-radius: 50%; background: repeating-radial-gradient(circle, #343a32 0 1px, #232a24 2px 3px); display: grid; place-items: center; box-shadow: 0 2px 3px #0003; }
.record span { height: 17px; width: 17px; border-radius: 50%; background: #bb7953; border: 6px solid #c99670; }
.music-track { min-width: 0; flex: 1; line-height: 1.5; }
.music-kicker { display: block; font-size: 8px; color: #8c8b79; letter-spacing: 1.4px; }
.music-track strong { display: block; font: italic 16px/1.5 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-play { flex: 0 0 32px; height: 32px; padding: 0; border: 1px solid #c9cbbd; border-radius: 50%; font-size: 11px; color: #485b4e; }
.music-controls { display: flex; align-items: center; flex-shrink: 0; gap: 7px; }
.music-skip { width: 27px; height: 32px; padding: 0; font-size: 10px; color: inherit; letter-spacing: -2px; }
.music-error .music-kicker { color: #9f493e; letter-spacing: 0; }
.music-volume { display: flex; align-items: center; gap: 7px; font-size: 16px; color: #8d917f; }
.music-volume input { width: 54px; height: 3px; accent-color: #6b7c68; }
.music-wave { display: flex; gap: 3px; align-items: center; height: 24px; }
.music-wave i { width: 2px; height: 7px; background: #8d9e83; }
.music-wave i:nth-child(2n) { height: 16px; animation-delay: -.5s; }
.music-wave i:nth-child(3n) { height: 23px; animation-delay: -.8s; }
.is-playing .record { animation: record-turn 8s linear infinite; }
.is-playing .music-wave i { animation: equalize .9s ease-in-out infinite alternate; }
@keyframes equalize { to { transform: scaleY(.25); } }
@keyframes record-turn { to { transform: rotate(360deg); } }
.desk-scenery { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lamp { position: absolute; left: max(32px, calc(50% - 560px)); top: 162px; width: 260px; height: 300px; transform: rotate(-16deg); }
.lamp-base { position: absolute; bottom: 20px; left: 15px; width: 135px; height: 135px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #777d66, #464f3f 65%, #2c362a); border: 6px solid #626b56; box-shadow: 9px 15px 15px #352e3a25, inset 0 2px 3px #b9bda083; }
.lamp-arm { position: absolute; width: 16px; height: 185px; left: 108px; top: 32px; transform: rotate(29deg); background: linear-gradient(90deg, #795832, #c7a36d 40%, #b18b55 65%, #715338); border-radius: 9px; box-shadow: 12px 5px 9px #3d321c26; }
.lamp-joint { position: absolute; top: 22px; left: 151px; width: 36px; height: 36px; background: radial-gradient(circle at 40% 30%, #e0c89f, #9f7d4d 65%); border-radius: 50%; }
.lamp-shade { position: absolute; width: 132px; height: 108px; left: 118px; top: -20px; border-radius: 50%; transform: rotate(12deg); background: radial-gradient(ellipse at 40% 28%, #a5ad90, #737e63 45%, #475540 85%); border: 3px solid #526045; box-shadow: 8px 12px 14px #40391e38, inset 3px 4px 8px #d8dec57d; }
.lamp-knob { position: absolute; width: 20px; height: 20px; left: 172px; top: 21px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e3caa0, #9b7346); border: 2px solid #a88a5f; }
.lamp-light { position: absolute; width: 480px; height: 480px; left: 30px; top: -50px; border-radius: 50%; background: radial-gradient(circle, #fff0b94d, #fff0b91a 48%, transparent 70%); }
.aquarium { --aquarium-size: clamp(150px, 18vw, 244px); position: absolute; width: var(--aquarium-size); height: var(--aquarium-size); aspect-ratio: 1 / 1; top: 140px; right: max(30px, calc(50% - 580px)); border-radius: 50%; padding: 10px; background: linear-gradient(135deg, #f3fff7ac, #668d8159 50%, #e5f7eeae); box-shadow: 12px 19px 25px #3c4c402b, inset 0 0 3px 2px #fff9, 0 0 0 1px #9cae9e; }
.water { position: absolute; inset: 10px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 38% 28%, #cbe5db, #a0c7b9 65%, #6b9e92); box-shadow: inset 0 0 18px #305f5f38, 0 0 0 2px #b4d4c7; }
.water-shine { position: absolute; inset: 5px; border-radius: 50%; border: 3px solid transparent; border-left-color: #f4fffa7a; border-top-color: #f4fffa5c; transform: rotate(-35deg); }
.aquarium-stones { position: absolute; width: 58px; height: 40px; bottom: 25px; left: 40px; border-radius: 50%; background: radial-gradient(ellipse at 25% 55%, #b0b39d 0 20%, transparent 23%), radial-gradient(ellipse at 68% 40%, #a2ac97 0 26%, transparent 29%), radial-gradient(ellipse at 44% 80%, #d0c9ac 0 26%, transparent 29%); transform: rotate(-25deg); }
.water-plant { position: absolute; width: 12px; height: 66px; bottom: 16px; right: 54px; border-radius: 90% 0; background: #4e806e; transform: rotate(-26deg); box-shadow: 14px -8px #608f76, -9px -13px #648e6c; }
.plant-two { transform: rotate(52deg) scale(.7); right: 34px; bottom: 28px; opacity: .7; }
.fish-path { position: absolute; inset: 24px; border-radius: 50%; animation: swim 19s linear infinite; }
.fish-path-two { inset: 43px; animation-duration: 26s; animation-direction: reverse; }
.fish-path-three { inset: 65px 30px; animation-duration: 22s; animation-delay: -8s; }
.fish { position: absolute; top: 7px; left: 35%; width: 35px; height: 14px; border-radius: 65% 55% 55% 65%; background: radial-gradient(circle at 80% 35%, #42372b 0 1px, transparent 1.5px), linear-gradient(#e8b677, #d27c4b); box-shadow: 2px 5px 5px #3f64542b; transform: rotate(22deg); }
.fish::before { content: ''; position: absolute; left: -9px; top: 1px; border-right: 12px solid #dca378; border-top: 6px solid transparent; border-bottom: 6px solid transparent; animation: fish-tail .7s ease-in-out infinite alternate; transform-origin: right center; }
.fish::after { content: ''; position: absolute; top: -4px; left: 11px; width: 13px; height: 22px; background: #e2b9818c; border-radius: 50%; z-index: -1; }
.fish-two { background: radial-gradient(circle at 80% 35%, #333 0 1px, transparent 1.5px), linear-gradient(#f6ebcb, #d2c4a8); transform: rotate(190deg) scale(.8); }
.fish-three { transform: rotate(40deg) scale(.65); }
@keyframes swim { to { transform: rotate(360deg); } }
@keyframes fish-tail { to { transform: scaleX(.7) rotate(12deg); } }
.desk-books { position: absolute; width: 170px; height: 225px; left: max(40px, calc(50% - 535px)); bottom: 70px; transform: rotate(-12deg); }
.book-back { position: absolute; inset: 13px -10px -8px 6px; background: #b58c63; border-radius: 2px 5px 5px 2px; transform: rotate(9deg); box-shadow: 5px 8px 10px #5d483926; }
.book-front { position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; background: #e6dfca; border-left: 7px solid #c5bfa9; box-shadow: 3px 5px 7px #6b5b3b35, inset 0 0 0 1px #d1c9b2; padding: 25px 18px; color: #68745c; }
.book-front span { font: 24px/1.15 Georgia, serif; display: block; }
.book-front small { display: block; margin-top: 65px; font-size: 6px; letter-spacing: 1.4px; }
.pencil { position: absolute; right: max(80px, calc(50% - 410px)); top: 54%; width: 10px; height: 235px; background: linear-gradient(90deg, #7b5733, #d8a559 38% 62%, #9f713c 64%); transform: rotate(15deg); border-radius: 3px; box-shadow: 5px 3px 3px #6653352b; }
.pencil::after { content: ''; position: absolute; bottom: -30px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 30px solid #b89a73; }
.desk-label { position: absolute; right: 55px; bottom: 58px; font: 18px/1.4 Georgia, serif; color: #8d8c76; text-align: right; }
.desk-label span { font: italic 12px Georgia, serif; }
.desk-app main.desk-folder { position: absolute; z-index: 2; top: 143px; bottom: 32px; left: 50%; transform: translateX(-50%) rotate(-.6deg); width: min(600px, 48vw, calc((100dvh - 175px) * .8)); max-width: none; min-width: 340px; margin: 0; padding: 24px 14px 15px 22px; border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, #465e53, var(--folder) 2% 97%, #52695f); box-shadow: 3px 7px 6px #34413829, 13px 20px 35px #4b463626, inset -1px 0 0 #93a693; }
.folder-label { position: absolute; left: 25px; top: -22px; padding: 5px 18px 8px; border-radius: 7px 9px 0 0; background: var(--folder); color: #f3f0da; font: 9px/1.5 ui-monospace, monospace; letter-spacing: 1.5px; }
.folder-clip { position: absolute; top: 13px; left: calc(50% - 25px); width: 50px; height: 24px; z-index: 3; border-radius: 4px 4px 9px 9px; background: linear-gradient(#a6aca3, #e0e3db 25%, #969e92 45%, #c5c9bf 70%); box-shadow: 0 2px 3px #22392c66; }
.folder-clip::after { content: ''; position: absolute; inset: 4px 15px 10px; border: 2px solid #7f877c; border-radius: 5px 5px 0 0; }
.desk-app #words-page, .desk-app #profile-page { position: relative; height: 100%; padding: 26px 25px 14px; background: var(--paper); box-shadow: 0 2px 3px #26382b33, 3px 3px #e4e0d1, 5px 5px 2px #d7d3c6; border-radius: 1px; transform: rotate(.6deg); color: var(--ink); }
.desk-app #words-page { display: flex; flex-direction: column; }
.desk-app .search-tools { position: relative; flex-shrink: 0; top: auto; background: transparent; padding-top: 0; }
.desk-app #search-form { border-radius: 3px; background: #ffffff52; padding: 5px 5px 5px 13px; gap: 9px; border-color: #d8d8c9; }
.desk-app #word-query { font-size: 14px; }
.desk-app .search-submit { border-radius: 2px; font-size: 12px; padding: 5px 13px; background: #566c5e; color: #fff; }
.desk-app .toolbar { padding: 11px 0; border-color: #dddccf; }
.desk-app .toolbar button { font-size: 11px; }
.desk-app .toolbar span { font-size: 14px; }
.paper-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c2c6b5 transparent; padding: 0 3px 0 0; }
.paper-footer { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 6px; border-top: 1px solid #dddccf; color: #939989; font: 7px/1.5 ui-monospace, monospace; letter-spacing: 1.3px; flex-shrink: 0; }
.desk-app .intro { padding: clamp(18px, 4vh, 38px) 0 10px; }
.intro-index { font: 8px/1.5 ui-monospace, monospace; letter-spacing: 2px; color: #939b86; }
.intro-headline { font: 400 clamp(34px, 4.5vh, 53px)/1.06 Georgia, 'Times New Roman', serif; letter-spacing: -1.8px; color: #3e5745; margin: 17px 0 24px; }
.desk-app .intro-preface { font-size: 13px; line-height: 1.9; color: #63745e; letter-spacing: .5px; }
.intro-rule { width: 38px; border-top: 1px solid #b9bda7; margin: 23px 0; }
.desk-app .intro-closing { font-size: 11px; line-height: 2; color: #929584; }
.desk-app .sample-area { margin-top: 25px; }
.desk-app .eyebrow { font-size: 8px; letter-spacing: 1px; }
.desk-app .word-tags { gap: 7px; margin-top: 10px; }
.desk-app .word-tag { padding: 3px 10px; font: italic 13px/1.8 Georgia, serif; border-color: #dcdccc; background: #f1f0e5; border-radius: 2px; }
.desk-app .edition-note { font-size: 8px; margin-top: 22px; text-align: left; }
.desk-app .word-heading { margin-top: 25px; }
.desk-app .word-heading h1 { font-family: Georgia, serif; font-weight: 400; font-size: 42px; overflow-wrap: anywhere; }
.desk-app .word-section p { font-size: 13px; }
.desk-app .word-section h2 { font-size: 14px; }
.desk-app .native-box { padding: 14px 16px; margin: 20px 0; border-radius: 3px; background: #eaeee2; font-size: 13px; }
.desk-app #profile-page { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.desk-app .profile-heading { padding-top: 10px; }
.desk-app .profile-heading h1 { font-size: 22px; }
.desk-app .settings-row { font-size: 13px; }
.desk-app .tabbar { inset: auto auto 24px 40px; z-index: 4; gap: 4px; padding: 5px; border: 1px solid #bbbba599; border-radius: 7px; background: #eae6d8b3; box-shadow: 0 2px 8px #564d3210; }
.desk-app .tabbar button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 78px; padding: 5px 10px; font-size: 11px; color: #858976; }
.desk-app .tabbar button[aria-current] { background: #f9f7ed; color: #3c5844; border-radius: 4px; }
.desk-app .nav-icon { width: 17px; height: 17px; }
.desk-app .toast { bottom: 32px; }
html[data-theme=dark] { --desk: #323c35; --paper: #25342c; --folder: #405849; --desk-ink: #d4ddcf; }
html[data-theme=dark] .music-player { background: #344438; border-color: #596450; box-shadow: 0 6px 15px #0002; }
html[data-theme=dark] .music-track, html[data-theme=dark] .music-play { color: #d0d7c2; }
html[data-theme=dark] .intro-headline { color: #c2d1b7; }
html[data-theme=dark] .intro-preface { color: #a6b59a; }
html[data-theme=dark] .desk-app #search-form { background: #ffffff08; border-color: #64715b; }
html[data-theme=dark] .desk-app .native-box { background: #364a3b; }
html[data-theme=dark] .desk-app .word-tag { background: #324336; border-color: #53644a; }
html[data-theme=dark] .desk-app .tabbar { background: #354438; border-color: #69735c; }
html[data-theme=dark] .desk-app .tabbar button[aria-current] { background: #50624b; color: #e8eddf; }
@media (max-width: 1000px) {
  .lamp { left: -65px; transform: scale(.75) rotate(-16deg); transform-origin: top left; }
  .aquarium { --aquarium-size: 150px; right: 20px; }
  .desk-books { left: -20px; transform: scale(.75) rotate(-12deg); transform-origin: bottom left; }
  .desk-label { display: none; }
  .pencil { right: 50px; }
  .desk-app .site-header { padding-left: 24px; }
  .desk-caption { left: 25px; font-size: 6px; }
  .music-volume, .music-wave { display: none; }
}
@media (max-width: 640px) {
  .desk-app .site-header { height: 64px; padding: 14px 18px; }
  .desk-app .brand { font-size: 25px; }
  .desk-caption { display: none; }
  .music-player { top: 66px; height: 49px; width: calc(100% - 40px); padding: 7px 12px; gap: 12px; }
  .record { flex-basis: 32px; height: 32px; }
  .record span { width: 13px; height: 13px; border-width: 4px; }
  .music-kicker { font-size: 6px; }
  .music-track strong { font-size: 13px; }
  .music-play { height: 29px; flex-basis: 29px; }
  .lamp { left: -85px; top: 135px; transform: scale(.42) rotate(-25deg); opacity: .8; }
  .aquarium { --aquarium-size: 105px; top: 122px; right: -32px; opacity: .85; }
  .desk-books, .pencil { display: none; }
  .desk-app main.desk-folder { top: 152px; bottom: 65px; width: calc(100% - 38px); min-width: 0; padding: 20px 10px 13px 16px; }
  .desk-app #words-page, .desk-app #profile-page { padding: 20px 17px 12px; }
  .desk-app .tabbar { bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
  .intro-headline { font-size: 38px; }
  .desk-app .intro { padding-top: 24px; }
}
@media (max-height: 650px) and (min-width: 641px) {
  .music-player { top: 15px; height: 52px; }
  .desk-app main.desk-folder { top: 105px; bottom: 18px; width: min(510px, 55vw); }
  .desk-app .site-header { height: 78px; }
  .desk-books { height: 150px; width: 130px; bottom: 90px; }
  .book-front small { margin-top: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fish-path, .fish::before, .is-playing .record, .is-playing .music-wave i { animation: none; }
}