*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#000000;--card-bg:rgba(15, 15, 25, 0.92);--accent-green:#4ade80;--accent-cyan:#22d3ee;--accent-green-soft:rgba(74, 222, 128, 0.35);--text-main:#f5f5f5;--text-muted:#9ca3af;--border-subtle:rgba(148, 163, 184, 0.2);--radius-xl:24px;--card-padding-x:28px}body{min-height:100vh;background:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text-main);display:flex;align-items:center;justify-content:center;padding:16px;position:relative}#matrixCanvas{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5}.shell{max-width:540px;width:100%;position:relative;z-index:1}.card{background:var(--card-bg);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);box-shadow:0 24px 60px rgb(0 0 0 / .8),0 0 0 1px rgb(15 23 42 / .8);padding:28px var(--card-padding-x) 24px;backdrop-filter:blur(22px);position:relative;overflow:hidden;animation:fadeInUp 0.7s ease-out forwards;transform:translateY(8px);opacity:0;padding-bottom:0}.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at top left,rgb(148 163 184 / .18),transparent 55%),radial-gradient(circle at bottom right,rgb(15 23 42 / .75),transparent 55%);opacity:.9;z-index:-1}.badge-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid rgb(148 163 184 / .45);background:radial-gradient(circle at top,rgb(148 163 184 / .28),rgb(15 23 42 / .9));font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.badge-dot{width:8px;height:8px;border-radius:999px;background:radial-gradient(circle at center,#4ade80,#16a34a);box-shadow:0 0 10px #4ade80}.badge-pill{padding:4px 10px;border-radius:999px;border:1px solid rgb(37 99 235 / .7);background:radial-gradient(circle at top,rgb(59 130 246 / .28),rgb(15 23 42 / .9));font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#bfdbfe}.headline{margin-bottom:14px}.headline-title{font-size:26px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:14px}.console-output{margin-top:10px;font-size:13px;color:var(--accent-green);font-family:'Courier New',monospace;max-height:100px;overflow-y:auto;border:1px solid rgb(74 222 128 / .2);padding:8px;background:rgb(0 0 0 / .1);scrollbar-width:thin;scrollbar-color:rgb(74 222 128 / .4) #fff0}.console-output::-webkit-scrollbar{width:6px}.console-output::-webkit-scrollbar-track{background:#fff0}.console-output::-webkit-scrollbar-thumb{background-color:rgb(74 222 128 / .4);border-radius:10px;border:1px solid rgb(74 222 128 / .2)}.console-output::-webkit-scrollbar-thumb:hover{background-color:rgb(74 222 128 / .6)}.log-entry{white-space:pre;display:block;line-height:1.4}.image-shell{margin:22px 0 22px;border-radius:20px;padding:1px;background:radial-gradient(circle at center,var(--accent-green-soft),transparent 60%);border:1px solid rgb(74 222 128 / .35);box-shadow:0 0 12px rgb(74 222 128 / .55),0 0 28px rgb(74 222 128 / .25)}.image-shell-inner{border-radius:16px;overflow:hidden;background:#000;padding:10px;position:relative}img.hero{display:block;width:100%;height:auto}.activity-container{margin:20px calc(-1 * var(--card-padding-x)) 0;padding:10px var(--card-padding-x) 24px;border-top:1px dashed rgb(74 222 128 / .3);background:rgb(0 0 0 / .25);border-bottom-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}.graph-label-row{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;font-weight:600}.label-cpu{color:var(--accent-green)}.label-net{color:var(--accent-cyan)}.graph-wrapper{display:flex;gap:15px}.graph-shell{flex:1;display:flex;align-items:flex-end;gap:3px;height:40px;border-bottom:1px solid var(--border-subtle)}.graph-bar{width:4px;transform-origin:bottom;animation:activityPulse 2.0s linear infinite}.cpu-bar{background-color:var(--accent-green);box-shadow:0 0 4px var(--accent-green)}.net-bar{background-color:var(--accent-cyan);box-shadow:0 0 4px var(--accent-cyan)}.graph-bar:nth-child(even){animation-delay:0.2s}.graph-bar:nth-child(3n){animation-delay:0.5s}.graph-bar:nth-child(5n){animation-delay:0.8s}.graph-bar:nth-child(7n){animation-delay:1.1s}.storage-container{margin-top:20px;padding-top:15px;border-top:1px dashed rgb(148 163 184 / .2);display:flex;flex-direction:column;gap:12px}.progress-bar-shell{display:grid;grid-template-columns:80px 1fr 40px;align-items:center;gap:10px}.storage-label{font-size:11px;color:var(--text-muted);text-transform:uppercase}.progress-bar-bg{height:6px;background:rgb(148 163 184 / .1);border-radius:3px;overflow:hidden}.progress-bar{height:100%;transition:width 0.8s ease-in-out;border-radius:3px}.storage-value{font-size:11px;text-align:right;font-family:'Courier New',monospace;color:var(--text-main)}.ram-color{background-color:#3b82f6;box-shadow:0 0 5px rgb(59 130 246 / .8)}.ssd-color{background-color:#fcd34d;box-shadow:0 0 5px rgb(252 211 77 / .8)}@keyframes activityPulse{0%{height:10%}25%{height:90%}50%{height:45%}75%{height:70%}100%{height:15%}}@keyframes fadeInUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width:400px){:root{--card-padding-x:16px}body{padding:10px}.headline-title{font-size:22px}.badge-row{margin-bottom:14px}.badge,.badge-pill{font-size:10px;padding:3px 8px}.console-output{font-size:12px}.progress-bar-shell{grid-template-columns:70px 1fr 35px;gap:8px}.storage-label{font-size:10px}.graph-wrapper{gap:10px}.graph-bar{width:3px}}