@charset "UTF-8";
:root {
  color-scheme: dark;
  --paper: #080b1b; --panel: #151d36; --ink: #f6f5ff; --muted: #aebbd3;
  --line: #b7c6ee24; --signal: #8ce8d1; --signal-rgb: 140,232,209;
  --sunlight: #ffe3bd; --sunlight-rgb: 255,227,189;
  --sans: "Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --serif: "Yu Mincho","Hiragino Mincho ProN",serif;
}
[data-qualification="mankan"] { --signal:#a6caff; --signal-rgb:166,202,255; }
[data-qualification="chintai"] { --signal:#ffc18c; --signal-rgb:255,193,140; }
[data-qualification="takken"] { --signal:#d4b9ff; --signal-rgb:212,185,255; }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:18px; }
body { margin:0; min-height:100svh; background:var(--paper); color:var(--ink); font:14px/1.7 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
button,a,input { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
p,h1,h2 { margin:0; }
img,svg { display:block; }
::selection { color:var(--paper); background:var(--signal); }
:focus-visible { outline:2px solid var(--signal); outline-offset:5px; border-radius:6px; }
.icon { width:24px; height:24px; flex:0 0 auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:20; padding:12px 20px; background:var(--signal); color:var(--paper); border-radius:8px; }
.skip-link:focus { top:16px; }
.cosmos { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; background:linear-gradient(160deg,#10132c,#080c1c 54%,#101427); }
.cosmos-nebula { position:absolute; inset:0; background:radial-gradient(ellipse at 76% 7%,rgba(var(--signal-rgb),.13),transparent 39%),radial-gradient(ellipse at 19% 38%,#6951a92e,transparent 44%),radial-gradient(ellipse at 43% 48%,#e2944f13,transparent 28%),radial-gradient(ellipse at 91% 78%,#3a63b820,transparent 45%); }
.cosmos-nebula::after { content:""; position:absolute; inset:0; background:linear-gradient(119deg,transparent 20%,#b7c4ff05 36%,transparent 46%); }
.starfield { position:absolute; inset:0; width:100%; height:100%; opacity:.85; }
.planet-horizon { position:absolute; width:680px; height:680px; top:330px; left:calc(50% - 670px); border-radius:50%; background:radial-gradient(circle at 77% 19%,#304c6d,#111a32 32%,#080c1b 63%); border:1px solid rgba(var(--signal-rgb),.32); box-shadow:5px -5px 34px rgba(var(--signal-rgb),.13),inset -2px 3px 9px #d3dfff38,inset -14px 15px 45px #638ab210; opacity:.75; }
.shooting-star { position:absolute; width:110px; height:1px; background:linear-gradient(90deg,transparent,#e9f6ff); opacity:0; transform:rotate(-36deg); }
.shooting-star::after { content:""; position:absolute; right:0; top:-1px; width:3px; height:3px; border-radius:50%; background:#eff9ff; box-shadow:0 0 8px #b8e1ff; }
.shooting-star-one { left:12%; top:22%; }
.shooting-star-two { left:45%; top:60%; width:80px; }
.site-shell { width:min(100%,1120px); padding:0 20px; margin:auto; }
.site-header { height:74px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:10px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-symbol { display:grid; place-items:center; width:36px; height:36px; background:linear-gradient(145deg,rgba(var(--signal-rgb),.2),#18233a); color:var(--signal); border:1px solid rgba(var(--signal-rgb),.38); border-radius:11px 11px 11px 3px; box-shadow:inset 0 1px 0 #ffffff20,0 3px 12px #02061735; }
.brand-symbol .icon { width:21px; height:21px; }
.brand strong { display:block; font-size:19px; letter-spacing:.12em; line-height:1.3; }
.brand small { display:block; font:7px/1.5 Arial,sans-serif; letter-spacing:.19em; margin-top:5px; color:var(--muted); }
.header-right { display:flex; gap:6px; align-items:center; }
.official-label { display:none; }
.share-button,.motion-toggle { display:grid; place-items:center; background:#ffffff05; border:1px solid var(--line); border-radius:50%; width:44px; height:44px; transition:background .2s,transform .2s; }
.share-button .icon { width:17px; height:17px; }
.motion-toggle { color:var(--signal); }
.motion-bars { display:flex; align-items:center; justify-content:center; gap:3px; height:16px; }
.motion-bars i { display:block; background:currentColor; width:2px; height:12px; border-radius:3px; }
.motion-bars i:nth-child(2) { height:6px; }.motion-bars i:nth-child(3) { height:10px; }
.motion-toggle[aria-pressed="false"] .motion-bars i { height:2px; }
.course-nav { padding-top:13px; }.course-nav-label { display:none; }
.course-tabs { display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:5px; }
.course-tab { min-height:44px; padding:6px 5px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; border:1px solid #b9c9f31c; background:linear-gradient(145deg,#1a23394d,#0b132699); border-radius:30px; color:#b1bfd5; transition:background .2s,border-color .2s,transform .2s; white-space:nowrap; }
.tab-number { font:8px Arial,sans-serif; opacity:.7; }
.course-tab.is-active { color:#10243a; font-weight:700; border-color:#ffffffb0; background:linear-gradient(140deg,#f2f7ff,var(--signal)); box-shadow:0 3px 16px rgba(var(--signal-rgb),.17),inset 0 1px 0 #fff; }
.main-grid { padding:23px 0 32px; }
.intro { position:relative; text-align:center; min-width:0; }
.eyebrow { display:flex; justify-content:center; align-items:center; gap:8px; font:8px/1.5 Arial,sans-serif; letter-spacing:.17em; color:var(--signal); }
.eyebrow>span { width:4px; height:4px; border-radius:50%; background:var(--signal); box-shadow:0 0 9px rgba(var(--signal-rgb),.65); }
.hero-headline { font:500 clamp(25px,7.7vw,34px)/1.55 var(--serif); letter-spacing:.01em; margin-top:8px; white-space:nowrap; color:#fff6e9; text-shadow:0 2px 18px #edbf7b19; }
.hero-headline br { display:none; }.headline-period { color:var(--signal); }
.course-title-wrap { margin-top:8px; }.course-title-wrap h1 { font-size:17px; line-height:1.55; letter-spacing:.06em; font-weight:600; }
.course-english { font:7px/1.6 Arial,sans-serif; letter-spacing:.14em; margin-top:4px; color:var(--muted); }
.intro-text { display:none; }
.companion-art { position:relative; width:min(100%,340px); max-width:100%; height:196px; margin:0 auto; isolation:isolate; }
.stage-glow { position:absolute; width:245px; height:185px; left:50%; top:2px; transform:translateX(-50%); background:radial-gradient(ellipse 38% 32% at 47% 66%,#ffd5a72d,#ffd5a700 100%),radial-gradient(ellipse 48% 48% at 50% 50%,rgba(var(--signal-rgb),.14),rgba(var(--signal-rgb),0) 100%); pointer-events:none; }
.orbit-map { position:absolute; width:176px; height:176px; left:calc(50% - 88px); top:3px; border:1px solid rgba(var(--signal-rgb),.14); border-top-color:rgba(var(--signal-rgb),.44); border-right-color:#ffe0b233; border-radius:50%; background:radial-gradient(ellipse at 45% 16%,rgba(var(--signal-rgb),.045),transparent 66%); pointer-events:none; transform:rotate(-24deg); }
.orbit-map::before,.orbit-map::after { content:""; position:absolute; inset:10px; border:1px solid #ffffff05; border-left-color:rgba(var(--signal-rgb),.13); border-radius:50%; }.orbit-map::after { inset:-17px; border-color:transparent; border-top-color:rgba(var(--signal-rgb),.11); }
.orbit-map-line { position:absolute; height:1px; background:transparent; width:230px; top:50%; left:-27px; }.orbit-map-line+span { transform:rotate(90deg); }
.small-moon { position:absolute; left:10%; top:37px; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 31% 22%,#ead2b2,#6d7798 36%,#18223f 69%); box-shadow:inset -1px -1px 2px #070a20,0 0 17px #b8c7ff18; }
.orbital-ring { position:absolute; left:calc(50% - 134px); top:79px; width:268px; height:61px; border:1px solid rgba(var(--signal-rgb),.29); border-radius:50%; transform:rotate(-15deg); pointer-events:none; }
.orbital-ring-back { border-top-color:rgba(var(--signal-rgb),.55); z-index:-1; }
.orbital-ring-front { clip-path:inset(50% 0 0); border-bottom-color:rgba(var(--signal-rgb),.8); box-shadow:0 2px 0 #ffffff05; z-index:3; }
.orbit-satellite { position:absolute; width:206px; height:150px; left:calc(50% - 103px); top:27px; transform:rotate(-22deg); pointer-events:none; }
.orbit-satellite>span { position:absolute; top:0; left:15px; width:5px; height:5px; border-radius:50%; background:var(--signal); box-shadow:0 0 10px rgba(var(--signal-rgb),.8); }
.stage-spark { position:absolute; color:var(--signal); pointer-events:none; }.stage-spark-one { right:12%; top:23px; }.stage-spark-one .icon { width:16px; height:16px; stroke-width:1; }.stage-spark-two { left:16%; bottom:23px; }.stage-spark-two .icon { width:10px; height:10px; stroke-width:1; }
.mascot-float { position:absolute; left:calc(50% - 87px); top:0; width:174px; height:174px; z-index:2; }
.mascot-button { position:relative; display:block; width:100%; height:100%; padding:0; background:none; border:0; border-radius:50%; -webkit-user-select:none; user-select:none; }
.mascot { position:relative; width:100%; height:100%; object-fit:contain; z-index:1; pointer-events:none; }
.mascot-aura { position:absolute; inset:27px; border-radius:50%; background:radial-gradient(circle,#ffa65722,transparent 70%); }
.space-visor { position:absolute; top:27px; left:41px; width:92px; height:88px; border:1px solid #daeaff30; border-radius:47%; background:linear-gradient(125deg,#ffffff18,transparent 37%,transparent 70%,#d3efff0c); z-index:2; pointer-events:none; }
.jet-stream { position:absolute; width:36px; height:78px; top:125px; left:69px; background:linear-gradient(#edfff8cc,#8df0ff66,transparent); clip-path:polygon(25% 0,75% 0,100% 100%,0 100%); opacity:0; transform-origin:center top; }
.stage-coordinate { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font:7px Arial,sans-serif; letter-spacing:.19em; white-space:nowrap; color:#9aacc4; }
.launch-ripple { position:absolute; inset:40px 100px; border:1px solid var(--signal); border-radius:50%; opacity:0; pointer-events:none; }
.mascot-message { min-height:20px; font-size:10px; letter-spacing:.05em; color:#e8d9c5; margin-top:5px; }
.mascot-message.sr-only { position:absolute; width:1px; height:1px; min-height:0; margin:-1px; padding:0; }
.link-column { margin-top:21px; min-width:0; }
.app-card { position:relative; overflow:hidden; isolation:isolate; border:1px solid rgba(var(--signal-rgb),.34); border-top-color:rgba(var(--sunlight-rgb),.43); background:radial-gradient(ellipse at 0 0,rgba(var(--signal-rgb),.13),transparent 68%),linear-gradient(135deg,#24334cfa,#172139fa 60%,#22223dfa); border-radius:18px; padding:19px 18px 20px; box-shadow:0 12px 28px #02071659,inset 0 1px 0 #ffedd514,inset 0 -1px 0 #080c1e80; }
.app-card::before { content:""; position:absolute; width:76%; height:1px; top:0; left:12%; background:linear-gradient(90deg,transparent,#ffedccba,rgba(var(--signal-rgb),.55),transparent); }
.app-card-orbit { position:absolute; z-index:-1; width:180px; height:180px; right:-85px; top:-70px; border:1px solid rgba(var(--signal-rgb),.16); border-radius:50%; box-shadow:0 0 0 22px #ffffff03,0 0 0 45px #ffffff02; }
.section-kicker { display:flex; align-items:center; justify-content:space-between; gap:7px; font:8px Arial,sans-serif; letter-spacing:.1em; color:var(--signal); }
.app-tag { font:9px var(--sans); letter-spacing:.03em; border:1px solid var(--line); border-radius:20px; padding:2px 8px; color:#cad8e9; white-space:nowrap; }
.app-card-copy { margin-top:12px; }.app-card h2 { font-size:18px; line-height:1.6; font-weight:600; letter-spacing:.01em; }.app-card-copy p { font-size:10px; color:var(--muted); margin-top:5px; }
.store-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:17px; }
.store-link { display:flex; align-items:center; gap:8px; min-height:61px; padding:10px 12px; border:1px solid #ffffffd9; border-radius:10px; background:linear-gradient(145deg,#fffdf7,#e7eef9); color:#11243c; box-shadow:0 3px 0 #0c142b3d,0 5px 13px #050b1d21,inset 0 1px 0 #fff; transition:transform .18s,background .18s,box-shadow .18s; }
.store-link>span:not(.sr-only) { min-width:0; }.store-link strong { display:block; font:600 14px/1.25 Arial,sans-serif; white-space:nowrap; }.store-link small { display:block; font:9px/1.4 Arial,sans-serif; margin-bottom:3px; }.store-link>.icon:first-child { width:22px; height:22px; }.store-link>.icon:last-of-type { width:12px; height:12px; margin-left:auto; }
.web-app-link { display:flex; justify-content:center; align-items:center; gap:8px; min-height:44px; font-size:11px; margin-top:8px; }.web-app-link .icon { width:16px; height:16px; }
.social-section { margin-top:28px; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }.section-heading h2 { font-size:16px; font-weight:600; letter-spacing:.05em; }.section-heading>span { font:8px Arial,sans-serif; letter-spacing:.1em; color:var(--muted); white-space:nowrap; }.section-caption { color:var(--muted); font-size:11px; margin-top:4px; }
.social-list { display:grid; gap:8px; margin-top:15px; }.social-link { display:flex; align-items:center; gap:13px; min-height:77px; border:1px solid #c4d2f51b; border-top-color:#cfdaff26; padding:13px; border-radius:13px; background:linear-gradient(140deg,#1b263bd9,#111b30e6); box-shadow:inset 0 1px 0 #ffffff03,0 4px 12px #03081b1c; transition:transform .2s,border-color .2s; }
.social-icon { display:grid; place-items:center; width:39px; height:39px; flex:0 0 auto; color:#e3eafd; background-color:#22304a; background-image:linear-gradient(145deg,color-mix(in srgb,var(--social-color) 40%,#243351),#17233a); border:1px solid #d2ddff24; border-radius:12px; box-shadow:inset 0 1px 0 #ffffff0c; }.social-icon .icon { width:20px; height:20px; }
.social-copy { display:flex; flex-direction:column; gap:3px; }.social-copy strong { font:600 14px/1.5 Arial,var(--sans); }.social-copy>span { color:var(--muted); font-size:10px; }.social-arrow { margin-left:auto; width:18px; height:18px; color:var(--signal); }
.pending-label { margin-left:auto; flex-shrink:0; font-size:9px; color:#acb9cf; padding:2px 7px; border:1px solid var(--line); border-radius:20px; white-space:nowrap; }
.coaching-link { margin-top:17px; display:flex; align-items:center; gap:11px; padding:16px 13px; border:1px solid rgba(var(--signal-rgb),.24); background:linear-gradient(115deg,rgba(var(--signal-rgb),.10),#161c32d9); border-radius:13px; min-height:79px; transition:transform .2s,border-color .2s; }.coaching-icon { color:var(--signal); }.coaching-icon .icon { width:23px; height:23px; }.coaching-link small { font-size:10px; color:var(--muted); display:block; margin-bottom:3px; }.coaching-link strong { font-size:13px; font-weight:600; }.coaching-link>.icon { width:17px; height:17px; margin-left:auto; color:var(--signal); }.link-note { margin-top:14px; text-align:center; font-size:9px; color:var(--muted); }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:23px 0 calc(26px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); color:var(--muted); }.site-footer p { flex-basis:100%; font-size:11px; letter-spacing:.03em; }.site-footer small { font-size:9px; }.site-footer>span { font:7px Arial,sans-serif; letter-spacing:.16em; align-self:center; }
.toast { position:fixed; z-index:25; left:50%; bottom:calc(25px + env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:calc(100% - 32px); width:max-content; background:#e5effa; color:#122236; border-radius:10px; padding:12px 20px; font-size:12px; box-shadow:0 8px 30px #0005; }
.share-dialog { width:calc(100% - 32px); max-width:420px; padding:28px; color:var(--ink); background:#141e32; border:1px solid var(--line); border-radius:18px; }.share-dialog::backdrop { background:#030813c9; }.share-dialog h2 { font-size:20px; margin-bottom:12px; }.share-dialog p { font-size:12px; color:var(--muted); }.share-dialog label { display:block; font-size:11px; margin-top:20px; }.share-dialog input { width:100%; background:#090f20; color:var(--ink); padding:12px; border:1px solid var(--line); border-radius:7px; margin-top:6px; font-size:12px; }.dialog-close { position:absolute; right:10px; top:8px; min-width:44px; min-height:44px; font-size:24px; background:none; border:0; }.copy-button { width:100%; min-height:46px; background:var(--signal); color:#122236; border:0; border-radius:8px; padding:12px; margin-top:14px; font-weight:600; }
/* Only transform and opacity animate. Static gradients never repaint in a loop. */
@keyframes float { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-10px) rotate(4deg); } }
@keyframes satellite { from { transform:rotate(-22deg); } to { transform:rotate(338deg); } }
@keyframes twinkle { 0%,100% { opacity:.3; transform:scale(.8); } 50% { opacity:1; transform:scale(1.1); } }
@keyframes meteor { 0%,84% { opacity:0; transform:translate3d(0,0,0) rotate(-36deg) scaleX(.4); } 87% { opacity:.8; } 93%,100% { opacity:0; transform:translate3d(170px,-124px,0) rotate(-36deg) scaleX(1); } }
@keyframes arrive { from { opacity:0; transform:translate3d(0,13px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes orbit-arrival { from { opacity:0; transform:translate3d(0,24px,0) scale(.84); } to { opacity:1; transform:translate3d(0,0,0) scale(1); } }
@keyframes launch { 0% { transform:translateY(0) rotate(0); } 18% { transform:translateY(8px) scale(.96); } 48% { transform:translateY(-36px) rotate(-12deg) scale(1.05); } 72% { transform:translateY(-11px) rotate(7deg); } 100% { transform:translateY(0) rotate(0); } }
@keyframes jet { 0%,15%,100% { opacity:0; transform:scaleY(.5); } 25%,55% { opacity:.85; transform:scaleY(1); } 80% { opacity:0; transform:scaleY(.2); } }
@keyframes ripple { 0% { opacity:0; transform:scale(.7); } 25% { opacity:.5; } 100% { opacity:0; transform:scale(2); } }
[data-motion="on"] .mascot-float { animation:float 5.4s ease-in-out infinite; }
[data-motion="on"] .orbit-satellite { animation:satellite 22s linear infinite; }
[data-motion="on"] .stage-spark { animation:twinkle 4s ease-in-out infinite; }.stage-spark-two { animation-delay:-2s!important; }
[data-motion="on"] .shooting-star-one { animation:meteor 13s linear infinite; animation-delay:1.5s; }
[data-motion="on"] .shooting-star-two { animation:meteor 19s linear infinite; animation-delay:6s; }
/* The entrance plays from the first paint instead of waiting for deferred JS,
   so links never show, vanish and fade back in. It is one-shot, so it stays
   running while the ambient loops are paused. */
@media(prefers-reduced-motion:no-preference) {
  .intro .intro-top,.link-column>section { animation:arrive .6s ease-out both; animation-play-state:running!important; }
  .link-column>section:nth-child(2) { animation-delay:.06s; }.link-column>section:nth-child(3) { animation-delay:.12s; }
  .link-column>section:nth-child(4) { animation-delay:.18s; }.link-column>section:nth-child(n+5) { animation-delay:.24s; }
}
[data-motion="on"] .companion-art { animation:orbit-arrival .9s cubic-bezier(.16,1,.3,1) both; }
[data-motion="on"] .companion-art[data-boost="true"] .mascot-button { animation:launch 1.1s cubic-bezier(.3,0,.3,1); }
[data-motion="on"] .companion-art[data-boost="true"] .jet-stream { animation:jet 1.1s ease-out; }
[data-motion="on"] .companion-art[data-boost="true"] .launch-ripple { animation:ripple 1.1s ease-out; }
[data-motion="off"] *,[data-page-active="false"] *,[data-in-view="false"] .companion-art * { animation-play-state:paused!important; }
[data-motion="off"] .shooting-star { opacity:0!important; }
@media(hover:hover) and (pointer:fine) { .store-link:hover { transform:translateY(-3px); background:#fff; }.share-button:hover,.motion-toggle:hover { transform:translateY(-2px); background:#ffffff12; }.course-tab:hover { border-color:rgba(var(--signal-rgb),.6); }.social-link[href]:hover,.coaching-link[href]:hover { transform:translateY(-2px); border-color:rgba(var(--signal-rgb),.5); }.mascot-button:hover { cursor:pointer; } }
.store-link:active,.social-link[href]:active,.coaching-link[href]:active { transform:scale(.98); }
@media(min-width:480px) and (width < 860px) { .site-shell { max-width:520px; padding:0 30px; }.hero-headline { font-size:36px; }.companion-art { height:210px; }.app-card { padding:23px; } }
@media(min-width:860px) {
  .site-shell { padding:0 44px; }.site-header { height:100px; }.brand strong { font-size:23px; }.brand-symbol { width:43px; height:43px; }.brand small { font-size:8px; }.header-right { gap:10px; }.official-label { display:flex; align-items:center; gap:8px; margin-right:14px; color:var(--muted); font:9px Arial,sans-serif; letter-spacing:.15em; }.official-label>span { width:5px; height:5px; background:var(--signal); border-radius:50%; }
  .course-nav { display:flex; align-items:center; gap:24px; padding-top:23px; }.course-nav-label { display:block; font-size:10px; color:var(--muted); }.course-tabs { display:flex; gap:8px; }.course-tab { min-width:89px; padding:6px 17px; }
  .main-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; padding:52px 0 49px; align-items:start; }.intro { text-align:left; position:sticky; top:28px; }.eyebrow { justify-content:flex-start; font-size:9px; }.hero-headline { font-size:55px; line-height:1.5; margin-top:22px; }.hero-headline br { display:block; }.course-title-wrap { margin-top:0; border-left:2px solid var(--signal); padding-left:12px; }.course-title-wrap h1 { font-size:18px; }.course-english { font-size:8px; margin-top:7px; }.intro-text { display:block; font-size:12px; line-height:2; color:var(--muted); margin-top:23px; }.companion-art { margin:10px 0 0; width:350px; height:249px; }.mascot-float { width:206px; height:206px; left:calc(50% - 103px); top:6px; }.space-visor { width:109px; height:104px; left:49px; top:32px; }.jet-stream { left:85px; top:148px; }.orbit-map { width:210px; height:210px; left:calc(50% - 105px); top:4px; }.stage-glow { width:300px; height:230px; }.orbital-ring { width:318px; height:74px; left:calc(50% - 159px); top:104px; }.orbit-satellite { width:250px; height:185px; left:calc(50% - 125px); top:30px; }.mascot-message { text-align:center; max-width:350px; margin-top:5px; }.stage-coordinate { bottom:8px; }.small-moon { top:50px; }.planet-horizon { width:1100px; height:1100px; left:calc(50% - 1070px); top:470px; }
  .link-column { margin-top:0; }.app-card { padding:25px 25px 27px; border-radius:20px; }.section-kicker { font-size:9px; }.app-tag { font-size:10px; }.app-card-copy { margin-top:22px; }.app-card h2 { font-size:23px; }.app-card-copy p { font-size:11px; margin-top:10px; }.store-links { margin-top:25px; }.store-link { min-height:66px; padding:13px; gap:11px; }.store-link strong { font-size:16px; }.store-link small { font-size:9px; }.social-section { margin-top:29px; }.social-link { min-height:82px; padding:15px; }.social-copy strong { font-size:15px; }.social-copy>span { font-size:11px; }.coaching-link { padding:19px 16px; margin-top:20px; }.coaching-link strong { font-size:14px; }.site-footer { flex-wrap:nowrap; padding:26px 0; }.site-footer p { flex-basis:auto; }.site-footer>span { font-size:8px; }
}
/* A compact desktop hub keeps the companion and links in the same visual field. */
@media(min-width:860px) {
  .site-header { height:80px; }
  .course-nav { padding-top:16px; }
  .main-grid { padding-block:28px 26px; align-items:center; }
  .companion-art { margin-top:58px; }
  .app-card { padding:18px; }
  .app-card-copy { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .section-kicker { font-size:8px; }
  .app-tag { font-size:9px; }
  .store-links { margin-top:0; }
  .store-link { min-height:60px; padding:10px; gap:8px; }
  .store-link strong { font-size:14px; }
  .social-section { margin-top:16px; }
  .section-heading h2 { font-size:14px; }
  .section-caption { display:none; }
  .social-list { margin-top:0; gap:7px; }
  .social-link { min-height:62px; padding:10px; gap:12px; }
  .social-icon { width:34px; height:34px; border-radius:10px; }
  .social-copy strong { font-size:14px; }
  .social-copy>span { font-size:10px; }
  .coaching-link { min-height:60px; margin-top:16px; padding:11px 12px; }
  .coaching-link small { font-size:9px; }
  .link-note { margin-top:10px; }
  .site-footer { padding-block:18px; }
  .site-footer p { font-size:10px; }
}
/* Keep both desktop columns inside the viewport at the tablet breakpoint. */
@media(min-width:860px) and (width < 1100px) {
  .site-shell { padding-inline:28px; }
  .site-header { height:72px; }
  .course-nav { padding-top:14px; }
  .main-grid { gap:32px; padding-block:20px; }
  .app-card { padding:16px; }
  .store-link { min-height:56px; padding:10px; gap:8px; }
  .store-link strong { font-size:14px; }
  .store-link>.icon:last-of-type { width:11px; height:11px; }
  .social-section { margin-top:14px; }
  .social-list { margin-top:0; gap:6px; }
  .social-link { min-height:54px; padding:8px 10px; gap:10px; }
  .coaching-link { min-height:56px; margin-top:12px; padding:9px 12px; }
  .link-note { display:none; }
}
@media(min-width:1100px) { .main-grid { gap:82px; }.hero-headline { font-size:61px; } }
@media(max-width:359px) { .site-shell { padding:0 15px; }.brand strong { font-size:17px; }.brand small { font-size:6px; }.brand { gap:8px; }.course-tabs { gap:4px; }.course-tab { font-size:10px; gap:3px; }.tab-number { font-size:7px; }.hero-headline { font-size:26px; }.course-title-wrap h1 { font-size:15px; }.companion-art { height:181px; }.stage-coordinate { bottom:0; }.app-card { padding:17px 13px; }.app-card h2 { font-size:16px; }.store-link { gap:7px; padding:10px; }.store-link strong { font-size:12px; }.store-link>.icon:last-of-type { display:none; }.social-link { gap:10px; padding:12px 10px; }.social-icon { width:34px; height:34px; }.social-copy strong { font-size:12px; }.social-copy>span { font-size:9px; }.pending-label { font-size:8px; padding:2px 6px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } html:not([data-motion="on"]) *,html:not([data-motion="on"]) *::before,html:not([data-motion="on"]) *::after { animation:none!important; transition:none!important; } }