#writing.typewriter-room{position:fixed;inset:var(--writing-top,0px) 0 auto;margin:0;width:100%;max-width:none;height:var(--writing-height,100dvh);max-height:none;border:0;border-radius:0;padding:52px 12px 12px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#443322,#15120e 75%);color:#eadfc8;box-shadow:none}
.typewriter-room[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
.typewriter-room .typewriter-stage{position:relative;width:min(1200px,calc((var(--writing-height,100dvh) - 130px)*1.5));aspect-ratio:3/2;min-height:0;flex-shrink:1;isolation:isolate}
.typewriter-photo{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 15px 30px #0007)}
.typewriter-keyboard{position:absolute;pointer-events:none}
.typewriter-key{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto;touch-action:manipulation}
.keycap-legend{position:absolute;left:8%;right:8%;top:22%;height:55%;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#715138,#3d2d20 80%);box-shadow:inset 0 0 2px #b9986e60;color:#f1e5c9;font:calc(24px * var(--key-scale,1))/1 Georgia,serif;text-shadow:0 1px 1px #20150c;pointer-events:none}
.keycap-legend[hidden]{display:none}
.typewriter-key[aria-pressed="true"]{outline:1px solid #f3d48f;background:#d8b56840}
.typewriter-key:focus-visible{outline:2px solid #f3d48f;outline-offset:2px;background:#d8b56825}
.typewriter-key.pressed{background:#f4d38d38;box-shadow:inset 0 2px 5px #0009}
@media(prefers-reduced-motion:no-preference){.typewriter-key.pressed{transform:translate(-50%,-45%)}}
.typewriter-sheet{position:absolute;left:30%;right:30%;top:4%;bottom:62%;padding:10px 12px}
#writing #typeInput{display:block;width:100%;height:100%;min-height:0;resize:none;border:0;border-radius:0;background:transparent;color:#30271e;padding:12px;font:clamp(16px,1.3vw,20px)/1.65 'Courier New',monospace;box-shadow:none;caret-color:#30271e;scrollbar-width:thin;scrollbar-color:#a08b66 transparent;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
#writing #typeInput::placeholder{color:#73644f}
#writing #typeInput:focus{outline:none}
#writing #typeInput:focus-visible{outline:1px solid #735c363b;outline-offset:3px}
#writing .close{position:absolute;top:6px;right:max(16px,env(safe-area-inset-right));min-height:44px;padding:10px 14px;color:#e6d6b7;font:12px Inter,Arial,sans-serif;z-index:2}
#writing .actions{width:min(820px,100%);margin:8px auto 0;gap:12px;flex-shrink:0;justify-content:center;flex-wrap:wrap}
#writing .actions button{min-height:44px;padding:10px 16px;background:transparent;color:#e2cfac;border:0;border-bottom:1px solid #a58b5b70;font:12px Inter,Arial,sans-serif}
#writing .actions button:focus-visible,#writing .close:focus-visible{outline:2px solid #e5c888;outline-offset:2px}
@media(max-width:700px){
 #writing.typewriter-room{padding:50px 10px max(8px,env(safe-area-inset-bottom));justify-content:flex-start}
 .typewriter-room .typewriter-stage{width:100%;aspect-ratio:auto;flex:1;min-height:140px;overflow:hidden}
 .typewriter-photo{position:absolute;width:700px;max-width:none;height:auto;left:50%;bottom:0;transform:translateX(-50%);object-fit:contain}
 .typewriter-sheet{left:5%;right:5%;top:5px;bottom:285px;min-height:110px;padding:12px;background:linear-gradient(100deg,#cdbb98,#f1e5c9 6%,#f5ecd6 65%,#dfd0b1);border-radius:2px 3px 0 0;box-shadow:0 2px 9px #0006,inset 0 0 25px #a7844220}
 #writing #typeInput{font-size:16px;padding:8px;line-height:1.55}
 #writing .actions{gap:4px;margin-top:4px;justify-content:space-between}
 #writing .actions button{font-size:10px;padding:8px 5px}
}
@media(max-height:480px){
 #writing.typewriter-room{padding-top:46px}
 .typewriter-room .typewriter-stage{width:min(780px,100%);flex:1;aspect-ratio:auto;min-height:110px;overflow:hidden}
 .typewriter-photo{position:absolute;width:500px;height:auto;max-width:none;left:50%;bottom:0;transform:translateX(-50%)}
 .typewriter-sheet{left:8%;right:8%;top:0;bottom:135px;min-height:80px;padding:6px 12px;background:#eee1c5;box-shadow:0 2px 10px #0007}
 #writing #typeInput{font-size:16px;line-height:1.5;padding:6px}
}
/* Preserve photographed paper when the software keyboard shortens the viewport.
   The carriage stays below the sheet while the machine body crops out of view. */
@media(max-width:700px), (max-width:950px) and (pointer:coarse){
 #writing .typewriter-sheet{background:#eee1c5 url('assets/typewriter-closeup.png') 50% 3%/260% 300%;box-shadow:0 2px 9px #0006,inset 0 0 0 1px #f7e3c080}
 #writing.paper-focused{padding-top:46px;overflow-y:auto;justify-content:flex-start}
 #writing.paper-focused .typewriter-stage{width:100%;flex:1 0 160px;min-height:160px;aspect-ratio:auto;overflow:hidden}
 #writing.paper-focused .typewriter-photo{position:absolute;width:700px;height:auto;max-width:none;left:50%;top:calc(100% - 230px);bottom:auto;transform:translateX(-50%)}
 #writing.paper-focused .typewriter-sheet{left:5%;right:5%;top:5px;bottom:48px;min-height:0;padding:10px 12px;border-radius:2px 3px 0 0}
 #writing.paper-focused .typewriter-keyboard{visibility:hidden}
 #writing.paper-focused #typeInput{font-size:16px;line-height:1.55;padding:8px;background:transparent}
}

/* Same bottom-center sound control and single X exit as the paper view. */
#writing .typewriter-sound-control{visibility:visible;flex-shrink:0;min-height:44px;max-width:none;padding:0;margin:8px auto 0}
#writing .close{width:44px;height:44px;min-width:44px;padding:0;font:28px Georgia,serif}
@media(min-width:701px) and (min-height:481px){.typewriter-room .typewriter-stage{width:min(1200px,calc((var(--writing-height,100dvh) - 190px)*1.5))}}

.typewriter-input-tools{display:flex;justify-content:center;gap:8px;flex-shrink:0;margin-top:6px}
.typewriter-input-tools[hidden]{display:none}
.typewriter-input-tools button{min-height:44px;padding:8px 12px;border:1px solid #9b8155;border-radius:4px;background:#2d241a;color:#eadfc8;font:12px Inter,Arial,sans-serif}
.typewriter-input-tools button:disabled{opacity:.45;cursor:default}