:root{--bg:#020611;--text:#f5f7ff;--muted:#9da9c6;--blue:#65a8ff;--violet:#a879ff;--line:rgba(150,180,255,.18);--glass:rgba(6,12,32,.58)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:"Noto Sans SC",system-ui,sans-serif;color:var(--text)}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.nebula{position:fixed;inset:-20%;pointer-events:none;background:radial-gradient(ellipse at 56% 48%,rgba(54,92,255,.16),transparent 24%),radial-gradient(ellipse at 42% 52%,rgba(166,55,255,.10),transparent 30%),radial-gradient(ellipse at 70% 28%,rgba(24,154,255,.08),transparent 25%);mix-blend-mode:screen}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.38) 100%)}
.topbar{position:fixed;z-index:10;top:0;left:0;right:0;height:92px;padding:22px 42px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(2,6,17,.72),transparent);backdrop-filter:blur(5px)}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none}.brand>span:last-child{display:flex;flex-direction:column}.brand b{font-size:22px;font-weight:600;letter-spacing:4px}.brand small{margin-top:3px;color:#8491b0;font-size:11px;letter-spacing:1.5px}.brand-orbit{position:relative;width:45px;height:45px;border:1px solid #77a9ff;border-radius:50%;box-shadow:0 0 18px rgba(86,143,255,.35)}.brand-orbit:before{content:"";position:absolute;left:-7px;right:-7px;top:18px;height:10px;border:1px solid #77a9ff;border-radius:50%;transform:rotate(-28deg)}.brand-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#d5e6ff;box-shadow:0 0 10px #77b8ff;top:5px;right:4px}nav{display:flex;gap:42px;position:absolute;left:50%;transform:translateX(-50%)}.nav{padding:12px 2px;color:#7f8ba8;font-size:14px;position:relative}.nav.active,.nav:hover{color:#fff}.nav.active:after{content:"";position:absolute;height:2px;width:24px;background:#68a9ff;box-shadow:0 0 12px #68a9ff;left:50%;bottom:0;transform:translateX(-50%)}.write-btn{padding:12px 21px;border-radius:24px;background:linear-gradient(100deg,#4b8dff,#9a68ff);box-shadow:0 0 24px rgba(101,113,255,.4);font-size:14px}.write-btn span{margin-right:7px}
.intro{position:fixed;z-index:5;left:5.2%;top:25%;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:3px;color:#7386ad;margin-bottom:18px}.intro h1{font-size:clamp(28px,3.25vw,54px);line-height:1.3;font-weight:400;letter-spacing:2px;margin:0;text-shadow:0 4px 25px rgba(0,0,0,.45)}.intro h1 em{font-style:normal;font-weight:600;background:linear-gradient(90deg,#fff 5%,#99c8ff 45%,#d4a6ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.intro p{color:#8794b0;font-size:14px;line-height:2;margin-top:21px}
.hint-card{position:fixed;z-index:6;right:8%;top:21%;padding:12px 16px;border:1px solid rgba(120,164,255,.18);border-radius:14px;background:rgba(5,11,29,.46);backdrop-filter:blur(10px);color:#aab6d2;font-size:12px;box-shadow:0 12px 40px rgba(0,0,0,.18)}.hint-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#77b7ff;box-shadow:0 0 10px #77b7ff;margin-right:8px}.zoom{position:fixed;z-index:7;right:2.8%;top:45%;display:flex;flex-direction:column;align-items:center;gap:9px}.zoom button{width:39px;height:39px;border:1px solid rgba(144,177,245,.3);border-radius:50%;background:rgba(5,10,26,.42);backdrop-filter:blur(8px);font-size:22px;color:#b9c8e8}.zoom-line{height:50px;width:1px;background:linear-gradient(transparent,#5574b5,transparent);position:relative}.zoom-line i{position:absolute;width:6px;height:6px;background:#67b5ff;box-shadow:0 0 10px #67b5ff;border-radius:50%;left:-3px;top:20px}
.random-btn{position:fixed;z-index:7;left:50%;bottom:11%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:13px 21px 13px 16px;min-width:235px;border:1px solid rgba(115,154,255,.5);border-radius:30px;background:linear-gradient(110deg,rgba(53,98,236,.65),rgba(126,75,229,.68));box-shadow:0 0 30px rgba(82,104,255,.32),inset 0 0 20px rgba(255,255,255,.06);text-align:left}.random-btn .rocket{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);font-size:19px}.random-btn span:nth-child(2){display:flex;flex-direction:column;flex:1}.random-btn b{font-size:14px;font-weight:500}.random-btn small{font-size:10px;color:#d0d7f1;margin-top:3px}.random-btn strong{font-size:20px;font-weight:300}.random-btn:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 0 40px rgba(82,104,255,.5)}
.category-bar{position:fixed;z-index:8;left:50%;bottom:2.5%;transform:translateX(-50%);display:flex;gap:27px;padding:6px 16px}.category{display:flex;flex-direction:column;align-items:center;gap:7px;color:#687695;font-size:11px;min-width:45px}.category span{width:13px;height:13px;border-radius:50%;box-shadow:0 0 9px currentColor}.category[data-color="blue"] span{background:#5fa8ff;color:#5fa8ff}.category[data-color="pink"] span{background:#ff6fc6;color:#ff6fc6}.category[data-color="gold"] span{background:#ffc15d;color:#ffc15d}.category[data-color="green"] span{background:#69dbbd;color:#69dbbd}.category[data-color="violet"] span{background:#a77cff;color:#a77cff}.category .all-dot{background:transparent;color:#a7c7ff;box-shadow:none;width:auto;height:auto;font-size:15px}.category.active{color:#fff}.category.active label{position:relative}.category.active label:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:20px;height:2px;background:#70aaff;box-shadow:0 0 9px #70aaff}
.message-popover{position:fixed;z-index:20;width:290px;padding:20px;border:1px solid rgba(145,176,255,.25);border-radius:18px;background:rgba(5,10,27,.84);backdrop-filter:blur(18px);box-shadow:0 25px 80px rgba(0,0,0,.45),0 0 40px rgba(91,113,255,.12);display:none}.message-popover.show{display:block;animation:pop .22s ease-out}.pop-close,.close{position:absolute;right:12px;top:8px;color:#7f8eac;font-size:20px}.pop-star{width:10px;height:10px;border-radius:50%;background:#91c8ff;box-shadow:0 0 14px #91c8ff;margin-bottom:14px}.message-popover p{font-size:15px;line-height:1.8;margin:0 0 16px;color:#e7ecfa}.pop-actions{border-top:1px solid rgba(130,160,220,.12);padding-top:12px;display:flex;gap:20px}.pop-actions button{color:#8796b8;font-size:12px}.pop-actions button:hover{color:#fff}
.modal-backdrop{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.58);backdrop-filter:blur(9px);display:none;place-items:center}.modal-backdrop.show{display:grid}.modal{width:min(470px,calc(100% - 32px));padding:30px;border:1px solid rgba(125,164,255,.25);border-radius:24px;background:rgba(5,10,27,.92);box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 50px rgba(88,101,255,.12);position:relative}.modal-star{font-size:22px;color:#a9caff;text-shadow:0 0 18px #75aaff}.modal h2{font-size:23px;font-weight:500;margin:11px 0 4px}.modal p{font-size:12px;color:#75829e;margin:0 0 22px}.modal textarea{width:100%;height:150px;resize:none;border:1px solid rgba(127,158,224,.2);border-radius:15px;background:rgba(0,0,0,.22);outline:none;color:#e9efff;padding:16px;font:inherit;font-size:14px;line-height:1.8}.modal textarea:focus{border-color:rgba(105,160,255,.6);box-shadow:0 0 20px rgba(82,128,255,.08)}.modal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:15px;color:#667593;font-size:11px}.modal-foot button{padding:10px 17px;border-radius:20px;background:linear-gradient(100deg,#518fff,#9867ff);box-shadow:0 0 18px rgba(94,104,255,.28);font-size:12px}.toast{position:fixed;z-index:50;left:50%;bottom:26px;transform:translate(-50%,20px);padding:10px 16px;border-radius:20px;background:rgba(11,19,42,.9);border:1px solid rgba(120,160,230,.2);color:#d7e1f8;font-size:12px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:800px){.topbar{height:76px;padding:15px 18px}.brand b{font-size:17px;letter-spacing:2px}.brand small{font-size:8px}.brand-orbit{width:36px;height:36px}.topbar nav{display:none}.write-btn{padding:10px 13px;font-size:12px}.intro{left:20px;top:18%;}.intro .eyebrow{font-size:8px;margin-bottom:10px}.intro h1{font-size:28px}.intro p{font-size:12px}.hint-card{right:20px;top:auto;bottom:22%;font-size:10px}.random-btn{bottom:10%;min-width:205px}.category-bar{gap:9px;bottom:2%;width:100%;justify-content:center}.category{min-width:40px}.zoom{right:12px;top:45%}.message-popover{width:min(285px,calc(100% - 32px))}}
@media(max-height:680px){.intro{top:17%}.intro p{display:none}.hint-card{display:none}.random-btn{bottom:9%}.category-bar{display:none}}