@font-face{font-family:Xiaolai;src:url('assets/xiaolai-hand-v2.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#fff5e5;--ink:#344637}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:Xiaolai,"Hannotate SC","Kaiti SC",sans-serif}
#experience{position:relative;width:100%;height:100svh;min-height:440px}#world{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}
#words{position:absolute;left:5.5%;top:11%;max-width:340px;pointer-events:none;transition:opacity .35s,transform .6s}#words.changing{opacity:0;transform:translateY(12px)}#eyebrow{font-size:14px;letter-spacing:2px;margin:0 0 20px;color:#6d7d65}
h1{font-size:clamp(29px,3.8vw,58px);font-weight:400;letter-spacing:1px;margin:0 0 24px;line-height:1.5}h1.lettered{font-size:0;width:400px;height:65px;background-size:contain;background-repeat:no-repeat;background-position:left center;margin-left:-12px}#poem{font-size:20px;line-height:2.2;letter-spacing:1px;margin:0}.hand-char{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0deg)) scale(var(--sx,1),var(--sy,1));transform-origin:50% 72%}
.page-corner{position:absolute;border:0;background:transparent;font:inherit;color:var(--ink);cursor:pointer;padding:20px;transition:transform .3s,opacity .3s;z-index:4}.page-corner:hover{transform:translate(4px,-5px) rotate(-5deg)}.page-corner:focus-visible{outline:2px dashed #5b7566;outline-offset:0;border-radius:50%}.page-corner:disabled{opacity:.3;cursor:default}.next{right:6%;bottom:7%;display:flex;gap:14px;align-items:center;font-size:19px;transform:rotate(-6deg)}.next b{font-size:42px;font-weight:400}.previous{left:7%;bottom:7%;font-size:40px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#loading{position:absolute;inset:0;display:grid;place-content:center;background:var(--paper);font-size:23px;letter-spacing:3px;transition:opacity .4s;z-index:9}#loading.done{opacity:0;pointer-events:none}#loading span{text-align:center;animation:blink 1s infinite alternate}#error{position:absolute;left:10%;right:10%;top:45%;font:16px/2 sans-serif}#export{position:absolute;left:50%;right:auto;top:auto;bottom:calc(7% + 14px);height:54px;z-index:4;padding:12px 16px;background:transparent;border:0;border-radius:0;color:inherit;font:inherit;font-size:15px;cursor:pointer;box-shadow:none;transform:translateX(-50%) rotate(-2deg)}#export:hover{transform:translateX(-50%) translateY(-3px) rotate(-3deg)}@keyframes blink{to{opacity:.25}}
@media(max-width:700px){#words{left:7%;top:5.5%;max-width:86%}#eyebrow{font-size:12px;margin-bottom:10px}h1{font-size:32px;line-height:1.4;margin-bottom:12px}h1.lettered{width:290px;height:54px;margin-bottom:10px}#poem{font-size:16px;line-height:1.85}.next,.previous{bottom:5%}.next{right:7%;font-size:17px}.previous{left:6%;font-size:34px}}
@media(max-height:550px) and (min-width:701px){#words{top:8%}h1.lettered{width:270px;height:48px}.next{bottom:3%}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}.art-only #words,.art-only .page-corner,.art-only #export{display:none}

#interaction-hint{position:absolute;left:50%;bottom:3%;transform:translate(-50%,8px);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;background:#fffaf1e8;padding:8px 18px;border-radius:20px;font-size:15px;text-align:center;max-width:70%;z-index:5}#interaction-hint.show{opacity:1;transform:translate(-50%,0)}
#photo-dialog{width:min(460px,90vw);border:1px solid #b7bea8;border-radius:14px;background:#fffaf1;color:#344637;padding:28px;font:17px/1.7 Xiaolai,sans-serif;box-shadow:0 15px 70px #34463720}#photo-dialog::backdrop{background:#34463755;backdrop-filter:blur(3px)}#photo-dialog h2{font-size:25px;font-weight:400;margin:0 22px 10px 0}#photo-dialog p{margin:8px 0}#photo-dialog button{font:inherit;color:inherit;cursor:pointer;background:#fffdf5;border:1px solid #a9b8a2;border-radius:20px;padding:7px 18px}#photo-dialog button:disabled{opacity:.4}#photo-dialog .photo-close{position:absolute;right:14px;top:10px;padding:0 8px;border:0;background:none;font-size:28px}.photo-preview{width:100%;aspect-ratio:1.327;object-fit:cover;border:8px solid white;margin:10px 0}.photo-actions{display:flex;gap:12px;margin:18px 0}#photo-dialog .photo-note{font-size:13px;color:#73816d}.photo-status{font-size:14px}button:focus-visible,canvas[role=button]:focus-visible{outline:2px dashed #657e51;outline-offset:4px}

.photo-frame-target{position:absolute;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;border-radius:2px}.photo-frame-target:focus-visible{outline:2px dashed #657e51;outline-offset:3px}.photo-frame-target[hidden]{display:none}

.shelf-mode #words{visibility:hidden}.shelf-mode #interaction-hint{bottom:2%}

.shelf-entry{left:6%;bottom:7%;display:flex;gap:14px;align-items:center;font-size:19px;transform:rotate(5deg)}.shelf-entry b{font-size:42px;font-weight:400}.shelf-entry[hidden]{display:none}@media(max-width:700px){.shelf-entry{left:6%;bottom:5%;font-size:17px}}@media(max-height:550px) and (min-width:701px){.shelf-entry{bottom:3%}}

#shelf-intro{position:absolute;left:5.5%;top:20%;width:285px;pointer-events:none}#shelf-intro h2{font-size:36px;font-weight:400;line-height:1.6;margin:0 0 26px}#shelf-intro p{font-size:19px;line-height:2;margin:0}#shelf-intro[hidden]{display:none}
.city-slot,.city-edit,.city-original{position:absolute;z-index:4;transform:translate(-50%,-50%);border:0;background:transparent;color:var(--ink);font:18px Xiaolai,sans-serif;min-height:44px;padding:10px 14px;cursor:pointer;white-space:nowrap;text-shadow:0 1px 8px #fff5e5}.city-slot:hover,.city-original:hover{color:#fff8ea}.city-edit{font-size:14px}.city-slot[hidden],.city-edit[hidden],.city-original[hidden]{display:none}
#city-book-dialog{width:min(490px,90vw);padding:32px;border:1px solid #a9b8a2;border-radius:16px;background:#fffaf1;color:var(--ink);font:18px/1.7 Xiaolai,sans-serif;box-shadow:0 18px 60px #34463720}#city-book-dialog::backdrop{background:#34463755;backdrop-filter:blur(4px)}#city-book-dialog h2{font-size:26px;font-weight:400;margin:0 16px 20px 0}#city-book-dialog label{display:block;margin:18px 0}#city-book-dialog input{display:block;width:100%;margin-top:8px;border:0;border-bottom:1px solid #a9b8a2;padding:10px 2px;font:inherit;color:inherit;background:transparent}#city-book-dialog p{font-size:16px}#city-book-dialog .city-note{font-size:13px;color:#73816d}#city-book-dialog button{font:inherit;color:inherit;cursor:pointer;border:1px solid #a9b8a2;border-radius:22px;padding:8px 18px;background:transparent}.city-close{position:absolute;right:12px;top:8px;border:0!important;font-size:27px!important;padding:0 8px!important}.city-status{color:#9d553e;min-height:1em}.page-builder{border:0;padding:0;margin:20px 0}.page-builder legend{font-size:16px;margin-bottom:10px}.page-options{display:flex;flex-wrap:wrap;gap:8px}.page-options button{font-size:15px!important;padding:6px 12px!important}.page-count{margin:10px 0 4px!important;font-size:15px!important}.page-list{min-height:2.6em;font-size:14px!important;color:#73816d;word-break:break-all}.page-undo{font-size:14px!important;padding:5px 14px!important}.page-builder button:disabled{opacity:.38;cursor:default}
@media(min-width:701px) and (max-width:1100px){#shelf-intro{width:210px;top:14%}#shelf-intro h2{font-size:27px}#shelf-intro p{font-size:16px}}
@media(max-width:700px){#shelf-intro{left:7%;top:5%;width:86%}#shelf-intro h2{font-size:27px;line-height:1.4;margin-bottom:10px}#shelf-intro p{font-size:15px;line-height:1.7}#shelf-intro p br:nth-of-type(2){display:none}.city-slot,.city-original{font-size:14px}.city-edit{font-size:12px}}
.art-only #shelf-intro,.art-only .city-slot,.art-only .city-edit,.art-only .city-original{display:none}

.city-book-hit{position:absolute;border:0;background:transparent;z-index:3;cursor:pointer;padding:0}.city-book-hit[hidden]{display:none}.art-only .city-book-hit{display:none}
.art-only #interaction-hint,.art-only .photo-frame-target{display:none}

/* Fixed-size art exports leave the live responsive experience unchanged. */
.capture-only #experience,.capture-only #world{width:1440px;height:1024px}.capture-only #export{display:block;position:fixed;right:12px;bottom:12px;z-index:20}

#export-preview{position:fixed;width:180px;right:12px;bottom:55px;z-index:20;border:1px solid #a9c0b6}
.capture-only.full-export #experience,.capture-only.full-export #world{width:100%;height:100svh}
.capture-only.full-export #export{position:absolute;right:auto;bottom:5%;}

@media(max-width:700px){.next,.shelf-entry{padding:12px 6px;gap:7px;font-size:16px}.next b,.shelf-entry b{font-size:30px}.previous{font-size:30px;padding:12px 6px}#export{bottom:5%;padding:12px 6px;font-size:13px}}
@media(max-height:550px) and (min-width:701px){#export{bottom:calc(3% + 14px)}}

#words h1{width:max-content;max-width:86vw;margin-left:0;background:none;font-size:clamp(29px,3.8vw,58px);line-height:1.5;letter-spacing:1px}#city-book-dialog .city-delete{display:block;margin-top:18px;border-color:#b78978;color:#955d4e;font-size:15px}#city-book-dialog .city-delete[hidden]{display:none}
@media(max-width:700px){#words h1{font-size:32px;line-height:1.4}}