:root{--ink:#234e68;--muted:#7596a6;--blue:#397eac;--paper:#f7fcfc;--border:#d4e6ec;--serif:'Noto Serif SC','Songti SC',SimSun,serif}*{box-sizing:border-box}body{margin:0;overflow:hidden;color:var(--ink);font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:radial-gradient(ellipse at 65% 40%,#f6fcfa 0,#e4f2f5 55%,#cfE5ef 100%);font-size:13px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}button:focus-visible,a:focus-visible{outline:3px solid #d7a45b;outline-offset:4px}button{transition:background .2s,transform .2s,box-shadow .2s}button:hover{transform:translateY(-2px)}button:active{transform:translateY(0)}a{color:inherit;text-decoration:none}#world{position:fixed;inset:0}#canvas-host,canvas{width:100%;height:100%;display:block;touch-action:none}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.frame{pointer-events:none;position:fixed;inset:12px;border:1px solid #ffffffb3;border-radius:22px;z-index:12}header{position:absolute;left:40px;right:40px;top:34px;display:flex;justify-content:space-between;align-items:center;z-index:5;pointer-events:none}header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px}.brand img{width:52px;height:43px}.brand span{font-family:var(--serif);font-size:25px;letter-spacing:3px;font-weight:bold}.brand small{display:block;font:10px 'Microsoft YaHei',sans-serif;letter-spacing:5px;margin-top:5px;color:#7796a5}.top-actions{display:flex;align-items:center;gap:25px}.season{font-size:11px;letter-spacing:1px;color:#638798}.season i,.live-dot{display:inline-block;width:5px;height:5px;background:#6da5a8;border-radius:50%;margin-right:8px}.pill{background:#ffffffc9;box-shadow:0 4px 15px #517e9310;border:1px solid #fff;border-radius:30px;padding:12px 20px;display:flex;gap:12px;align-items:center;font-size:12px}.pill>span{font-size:17px}.pill b{font-size:10px;letter-spacing:2px;font-weight:normal;border-left:1px solid var(--border);padding-left:12px}.intro{position:absolute;z-index:3;left:5.3%;top:26%;width:300px;pointer-events:none}.intro button{pointer-events:auto}.eyebrow{font-size:9px;letter-spacing:2.4px;color:#6b8f9e;font-weight:600;display:flex;align-items:center;gap:10px}.eyebrow>span{height:1px;width:24px;background:#8cb0bc}h1{font-family:var(--serif);font-size:40px;line-height:1.65;letter-spacing:2px;margin:21px 0 20px;font-weight:500}h1 span{color:#4ea6bd}.intro-copy{font-size:12px;line-height:2.2;color:#73909e;letter-spacing:1px}.primary{display:flex;justify-content:space-between;align-items:center;gap:25px;background:var(--blue);color:#fff;border-radius:8px;padding:15px 19px;box-shadow:0 5px 12px #3d749620;font-size:12px;letter-spacing:1px}.primary:hover{background:#286b96;box-shadow:0 8px 18px #3d749638}.primary span{font-size:18px;line-height:1}.intro .primary{width:211px;margin-top:28px}.intro-note{color:#7797a6;font-size:9px;letter-spacing:1px;margin-top:16px;display:flex;align-items:center;gap:8px}.tiny-whale{font-size:18px;color:#73b2c4}.coordinates{display:flex;flex-direction:column;gap:7px;margin-top:45px;font-size:8px;letter-spacing:2px;color:#93acb6}.world-caption{position:absolute;right:5.5%;top:20%;display:flex;gap:10px;color:#7397a5;font-size:10px;letter-spacing:2px;pointer-events:none}.caption-line{height:28px;width:1px;background:#9ebdca;transform:rotate(35deg);margin-right:4px}.world-caption small{display:block;font-size:7px;letter-spacing:1.5px;margin-top:6px}.collection{position:absolute;bottom:43px;left:58%;transform:translateX(-50%);z-index:4;width:360px;border:1px solid #ffffffd9;background:#f9ffffd9;backdrop-filter:blur(14px);border-radius:15px;padding:14px 18px 10px;box-shadow:0 8px 35px #3b6d8c12}.collection-title{display:flex;justify-content:space-between;align-items:center;font-size:10px}.collection-title i{font-style:normal;font-size:17px;color:#6ba8b8;margin-right:5px}.collection-title b{font-size:9px;margin-left:7px;color:#7e9cab;font-weight:400}.collection-title button{font-size:9px;color:#8ca5b0}.shell-slots{display:flex;gap:8px;margin-top:9px}.shell-slot{width:47px;height:44px;background:#e9f1f4;border-radius:9px;display:grid;place-items:center;position:relative}.shell-slot svg{width:29px;height:29px;opacity:.28;filter:grayscale(1)}.shell-slot.found{background:#e8f4f4;box-shadow:inset 0 0 0 1px #bfdbdf}.shell-slot.found svg{filter:none;opacity:1}.shell-slot:hover{background:#d8eaf0}.collection p{text-align:center;font-size:8px;letter-spacing:.8px;color:#8aa5b0;margin:9px 0 0}.bottom-left{position:absolute;left:40px;bottom:35px;color:#7a98a7;font-size:10px;letter-spacing:.6px;line-height:1.5;pointer-events:none}.bottom-left small{display:block;font-size:7px;letter-spacing:2px;margin-top:10px;color:#8facb8}.controls{position:absolute;right:36px;bottom:35px;display:flex;align-items:center;gap:7px;z-index:5}.controls>span{width:7px}.controls button{width:35px;height:35px;border-radius:50%;background:#fcffffe0;border:1px solid #fff;box-shadow:0 3px 8px #37688a0c;font-size:17px}.controls button:last-child{font-family:Georgia,serif;font-size:16px}.controls button[aria-pressed=true]{background:#397eac;color:white}.drag-hint{position:absolute;bottom:18px;left:58%;transform:translateX(-50%);color:#8ba8b6;font-size:8px;letter-spacing:1px;white-space:nowrap;pointer-events:none}.drag-hint i{padding:0 5px;font-style:normal}.drag-hint>span{font-size:13px;margin-right:5px}.landmark{position:absolute;pointer-events:auto;white-space:nowrap;left:0;top:0;border:1px solid #ffffffd9;background:#fbfffee8;border-radius:20px;padding:8px 13px;display:flex;align-items:center;gap:7px;box-shadow:0 4px 12px #255d7c18;transform:translate(-50%,-50%);font-size:10px;letter-spacing:.3px}.landmark:hover{transform:translate(-50%,-60%);background:white;box-shadow:0 6px 18px #255d7c33}.landmark .marker{width:6px;height:6px;border:1.5px solid #65a4bd;transform:rotate(45deg)}.landmark.visited .marker{background:#65a4bd}.landmark:after{content:'';position:absolute;width:1px;height:13px;background:#fff9;left:50%;top:100%}.landmark small{font-size:7px;color:#a1b6bf;letter-spacing:1px}.toast{position:absolute;top:110px;left:50%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;z-index:40;background:#f9ffffeb;backdrop-filter:blur(12px);padding:13px 23px;border:1px solid white;border-radius:30px;font-size:12px;box-shadow:0 8px 30px #37688a20;transition:.3s;max-width:85vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #fff;color:var(--ink);background:#f8fcfb;border-radius:20px;padding:0;box-shadow:0 22px 90px #123d5a30;max-height:89dvh;overflow:auto}dialog::backdrop{background:#17455b38;backdrop-filter:blur(7px)}dialog .close{position:absolute;top:13px;right:14px;width:29px;height:29px;border-radius:50%;background:#ffffffd9;font-size:21px;z-index:3;color:#648694}.island-dialog{width:380px}.postcard{height:180px;margin:10px;border-radius:13px;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 20%,#effaf3,#b3dfe8);border-bottom:1px solid #d5e9eb}.postcard-art{position:absolute;inset:10px;display:grid;place-items:center}.postcard-art svg{width:150px;height:145px;filter:drop-shadow(0 10px 8px #37688a26)}.postcard-stamp{position:absolute;right:45px;top:16px;border:1px solid #6f9fab6b;border-radius:50%;width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;transform:rotate(16deg);color:#76a1ac;line-height:1.7;z-index:2}.postcard-stamp b{font-size:7px;font-weight:400}.postcard>span{position:absolute;bottom:12px;left:16px;font-size:8px;letter-spacing:2px;color:#648d9b}.dialog-body{padding:15px 26px 20px}h2{font-family:var(--serif);font-size:25px;letter-spacing:1px;font-weight:500;margin:15px 0}dialog p{font-size:11px;color:#7893a0;line-height:1.9}dialog .eyebrow{font-size:8px;letter-spacing:1.4px}.island-items{margin-top:18px}.island-item{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid #e0ecee}.island-item>span{font-size:9px;color:#8cb0bf;line-height:1.8}.island-item b{display:block;font-size:11px;font-weight:500}.island-item small{display:block;font-size:9px;color:#8ba2ad;line-height:1.8;margin-top:3px}.demo-note{font-size:8px;color:#a4b5bb;margin:12px 0 16px}dialog .primary{width:100%}.text-btn{font-size:10px;color:#7196a5}.dialog-body>.text-btn{display:block;margin:16px auto 0}.journal-dialog{padding:35px;width:440px}.journal-dialog>p{margin-bottom:22px}.journal-row{display:flex;gap:14px;align-items:center;padding:13px 0;border-top:1px solid #dfebee;width:100%;text-align:left}.journal-row svg{width:36px;height:36px;opacity:.3;filter:grayscale(1)}.journal-row.found svg{opacity:1;filter:none}.journal-row div{flex:1}.journal-row b{display:block;font-size:12px;font-weight:500}.journal-row small{display:block;font-size:9px;color:#8ba5b0;margin-top:5px}.journal-row>span{font-size:9px;color:#7299a8}.journal-foot{display:flex;justify-content:space-between;border-top:1px solid #dfebee;padding-top:18px;font-size:10px;color:#89a0a9}.help-dialog{width:420px;padding:36px}.help-dialog dl{margin:26px 0}.help-dialog dt{font-size:12px;margin-top:17px}.help-dialog dd{font-size:10px;color:#8ba2ad;margin:5px 0;line-height:1.7}#loading{position:fixed;inset:0;background:#e8f5f7;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s}#loading img{width:80px;animation:bob 2s ease-in-out infinite}#loading h2{font-size:18px;margin-top:25px}#loading p{font-size:11px;color:#8aa7b3}.loading-line{width:120px;height:2px;margin-top:20px;background:#c9e4eb;overflow:hidden}.loading-line:after{content:'';display:block;width:50%;height:100%;background:#5e9db8;animation:load 1.2s infinite}#loading.done{opacity:0;pointer-events:none}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(200%)}}@keyframes bob{50%{transform:translateY(-8px)}}@media(min-width:1600px){.intro{left:7%;top:30%}h1{font-size:48px}.collection{bottom:55px}}@media(max-width:1100px){.intro{left:4%;width:230px;top:27%}h1{font-size:31px}.intro .eyebrow{font-size:7px;letter-spacing:1.5px}.intro-copy{font-size:10px}.coordinates{margin-top:25px}.season{display:none}.collection{left:57%;width:318px}.shell-slot{width:40px}.controls{right:25px}.bottom-left{left:25px;font-size:8px}}@media(max-width:760px){header{left:25px;right:25px;top:27px}.brand img{width:40px}.brand span{font-size:20px}.brand small{font-size:8px;letter-spacing:3px}.pill{padding:10px 12px;font-size:10px;gap:7px}.pill>span{display:none}.pill b{font-size:8px;padding-left:8px}.intro{left:29px;top:123px;width:calc(100% - 58px)}.intro .eyebrow{font-size:7px}.intro h1{font-size:27px;line-height:1.4;margin:12px 0 8px}.intro h1 br{display:none}.intro-copy{font-size:10px;margin-top:6px}.intro-copy br{display:none}.intro .primary{position:absolute;right:0;top:100px;width:145px;padding:11px 13px;font-size:10px}.intro-note,.coordinates,.world-caption{display:none}.collection{left:50%;bottom:80px;width:310px;padding:12px 15px 8px}.collection-title{font-size:10px}.shell-slots{gap:7px}.shell-slot{width:41px;height:36px}.shell-slot svg{width:25px}.collection p{margin-top:7px}.controls{bottom:28px;right:25px;gap:6px}.controls button{width:32px;height:32px;font-size:16px}.bottom-left{left:26px;bottom:34px;font-size:8px;max-width:100px}.bottom-left small{display:none}.drag-hint{bottom:62px;left:50%;font-size:7px;letter-spacing:.5px}.landmark{font-size:9px;padding:7px 10px;gap:5px}.landmark small{display:none}.frame{inset:9px;border-radius:18px}.toast{top:90px;font-size:10px}.journal-dialog,.help-dialog{width:calc(100% - 40px);padding:28px}.island-dialog{width:calc(100% - 50px);max-width:380px}.postcard{height:150px}.dialog-body{padding:10px 23px 18px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.shell-slots{justify-content:space-between}.shell-slot{width:65px}.shell-slot svg{width:31px;height:31px}@media(max-width:1100px){.shell-slot{width:58px}}@media(max-width:760px){.shell-slot{width:56px}}

html,body{width:100%;height:100%;min-height:100dvh}.intro .primary{white-space:nowrap}@media(max-width:760px){.intro h1{font-size:25px;letter-spacing:0}.intro{top:115px}.intro .primary{top:91px;padding:11px 12px;width:149px}.intro-copy{font-size:9px;letter-spacing:0}.collection{bottom:77px}}

.movement-pad{position:absolute;left:40px;bottom:100px;z-index:5;user-select:none;-webkit-user-select:none}.movement-pad>span{display:block;font-size:10px;color:#648b9d;margin-bottom:8px;text-align:center}.movement-pad small{display:block;font-size:8px;color:#88a5b1;margin-top:4px}.movement-keys{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,34px);gap:5px}.movement-keys button{touch-action:none;width:34px;height:34px;border-radius:10px;background:#faffffeb;border:1px solid #fff;box-shadow:0 3px 12px #37688a12;font-size:18px}.movement-keys button:active{background:#397eac;color:white}.movement-keys #move-forward{grid-column:2}.movement-keys #move-left{grid-column:1;grid-row:2}.movement-keys #move-back{grid-column:2;grid-row:2}.movement-keys #move-right{grid-column:3;grid-row:2}@media(max-width:760px){.movement-pad{left:25px;bottom:210px}.movement-pad>span{font-size:9px}.movement-pad small{display:none}.movement-keys{grid-template-columns:repeat(3,32px);grid-template-rows:repeat(2,32px);gap:4px}.movement-keys button{width:32px;height:32px}.drag-hint{font-size:7px;letter-spacing:0}}