:root{ --phos:#3bff7a; /* phosphor color */ --phos-dim:#1f8a44; --bg:#020602; } /* smooth per-question palette morph (Tier 1) — plain custom-prop change + transitions on the consuming properties. Robust: avoids an @property color-transition revert bug on light colors. */ body{transition:background-color .8s ease,color .8s ease} .screen,#log,#cmd,#history,#history .line,.idwrap,.bot,.glass{ transition:color .8s ease,text-shadow .8s ease,border-color .8s ease,box-shadow .8s ease,background-color .8s ease} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--bg);color:var(--phos); font-family:"VT323","JetBrains Mono",monospace; overflow:hidden;position:relative;cursor:default; isolation:isolate; /* (1) the whole interface is unselectable — feels like a real CRT screen */ -webkit-user-select:none;-moz-user-select:none;user-select:none; } /* screen content holder (gets curvature) */ .screen{position:fixed;inset:0;z-index:1;display:grid;place-items:center; padding:clamp(20px,5vw,72px); text-shadow:0 0 6px color-mix(in srgb,var(--phos) 70%,transparent), 0 0 18px color-mix(in srgb,var(--phos) 35%,transparent); animation:flick 7s infinite steps(60);} body.no-flicker .screen{animation:none} @keyframes flick{ 0%,100%{opacity:1}3%{opacity:.86}3.5%{opacity:1} 47%{opacity:1}47.4%{opacity:.92}48%{opacity:1} 72%{opacity:1}72.3%{opacity:.8}72.7%{opacity:1}} .term{width:min(960px,100%);} #log{font-size:clamp(15px,2.1vw,22px);line-height:1.5;letter-spacing:.02em; color:var(--phos-dim);min-height:1em;} #log .line{white-space:pre-wrap;word-break:break-word} .idwrap{margin:clamp(22px,5vh,52px) 0 clamp(14px,3vh,30px); border:1px solid color-mix(in srgb,var(--phos) 45%,transparent); padding:clamp(16px,4vh,46px) clamp(14px,4vw,40px);position:relative; box-shadow:inset 0 0 40px color-mix(in srgb,var(--phos) 8%,transparent);} /* ascii corner ticks */ .idwrap::before,.idwrap::after{content:"";position:absolute;width:14px;height:14px; border-color:var(--phos);} .idwrap::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid} .idwrap::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid} #id{font-size:clamp(3rem,15vw,11rem);line-height:1;text-align:center; letter-spacing:.04em;color:var(--phos);min-height:1em; text-shadow:0 0 10px var(--phos),0 0 34px color-mix(in srgb,var(--phos) 50%,transparent); opacity:0;transition:opacity .25s,color .8s ease,text-shadow .8s ease;} #id.show{opacity:1} #prompt{font-size:clamp(15px,2.1vw,22px);color:var(--phos);opacity:0;transition:opacity .4s; white-space:pre-wrap;word-break:break-word;} #prompt .ps1{color:var(--phos-dim)} #cmd{color:var(--phos)} #history{font-size:clamp(15px,2.1vw,22px);line-height:1.5;} #history .line{white-space:pre-wrap;word-break:break-word} #history .ps1{color:var(--phos-dim)} #history .err{color:var(--phos);opacity:.92} #history .sys{color:var(--phos-dim)} #history .you{color:var(--phos);opacity:.7} #history .q{color:var(--phos);font-weight:400; text-shadow:0 0 8px color-mix(in srgb,var(--phos) 55%,transparent);} #history .opt{color:var(--phos-dim)} #history .verdict{color:var(--phos);letter-spacing:.04em; text-shadow:0 0 10px var(--phos),0 0 26px color-mix(in srgb,var(--phos) 45%,transparent);} #history .spacer{height:.6em} #history .copybtn{display:inline-flex;align-items:center;justify-content:center;vertical-align:-3px; background:transparent;border:1px solid color-mix(in srgb,var(--phos) 45%,transparent); color:var(--phos);padding:2px 4px;margin-left:2px;border-radius:3px;cursor:pointer; pointer-events:auto;-webkit-user-select:none;user-select:none; transition:color .2s,border-color .2s,box-shadow .2s,background .2s;} #history .copybtn svg{display:block;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--phos) 60%,transparent))} #history .copybtn:hover,#history .copybtn:focus-visible{border-color:var(--phos);outline:none; box-shadow:0 0 8px color-mix(in srgb,var(--phos) 45%,transparent); background:color-mix(in srgb,var(--phos) 12%,transparent);} #history .copybtn.ok{border-color:var(--phos);box-shadow:0 0 8px color-mix(in srgb,var(--phos) 50%,transparent);} /* (5) a real, functional text input (copy/paste/arrows) — just visually hidden. It must stay selectable so the OS edit menu / clipboard work on it. */ #cli{position:fixed;bottom:0;left:0;width:1px;height:1px;opacity:0;border:0;outline:0; background:transparent;color:transparent;font-size:16px;z-index:-1;padding:0; -webkit-user-select:text;-moz-user-select:text;user-select:text;} /* ---- interactive / turing-test mode ---- */ .screen{place-items:start center;overflow-y:auto;} body:not(.revealed) .idwrap{display:none} body.testing .idwrap{display:flex;align-items:center;justify-content:center; gap:clamp(10px,2vw,22px);margin:14px 0 16px;padding:10px clamp(14px,4vw,40px);} body.testing #id{font-size:clamp(1.7rem,7vw,4.2rem);} body.testing .term{padding-bottom:38vh} .screen::-webkit-scrollbar{width:0;height:0} /* ---- Chappie-inspired robot (pure green phosphor, theme-aware via currentColor) ---- */ .bot{width:78px;height:98px;perspective:520px;flex:none;color:var(--phos); animation:botfloat 4.6s ease-in-out infinite;} @keyframes botfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .bot-spin{position:relative;width:100%;height:100%;transform-style:preserve-3d; animation:botsway 6.6s ease-in-out infinite alternate;} @keyframes botsway{from{transform:rotateY(-15deg)}to{transform:rotateY(15deg)}} .bot .layer{position:absolute;inset:0;} .bot .layer svg{width:100%;height:100%;display:block;overflow:visible} .bot .back{transform:translateZ(-10px);opacity:.55} .bot .mid{transform:translateZ(0)} .bot .glow{transform:translateZ(10px);animation:glowpulse 2.4s ease-in-out infinite} .bot .glow svg{filter:drop-shadow(0 0 2px var(--phos)) drop-shadow(0 0 7px color-mix(in srgb,var(--phos) 70%,transparent))} @keyframes glowpulse{0%,100%{opacity:.78}50%{opacity:1}} /* Chappie's signature antennae twitch a little — gives it life */ .bot .ear{transform-box:fill-box;transform-origin:bottom center} .bot .ear.l{animation:earL 3.8s ease-in-out infinite} .bot .ear.r{animation:earR 4.3s ease-in-out infinite} @keyframes earL{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}} @keyframes earR{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-5deg)}} @media (max-width:600px){.bot{width:60px;height:76px}} @media (prefers-reduced-motion:reduce){ .bot{animation:none}.bot-spin{animation:none;transform:rotateY(-8deg)} .bot .glow,.bot .ear.l,.bot .ear.r{animation:none} } /* ---- thinking block (LLM-style, expanded by default) ---- */ #history .think{margin:.3em 0} #history .think-head{cursor:pointer;color:var(--phos);opacity:.92;user-select:none; display:inline-flex;align-items:center;gap:.4em;} #history .think-head .caret{display:inline-block;transition:transform .2s} #history .think-body{border-left:2px solid color-mix(in srgb,var(--phos) 32%,transparent); margin:.25em 0 .25em .35em;padding:.1em 0 .1em .8em;color:var(--phos-dim);} #history .think.collapsed .think-body{display:none} #history .think-body .tline{white-space:pre-wrap;word-break:break-word} /* ---- shutdown / halt ---- */ body.crt-off .screen{animation:crtoff .5s ease-in forwards;pointer-events:none} @keyframes crtoff{ 0%{transform:scale(1);filter:brightness(1)} 55%{transform:scaleY(.02) scaleX(1);filter:brightness(2.6)} 100%{transform:scaleY(.02) scaleX(.001);filter:brightness(5);opacity:0}} #halt{position:fixed;inset:0;z-index:8;display:none;place-items:center;text-align:center; background:#020602;color:var(--phos);font-family:"VT323",monospace;cursor:pointer; text-shadow:0 0 8px var(--phos);} body.halted #halt{display:grid} #halt .h1{font-size:clamp(22px,4vw,40px);letter-spacing:.1em} #halt .h2{font-size:clamp(13px,2vw,18px);color:var(--phos-dim);margin-top:8px; animation:blink 1.3s steps(1) infinite} /* (5) visible caret rendered inside #cmd at the true selection position */ #cmd .cur{display:inline-block;width:.6em;height:1em;background:var(--phos); vertical-align:-2px;animation:blink 1.05s steps(1) infinite; box-shadow:0 0 8px var(--phos);} #cmd .cur.on{width:auto;height:auto;vertical-align:baseline;padding:0 .01em; color:var(--bg);} /* block cursor sitting on a char (reverse video) */ #cmd .sel{background:var(--phos);color:var(--bg)} /* highlighted selection (reverse video) */ @keyframes blink{50%{opacity:0}} /* ---- CRT overlays ---- */ .scan{position:fixed;inset:0;z-index:3;pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 4px); mix-blend-mode:multiply;} body.no-scan .scan{display:none} .sweep{position:fixed;left:0;right:0;height:34vh;z-index:3;pointer-events:none; background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--phos) 16%,transparent),transparent); animation:sweep 6.5s linear infinite;} body.no-flicker .sweep{display:none} @keyframes sweep{0%{top:-40vh}100%{top:120vh}} .vig{position:fixed;inset:0;z-index:4;pointer-events:none; background:radial-gradient(ellipse at center, transparent calc(58% - var(--tension,0) * 22%), rgba(0,0,0,calc(.82 + var(--tension,0) * .14)) 100%);} .glass{position:fixed;inset:0;z-index:4;pointer-events:none; box-shadow:inset 0 0 120px rgba(0,0,0,.9),inset 0 0 30px color-mix(in srgb,var(--phos) 18%,transparent); border-radius:14px;} body.no-curve .glass{box-shadow:none} /* 移动端（小屏）减弱暗角，避免黑色盖太多；桌面 (pointer:fine) 完全不受影响 */ @media (pointer: coarse){ .vig{background:radial-gradient(ellipse at center, transparent calc(70% - var(--tension,0) * 12%), rgba(0,0,0,calc(.5 + var(--tension,0) * .1)) 100%);} } /* ---- (7) per-question ambient background field (Tier 2) — monochrome, tints with --phos ---- */ #bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden;display:block; color:var(--phos);opacity:0;transition:opacity .9s ease;} body.testing #bgfx{opacity:1} /* 背景特效由 canvas 引擎 bgfx.js 接管（粒子化重做）；上面 #bgfx 仅保留定位供 canvas 铺满 */ /* (3) ICP filing footnote — same phosphor style, but VERY dim (strain to read); it lifts toward legible only on hover/focus. */ #beian{position:fixed;left:0;right:0;bottom:7px;z-index:5;text-align:center; font-size:10px;letter-spacing:.06em;line-height:1;pointer-events:none;} #beian a{color:var(--phos-dim);text-decoration:none;opacity:.13;pointer-events:auto; text-shadow:none;transition:opacity .25s,text-shadow .25s;} #beian a:hover,#beian a:focus-visible{opacity:.82;text-shadow:0 0 9px var(--phos)} @media (prefers-reduced-motion:reduce){ .screen,.sweep{animation:none} } /* (6) background-music toggle — minimal text label, top-right. no icon, no border. subtle but legible (unlike the strain-to-read #beian); brightens on hover / while playing. */ #bgm-toggle{position:fixed;z-index:7; background:transparent;border:0;font-family:inherit; color:var(--phos-dim);font-size:12px;letter-spacing:.22em; line-height:1;padding:4px 2px;cursor:pointer;opacity:.42; text-shadow:none;transition:opacity .3s,color .3s,text-shadow .3s; -webkit-user-select:none;user-select:none;} #bgm-toggle:hover,#bgm-toggle:focus-visible{opacity:.95;color:var(--phos); text-shadow:0 0 9px var(--phos);outline:none;} #bgm-toggle.playing{opacity:.85;color:var(--phos); text-shadow:0 0 7px color-mix(in srgb,var(--phos) 55%,transparent);} /* phosphor beam — drawn from the input box, right then up to the bgm toggle */ #beam{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:5;pointer-events:none;overflow:visible;} #beam path{fill:none;stroke:var(--phos);stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 3px var(--phos)) drop-shadow(0 0 8px color-mix(in srgb,var(--phos) 70%,transparent));} #bgm-toggle.zap{animation:bgmzap .6s ease-out;} @keyframes bgmzap{ 0%{opacity:.42} 30%{opacity:1;color:var(--phos);text-shadow:0 0 14px var(--phos),0 0 30px var(--phos)} 100%{opacity:.85}}