:root { color-scheme: dark; font-family: "Cascadia Mono", Consolas, "Microsoft YaHei", monospace; background: #0d1e21; color: #f7f0d4; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: #0d1e21; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23060d0e' d='M0 0h4v2h2v2h2v2h2v2H8v2H6v2H4v4H2V8H0z'/%3E%3Cpath fill='%23e6efe7' d='M2 2h2v2h2v2h2v2H6v2H4v4H3V7H1V1h1z'/%3E%3Cpath fill='%2367d4bd' d='M2 2h2v2h2v2H4V4H2z'/%3E%3C/svg%3E") 1 1, auto; }
a { color: inherit; text-decoration: none; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23060d0e' d='M0 0h4v2h2v2h2v2h2v2H8v2H6v2H4v4H2V8H0z'/%3E%3Cpath fill='%23ffd272' d='M2 2h2v2h2v2H4V4H2z'/%3E%3Cpath fill='%23fff2c9' d='M2 2h2v2h2v2H6v2H4v4H3V7H1V1h1z'/%3E%3C/svg%3E") 1 1, pointer; }
.shell { width: min(1170px, calc(100% - 48px)); margin-inline: auto; }
.page-noise { position: fixed; z-index: 10; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 4px 4px; mix-blend-mode: overlay; }
.topbar { position: absolute; top: 0; left: 50%; z-index: 4; display: flex; height: 80px; align-items: center; justify-content: space-between; transform: translateX(-50%); color: #e8f1df; font-size: 12px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #fff0ba; font-size: 19px; font-weight: 900; letter-spacing: .08em; text-shadow: 2px 2px #102723; }
.wordmark-orb { display: grid; width: 29px; height: 29px; place-items: center; border: 3px solid #f8d178; border-radius: 0; background: #204238; box-shadow: 3px 3px #07110f; color: #ffedbb; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; margin-right: 30px; color: #cfdfd1; }
.nav-links a { padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .15s ease, color .15s ease; }.nav-links a:hover { border-color: #ffd174; color: #fff2c6; }
.nav-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 5px; border: 2px solid #426b59; background: rgba(8,25,22,.78); box-shadow: 3px 3px #07110f; color: #c9e8c5; font-size: 10px; }.nav-status-cat { width: 1.2em; height: 1.2em; flex: 0 0 1.2em; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(1px 1px #07110f); transition: transform .16s steps(2); }.nav-status:hover .nav-status-cat { transform: translateY(-1px) rotate(-2deg); }
.hero { position: relative; isolation: isolate; min-height: 910px; padding-top: 112px; overflow: hidden; background: #0d2024; }
.hero-art { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: pixelated; }
.hero-vignette { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(5,16,19,.84), rgba(7,20,25,.12) 28%, rgba(4,17,21,.2) 65%, rgba(3,13,15,.92)), linear-gradient(90deg, rgba(5,16,19,.22), transparent 30%, transparent 68%, rgba(5,16,19,.22)); }
.hero::after { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(9,20,23,.2) 50%, rgba(4,12,13,.36) 50%), linear-gradient(90deg, rgba(8,18,20,.08) 50%, transparent 50%); background-size: 100% 4px, 4px 100%; content: ""; mix-blend-mode: multiply; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.eyebrow { margin: 0; color: #ffd57e; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-shadow: 2px 2px #0c1d1f; }.eyebrow span { color: #74d9c1; }
.hero h1 { margin: 12px 0 0; color: #fff3ca; font-family: "Microsoft YaHei", sans-serif; font-size: clamp(48px, 8vw, 84px); font-weight: 900; letter-spacing: .15em; line-height: 1; text-shadow: 5px 5px #142d2c, 9px 9px rgba(4,10,11,.58); }
.hero-sentence { margin: 19px 0 0; color: #f9e8ba; font-size: clamp(15px, 2vw, 20px); font-weight: 700; letter-spacing: .08em; text-shadow: 3px 3px #16302f; }.hero-note { max-width: 550px; margin: 13px 0 0; color: #d7e7d6; font-size: 12px; line-height: 1.9; text-shadow: 2px 2px #152c2a; }
.portal-area { position: relative; z-index: 2; margin-top: 34px; }.portal-intro { display: flex; width: min(794px, 100%); align-items: center; justify-content: space-between; margin: 0 auto 11px; color: #d5e5d4; font-size: 11px; letter-spacing: .08em; text-shadow: 2px 2px #102220; }.portal-intro p { margin: 0; }.tide-mark { color: #ffdb83; }
.portal-grid { display: grid; width: min(794px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: auto; }
.portal { position: relative; display: flex; min-height: 330px; flex-direction: column; padding: 26px 27px 22px; overflow: hidden; border: 4px solid #d7e0c9; border-radius: 0; background: rgba(10,34,34,.88); box-shadow: 7px 7px #061010, inset 0 0 0 3px rgba(77,147,123,.37); transition: transform .16s steps(2), box-shadow .16s steps(2), border-color .16s steps(2); }.portal:hover { border-color: #ffdb82; box-shadow: 11px 11px #061010, inset 0 0 0 3px rgba(255,214,115,.48); transform: translate(-4px,-4px); }.portal-tianyi { background: rgba(17,42,56,.9); box-shadow: 7px 7px #061010, inset 0 0 0 3px rgba(98,172,194,.36); }
.portal::before { position: absolute; top: 0; right: 0; width: 52px; height: 52px; background: linear-gradient(135deg, transparent 0 45%, rgba(255,211,122,.6) 46% 53%, transparent 54%); content: ""; }.portal-glow { position: absolute; top: -56px; right: -56px; width: 150px; height: 150px; background: repeating-radial-gradient(circle at center, rgba(112,211,180,.25) 0 7px, transparent 8px 17px); opacity: .75; }.portal-tianyi .portal-glow { background: repeating-radial-gradient(circle at center, rgba(110,205,243,.23) 0 7px, transparent 8px 17px); }
.portal-type { position: relative; color: #9ebaaa; font-size: 10px; font-weight: 700; letter-spacing: .08em; }.portal-icon { display: grid; width: 45px; height: 45px; place-items: center; margin-top: 21px; border: 3px solid #f4d17c; border-radius: 0; background: #214a41; box-shadow: 3px 3px #071111; color: #fff0bb; font-size: 24px; }.icon-wave { border-color: #9be0e8; background: #1d5265; color: #e0f7f2; }
.portal strong { margin-top: 17px; color: #fff3c9; font-family: "Microsoft YaHei", sans-serif; font-size: 28px; font-weight: 900; letter-spacing: .035em; line-height: 1.25; text-shadow: 3px 3px #102420; }.portal-description { margin-top: 13px; color: #c0d7cd; font-size: 12px; line-height: 1.8; }.portal-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 2px dashed rgba(213,232,202,.35); color: #ffe19a; font-size: 13px; font-weight: 800; }.portal-action b { font-size: 18px; }.portal-meta { margin-top: 11px; color: #8eaaa1; font-size: 10px; }
.fish-whisper { position: absolute; right: max(5vw, 32px); bottom: 55px; z-index: 1; margin: 0; color: #f6d786; font-size: 15px; font-weight: 900; letter-spacing: .05em; text-shadow: 3px 3px #102522; transform: rotate(-3deg); }.hero-ripples i { position: absolute; bottom: 31px; left: 50%; z-index: -1; width: 152px; height: 26px; margin-left: -76px; border: 3px solid rgba(125,204,210,.45); border-radius: 0; animation: pixelRipple 5s infinite steps(4); }.hero-ripples i:nth-child(2) { width: 224px; height: 40px; margin-left: -112px; animation-delay: 1.7s; }.hero-ripples i:nth-child(3) { width: 300px; height: 55px; margin-left: -150px; animation-delay: 3.4s; } @keyframes pixelRipple { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity:.65; transform:scale(1.05); } }
.pocket-section { position: relative; padding: 106px 0 97px; overflow: hidden; background: #dce5d5; color: #132a29; }.pocket-section::before { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(62,100,81,.12) 1px, transparent 1px), linear-gradient(rgba(62,100,81,.12) 1px, transparent 1px); background-size: 18px 18px; content: ""; }.pocket-section > * { position: relative; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 28px; }.eyebrow.dark { color: #396c61; text-shadow: none; }.section-heading h2 { margin: 10px 0 0; color: #15382f; font-family: "Microsoft YaHei", sans-serif; font-size: clamp(27px,4vw,40px); font-weight: 900; letter-spacing: .04em; text-shadow: 2px 2px #a6c3ae; }.section-heading > p { max-width: 380px; margin: 0 0 4px; color: #446b60; font-size: 13px; line-height: 1.8; }
.pocket-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; }.pocket-card { position: relative; display: flex; min-height: 187px; flex-direction: column; padding: 17px; overflow: hidden; border: 3px solid #24483d; border-radius: 0; background: #eff4e9; box-shadow: 5px 5px #24483d; transition: transform .15s steps(2), box-shadow .15s steps(2); }.pocket-card:hover { box-shadow: 8px 8px #24483d; transform: translate(-3px,-3px); }.pocket-card > span { display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid #172e2a; border-radius: 0; color: #fff; font-size: 16px; font-weight: 900; }.pocket-card b { margin-top: auto; color: #15372e; font-size: 14px; }.pocket-card small { margin-top:5px; color:#5b7d6e; font-size:10px; }.pocket-card i { position:absolute; right:16px; bottom:14px; color:#24483d; font-size:20px; font-style:normal; }.gun{background:#e1f0e9}.gun>span{background:#257b67}.password{background:#f4ead1}.password>span{background:#a57639}.scholar{background:#dcecf0}.scholar>span{background:#3d7787}.word{background:#f1ded7}.word>span{background:#a55b49}.camera{background:#dce2f1}.camera>span{background:#5d71aa}.install-note { margin: 22px 0 0; color:#4b7065; font-size:11px; line-height:1.85; }
.web-section { padding: 82px 0; background: #17352f; color: #f2f0d8; }.web-inner { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:68px; }.web-illustration { position:relative; min-height:238px; overflow:hidden; border:4px solid #a8c08d; border-radius:0; background: linear-gradient(135deg,#32624a 0 16%,#234a3b 16% 32%,#1b3e38 32% 48%,#153731 48%); box-shadow:7px 7px #081815; }.web-illustration::before { position:absolute; inset:auto 0 0; height:75px; background: repeating-linear-gradient(90deg,#274e3c 0 22px,#1e4235 22px 44px); content:""; }.bowl { position:absolute; top:49%; left:50%; width:142px; height:69px; border:7px solid #f5d284; border-top:0; border-radius:0 0 58px 58px; background:linear-gradient(#da8250 0 24%,#4a3827 25% 44%,#e2a24e 45%); box-shadow:7px 7px #0e251f; transform:translate(-50%,-14%); }.bowl::before { position:absolute; top:-21px; left:7px; width:115px; height:28px; border-radius:50%; background:#f3bd64; box-shadow:inset 0 6px #6a4029; content:""; }.steam { position:absolute; width:22px; height:58px; border-top:3px solid #f8e4a7; border-radius:50%; }.steam.one{top:20%;left:37%;transform:rotate(20deg)}.steam.two{top:10%;left:49%;transform:rotate(-18deg)}.steam.three{top:23%;left:60%;transform:rotate(24deg)}.table-fish { position:absolute; right:30px; bottom:18px; color:#f7cf80; font-size:42px; transform:rotate(-24deg); }.web-copy .eyebrow{color:#f4d180}.web-copy h2 { margin:14px 0 11px; color:#fff1bd; font-family:"Microsoft YaHei",sans-serif; font-size:42px; font-weight:900; letter-spacing:.08em; text-shadow:4px 4px #0b211e; }.web-copy>p:not(.eyebrow){max-width:420px;color:#c6d6c7;font-size:14px;line-height:1.9}.web-button{display:inline-flex;align-items:center;gap:42px;margin-top:20px;padding:12px 16px 12px 19px;border:3px solid #f2ca75;border-radius:0;background:#1a4035;box-shadow:4px 4px #081a16;color:#ffe2a0;font-size:13px;font-weight:800;transition:transform .15s steps(2),box-shadow .15s steps(2)}.web-button:hover{box-shadow:7px 7px #081a16;transform:translate(-3px,-3px)}.web-button b{font-size:18px}
.footer { display:flex; min-height:106px; align-items:center; justify-content:space-between; color:#718f82; font-size:11px; }.footer .wordmark{color:#2e574c;font-size:16px;text-shadow:none}.footer .wordmark-orb{width:26px;height:26px;border-color:#719781;background:#c9d9be;box-shadow:2px 2px #719781;color:#254f46;font-size:13px}.footer>a:last-child{color:#356b5d}
@media (max-width:760px){.shell{width:min(100% - 32px,520px)}.topbar{height:67px}.topbar .wordmark{font-size:16px}.wordmark-orb{width:26px;height:26px}.nav-links{display:none}.nav-status{gap:4px;padding:4px 8px 4px 4px;font-size:9px}.nav-status-cat{width:1.2em;height:1.2em;flex-basis:1.2em}.hero{min-height:915px;padding-top:106px}.hero-art{object-position:51% center}.hero-vignette{background:linear-gradient(180deg,rgba(5,16,19,.83),rgba(7,20,25,.15) 28%,rgba(4,16,19,.25) 62%,rgba(3,13,15,.95))}.hero h1{font-size:55px}.hero-note{max-width:325px;font-size:11px}.portal-area{margin-top:29px}.portal-intro{font-size:10px}.portal-grid{gap:10px}.portal{min-height:292px;padding:18px 14px 15px;border-width:3px;box-shadow:4px 4px #061010,inset 0 0 0 2px rgba(77,147,123,.37)}.portal:hover{box-shadow:6px 6px #061010,inset 0 0 0 2px rgba(255,214,115,.48)}.portal-type{font-size:8px}.portal-icon{width:38px;height:38px;margin-top:16px;border-width:2px;font-size:20px}.portal strong{margin-top:13px;font-size:19px;text-shadow:2px 2px #102420}.portal-description{margin-top:9px;font-size:10px}.portal-action{padding-top:11px;font-size:11px}.portal-meta{font-size:8px}.fish-whisper{right:18px;bottom:27px;font-size:12px}.pocket-section{padding:65px 0 61px}.section-heading{display:block;margin-bottom:21px}.section-heading h2{font-size:28px}.section-heading>p{margin-top:15px;font-size:12px}.pocket-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pocket-card{min-height:148px;box-shadow:4px 4px #24483d}.pocket-card:last-child{min-height:128px;grid-column:1/-1}.pocket-card:last-child>span{margin-left:auto}.pocket-card:last-child b{margin-top:-43px}.web-section{padding:56px 0}.web-inner{grid-template-columns:1fr;gap:29px}.web-copy h2{font-size:34px}.footer{min-height:112px;flex-wrap:wrap;gap:9px;padding-block:22px}.footer p{order:3;width:100%;margin:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media (max-width:520px){.shell{width:calc(100% - 32px)}.nav-status{display:none}.hero{min-height:0;padding-top:100px;padding-bottom:96px}.hero h1{font-size:50px;letter-spacing:.1em}.hero-sentence{max-width:330px;font-size:14px;line-height:1.65}.hero-note{max-width:315px;line-height:1.75}.portal-area{margin-top:24px}.portal-intro{margin-bottom:10px}.portal-intro p:last-child{display:none}.portal-grid{grid-template-columns:1fr;gap:14px}.portal{min-height:270px;padding:19px 18px 17px}.portal strong{font-size:23px}.portal-description{font-size:11px}.portal-action{font-size:12px}.portal-meta{font-size:9px}.fish-whisper{right:18px;bottom:28px}.pocket-grid{grid-template-columns:1fr}.pocket-card,.pocket-card:last-child{min-height:132px;grid-column:auto}.pocket-card:last-child>span{margin-left:0}.pocket-card:last-child b{margin-top:auto}.web-button{gap:24px}.footer>a:last-child{margin-left:auto}}

/* Use the supplied MC cursor package directly; do not fall back to the old SVG imitation. */
:root { --mc-normal-cursor: url("/assets/cursors/mc-normal.cur"); --mc-link-cursor: url("/assets/cursors/mc-link.cur"); }
body { cursor: var(--mc-normal-cursor), auto; }
a, button, [role="button"] { cursor: var(--mc-link-cursor), pointer; }

/* The Android section owns the full-width background; its content remains centered in .pocket-inner. */
.pocket-inner { position: relative; z-index: 1; }