/* Always Here: styles */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
/* Layout: two scenes in one page. Scene 1 is the room (SVG) with clickable
   window / notebook / cup. Scene 2 is the view from the window (SVG), swapped in
   with a 0.3s fade. HTML layers on top: notifications, phone, notebook, ending.
   A single deliberate look (an autumn afternoon), so no light/dark switching. */
:root{
  color-scheme: light;
  --wall:#bcc6c0;
  --ink:#23292b;
  --paper:#f5f2e9;
  --pen:#2f5d8a;
  --glow:#fffbea;
  --ui-bg:rgba(250,251,252,.94);
  --ui-text:#1b1f24;
  --ui-sub:#6b7279;
  --serif-en:"Spectral", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --hand:"Kalam", "Segoe Print", "Bradley Hand", cursive;
  --ui:-apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
html,body{height:100%}
body{background:var(--wall);color:var(--ink);overflow:hidden;font-family:var(--ui);-webkit-tap-highlight-color:transparent}
.scene{position:fixed;inset:0;width:100%;height:100%;display:block}
#room{filter:blur(7px) saturate(.5) brightness(.7);transition:filter 2.8s ease}
body[data-phase="room"] #room,body[data-phase="end"] #room{filter:none}

/* clickable things in the room */
.obj{cursor:pointer;outline:none}
body:not([data-phase="room"]) .obj{pointer-events:none}
.halo{fill:none;stroke:var(--glow);stroke-width:2;opacity:0}
.obj:focus-visible .halo{opacity:.9}
.obj{transition:filter .4s}
.obj:hover{filter:brightness(1.06)}
.curtain{transform-box:fill-box;transform-origin:50% 0;animation:sway 7s ease-in-out infinite alternate}
#curtainR{animation-delay:-3s}
@keyframes sway{from{transform:rotate(-.5deg)}to{transform:rotate(.5deg)}}
#nbMine{opacity:0;transition:opacity .6s}
#notebook.written #nbMine{opacity:1}
.st{opacity:0}
#cup.steaming .st{animation:steam 4.4s ease-in-out infinite}
#cup.steaming .st:nth-child(2){animation-delay:1.3s}
#cup.steaming .st:nth-child(3){animation-delay:2.6s}
@keyframes steam{0%{opacity:0;transform:translateY(8px)}30%{opacity:.6}100%{opacity:0;transform:translateY(-38px)}}
#deskPhone{transition:opacity 1s}

/* scene 2: at the window */
#view{position:fixed;inset:0;z-index:12;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
#view.show{opacity:1;visibility:visible;transition:opacity .3s ease}
#back{position:fixed;left:calc(28px + env(safe-area-inset-left,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:13;color:#2a3133}
#viewLine{position:fixed;left:50%;top:calc(12vh + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:13;margin:0;width:min(84vw,30rem);text-align:center;font-family:var(--serif-en);font-size:clamp(19px,2.6vw,24px);line-height:1.4;color:#fffaf0;text-shadow:0 1px 3px rgba(0,0,0,.55),0 1px 16px rgba(0,0,0,.5);opacity:0;transition:opacity 2.4s ease;pointer-events:none}
#viewLine.show{opacity:1}

/* intro */
#intro{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;background:rgba(24,28,30,.45);color:#f2efe7;padding-block:32px calc(40px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));transition:opacity 1.2s}
#intro.gone{opacity:0;pointer-events:none}
#intro .label{margin-left:clamp(12px,5vw,64px);width:min(24rem,100%);border-top:1px solid rgba(242,239,231,.55);padding-top:14px;display:flex;flex-direction:column;gap:8px}
#intro h1{margin:0;font-family:var(--serif-en);font-weight:400;font-size:clamp(30px,5vw,40px);line-height:1.1}
#intro .meta{font-family:var(--mono);font-size:12px;line-height:1.7;opacity:.85}
.link{font:inherit;cursor:pointer;background:none;border:0;padding:4px 0;color:inherit;font-family:var(--serif-en);font-size:17px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.link:hover{text-decoration-thickness:2px}
#intro .link{align-self:flex-start;margin-top:6px}
.link:focus-visible,#phone:focus-visible,#leave:focus-visible,#noteInput:focus-visible{outline:2px solid var(--glow);outline-offset:4px}

/* notifications */
#notifs{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.n{position:absolute;width:min(300px,78vw);display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--ui-bg);color:var(--ui-text);box-shadow:0 6px 18px rgba(18,22,26,.2);font-size:13px;line-height:1.3;animation:nIn .2s ease-out both}
.n .ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px}
.n .tx{min-width:0;flex:1}
.n .app{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--ui-sub);text-transform:uppercase;letter-spacing:.04em}
.n .t{font-weight:600;margin-top:1px}
.n .b{color:#3c434a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n.out{animation:nOut .6s ease forwards}
@keyframes nIn{from{opacity:0}to{opacity:1}}
@keyframes nOut{to{opacity:0}}

/* phone */
#phoneWrap{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;pointer-events:none;transition:opacity 1.2s;width:min(92vw,520px);text-align:center;color:#f7f5ef}
#phoneWrap.show{opacity:1;pointer-events:auto}
#phoneWrap .en{font-family:var(--serif-en);font-size:clamp(18px,3vw,22px);text-shadow:0 1px 10px rgba(0,0,0,.5);text-wrap:balance}
#phoneWrap .tip{font-family:var(--mono);font-size:11px;opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.6)}
#phone{width:92px;height:168px;perspective:700px;background:none;border:0;padding:0;cursor:pointer;border-radius:18px}
#phone .inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.5,0,.2,1)}
#phone.flipped .inner{transform:rotateX(180deg)}
.face,.back{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid #14171c}
.face{background:linear-gradient(165deg,#41557a,#1a2234 70%);box-shadow:0 8px 20px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;padding-top:22px;gap:7px;color:#e9eef8}
.face .clock{font-size:22px;font-weight:300;letter-spacing:.02em}
.face .badge{background:#e2554f;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.face i{display:block;width:62px;height:10px;border-radius:4px;background:rgba(255,255,255,.22)}
.back{background:linear-gradient(165deg,#2c3036,#1d2024);transform:rotateX(180deg)}

/* in-room layers */
#hint{position:fixed;top:calc(22px + env(safe-area-inset-top,0px));right:calc(28px + env(safe-area-inset-right,0px));z-index:9;text-align:right;max-width:min(78vw,20rem);opacity:0;transition:opacity 1.4s;pointer-events:none}
#hint.show{opacity:1}
#hint .en{font-family:var(--serif-en);font-size:17px;line-height:1.4;color:var(--ink)}
#cap{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9;max-width:min(88vw,560px);text-align:center;color:#f4f0e6;font-family:var(--serif-en);font-size:17px;text-shadow:0 1px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .6s;pointer-events:none}
#cap.show{opacity:1}
#leave{position:fixed;right:calc(28px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:11;font:inherit;cursor:pointer;border:0;background:none;padding:4px 0;color:#f4f0e6;font-family:var(--serif-en);font-size:17px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-shadow:0 1px 8px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity 1.6s}
#leave.show{opacity:1;pointer-events:auto}
#leave:hover{text-decoration-thickness:2px}

/* notebook, close up */
#book{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(28,32,34,.58);padding-block:20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s;overflow-y:auto}
#book.show{opacity:1;visibility:visible;transition:opacity .4s}
.page{position:relative;width:min(520px,100%);background:var(--paper);border-radius:2px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:22px 22px 14px 58px}
.page::before{content:"";position:absolute;top:0;bottom:0;left:44px;width:1px;background:#e2b3aa}
.page .mineLine{font-family:var(--hand);font-size:20px;line-height:36px;color:#3a4250;margin:0}
#noteInput{display:block;width:100%;min-height:216px;resize:none;border:0;padding:0;margin:0;background:transparent;background-image:repeating-linear-gradient(transparent 0 35px,#dcd6c8 35px 36px);background-attachment:local;font-family:var(--hand);font-weight:300;font-size:20px;line-height:36px;color:var(--pen);border-radius:2px}
#noteInput::placeholder{color:#9aa0a6}
.page .foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin-top:12px}
.page .stays{font-family:var(--mono);font-size:11px;color:#7a7f86}
.page .link{color:var(--ink);font-size:16px}

/* ending, over the same room */
#end{position:fixed;inset:0;z-index:20;background:rgba(236,238,232,.86);display:flex;overflow-y:auto;padding-block:max(28px,6vh);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));opacity:0;pointer-events:none;transition:opacity 3s ease}
#end.show{opacity:1;pointer-events:auto}
#end .wrap{margin:auto;display:flex;flex-direction:column;align-items:center;gap:36px;max-width:34rem;text-align:center}
#end .l{opacity:0;transition:opacity 2s ease}
#end.show .l{opacity:1}
#end.show .l1{transition-delay:.8s}
#end.show .l2{transition-delay:4s}
#end.show .l2b{transition-delay:6.5s}
#end.show .l3{transition-delay:9s}
.card{margin:0;width:min(320px,82vw);background:var(--paper);background-image:repeating-linear-gradient(transparent 0 31px,#dcd6c8 31px 32px);padding:10px 16px 12px;box-shadow:0 10px 26px rgba(30,36,40,.16);transform:rotate(-1.4deg);text-align:left}
#end.show .card{transform:rotate(-1.4deg)}
.card p{margin:0;font-family:var(--hand);font-weight:300;font-size:20px;line-height:32px;color:var(--pen);white-space:pre-wrap;overflow-wrap:anywhere;max-height:192px;overflow:hidden}
.card figcaption{font-family:var(--hand);font-size:17px;line-height:32px;color:#6a7078;text-align:right}
#end .big{font-family:var(--serif-en);font-style:italic;font-weight:300;font-size:clamp(28px,5.4vw,40px);line-height:1.25;color:#232a29;text-wrap:balance}
#end .mine{font-family:var(--serif-en);font-size:clamp(17px,3.2vw,20px);line-height:1.7;color:#2b3230;text-wrap:balance}
#end .close-en{font-family:var(--serif-en);font-style:italic;font-size:clamp(18px,3.2vw,22px);line-height:1.5;color:#2b3230}
@media (prefers-reduced-motion: reduce){
  .n,.n.out{animation-duration:.01s}
  .curtain{animation:none}
}