@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&display=swap');
:root{--ink:#526b5a;--muted:#829486;--cream:#f6f3e9;--glass:rgba(255,254,247,.76);--line:rgba(124,151,125,.22)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:'Noto Serif SC','STKaiti','KaiTi',serif;color:var(--ink);background:var(--cream)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #709c7c;outline-offset:3px}
.app{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 51% 43%,#fffef7 0,#f8f5ed 55%,#efe9d9 100%)}
.paper-grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.32;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.scene{position:absolute;inset:0;touch-action:none;z-index:2}.scene canvas{display:block;width:100%;height:100%}.tone{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;background:transparent;transition:background 1.1s ease}.stars{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.2s;background-image:radial-gradient(2px 2px at 14% 18%,#fff 98%,transparent),radial-gradient(2px 2px at 64% 12%,#fff 98%,transparent),radial-gradient(1px 1px at 84% 28%,#fff 98%,transparent),radial-gradient(2px 2px at 42% 9%,#fff 98%,transparent),radial-gradient(1px 1px at 22% 60%,#fff 98%,transparent);background-size:260px 220px;filter:drop-shadow(0 0 4px #fff)}.markers{position:absolute;inset:0;z-index:8;pointer-events:none}
.masthead{position:absolute;z-index:15;top:clamp(24px,4.6vh,56px);left:clamp(22px,4vw,72px);pointer-events:none;text-shadow:0 1px 15px #fffefa}.eyebrow{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:10px;letter-spacing:.22em;color:#9aa89b}.eyebrow-line{height:1px;width:20px;background:#a5baa8}.masthead h1{font-weight:500;letter-spacing:.11em;font-size:clamp(27px,3.2vw,47px);margin:12px 0 4px}.title-dot{color:#c78d6f}.masthead p{margin:0;font-size:13px;letter-spacing:.15em;color:#869b8b}.side-note{position:absolute;z-index:7;right:22px;top:50%;writing-mode:vertical-rl;letter-spacing:.35em;color:#9ba99d;font-size:10px;pointer-events:none}.scene-hint{position:absolute;z-index:10;left:50%;bottom:153px;transform:translateX(-50%);padding:8px 16px;border-radius:30px;background:rgba(255,255,248,.62);border:1px solid rgba(255,255,255,.8);color:#7b947f;font-size:12px;white-space:nowrap;box-shadow:0 5px 24px #6179650f;transition:opacity .8s}.scene-hint span{padding:0 6px;color:#c6b89e}
.top-actions{position:absolute;z-index:15;top:clamp(24px,4.6vh,56px);right:clamp(24px,4vw,72px);display:flex;gap:11px}.circle-button,.small-button{display:grid;place-items:center;border:1px solid rgba(255,255,255,.82);background:var(--glass);color:var(--ink);box-shadow:0 4px 20px #66746618;backdrop-filter:blur(12px);transition:transform .25s,background .25s}.circle-button:hover,.small-button:hover{transform:translateY(-2px);background:#fffef8}.circle-button{width:47px;height:47px;border-radius:50%;font-family:Georgia,serif;font-size:25px;line-height:1}.circle-button:first-child{font-size:22px}.corner-actions{position:absolute;z-index:15;left:clamp(20px,4vw,72px);bottom:29px;display:flex;gap:10px}.small-button{width:43px;height:43px;border-radius:14px;font-family:Arial,sans-serif;font-size:18px}.home-button{font-size:25px;padding-bottom:4px}
.control-panel{position:absolute;z-index:15;left:50%;bottom:25px;transform:translateX(-50%);width:min(520px,calc(100vw - 148px));padding:14px 27px 16px;background:var(--glass);border:1px solid rgba(255,255,255,.88);border-radius:21px;box-shadow:0 9px 34px #63746020, inset 0 1px #fff;backdrop-filter:blur(20px)}.control-heading{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:12px;letter-spacing:.12em;color:#819782}.sun-icon{font-family:Georgia,serif;font-size:19px;line-height:1}.control-row{display:grid;grid-template-columns:44px 1fr 56px;gap:13px;align-items:center;height:31px}.control-row label{font-size:12px;letter-spacing:.13em}.control-row output{text-align:right;font-size:11px;white-space:nowrap;color:#819785}.control-row input{width:100%;height:20px;margin:0;accent-color:#80a98a;cursor:pointer}.control-row input::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:#c9d8c8}.control-row input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#7caa89;margin-top:-5px;box-shadow:0 0 0 4px #dfeadf}.control-row input{appearance:none}
.marker{position:absolute;left:0;top:0;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:auto;border:1px solid #fbfff6;border-radius:50%;background:rgba(253,254,244,.74);box-shadow:0 2px 9px #40564730,0 0 0 4px #c7e1c650;display:grid;place-items:center;color:#688c70;transition:scale .25s,box-shadow .25s,opacity .2s}.marker::after{content:'';width:5px;height:5px;background:#75a17f;border-radius:50%}.marker:hover,.marker:focus-visible{scale:1.3;box-shadow:0 5px 17px #40564751,0 0 0 8px #c7e1c670}.marker-label{position:absolute;left:50%;top:-32px;transform:translateX(-50%);background:#fffef8ed;padding:5px 10px;border-radius:9px;white-space:nowrap;color:#557b5c;font-size:11px;box-shadow:0 2px 10px #0001;opacity:0;transition:opacity .2s}.marker:hover .marker-label,.marker:focus-visible .marker-label{opacity:1}
.card-overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(51,69,60,.36);backdrop-filter:blur(7px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s,visibility .45s}.card-overlay.show{opacity:1;visibility:visible;pointer-events:auto}.info-card{position:relative;display:grid;grid-template-columns:47% 53%;width:min(680px,94vw);min-height:300px;background:#fffdf5;border-radius:23px;box-shadow:0 24px 70px #324d3c52;overflow:hidden;border:1px solid #fff;transform:translateY(23px) scale(.96);transition:transform .5s cubic-bezier(.2,1,.3,1)}.card-overlay.show .info-card{transform:none}.card-image-wrap{padding:16px;background:#e9f1e3;display:flex;align-items:center;justify-content:center}.card-image-wrap img{width:100%;height:100%;max-height:290px;object-fit:cover;border-radius:13px;filter:saturate(.85)}.card-content{padding:42px 34px 26px;display:flex;flex-direction:column}.card-kicker{font-size:11px;letter-spacing:.16em;color:#a1af9f}.card-kicker span{margin-left:13px;font-family:Georgia,serif;letter-spacing:.05em;color:#b6bda9}.card-content h2{font-size:30px;letter-spacing:.09em;font-weight:500;margin:20px 0 13px;color:#52735a}.card-content p{font-size:14px;line-height:2;letter-spacing:.04em;color:#6e826e;margin:0;flex:1}.card-close{position:absolute;right:15px;top:12px;z-index:2;border:0;background:#fffefaef;color:#77927b;width:31px;height:31px;border-radius:50%;font-size:23px;line-height:1}.card-back{align-self:flex-start;margin-top:23px;padding:9px 0;border:0;border-bottom:1px solid #a8bea8;background:none;color:#5d8567;font-size:13px;letter-spacing:.1em}.card-back span{margin-left:12px}
.start-overlay{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:#f7f4e9;transition:opacity 1.1s ease,visibility 1.1s}.start-overlay::before{content:'';position:absolute;inset:6%;border:1px solid rgba(116,155,120,.16);pointer-events:none}.start-overlay::after{content:'';position:absolute;inset:0;background:url('./assets/town.webp') center/cover;opacity:.085;filter:blur(18px);pointer-events:none}.start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.start-inner{position:relative;z-index:2;text-align:center;animation:rise 1s both}.start-kicker{font-size:12px;color:#97ab97;letter-spacing:.35em}.start-inner h2{margin:31px 0 21px;font-size:clamp(39px,6vw,73px);font-weight:500;line-height:1.52;letter-spacing:.13em;color:#6a8b72}.start-inner h2 em{font-style:normal;color:#4e7258}.start-inner p{font-size:14px;letter-spacing:.12em;color:#8ca28f;margin:0 0 38px}.start-inner button{border:1px solid #d4e1cf;background:#dbe8d4;color:#51745a;padding:14px 32px;border-radius:100px;font-size:15px;letter-spacing:.13em;box-shadow:0 9px 23px #76957724;transition:transform .25s,box-shadow .25s}.start-inner button:hover{transform:translateY(-3px);box-shadow:0 13px 26px #76957739}.start-inner button span{margin-left:14px}.start-foot{display:block;margin-top:56px;font:10px Georgia,serif;letter-spacing:.19em;color:#b1bcae}.loading{position:absolute;z-index:70;right:25px;bottom:22px;color:#8aa18d;font-size:12px;letter-spacing:.15em;transition:opacity .4s}@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:720px){.masthead{top:19px;left:20px}.eyebrow{font-size:8px}.masthead h1{margin:6px 0 2px;font-size:27px}.masthead p{font-size:10px}.top-actions{top:20px;right:17px;gap:7px}.circle-button{width:39px;height:39px;font-size:22px}.side-note{display:none}.scene-hint{bottom:196px;font-size:10px;padding:7px 11px}.control-panel{bottom:14px;width:calc(100vw - 29px);padding:12px 17px 13px}.control-heading{margin-bottom:3px}.control-row{height:28px;grid-template-columns:36px 1fr 45px;gap:8px}.corner-actions{bottom:154px;left:16px}.small-button{width:39px;height:39px}.info-card{grid-template-columns:1fr;width:min(400px,94vw)}.card-image-wrap{height:185px;padding:11px}.card-content{padding:19px 25px 21px}.card-content h2{font-size:25px;margin:9px 0}.card-content p{font-size:12px}.card-back{margin-top:13px}.start-inner h2{font-size:43px}}
@media(max-height:660px) and (min-width:721px){.control-panel{bottom:12px;padding:9px 23px}.scene-hint{bottom:130px}.masthead{top:19px}.top-actions{top:19px}}