:root{
  --ink:#102a2c;--muted:#647477;--plum:#f5f8f7;--panel:#fff;--paper:#fff;
  --gold:#087a64;--coral:#176b9b;--mint:#daf1ea;--line:#dfe8e5;
  --shadow:0 12px 40px rgba(23,56,58,.07);--shadow-hover:0 22px 55px rgba(18,67,65,.13);
  --radius-sm:12px;--radius-md:18px;--radius-lg:26px;
}
html{scroll-behavior:smooth}body{font-family:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;background:radial-gradient(circle at 15% 0,rgba(39,160,128,.055),transparent 27rem),#f5f8f7;color:var(--ink);letter-spacing:-.012em;line-height:1.55}
button,input,select,textarea{font-family:inherit}.hero h1,h1,h2,h3,.display,.auth-intro h1,.auth-form h2,.auth-aside h1{font-family:'Manrope','Onest',sans-serif;letter-spacing:-.045em;font-weight:800}.muted,.lead{letter-spacing:-.005em}
.topbar{height:76px;max-width:1180px;margin:12px auto 0;border:1px solid rgba(210,225,220,.9);border-radius:20px;padding:0 20px;background:rgba(255,255,255,.82);box-shadow:0 8px 32px rgba(28,65,63,.055);backdrop-filter:blur(20px);position:sticky;top:12px}.brand{gap:11px;font-size:17px}.brand-mark{width:38px;height:38px;border-radius:12px;background:#087a64;box-shadow:0 6px 16px rgba(8,122,100,.22);font-family:'Manrope';font-weight:800}.brand i{font-family:inherit;font-style:normal;font-weight:700;color:#176b9b}.desktop-nav{gap:4px;background:#f3f7f6;padding:5px;border-radius:13px}.desktop-nav button{padding:8px 11px;border-radius:9px;font-size:12px;font-weight:650;transition:background .2s,color .2s,transform .2s}.desktop-nav button:hover{background:white;color:#087a64;box-shadow:0 3px 12px rgba(31,76,72,.06);transform:translateY(-1px)}.top-actions{gap:8px}.icon-btn,.avatar{width:38px;height:38px;border-radius:11px}.avatar{background:#102a2c;color:#fff}
main{max-width:1180px;padding:0 24px 100px}.hero{min-height:560px;gap:60px}.hero h1{font-size:clamp(48px,7vw,82px);line-height:.98;margin:18px 0 20px;letter-spacing:-.065em}.hero h1 em{color:#087a64}.eyebrow{display:inline-flex;align-items:center;gap:7px;color:#087a64;font-size:11px;font-weight:800;letter-spacing:.12em;background:#e8f4f0;padding:7px 10px;border-radius:999px}.lead{font-size:17px;line-height:1.7;max-width:580px}.hero-art{height:440px}.moon{background:radial-gradient(circle at 35% 30%,#f7fffd,#a8d8cb 48%,#4e99b9 100%);opacity:.72;box-shadow:0 30px 100px rgba(36,120,116,.17)}.book{filter:saturate(.55) hue-rotate(60deg);box-shadow:25px 35px 45px rgba(18,59,56,.2)}
.actions{gap:10px}.primary,.secondary,.small-btn{border-radius:12px;padding:12px 17px;font-weight:700;letter-spacing:-.01em;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}.primary{background:#087a64;box-shadow:0 8px 20px rgba(8,122,100,.18)}.primary:hover{background:#066a57;box-shadow:0 12px 27px rgba(8,122,100,.25)}.secondary{background:#fff;border-color:#d6e3df;color:#174f5f}.secondary:hover{border-color:#9fc5ba;box-shadow:0 8px 22px rgba(24,76,70,.08)}.primary:active,.secondary:active,.small-btn:active{transform:translateY(1px) scale(.985)}
.progress-box{border-radius:16px;border:1px solid #deebe7;padding:16px 18px;box-shadow:0 8px 24px rgba(30,73,69,.045)}.track{height:7px}.fill{background:linear-gradient(90deg,#087a64,#2b91a8)}
.section{margin:52px 0 70px}.section-head{margin-bottom:22px}.section h2,.section-head h2{font-size:clamp(26px,3vw,36px);line-height:1.15}.cards,.game-grid{gap:18px}.work-card,.challenge,.game-card,.stat-card,.assistant-card,.info,.chat{border:1px solid rgba(217,230,226,.92);border-radius:var(--radius-md);box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s,border-color .22s}.work-card:hover,.game-card:hover,.stat-card:hover,.info:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:#b9d7cf}.work-card,.game-card{padding:22px}.work-card h3,.game-card h3{letter-spacing:-.035em}.tag{background:#e7f4f0;color:#08705d;border:1px solid #d1e9e2;font-weight:700;padding:5px 9px}.heart{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f4f7f6}.heart:hover{background:#e9f3f0}.small-btn{background:#f1f6f4!important;color:#17604f!important}.small-btn:hover{background:#e4f1ed!important}
.three-up{gap:18px}.challenge{background:linear-gradient(145deg,#0a6658,#155f7e);padding:24px;color:#fff}.challenge .eyebrow{background:rgba(255,255,255,.13);color:#fff}.badge{border-radius:14px;background:#edf6f3}
.map-hero,.detail-hero{padding:70px 0 26px}.map-hero h1,.detail-hero h1{letter-spacing:-.055em}.filterbar{gap:8px;padding-bottom:25px}.filter{padding:9px 13px;border-radius:10px;background:white;font-weight:600}.filter.active{background:#102a2c;border-color:#102a2c}.map-grid{gap:16px}.map-card,.map-card:nth-child(3n+1),.map-card:nth-child(3n){min-height:180px;padding:20px;border-radius:18px;background:#fff;box-shadow:var(--shadow)}.map-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:#9bcabe}.map-card h3{font-size:21px;letter-spacing:-.035em}.map-num{letter-spacing:.08em}.level{display:inline-flex;margin-top:3px;background:#edf5f8;padding:5px 8px;border-radius:8px}
.detail-grid{gap:20px}.info-grid{gap:16px}.info{padding:21px}.work-sections{gap:10px}.work-sections button{border-radius:14px;padding:16px;border-color:#dce8e4;box-shadow:0 5px 18px rgba(27,69,65,.045);transition:.2s}.work-sections button:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(25,81,73,.1)}.character-visual{background:linear-gradient(145deg,#eaf5f2,#e7f1f6);border:1px solid #d7e9e4}
.game-grid{grid-template-columns:repeat(4,1fr)}.game-card{min-height:210px}.game-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#e9f4f1;color:#087a64}.game-panel{border-radius:22px;padding:30px;box-shadow:0 20px 65px rgba(24,62,62,.1)}.options{gap:11px}.option{border-radius:12px;padding:14px 16px;font-weight:600;transition:.18s}.option.correct{background:#dff4e8;border-color:#54a979;color:#125b39}.option.wrong{background:#fde8e5;border-color:#dd776a;color:#8d2f26}.result-line{border-radius:12px;border:1px solid #dce9e5}
.assistant-layout{gap:20px}.chat{min-height:570px;border-radius:22px}.chat-head{padding:19px 22px}.messages{padding:24px}.bubble{border-radius:16px;padding:13px 16px}.bot{background:#eef5f3}.user{background:#087a64}.chat-form{padding:15px}.chat-form input,.search-input{border:1px solid #dce8e4;border-radius:12px;padding:13px 15px}.chat-form input:focus,.search-input:focus{outline:3px solid rgba(8,122,100,.12);border-color:#70ad9e}.chat-form button{border-radius:11px}
.profile-top{padding-top:64px}.big-avatar{border-radius:22px;background:#102a2c;color:#fff}.stats{gap:16px}.stat-card{padding:20px}.stat-card strong{font-size:32px;letter-spacing:-.04em}.achievements{gap:16px}.notice,.canonical-note{border-radius:13px;border:1px solid #d4e8e1}.relationship{border-radius:14px}.modal{border-radius:22px;border-color:#dce7e4;box-shadow:0 25px 80px rgba(13,50,50,.18)}
.auth-shell,.auth-screen{background:radial-gradient(circle at 15% 15%,rgba(51,167,136,.12),transparent 28rem),#f2f7f5}.auth-card{border-radius:28px;box-shadow:0 28px 90px rgba(19,67,64,.13);border-color:#d9e7e3}.auth-intro,.auth-aside{background:linear-gradient(145deg,#0b5d50,#164f70)}.auth-intro h1,.auth-aside h1{letter-spacing:-.065em}.auth-form input{border-radius:11px;background:#fbfdfc}.auth-form input:focus{outline:3px solid rgba(8,122,100,.12);border-color:#6cae9d}
*:focus-visible{outline:3px solid rgba(23,107,155,.24);outline-offset:3px}.bottom-nav{border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(25,61,58,.08)}
@media(max-width:1050px){.desktop-nav{gap:1px}.desktop-nav button{padding:8px 7px}.game-grid{grid-template-columns:repeat(2,1fr)}.topbar{margin:8px 12px 0}}
@media(max-width:760px){main{padding:0 17px 92px}.topbar{height:62px;top:8px;border-radius:16px}.hero{padding:36px 0 24px;gap:15px}.hero-art{height:230px}.hero h1{font-size:48px}.section{margin:38px 0 48px}.cards,.game-grid,.map-grid{grid-template-columns:1fr}.cards .work-card:nth-child(n+4){display:flex}.map-card{min-height:150px}.profile-top{padding-top:38px}.bottom-nav{height:70px}.work-sections{grid-template-columns:1fr 1fr}.auth-intro,.auth-aside{padding:30px}.auth-form{padding:28px}}
@media(max-width:460px){.work-sections{grid-template-columns:1fr}.hero h1{font-size:42px}.options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}