:root{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#242424;background:#fafafa;font-synthesis:none;-webkit-text-size-adjust:100%;--topbar:62px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit}button{touch-action:manipulation}button:not(:disabled){cursor:pointer}button:disabled{opacity:.5}button:focus-visible,a:focus-visible{outline:2px solid #426899;outline-offset:5px}button{border:0}button[hidden],[hidden]{display:none!important}
.topbar{height:calc(var(--topbar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e2e2;background:#fafafa;z-index:5}
.mail-heading{display:flex;align-items:center;gap:12px;font-size:21px;letter-spacing:.06em}.mail-heading svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}.icon-button{display:grid;place-items:center;width:40px;height:40px;background:none;border-radius:5px;color:#4d4d4d}.icon-button:hover{background:#eee}.icon-button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linejoin:round}.back-link{background:none;padding:8px 0;font-size:15px;display:flex;gap:9px;align-items:center}.back-link span{font-size:29px;line-height:1}
#main{flex:1;min-height:0;position:relative;overflow:hidden}.mail-view{height:100%;overflow:auto;background:#fff;padding:38px 42px 32px;scrollbar-width:thin}.message{max-width:1050px;margin:0 auto}.message h1{font-size:clamp(23px,2.65vw,32px);font-weight:600;letter-spacing:.04em;margin:0;padding:0 0 30px;border-bottom:1px solid #dfdfdf}.sender-row{display:flex;align-items:center;gap:19px;padding:26px 0;border-bottom:1px solid #dfdfdf}.avatar{height:58px;width:58px;border-radius:50%;display:grid;place-items:center;background:#eee;flex-shrink:0}.avatar svg{height:34px;width:34px;fill:none;stroke:#898989;stroke-width:1.6}.sender{display:flex;flex-direction:column;gap:4px;line-height:1.4}.sender strong{font-size:19px;font-weight:600}.sender>span{font-size:14px;color:#5d5d5d}.sender small{font-size:13px;color:#767676;margin-top:2px}.message-body{padding:16px 0 32px;font-size:18px;line-height:1.95;letter-spacing:.025em}.message-body p{margin:26px 0}.url-line{display:flex;align-items:center;gap:12px;padding:10px 0 16px}.url-mark{font-family:Arial,sans-serif;font-size:18px;flex-shrink:0;line-height:1;user-select:none}.url-line a{display:inline-block;color:#1956b9;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;white-space:nowrap;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative;will-change:transform;line-height:1.7}.url-line a::before{content:"";position:absolute;inset:-12px -5px}.url-line a.is-dragging{transition:none}.url-line a.snapping{transition:transform .18s ease,opacity .18s ease}.mail-footer{border-top:1px solid #e2e2e2;padding-top:22px;font-size:14px;color:#707070}.url-line.departing a{transition:transform .32s ease-in,opacity .28s ease;transform:translateX(-130px)!important;opacity:0}.url-line.departing .url-mark{opacity:.3}
.room-view{position:relative;width:100%;height:100%;overflow:hidden;background:#cabcaa}.room-art{position:absolute;isolation:isolate;user-select:none;-webkit-user-select:none;background:url('/assets/room-door-clean.png') center/100% 100% no-repeat;--sx:1;--dx:0;--dy:0}.door-aperture{position:absolute;left:38.26347%;top:8.39532%;width:23.41317%;height:80.23379%;perspective:1400px;perspective-origin:50% 50%;overflow:visible;background:#302e2a}.door-aperture.sliding{overflow:hidden}.passage{position:absolute;inset:0;overflow:hidden;background:#37352e;box-shadow:inset 12px 0 32px #0009}.passage::before{content:"";position:absolute;inset:9% 11% 0;background:#b7ad99;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.far-door{position:absolute;left:35%;top:31%;width:30%;height:55%;background:#747166;box-shadow:0 0 0 5px #8f897a}.door{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:none;border-radius:0;background-color:#77766e;background-image:url('/assets/room-door-clean.png');background-repeat:no-repeat;background-size:427.10997% 124.63576%;background-position:49.96091% 42.47312%;transform-origin:0% 50%;transform:translateZ(0);backface-visibility:hidden;transform-style:preserve-3d;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;will-change:transform,filter;cursor:default!important;text-align:left;box-shadow:0 0 0 1px #24241f40}.door::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--shade,0);pointer-events:none}.door.is-dragging{transition:none}.door.snapping{transition:transform .19s ease,filter .19s ease}.room-number{position:absolute;top:3%;left:5.7%;font-family:Arial,sans-serif;font-weight:400;font-size:calc(34px * var(--sx));line-height:1;color:#080808}.door-mark{position:absolute;top:15.9%;left:50%;transform:translateX(-50%);font-family:Arial,sans-serif;font-size:calc(35px * var(--sx));line-height:1;color:#050505}.door-mark.pull{font-family:Arial,sans-serif;font-weight:600;font-size:calc(45px * var(--sx));top:15.1%}.room-letter{position:absolute;left:50%;top:46.7%;transform:translate(-50%,-50%);color:#040404;font-size:calc(90px * var(--sx));font-weight:500;line-height:1.1;white-space:nowrap;letter-spacing:0}.room-letter.reception{font-size:calc(53px * var(--sx));letter-spacing:.15em}.room-fade{position:absolute;inset:0;background:#23211c;opacity:0;pointer-events:none;z-index:4;transition:opacity .13s ease}.room-fade.cover{opacity:1}.room-fade.welcome{background:#ede7da}.room-art.entering{animation:room-arrive .35s ease-out}@keyframes room-arrive{from{opacity:.3}to{opacity:1}}
.door{--door-depth:calc(22px * var(--sx));will-change:transform}
.door-back,.door-edge{position:absolute;display:block;pointer-events:none;backface-visibility:visible}
.door-back{inset:0;background:#68675e;border:1px solid #48483f;transform:translateZ(calc(-1 * var(--door-depth)))}
.door-edge{background:#959284;border:1px solid #56554c;box-shadow:inset 2px 0 #b0ac9b,inset -2px 0 #747267}
.door-edge-right,.door-edge-left{top:0;width:var(--door-depth);height:100%;transform-origin:left center;transform:rotateY(90deg)}
.door-edge-right{left:100%}.door-edge-left{left:0;background:#626157}
.door-edge-top,.door-edge-bottom{left:0;width:100%;height:var(--door-depth);transform-origin:center top;transform:rotateX(-90deg);background:#a29e8f;box-shadow:inset 0 1px #c2bcaa}
.door-edge-top{top:0}.door-edge-bottom{top:100%;background:#5f5e55}
.room-art,.door{background-image:url('./assets/room-door-clean.png')}
.door-aperture,.passage{background:#000;box-shadow:none}
.passage::before,.far-door{display:none}
.door{transform-origin:0% 50% calc(-1 * var(--door-depth));box-shadow:none}
.door-back,.door-edge{backface-visibility:hidden}
.door-back{transform:translateZ(calc(-1 * var(--door-depth))) rotateY(180deg);border:0;background:#77766e}
.door-edge-left{transform:translateZ(calc(-1 * var(--door-depth))) rotateY(-90deg)}
.door-edge-top{transform:translateZ(calc(-1 * var(--door-depth))) rotateX(90deg)}
.door-mark.pull{font-weight:400;font-size:calc(35px * var(--sx));top:15.9%;color:#000}
.door{background:none;backface-visibility:visible;-webkit-backface-visibility:visible;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform;outline:0}
.door::after{content:none}
.door-front{position:absolute;inset:0;display:block;background:#77766e url('./assets/room-door-clean.png') 49.96091% 42.47312% / 427.10997% 124.63576% no-repeat;transform:translateZ(.25px);backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.door-front::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--shade,0);pointer-events:none}
.door-back,.door-edge{-webkit-backface-visibility:hidden}
.door:focus-visible{outline:2px solid #426899;outline-offset:5px}
html,body{touch-action:manipulation}
body{position:fixed;top:var(--app-top,0px);left:0;height:var(--app-height,100dvh);overscroll-behavior:none}
.keyword-form{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(390px,calc(100% - 32px));padding:9px 10px 10px;background:#faf8f2;border:1px solid #b2ac9f;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;touch-action:manipulation}
.keyword-cells{display:flex;min-width:0;gap:3px}
.keyword-cell{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;gap:5px}
.cell-number{font-family:Arial,sans-serif;font-size:13px;height:15px;line-height:15px;color:#242424}
.cell-input{display:block;width:100%;min-width:0;height:36px;margin:0;padding:0;border:1px solid #b0ab9f;border-radius:0;background:#fff;color:#242424;caret-color:#193d56;font-size:19px;line-height:normal;text-align:center;outline:none;box-shadow:none;appearance:none;-webkit-appearance:none;touch-action:manipulation}
.cell-input:focus{background:#eef2f4;border-color:#263f4c;box-shadow:inset 0 0 0 1px #263f4c}
.cell-input::selection{background:#cbdbe8;color:#242424}
.keyword-form button{width:82px;height:36px;padding:0 5px;color:#fff;background:#343633;font-size:13px;border:1px solid #343633;border-radius:0;touch-action:manipulation}
.keyword-form[data-length="3"]{width:min(320px,calc(100% - 32px))}
.keyword-form[data-length="3"] .keyword-cells{gap:8px}
.keyword-form[data-length="3"]{grid-template-columns:minmax(0,1fr);width:min(250px,calc(100% - 32px))}
.share-link{display:block;text-align:center;padding:13px 18px;background:#111;color:#fff;text-decoration:none;margin-bottom:15px;touch-action:manipulation}
.setting-links{display:flex;flex-direction:column;gap:15px;margin-top:24px}.setting-links a{color:#45433d;font-size:15px;text-underline-offset:4px;touch-action:manipulation}.setting-links p{font-size:12px;color:#777;line-height:1.8;margin:0}
#records dl{display:grid;grid-template-columns:1fr auto;gap:17px;font-size:15px}#records dt,#records dd{margin:0}#records dd{font-weight:600;font-variant-numeric:tabular-nums}
#connection-message{font-size:14px;line-height:1.8;color:#777}#connection .wide-button{margin-top:20px}
dialog{padding:28px;border:1px solid #dedad2;border-radius:4px;box-shadow:0 15px 70px #0002;width:min(420px,calc(100vw - 32px));color:#282724;background:#fffdf9;max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#0005}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:27px}dialog h2{font-size:21px;font-weight:500;margin:0;line-height:1.6}.close-dialog{background:none;font-size:26px;width:34px;height:34px;color:#777;line-height:1}.sound-row{display:flex;align-items:center;gap:16px;margin:0 0 24px}.sound-row label{font-size:15px;flex-shrink:0}.sound-row input{width:100%;min-width:30px;accent-color:#777}.sound-row button{flex-shrink:0;font-size:13px}.subtle-button{background:#f0efec;padding:10px 14px;border:1px solid #dfddd8;border-radius:2px}.solid-button{background:#3f423f;color:#fff;padding:11px 16px;border:1px solid #3f423f;border-radius:2px}.wide-button{background:#fff;width:100%;border:1px solid #aaa79f;border-radius:2px;padding:13px 18px;line-height:1.5}.settings-note{font-size:12px;color:#888;line-height:1.8;margin:24px 0 0}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px}#restart p{font-size:14px;color:#777}.completion-kicker{font-size:12px;letter-spacing:.15em;color:#898479}#completion h2{font-size:23px;margin-bottom:15px}#completion>p{font-size:15px;color:#777;margin:0 0 30px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){:root{--topbar:54px}.topbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.mail-heading{font-size:18px;gap:10px}.mail-heading svg{width:21px;height:21px}.mail-view{padding:27px 23px 26px}.message h1{font-size:24px;line-height:1.6;padding-bottom:22px;letter-spacing:0}.sender-row{gap:14px;padding:20px 0}.avatar{width:47px;height:47px}.sender strong{font-size:17px}.sender>span{font-size:12px}.sender small{font-size:12px}.message-body{font-size:16px;line-height:1.9;letter-spacing:0;padding:10px 0 22px}.message-body p{margin:25px 0}.url-line{gap:8px;padding:8px 0 12px}.url-line a{font-size:14px;letter-spacing:-.025em}.url-mark{font-size:16px}.mail-footer{padding-top:17px}.back-link{font-size:14px}dialog{padding:23px}.sound-row{gap:10px}}
@media(max-height:530px){.mail-view{padding-top:22px}.message h1{padding-bottom:17px}.sender-row{padding:17px 0}.message-body p{margin:20px 0}}
@media(max-width:360px){.keyword-form[data-length="8"] .cell-input{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}