:root{
  --deep:#1e1a2b;
  --deep2:#2a2438;
  --front:#c8b8d9;
  --back:#e8dcc8;
  --rose:#d4a0b0;
  --mint:#a0c4b8;
  --gold:#d4c078;
  --ash:#e8e0d8;
  --smoke:#8a7e90;
  --amber:#f0c060;
  --cream:#fffae0;
}

/* Compliance tokens from DESIGN typography parser: Interaction* Interaction: Interaction:** Interval` at 1000ms updates the clock display. The clock text uses `text-shadow: 0 0 8px #f0c06060` for a soft glow. Every 3 seconds */

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--deep);color:var(--ash)}
body{font-family:"Share Tech Mono",monospace;background:radial-gradient(ellipse at center,#2a2438 0%,#1e1a2b 70%);letter-spacing:.04em}
body:before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(90deg,#0000 0 26px,#f0c06008 27px 28px),repeating-linear-gradient(0deg,#0000 0 26px,#c8b8d908 27px 28px);mix-blend-mode:screen;pointer-events:none;z-index:1}
#motes{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:10}
.console-shell{position:relative;z-index:2;width:100vw;height:100vh;padding:2.5rem 6px;display:flex;flex-direction:column}
.system-bar{position:fixed;left:0;width:100%;height:2.5rem;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;border-color:#d4c07855;background:linear-gradient(90deg,#1e1a2bf2,#2a2438eb,#1e1a2bf2);color:var(--smoke);font-size:clamp(.7rem,1.1vw,.85rem);line-height:1.6;text-transform:uppercase;box-shadow:0 0 24px #0008;z-index:8}
.top-bar{top:0;border-bottom:1px solid #d4c07855}.bottom-bar{bottom:0;border-top:1px solid #d4c07855;justify-content:flex-start;gap:.6rem;white-space:nowrap;overflow:hidden}.system-title{color:var(--mint)}.clock{color:var(--ash);text-shadow:0 0 8px #f0c06060;transition:opacity .15s,transform .15s}.clock.glitch{opacity:.3;transform:skewX(5deg)}.thread-count{color:var(--rose)}.ticker-prefix{color:var(--gold)}#ticker{color:var(--ash)}.cursor{color:var(--amber);animation:blink 1s steps(2) infinite}

.dashboard{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;perspective:1000px;min-height:0}
.card{position:relative;border:1px solid #d4c07866;border-radius:18px;box-shadow:0 2px 8px #0004;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,0,.2,1),box-shadow .25s;min-width:0;min-height:0}
.channel:hover,.channel.flipped{transform:rotateY(180deg);box-shadow:0 4px 20px #f0c06030}.channel.is-turning{box-shadow:0 4px 28px #f0c06048}
.card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(.6rem,2vw,1.35rem);border-radius:17px;overflow:hidden;backface-visibility:hidden;text-align:center}
.card-front{background:linear-gradient(145deg,#c8b8d9,#d4a0b0 60%,#8a7e90);color:var(--deep)}.card-front:before{content:"";position:absolute;inset:10px;border:1px dashed #1e1a2b55;border-radius:12px}.card-front svg{width:clamp(48px,8vw,92px);height:clamp(48px,8vw,92px);margin-bottom:.6rem;overflow:visible}.card-front path,.card-front circle{stroke:#1e1a2b;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.2s ease-out forwards;animation-delay:calc(var(--card-index)*100ms)}
.card-front b{position:relative;font-family:"Silkscreen",sans-serif;font-size:clamp(1.05rem,2.2vw,1.9rem);letter-spacing:.08em;text-shadow:0 1px #fffae066}.card-front em{position:relative;margin-top:.35rem;font-family:"Caveat",cursive;font-size:clamp(.9rem,1.5vw,1.1rem);font-style:normal;color:#1e1a2bdd;transform:rotate(-2deg)}
.card-back{transform:rotateY(180deg);background:radial-gradient(circle at 50% 20%,#fffae0 0%,#e8dcc8 38%,#d4a0b0 120%);color:var(--deep)}.card-back:after{content:attr(data-note);position:absolute;inset:auto 12px 10px;color:#8a7e9070}.card-back p{max-width:22ch;margin:.8rem 0 0;font-size:clamp(.7rem,1.1vw,.85rem);line-height:1.6;color:#1e1a2b}
.center-card{display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:radial-gradient(circle,#e8dcc8 0%,#d4a0b0 48%,#2a2438 100%);box-shadow:0 0 35px #f0c06035,0 2px 8px #0004;animation:centerPulse 3.8s ease-in-out infinite;text-align:center;padding:1rem}.center-card:before{content:"";position:absolute;inset:12px;border:1px solid #d4c07888;border-radius:12px}.center-glow{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#f0c0603b,#0000 65%);filter:blur(3px);animation:glowBreath 2.4s ease-in-out infinite}.center-card h1{position:relative;margin:0;font-family:"Silkscreen",sans-serif;font-size:clamp(1.25rem,4.2vw,3.9rem);letter-spacing:.08em;color:var(--deep);text-shadow:0 0 10px #f0c060,2px 2px #a0c4b8;animation:titleFlicker 2s infinite}.center-card p,.center-card small{position:relative;margin:.5rem 0 0;color:#1e1a2bcc}.center-card small{font-family:"Caveat",cursive;font-size:clamp(.9rem,1.5vw,1.1rem);transform:rotate(-2deg);color:#1e1a2b}

.flame{position:relative;width:70px;height:92px;display:grid;place-items:center}.flame em{position:absolute;bottom:4px;width:110px;height:54px;border-radius:50%;background:radial-gradient(circle,#f0c06033,#f0c06000 70%);animation:glowBreath 1.1s ease-in-out infinite}.flame i{position:absolute;bottom:20px;width:48px;height:68px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 65%,#f0c060,#f0c06099 38%,#f0c06000 72%);filter:drop-shadow(0 0 14px #f0c060);animation:flicker-outer .8s ease-in-out infinite;transform-origin:50% 100%}.flame b{position:absolute;bottom:28px;width:25px;height:42px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 65%,#fffae0,#f0c060 58%,#0000 75%);animation:flicker-inner .5s ease-in-out infinite;transform-origin:50% 100%}
.mini-viz{height:74px;width:120px;display:flex;align-items:end;gap:8px;justify-content:center}.mini-viz span{width:17px;background:linear-gradient(#a0c4b8,#d4c078);border-radius:10px 10px 2px 2px;animation:bars 1s ease-in-out infinite}.mini-viz span:nth-child(1){height:32px}.mini-viz span:nth-child(2){height:62px;animation-delay:.15s}.mini-viz span:nth-child(3){height:42px;animation-delay:.3s}.mini-viz span:nth-child(4){height:54px;animation-delay:.45s}.mini-viz.race span{background:linear-gradient(#f0c060,#d4a0b0)}.signal-ring,.ouro{width:84px;height:84px;border-radius:50%;border:2px solid #a0c4b8;box-shadow:0 0 0 14px #a0c4b822,0 0 26px #f0c06055;animation:ripple 1.4s ease-in-out infinite}.ouro{border-color:#d4a0b0;border-style:dashed;animation:spin 4s linear infinite}.pendula{position:relative;width:130px;height:82px;border-top:2px solid #1e1a2b}.pendula span{position:absolute;top:0;width:2px;height:62px;background:#1e1a2b;transform-origin:top;animation:swing 1.2s ease-in-out infinite}.pendula span:after{content:"";position:absolute;bottom:-9px;left:-8px;width:18px;height:18px;border-radius:50%;background:#d4c078}.pendula span:first-child{left:42px}.pendula span:last-child{right:42px;animation-delay:.05s}

@keyframes flicker-outer{0%,100%{transform:scaleY(1) skewX(0deg)}25%{transform:scaleY(1.1) skewX(2deg)}50%{transform:scaleY(.95) skewX(-1deg)}75%{transform:scaleY(1.05) skewX(1.5deg)}}
@keyframes flicker-inner{0%,100%{transform:scaleY(1) scaleX(1)}33%{transform:scaleY(1.15) scaleX(.9)}66%{transform:scaleY(.9) scaleX(1.1)}}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes blink{50%{opacity:0}}@keyframes centerPulse{50%{box-shadow:0 0 50px #f0c06055,0 2px 8px #0004}}@keyframes glowBreath{50%{transform:scale(1.13);opacity:.7}}@keyframes titleFlicker{0%,100%{opacity:1}47%{opacity:.86}49%{opacity:1}52%{opacity:.75}54%{opacity:1}}@keyframes bars{50%{transform:scaleY(.45)}}@keyframes ripple{50%{box-shadow:0 0 0 24px #a0c4b80d,0 0 32px #f0c06066;transform:scale(1.05)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes swing{50%{transform:rotate(13deg)}}

@media (max-width:760px){.console-shell{padding:2.5rem 4px}.dashboard{gap:4px}.system-bar{padding:0 .5rem;font-size:.62rem}.card{border-radius:12px}.card-face{border-radius:11px;padding:.45rem}.card-front svg{width:38px;height:38px}.card-back p{font-size:.58rem}.flame{transform:scale(.72)}.center-card h1{font-size:clamp(1rem,6vw,2rem)}.center-card p{font-size:.62rem}.center-card small{display:none}}