:root {
  color-scheme: dark;
  --bg: #070b10; --fg: #e3e9e8; --green: #c1ff72; --muted: #71818e;
  --px: 0px; --py: 0px; --page-x: 0px; --page-y: 0px; --pitch: 0deg; --yaw: 0deg;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--fg); font-synthesis: none;
}
* { box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { min-width: 320px; }
::selection { background: var(--green); color: var(--bg); }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.atmosphere { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 49%, #16453113, transparent 49%),radial-gradient(ellipse at 78% 27%, #39387519, transparent 50%),radial-gradient(ellipse at 18% 73%, #235b7612, transparent 45%),linear-gradient(180deg,#070b1050,transparent 30%,transparent 70%,#070b1070); }
.scene { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; transform: perspective(1800px) translate3d(var(--page-x),var(--page-y),0) rotateX(var(--pitch)) rotateY(var(--yaw)); transform-origin: 50% 50%; }
.header { position: absolute; z-index: 5; top: 0; left: 4%; right: 4%; height: 90px; display: flex; justify-content: space-between; align-items: center; gap: 25px; border-bottom: 1px solid #c0d8e510; }
.logo { display: flex; align-items: center; gap: 9px; font-size: 24px; font-weight: 800; letter-spacing: -1.2px; }.logo>span { font: 17px Consolas,monospace; color: var(--green); }.logo>i { font-style: normal; color: var(--green); margin-left: -8px; }
.header-title, .online, .eyebrow, .coordinates, .panel-bar, .stage-top, .interaction-hint, .floating-fragment, .footer { font-family: Consolas,"Liberation Mono","Microsoft YaHei",monospace; }
.header-title { font-size: 9px; letter-spacing: 2px; color: #536775; margin-left: 15%; }
.online { display: flex; align-items: center; gap: 8px; color: #91a494; font-size: 8px; letter-spacing: 1px; white-space: nowrap; }.online i,.footer-end>i { width: 4px; height: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px #c1ff7277; }
.intro { position: absolute; z-index: 4; top: 18%; left: 8%; transform: translate(calc(var(--px)*.45),calc(var(--py)*.45)); }.eyebrow { color: #6b808d; font-size: 8px; letter-spacing: 1.3px; }.eyebrow>span { color: #a0ba90; margin-right: 12px; }.intro h1 { font-size: clamp(21px,2.4vw,34px); font-weight: 400; letter-spacing: -.7px; margin: 14px 0 8px; }.intro h1>span { color: var(--green); }.intro p { margin: 0; color: #5a6d79; font: 9px/1.8 Consolas,monospace; letter-spacing: .6px; }
.coordinates { position: absolute; right: 8%; top: 20%; color: #65808b; line-height: 1.9; font-size: 8px; letter-spacing: 1px; text-align: right; transform: translate(calc(var(--px)*.3),calc(var(--py)*.3)); }.coordinates>span { color: #a1b3b7; }
.type-stage { position: absolute; z-index: 3; left: 50%; top: 51%; width: min(70vw,1120px); outline: none; transform: translate(calc(-50% + var(--px)*.8),calc(-50% + var(--py)*.8)); cursor: crosshair; touch-action: none; }
.type-stage:focus-visible { outline: 1px solid #c1ff7270; outline-offset: 12px; border-radius: 4px; }.stage-top,.stage-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-inline: 3%; }.stage-top { color: #64836c; font-size: 8px; letter-spacing: 1.7px; margin-bottom: 18px; }.stage-top>span:first-child { display: flex; align-items: center; gap: 8px; }.stage-top i { width: 3px; height: 3px; background: var(--green); }#pointer-position { font-size: 7px; letter-spacing: 1px; color: #496558; }.type-surface { position: relative; width: 100%; aspect-ratio: 1120/356; }.wordmark-source,#type-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }#type-canvas { opacity: 0; pointer-events: none; }.is-rendered #type-canvas { opacity: 1; }.is-rendered .wordmark-source { visibility: hidden; }.stage-bottom { margin-top: 16px; font-size: 10px; color: #c1d2bb; }.stage-bottom em { font-style: normal; color: #5e7967; }.interaction-hint { display: flex; align-items: center; gap: 9px; color: var(--green); font-size: 15px; }.interaction-hint>span { color: #759275; font-size: 8px; letter-spacing: .4px; }.type-stage:hover .interaction-hint>span { color: var(--green); }
.code-panel { position: absolute; z-index: 2; width: clamp(185px,17vw,260px); background: linear-gradient(140deg,#14202c9c,#0a101b80); border: 1px solid #8ba6c41f; border-radius: 5px; box-shadow: 0 20px 70px #0002,inset 0 1px #d4e8ff04; backdrop-filter: blur(6px); overflow: hidden; pointer-events: none; }.code-left { top: 34%; left: 4%; opacity: .7; transform: translate(calc(var(--px)*1.1),calc(var(--py)*1.1)) perspective(650px) rotateY(17deg) rotateZ(-8deg); }.panel-bar { padding: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #78909c; font-size: 8px; border-bottom: 1px solid #acc9e20d; }.panel-bar>span:last-child { color: #4c667a; font-size: 7px; }.panel-dots { display: flex; gap: 4px; }.panel-dots i { width: 4px; height: 4px; border-radius: 50%; background: #61717d; }.panel-dots i:first-child { background: #ac7874; }.panel-dots i:nth-child(2) { background: #b1a374; }.panel-dots i:nth-child(3) { background: #7f9d7b; }
.code-panel pre { font: clamp(8px,.68vw,10px)/1.9 Consolas,"Liberation Mono",monospace; color: #8a9da9; margin: 0; padding: 13px 15px 17px; white-space: pre; }.line-number { color: #334f60; margin-right: 5px; }.purple { color: #b39acb; }.green { color: #afd293; }.orange { color: #baa079; }.cyan { color: #80b8c7; }.muted { color: #466174; }.terminal { right: 4%; top: 61%; width: clamp(220px,21vw,320px); opacity: .77; transform: translate(calc(var(--px)*1.3),calc(var(--py)*1.3)) perspective(750px) rotateY(-17deg) rotateZ(7deg); }.terminal pre { font-size: clamp(7px,.62vw,9px); }.terminal-light { color: #9ac483; font-size: 6px; }.terminal-cursor { display: inline-block; width: 5px; height: 9px; background: #b0df89; vertical-align: -1px; animation: cursor-blink 1.4s steps(1) infinite; }
.floating-fragment { position: absolute; z-index: 1; font-size: 9px; color: #405b69; pointer-events: none; }.fragment-one { top: 28%; right: 17%; transform: translate(calc(var(--px)*1.5),calc(var(--py)*1.5)) rotate(7deg); }.fragment-one>span { color: #617f68; }.fragment-two { left: 21%; bottom: 20%; color: #4a6d62; transform: translate(calc(var(--px)*.6),calc(var(--py)*.6)) rotate(-8deg); }.space-mark { position: absolute; font: 17px Consolas; color: #466256; opacity: .45; }.mark-one { right: 17%; bottom: 21%; }.mark-two { left: 15%; top: 29%; }
.space-orbit { position: absolute; z-index: 0; width: min(100vw,1550px); height: 56%; left: 50%; top: 49%; border: 1px solid #c1ff7208; border-radius: 50%; transform: translate(-50%,-50%) rotate(-22deg); pointer-events: none; }.space-orbit::after { content: ''; position: absolute; inset: 20px -30px; border: 1px solid #96c7e006; border-radius: 50%; transform: rotate(13deg); }
.footer { position: absolute; left: 4%; right: 4%; bottom: 27px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #4c6371; font-size: 7px; letter-spacing: 1px; }.footer-slash { margin-inline: 10px; color: #2a3d49; }.footer-center { color: #6a8176; }.footer-end { display: flex; align-items: center; gap: 8px; }.footer-end>i { width: 3px; height: 3px; }.infinity { font-size: 16px; color: #9cb88b; margin-left: 18px; }.noscript-note { position: fixed; z-index: 10; bottom: 55px; left: 0; right: 0; color: var(--green); font-size: 11px; text-align: center; }
@keyframes cursor-blink { 0%,65%,100% { opacity: 1; } 70%,95% { opacity: 0; } }
@media(max-width:1000px) { .header-title { margin-left: 0; font-size: 7px; letter-spacing: 1px; }.online { font-size: 6px; }.code-left { left: -22px; opacity: .45; }.terminal { right: -24px; opacity: .5; }.intro { left: 7%; }.coordinates { right: 7%; }.type-stage { width: 82vw; } }
@media(max-width:700px) { .header { height: 73px; left: 22px; right: 22px; }.logo { font-size: 23px; }.header-title { display: none; }.online { font-size: 6px; letter-spacing: .7px; }.intro { top: 16%; left: 24px; }.eyebrow { font-size: 6px; letter-spacing: .6px; }.eyebrow>span { margin-right: 6px; }.intro h1 { font-size: 22px; margin-top: 11px; }.intro p { font-size: 7px; letter-spacing: .1px; }.coordinates { display: none; }.type-stage { width: 94vw; top: 50%; }.stage-top { font-size: 6px; letter-spacing: 1px; padding-inline: 5%; margin-bottom: 13px; }#pointer-position { font-size: 5px; letter-spacing: .2px; }.stage-bottom { margin-top: 17px; padding-inline: 5%; font-size: 8px; }.interaction-hint { font-size: 12px; gap: 4px; }.interaction-hint>span { font-size: 6px; }.code-left { top: 27%; left: -48px; width: 175px; opacity: .4; }.code-panel pre { font-size: 7px; padding: 10px 12px; }.panel-bar { padding: 9px 11px; font-size: 6px; }.terminal { top: auto; bottom: 14%; right: -24px; width: 204px; opacity: .57; }.terminal pre { font-size: 6px; }.fragment-one { top: 32%; right: 5%; font-size: 6px; }.fragment-two { bottom: 25%; left: 7%; font-size: 7px; }.footer { left: 23px; right: 23px; bottom: 23px; font-size: 5px; letter-spacing: .4px; gap: 10px; }.footer-slash { margin-inline: 4px; }.footer-center { display: none; }.footer-end { gap: 5px; }.infinity { font-size: 12px; margin-left: 3px; }.space-orbit { width: 150vw; height: 38%; }.mark-one { right: 13%; bottom: 37%; }.mark-two { left: 12%; top: 40%; } }
@media(max-height:640px) and (min-width:701px) { .header { height: 65px; }.intro { top: 17%; }.intro h1 { font-size: 21px; margin-top: 10px; }.intro p { font-size: 7px; }.type-stage { width: min(63vw,850px); top: 54%; }.code-left { top: 29%; }.terminal { top: 58%; }.code-panel pre { font-size: 7px; line-height: 1.6; }.stage-top { margin-bottom: 8px; }.stage-bottom { margin-top: 7px; font-size: 8px; }.coordinates { font-size: 6px; }.footer { bottom: 18px; } }
@media(prefers-reduced-motion:reduce) { .scene { transform: none!important; }.intro,.coordinates { transform: none!important; }.type-stage { transform: translate(-50%,-50%)!important; }.terminal-cursor { animation: none; } }

/* Quiet composition: keep the interaction, remove visual noise and flashing. */
body { -webkit-touch-callout: none; }
.scene { transform: translate3d(var(--page-x),var(--page-y),0); }
.header, .intro, .footer { pointer-events: none; }
.type-stage { width: min(56vw,840px); }
.terminal-cursor { animation: none; }
.intro h1 { margin-block: 0; }
@media(max-width:1000px) { .type-stage { width: 66vw; } }
@media(max-width:700px) { .type-stage { width: 78vw; } }
@media(max-height:640px) and (min-width:701px) { .type-stage { width: min(53vw,700px); } }

/* Dragging keeps the hit area captured; release uses a real damped spring. */
.type-stage { cursor: grab; }
.type-stage.is-dragging, .type-stage.is-dragging .type-surface { cursor: grabbing; }
.type-surface {
  --pull-x: 0px; --pull-y: 0px; --pull-angle: 0deg;
  --pull-scale-x: 1; --pull-scale-y: 1;
  transform: translate3d(var(--pull-x),var(--pull-y),0) rotate(var(--pull-angle)) scale(var(--pull-scale-x),var(--pull-scale-y));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The word stays anchored. Only the pixels around the grab point stretch. */
.type-surface { transform: none; will-change: auto; }
.type-stage, .type-stage:focus, .type-stage:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
}
.intro { max-width: calc(100% - 48px); }
.intro h1 { max-width: 100%; line-height: 1.45; text-wrap: balance; }

/* Decode the existing phrases, instead of changing their meaning. */
.intro h1 > .headline-cell {
  display: inline-block;
  min-width: .95em;
  text-align: center;
  color: inherit;
  vertical-align: baseline;
  transform-origin: 50% 65%;
}
.intro h1 > .headline-cell.headline-accent { color: var(--green); }
.intro h1.is-switching { letter-spacing: -.7px; }

/* Restore the earlier springy grab-and-release interaction. */
.type-surface {
  transform: translate3d(var(--pull-x),var(--pull-y),0) rotate(var(--pull-angle)) scale(var(--pull-scale-x),var(--pull-scale-y));
  will-change: transform;
}
.intro h1 > .headline-cell { backface-visibility: hidden; white-space: pre; }