.terminal-page { padding-top: 32px; }
.whale-terminal { --ice: #c3dcff; position: relative; isolation: isolate; aspect-ratio: 16/9; min-height: 570px; overflow: hidden; border: 1px solid #41476b; border-radius: 16px; background: #070913; color: #eef0ff; font-family: 'Segoe UI','Microsoft YaHei',sans-serif; box-shadow: 0 26px 100px #0005; }
.whale-terminal:focus-visible { outline: 2px solid #aabfff; outline-offset: 5px; }
.whale-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse at 74% 44%,#293465b0,transparent 48%),radial-gradient(ellipse at 22% 60%,#34204b80,transparent 60%),linear-gradient(130deg,#090b19,#15162f 62%,#080b1a); opacity: 0; transition: opacity 2s; }
.whale-terminal:is([data-phase="reveal"],[data-phase="greeting"],[data-phase="menu"]) .whale-atmosphere { opacity: 1; }
.whale-atmosphere::after { content: ''; position:absolute;inset:0;box-shadow:inset 0 0 120px 40px #0006;pointer-events:none; }
.whale-orbit { position: absolute; width: 90%; aspect-ratio:1; border:1px solid #b0bbf416; border-radius:50%; top:12%;left:35%; transform:rotate(-25deg) scaleY(.63); }
.orbit-b { width: 70%; top:24%;left:39%;transform:rotate(25deg) scaleY(.83); }
.whale-atmosphere i { position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;background:#cad4ff;border-radius:50%;opacity:.4;box-shadow:0 0 8px #b4c5ff;animation:whale-dust 11s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s); }
.whale-topbar { position:absolute;inset:23px 27px auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.15em;color:#bac4e1; }
.whale-topbar b { font-weight:400;color:#63769c;margin:0 9px; }
.whale-topbar>div { display:flex;gap:8px; }
.whale-topbar button { border:1px solid #96a9e32a;background:#14203960;border-radius:5px;padding:6px 12px;color:#dae1fa;font-size:11px;letter-spacing:.06em; }
.whale-topbar button:hover { background:#6477ba30;border-color:#a2b7ff88; }
.whale-terminal button:focus-visible,.whale-terminal a:focus-visible { outline-color:#bdd2ff; }
.whale-pendant { position:absolute;top:24%;left:50%;width:220px;transform:translateX(-50%);text-align:center;opacity:0;transition:opacity .6s,filter .8s; }
.whale-pendant svg { width:100%;filter:drop-shadow(0 0 24px #587bce66);transform-origin:50% 5%;animation:whale-pendant 4s ease-in-out infinite; }
.whale-pendant>span { display:block;font-size:11px;color:#aab8d1;letter-spacing:.20em;margin-top:22px;white-space:nowrap; }
.whale-terminal:is([data-phase="loading"],[data-phase="pendant"]) .whale-pendant { opacity:1; }
.whale-terminal[data-phase="reveal"] .whale-pendant { filter:blur(15px); }
.whale-character { position:absolute;height:182%;aspect-ratio:.75;right:-10%;top:8%;opacity:0;filter:drop-shadow(0 0 2px #bcc3ff99) drop-shadow(0 0 30px #586fe133);transform:translate(-32%,7%) scale(1.08);transform-origin:50% 15%;transition:opacity 1.5s,transform 2s cubic-bezier(.2,.7,.25,1);pointer-events:none; }
.whale-terminal[data-variant="young"] .whale-character { height:91%;aspect-ratio:1;right:4%;top:10%;transform:translate(-44%,4%) scale(1.25);transform-origin:50% 35%; }
.whale-character canvas { display:block;width:100%;height:100%; }
.whale-still { width:100%;height:100%;background-size:200% 100%;background-position:left top;background-repeat:no-repeat; }
.whale-terminal:is([data-phase="reveal"],[data-phase="greeting"],[data-phase="menu"]) .whale-character { opacity:1; }
.whale-terminal[data-phase="menu"] .whale-character { transform:translate(0,0) scale(1); }
.whale-greeting { position:absolute;bottom:17%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(17px,2vw,26px);letter-spacing:.16em;opacity:0;text-shadow:0 2px 10px #000;transition:opacity .7s; }
.whale-terminal[data-phase="greeting"] .whale-greeting { opacity:1; }
.whale-menu { position:absolute;z-index:2;top:19%;left:7%;width:33%;animation:whale-menu-in 1s ease-out both; }
.whale-kicker { font-size:10px;letter-spacing:.25em;color:#a8b8db;margin-bottom:11px; }
.whale-menu h1 { font-size:clamp(38px,4.7vw,64px);line-height:1.14;font-weight:750;letter-spacing:.04em;color:#b8dcff;text-shadow:0 2px 0 #566da2,0 0 32px #c8ccff44; }
.whale-menu h1>span { display:block;font-size:.38em;letter-spacing:.3em;font-weight:400;color:#bacbed;margin-top:15px; }
.whale-menu-rule { width:36px;height:2px;background:#a7b9e8;margin:22px 0; }
.whale-menu nav { display:grid;gap:8px; }
.whale-menu nav button { position:relative;display:flex;align-items:center;text-align:left;gap:20px;width:100%;padding:13px 18px;background:linear-gradient(90deg,#7083b326,#6e79a711);border:1px solid #9dafdf27;border-radius:5px;color:#e4eafd;font-size:19px;letter-spacing:.13em;transition:background .25s,border-color .25s,transform .25s; }
.whale-menu nav button:is(:hover,:focus-visible) { background:linear-gradient(90deg,#b8c9ff36,#9c96ec24);border-color:#c6d6ff91;transform:translateX(6px); }
.whale-menu-number { font:10px var(--mono);letter-spacing:.05em;color:#96a8d2; }
.whale-menu-arrow { margin-left:auto;font-size:18px;color:#bccaf0;opacity:0;transition:opacity .2s; }
.whale-menu nav button:is(:hover,:focus-visible) .whale-menu-arrow { opacity:1; }
.whale-development { color:#bac3dc;font-size:12px;letter-spacing:.18em;margin-top:21px; }
.whale-bottom { position:absolute;inset:auto 27px 20px;z-index:5;display:flex;justify-content:space-between;gap:15px;align-items:center;color:#9daaca;font-size:10px;letter-spacing:.10em; }
.whale-bottom a { color:#ccd4e9; }
.whale-bottom a>span { margin-left:12px; }
.whale-notice { position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,85%);padding:28px;background:#151b30f5;border:1px solid #899ccd88;border-radius:12px;box-shadow:0 0 0 100vmax #02041088;text-align:center; }
.whale-notice p { font-size:14px; }
.whale-notice button { margin-top:20px;padding:7px 20px;border:1px solid #8c9fc788;border-radius:5px;background:#475c8b50;color:#e4ecff; }
.whale-terminal:fullscreen { width:100vw;height:100vh;min-height:0;border-radius:0;aspect-ratio:auto; }
.whale-terminal[data-fallback="true"] .whale-character { filter:drop-shadow(0 0 12px #819fd333); }
.whale-terminal[data-still="true"] * { animation-play-state:paused!important; }
@keyframes whale-pendant { 0%,100% { transform:perspective(500px) rotateY(-23deg) rotateZ(-3deg); } 50% { transform:perspective(500px) rotateY(24deg) rotateZ(3deg); } }
@keyframes whale-dust { 0%,100% { transform:translate(0,0);opacity:.15; } 50% { transform:translate(10px,-25px);opacity:.65; } }
@keyframes whale-menu-in { from { opacity:0;transform:translateX(-16px); } to { opacity:1;transform:translateX(0); } }
@media(max-width:760px) {
 .whale-terminal { min-height:580px;aspect-ratio:auto; }
 .whale-character { height:110%;right:-30%;top:4%; }
 .whale-terminal[data-variant="young"] .whale-character { height:55%;right:-3%;top:7%; }
 .whale-menu { top:14%;left:7%;width:86%; }
 .whale-menu h1 { font-size:38px; }
 .whale-menu nav { margin-top:100px; }
 .whale-menu nav button { font-size:17px;gap:10px;padding:12px;background:#141c35ed; }
 .whale-topbar { inset:18px 18px auto;font-size:9px;letter-spacing:.04em; }
 .whale-topbar button { padding:6px 9px;font-size:10px; }
 .whale-topbar b { margin:0 4px; }
 .whale-kicker { font-size:8px;letter-spacing:.10em; }
 .whale-development { font-size:10px;letter-spacing:.04em;margin-top:12px; }
 .whale-bottom { inset:auto 18px 12px;letter-spacing:0;font-size:10px;text-shadow:0 0 5px #070913; }
 .whale-greeting { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
 .whale-terminal *, .whale-terminal *::before,.whale-terminal *::after { animation:none!important;transition:none!important; }
}