:root{--bg:#090909;--surface:#131313;--surface-2:#191919;--raised:#1f1f1f;--panel:#121212;--ink:#f3f3f1;--ink-2:#9b9b97;--ink-3:#5a5a57;--line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.38);--line-3:rgba(255,255,255,.88);--frame:rgba(255,255,255,.6);--amber:#f0b35a;--out:cubic-bezier(.23,1,.32,1);--drawer:cubic-bezier(.32,.72,0,1);--arrive:cubic-bezier(.25,.8,.25,1);--display:"Inter Tight",Inter,system-ui,sans-serif;--body:Inter,system-ui,-apple-system,sans-serif;--hand:Caveat,"Segoe Print","Bradley Hand",cursive;color-scheme:dark}html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--body)}body{overflow:hidden}.fold{container-type:size;container-name:fold;height:100%;position:relative}.stage{position:absolute;inset:0;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;overflow:hidden;box-sizing:border-box;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:env(safe-area-inset-top,0px) calc(18px + env(safe-area-inset-bottom,0px))}.defs{position:absolute;width:0;height:0;overflow:hidden}.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:26px 28px 16px;flex:none}.hello{margin:0;font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}.sub{margin:6px 0 0;font-size:14px;color:var(--ink-2)}.util{display:flex;gap:8px;flex:none}.pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;color:var(--ink);background:transparent;font-family:var(--body);white-space:nowrap;box-sizing:border-box;cursor:pointer}.pill kbd{font:inherit;font-size:11px;color:var(--ink-3)}.pill.solid{background:var(--ink);color:#0a0a0a;border-color:var(--ink)}.pill:focus-visible,.hit:focus-visible,.card:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.house{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;margin:0 28px}.roof{height:7px;margin:0 -8px;background:var(--surface-2);border:1px solid var(--frame);border-radius:2px 2px 0 0;flex:none}.grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);border-left:1px solid var(--frame)}.room{position:relative;overflow:hidden;background:var(--bg);border-right:1px solid var(--frame);border-bottom:1px solid var(--frame);transition:opacity .4s;container-type:size}.room svg{position:absolute;inset:0;width:100%;height:100%}.room svg *{vector-effect:non-scaling-stroke}.room.stairs{pointer-events:none;grid-column:span 2}.lbl{position:absolute;left:11%;top:13%;display:flex;gap:9px;align-items:baseline;font-family:var(--hand);font-size:22px;font-weight:600;line-height:1;pointer-events:none;transition:opacity .35s}.lbl .cnt{font-family:var(--body);font-size:11px;font-weight:400;color:var(--amber);opacity:0;transition:opacity .3s}.hit{position:absolute;inset:0;cursor:pointer;background:none;border:0;padding:0;margin:0;appearance:none}.hit:focus-visible{outline-offset:-3px}.gallery{position:absolute;inset:0;pointer-events:none}.room .pic{position:absolute;inset:auto;width:auto;transform:translate(-50%,-50%)}.room .pic.a{left:27%;top:41%;height:clamp(14px,13cqh,58px)}.room .pic.b{left:42%;top:29%;height:clamp(16px,15cqh,66px)}.room .pic.c{left:56%;top:19%;height:clamp(13px,12cqh,54px)}.k{fill:none;stroke:var(--line-3);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}.k2{fill:none;stroke:var(--line-2);stroke-width:1;stroke-linejoin:round}.k1{fill:none;stroke:var(--line);stroke-width:.8}.f1{fill:var(--surface)}.f2{fill:var(--surface-2)}.f3{fill:var(--raised)}.f0{fill:#0e0e0e}.screen{fill:#0b0b0b;transition:fill .35s}.blinds{transform-box:fill-box;transform-origin:50% 0;transition:transform .7s var(--arrive)}.light{opacity:0;transition:opacity .5s}.glow{opacity:0;transition:opacity .45s}.book{transform-box:fill-box;transform-origin:0 100%;transition:transform .5s var(--arrive)}.shade{fill:var(--surface-2);stroke:var(--line-3);stroke-width:.9;transition:fill .35s,stroke .35s}.flag{fill:var(--amber);transform-box:fill-box;transform-origin:0 100%;transition:transform .5s var(--arrive)}.lantern{fill:var(--surface-2);stroke:var(--line-3);stroke-width:.9;stroke-linejoin:round;transition:fill .35s,stroke .35s}.room{--vbw:260;--vbx:0;--sc:min(calc(100cqw / var(--vbw)),calc(100cqh / 170))}.doorway{position:absolute;left:calc(50cqw + (100 - var(--vbx) - var(--vbw) / 2) * var(--sc));bottom:calc(58 * var(--sc));width:calc(44 * var(--sc));height:calc(98 * var(--sc));perspective:calc(260 * var(--sc));perspective-origin:50% 50%}.room .door{position:absolute;inset:0;width:100%;height:100%;transform-origin:0 50%;transform:rotateY(0);transition:transform .6s var(--arrive)}.stage[data-mode=idle] .grid:has(.room:is(:hover,:focus-within,.on)) .room:not(:hover):not(:focus-within):not(.on){opacity:.32}.stage[data-mode=open] .room:not(.on){opacity:.75}.room:is(:hover,:focus-within,.on){z-index:3}.room:is(:hover,:focus-within,.on) .cnt{opacity:1}.stage[data-mode=open] .cnt{opacity:0!important}.room:is(:hover,:focus-within,.on) .screen{fill:#e9eefb}.room:is(:hover,:focus-within,.on) .glow{opacity:1}.room:is(:hover,:focus-within,.on) .blinds{transform:scaleY(.22)}.room:is(:hover,:focus-within,.on) .light{opacity:1}.room:is(:hover,:focus-within,.on) .book{transform:rotate(-16deg)}.room:is(:hover,:focus-within,.on) .shade{fill:var(--amber);stroke:var(--amber)}.room:is(:hover,:focus-within,.on) .flag{transform:rotate(-82deg)}.room:is(:hover,:focus-within,.on) .lantern{fill:var(--amber);stroke:var(--amber)}.room:is(:hover,:focus-within,.on) .door{transform:rotateY(-62deg)}.scrim{position:absolute;inset:0;background:#0909099e;opacity:0;pointer-events:none;transition:opacity .45s;z-index:2}.stage[data-mode=open] .scrim{opacity:1;pointer-events:auto}.dialog{position:absolute;left:50%;top:50%;z-index:4;width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;background:var(--panel);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px 16px;opacity:0;pointer-events:none;visibility:hidden;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) scale(var(--os,.5));transition:transform .32s var(--out),opacity .26s,visibility 0s .32s}.stage[data-mode=open] .dialog{opacity:1;pointer-events:auto;visibility:visible;transform:translate(-50%,-50%) scale(1);transition:transform .58s var(--arrive),opacity .3s,visibility 0s}.dhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}.dhead .name{font-family:var(--display);font-size:15px;font-weight:500}.dhead .count{font-size:12px;color:var(--amber)}.dhead .close{margin-left:auto;height:28px;padding:0 11px}.set{display:none;gap:12px;align-items:stretch}.set.on{display:flex}.card{flex:none;width:150px;height:214px;box-sizing:border-box;padding:10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;opacity:0;transform:translateY(14px);transition:transform .42s var(--arrive) var(--d,0s),opacity .3s var(--d,0s),border-color .2s,translate .2s var(--out),scale .16s ease-out}.card.wide{width:322px}.card.short{width:300px;height:140px}.card.more{width:112px;align-items:flex-start;justify-content:flex-end;border-style:dashed;border-color:var(--line-2)}.card.more .n{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:-.02em}.card.more .go{margin-top:4px}.card .thumb{display:block;height:74px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);flex:none;position:relative;overflow:hidden}.card img.thumb{width:100%;object-fit:cover}.card .thumb i{position:absolute;left:12px;right:12px;height:1px;background:var(--line-2)}.card h2{margin:2px 0 0;font-family:var(--display);font-size:13px;font-weight:500;line-height:1.3;letter-spacing:-.01em}.card h2.big{font-size:17px}.card p{margin:0;font-size:11.5px;line-height:1.4;color:var(--ink-2)}.card .go{margin-top:auto;font-size:11px;color:var(--ink-3)}.card .go a{color:var(--ink-2);text-decoration:none}.card .go a:hover{color:var(--ink)}.card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.card .chips span{font-size:11px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:2px 8px}.card .mail{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}.card .mail a{color:inherit;text-decoration:none}.card .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;margin-right:8px;vertical-align:1px}.stage[data-mode=open] .set.on .card{opacity:1;transform:none}.stage[data-mode=open] .set.on .card:nth-child(1){--d:.14s}.stage[data-mode=open] .set.on .card:nth-child(2){--d:.2s}.stage[data-mode=open] .set.on .card:nth-child(3){--d:.26s}.stage[data-mode=open] .set.on .card:nth-child(4){--d:.32s}@media (hover:hover) and (pointer:fine){.stage[data-mode=open] .set.on :is(a.card,[data-room=work]>.card):hover{border-color:var(--line-3);translate:0 -4px}}a.card:active{scale:.97}.pill{transition:scale .16s ease-out}.pill:active{scale:.97}@container fold (max-width:600px){.top{flex-direction:column;align-items:flex-start;padding:22px 2px 12px;gap:10px}.hello{font-size:24px}.sub{font-size:13px;margin-top:4px}.pill{height:28px;font-size:12px}.house{margin:0 2px}.grid{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr .5fr}.room.stairs{order:10}.room .pic.c{display:none}.room{--vbw:190;--vbx:40}.lbl{font-size:19px}.dialog{inset:auto 12px 12px;width:auto;max-width:none;transform:translateY(24px) scale(.98);padding:12px 12px 14px;transition:transform .28s var(--out),opacity .24s,visibility 0s .28s}.stage[data-mode=open] .dialog{transform:none;transition:transform .5s var(--drawer),opacity .28s,visibility 0s}.set{flex-wrap:wrap;gap:10px}.card{width:calc(50% - 5px);height:212px}.card.wide,.card.short{width:100%}.card.more{width:calc(50% - 5px)}}@media (prefers-reduced-motion:reduce){.book,.flag,.blinds,.door{transition:none!important}.dialog{transform:translate(-50%,-50%)!important;transition:opacity .2s,visibility 0s .2s!important}.stage[data-mode=open] .dialog{transition:opacity .2s,visibility 0s!important}@container fold (max-width:600px){.dialog{transform:none!important}}.card{transform:none!important;translate:none!important;scale:none!important;transition:opacity .2s var(--d,0s),border-color .2s!important}.pill{scale:none!important}}