THEME: chrome
NAME: Chrome Terminal
MOOD: Cyberpunk-command, red-neon, octagonal-frame, scan-bar, container-glitch, two-panel

DESCRIPTION:
A pure black background (#000) with two radial gradient hotspots — red at 15%/50%
(20% opacity) and yellow at 85%/30% (15% opacity) — creating asymmetric neon
bleed. Faint red grid overlay (1px lines at 0.05 opacity, 20px spacing). The
defining element is the octagonal clip-frame — an 8-point polygon with all four
corners cut at 20px, creating a faceted container. The main frame gets a
neutral-900 (#171717) bg, 2px red (#ff003c) border, and heavy 2xl box-shadow.
Yellow corner brackets (80px, 4px borders, rounded-xl outer corners) at TL and
BR only (diagonal). Scanlines overlay PLUS a moving scan-bar — a 5px-tall cyan
band that sweeps top-to-bottom over 6s, with cyan box-shadow glow. Container
micro-glitch via JS: random interval fires 3% chance per 100ms, translating the
whole frame ±4px and applying hue-rotate(90deg) for 50ms. Title in Orbitron
black-italic with -12deg skew, dual pseudo-element glitch using clip-path:inset.
Two-panel layout: hero area (flex-2) with surveillance image + HUD overlays, and
sidebar (flex-1) with stacked cards. Hero uses clip-angled-box (only bottom-right
corner cut). Yellow crosshair overlay in hero center (4 small bars pointing
inward + red center dot). Live badge is a yellow bg label with red pulsing dot.
Skewed accent bars: -20deg skewed yellow/red parallelograms as dividers and
decorations. Warning ticker: full-width bar with hazard stripes at 10% opacity,
mono warning text, and a skewed red alert icon block. Chat panel with inline
color-coded usernames [Name]: text pattern. Pink-outlined chrome card with yellow
icon border + progress bar (yellow hazard-stripe fill on dark track). Yellow
inverted CTA card with dot-grid pattern overlay. Footer has mirrored hazard
stripes in both corners (one scale-x-[-1]) and centered pulsing data message.
Floating ambient elements: pinging white dot (scale+fade), yellow vertical bar.

BEST FOR:
  - Command center / operations dashboards, mission control panels
  - Surveillance and monitoring interfaces, live feed displays
  - Cyberpunk-themed apps with hero + sidebar layout
  - Chat/comms panels with real-time message feeds
  - System status displays, warning/alert dashboards
  - Game companion apps, mission trackers, intel browsers
  - Any app that needs an active, glitching, scanning interface

NOT FOR:
  - Professional/enterprise dashboards — too themed and aggressive
  - Content-heavy editorial or reading apps — red neon fatigues eyes
  - Light-mode apps — committed to pure black background
  - Photography or product showcase — neon and glitch compete with imagery
  - Minimalist or monochrome apps — multi-neon + glitch is fundamental
  - Mobile-first compact layouts — two-panel needs width
  - Elegant or refined apps — deliberately raw and unstable

ADAPTATION NOTES:
  The octagonal clip-frame is the hero shape — it wraps the entire app in a
  faceted viewport. The scan-bar sweeping across adds constant motion and
  surveillance tension. The container micro-glitch makes everything feel
  unstable and alive. Two-panel layout: the larger panel is always the
  primary content (image, map, data viz), the smaller panel stacks cards
  vertically (chat, status, CTA). Skewed accent bars (-20deg) are used as
  dividers and decorative elements between sections. The warning ticker
  pattern appears between hero and content sections. Color hierarchy:
  yellow for headlines + hazard + primary data, red (#ff003c) for borders +
  alerts + structure, cyan for secondary data readouts + scan effects.

COLOR TOKENS (oklch):
  --bg:               oklch(0.00 0.000 0)     /* #000000 pure black */
  --bg-surface:       oklch(0.15 0.000 0)     /* #171717 neutral-900 frame bg */
  --bg-panel:         oklch(0.16 0.060 350)   /* #2a0a18 panel interior */
  --bg-dark:          oklch(0.09 0.040 340)   /* #12050e dark card bg */
  --bg-footer:        oklch(0.12 0.040 350)   /* #1a050c footer bg */
  --neon-red:         oklch(0.56 0.280 20)    /* #ff003c primary accent (redder) */
  --neon-yellow:      oklch(0.93 0.200 100)   /* #fcee0a headlines + hazard */
  --neon-cyan:        oklch(0.87 0.140 200)   /* #00f0ff data + scan bar */
  --border:           oklch(0.22 0.080 340)   /* #3d1326 default border */
  --border-red:       oklch(0.40 0.140 20)    /* red/50 subtle border */
  --text:             oklch(1.00 0.000 0)     /* #ffffff white text */
  --text-dim:         oklch(0.82 0.000 0)     /* gray-300 dim text */
  --text-muted:       oklch(0.65 0.000 0)     /* gray-400 muted */

REFERENCE STYLES:

  /* ===== BACKGROUND ===== */
  body {
    background-color: #000;
    background-image:
      radial-gradient(circle at 15% 50%, rgba(255, 0, 60, 0.2), transparent 25%),
      radial-gradient(circle at 85% 30%, rgba(252, 238, 10, 0.15), transparent 25%);
    font-family: 'Rajdhani', sans-serif;
    color: var(--text);
    overflow: hidden;
  }

  /* grid overlay */
  .grid-bg {
    background-size: 20px 20px;
    background-image:
      linear-gradient(to right, rgba(255, 0, 60, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 0, 60, 0.05) 1px, transparent 1px);
  }

  /* ===== OCTAGONAL CLIP-FRAME ===== */
  .clip-frame {
    clip-path: polygon(
      20px 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% calc(100% - 20px),
      calc(100% - 20px) 100%,
      20px 100%,
      0 calc(100% - 20px),
      0 20px
    );
  }

  .clip-corner-tr {
    clip-path: polygon(
      0 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% 100%,
      0 100%
    );
  }

  .clip-angled-box {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%
    );
  }

  /* ===== SCANLINES + SCAN BAR ===== */
  .scanlines {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,0.2) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
  }

  .scanline-bar {
    width: 100%;
    height: 5px;
    background: rgba(0, 240, 255, 0.3);
    position: absolute;
    top: 0; left: 0;
    animation: scan-down 6s linear infinite;
    opacity: 0.5;
    box-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
    z-index: 11;
  }

  @keyframes scan-down {
    0% { top: -10%; }
    100% { top: 110%; }
  }

  /* ===== GLITCH TITLE ===== */
  .glitch-text {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.05em;
    color: var(--neon-yellow);
    position: relative;
    transform: skewX(-12deg);
  }

  .glitch-text::before,
  .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }

  .glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 var(--neon-cyan);
    animation: glitch-a 2s infinite linear alternate-reverse;
  }

  .glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 var(--neon-red);
    animation: glitch-b 3s infinite linear alternate-reverse;
  }

  @keyframes glitch-a {
    0%   { clip-path: inset(20% 0 80% 0); }
    20%  { clip-path: inset(60% 0 10% 0); }
    40%  { clip-path: inset(40% 0 50% 0); }
    60%  { clip-path: inset(80% 0 5% 0); }
    100% { clip-path: inset(10% 0 40% 0); }
  }

  @keyframes glitch-b {
    0%   { clip-path: inset(10% 0 60% 0); }
    20%  { clip-path: inset(30% 0 20% 0); }
    40%  { clip-path: inset(70% 0 10% 0); }
    60%  { clip-path: inset(20% 0 50% 0); }
    100% { clip-path: inset(50% 0 30% 0); }
  }

  /* ===== CONTAINER MICRO-GLITCH (JS) ===== */
  /*
    setInterval(() => {
      if (Math.random() > 0.97) {
        const x = (Math.random() - 0.5) * 4;
        const y = (Math.random() - 0.5) * 4;
        container.style.transform = `translate(${x}px, ${y}px)`;
        container.style.filter = 'hue-rotate(90deg)';
        setTimeout(() => {
          container.style.transform = 'none';
          container.style.filter = 'none';
        }, 50);
      }
    }, 100);
  */

  /* ===== GLOW EFFECTS ===== */
  .text-glow-yellow { text-shadow: 0 0 5px var(--neon-yellow); }
  .text-glow-red { text-shadow: 0 0 5px var(--neon-red); }
  .box-glow-red { box-shadow: 0 0 10px var(--neon-red), inset 0 0 5px var(--neon-red); }
  .box-glow-yellow { box-shadow: 0 0 10px var(--neon-yellow); }

  /* ===== HEADER ===== */
  .header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 0, 60, 0.3);
    background: var(--bg-dark);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* skewed divider bar */
  .skew-divider {
    width: 4px;
    height: 3rem;
    background: var(--neon-red);
    transform: skewX(-20deg);
  }

  .subtitle-label {
    display: inline-block;
    background: var(--neon-red);
    color: #000;
    padding: 2px 0.5rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.3em;
    transform: skewX(-12deg);
  }

  /* header stats */
  .header-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--neon-cyan);
  }

  .stat-divider {
    width: 1px;
    height: 2rem;
    background: rgba(255, 0, 60, 0.5);
  }

  .wifi-icon-box {
    width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--neon-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(252, 238, 10, 0.1);
  }

  /* ===== TWO-PANEL LAYOUT ===== */
  .two-panel {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    flex: 1;
    overflow: hidden;
  }

  .panel-hero { flex: 2; display: flex; flex-direction: column; gap: 1rem; }
  .panel-side { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 1rem; }

  /* ===== HERO AREA ===== */
  .hero {
    flex: 1;
    position: relative;
    background: #000;
    border: 2px solid var(--border);
    overflow: hidden;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.8;
    transition: opacity 0.5s;
  }

  .hero:hover .hero-image { opacity: 1; }

  .hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-dark), transparent);
  }

  /* yellow crosshair */
  .crosshair {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6rem; height: 6rem;
    border: 1px solid rgba(252, 238, 10, 0.3);
    pointer-events: none;
  }

  .crosshair .bar {
    position: absolute;
    background: rgba(252, 238, 10, 0.5);
  }

  .crosshair .bar-t { top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 12px; }
  .crosshair .bar-b { bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 12px; }
  .crosshair .bar-l { left: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 4px; }
  .crosshair .bar-r { right: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 4px; }

  .crosshair .center-dot {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4px; height: 4px;
    background: var(--neon-red);
    border-radius: 9999px;
  }

  /* live badge */
  .live-badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--neon-yellow);
    color: #000;
    padding: 2px 0.5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .live-badge .dot {
    width: 0.5rem; height: 0.5rem;
    background: #ef4444;
    border-radius: 9999px;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* signal strength bars */
  .signal-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .signal-bar .bar-fill {
    height: 4px;
    border-radius: 0;
  }

  .signal-bar .label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
  }

  /* ===== WARNING TICKER ===== */
  .warning-ticker {
    height: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .warning-ticker .skew-bar {
    width: 0.5rem; height: 100%;
    background: var(--neon-yellow);
    transform: skewX(-20deg);
  }

  .warning-ticker .content {
    flex: 1; height: 100%;
    background: var(--bg-panel);
    border: 1px solid rgba(255, 0, 60, 0.5);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: relative;
    overflow: hidden;
  }

  .warning-ticker .content .stripes {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      45deg, var(--neon-yellow), var(--neon-yellow) 10px, #000 10px, #000 20px
    );
    opacity: 0.1;
  }

  .warning-ticker .alert-icon {
    width: 3rem; height: 100%;
    background: var(--neon-red);
    transform: skewX(-20deg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== CHAT PANEL ===== */
  .chat-panel {
    background: var(--bg-panel);
    border: 1px solid var(--neon-red);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.3s;
  }

  .chat-panel:hover { border-color: var(--neon-yellow); }

  .chat-label {
    position: absolute;
    top: -0.75rem; left: 1rem;
    background: var(--neon-red);
    color: #000;
    padding: 0 0.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    transform: skewX(-12deg);
  }

  .chat-feed {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    padding-top: 1.5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
  }

  .chat-msg {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .chat-msg .user { font-weight: 700; }
  .chat-msg .user.yellow { color: var(--neon-yellow); }
  .chat-msg .user.cyan { color: var(--neon-cyan); }
  .chat-msg .user.red { color: var(--neon-red); }
  .chat-msg .text { color: var(--text-dim); }

  /* progress indicator at bottom of chat */
  .chat-progress {
    height: 4px;
    background: rgba(255, 0, 60, 0.2);
    position: relative;
  }

  .chat-progress .fill {
    position: absolute;
    height: 100%;
    width: 33%;
    background: var(--neon-red);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* ===== CHROME CARD ===== */
  .chrome-card {
    background: var(--neon-red);
    padding: 2px;
  }

  .chrome-card-inner {
    height: 100%;
    background: var(--bg-dark);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
  }

  .chrome-icon {
    width: 5rem; height: 5rem;
    flex-shrink: 0;
    border: 2px solid var(--neon-yellow);
    border-radius: 0.5rem;
    background: rgba(252, 238, 10, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
  }

  .chrome-card:hover .chrome-icon { transform: scale(1.05); }

  /* ===== YELLOW CTA CARD ===== */
  .cta-card {
    background: var(--neon-yellow);
    color: #000;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
  }

  .cta-card:hover { transform: scale(1.01); }

  .cta-card .dot-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: radial-gradient(#000 1px, transparent 1px);
    background-size: 8px 8px;
  }

  .cta-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
  }

  .cta-card .icon-btn {
    width: 2rem; height: 2rem;
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
  }

  .cta-card .icon-btn:hover {
    background: #000;
    color: var(--neon-yellow);
  }

  /* ===== FOOTER ===== */
  .footer {
    height: 4rem;
    background: var(--bg-footer);
    border-top: 2px solid var(--neon-red);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0 1.5rem;
  }

  .footer .stripes-left,
  .footer .stripes-right {
    position: absolute;
    height: 100%;
    width: 8rem;
    background: repeating-linear-gradient(
      45deg, var(--neon-yellow), var(--neon-yellow) 10px, #000 10px, #000 20px
    );
    opacity: 0.8;
  }

  .footer .stripes-left { left: 0; bottom: 0; }
  .footer .stripes-right { right: 0; bottom: 0; transform: scaleX(-1); }

  .footer .msg {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.875rem;
    color: var(--neon-yellow);
    letter-spacing: 0.2em;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* ===== HAZARD STRIPES ===== */
  .warning-stripes {
    background: repeating-linear-gradient(
      45deg, var(--neon-yellow), var(--neon-yellow) 10px, #000 10px, #000 20px
    );
  }

  /* ===== FLOATING AMBIENT ELEMENTS ===== */
  .ping-dot {
    position: absolute;
    width: 0.5rem; height: 0.5rem;
    background: #fff;
    border-radius: 9999px;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.5;
    pointer-events: none;
  }

  @keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* ===== CORNER BRACKETS (diagonal pair) ===== */
  .corner-tl {
    position: absolute;
    top: 0; left: 0;
    width: 5rem; height: 5rem;
    border-top: 4px solid var(--neon-yellow);
    border-left: 4px solid var(--neon-yellow);
    border-top-left-radius: 0.75rem;
    pointer-events: none;
    opacity: 0.8;
  }

  .corner-br {
    position: absolute;
    bottom: 0; right: 0;
    width: 5rem; height: 5rem;
    border-bottom: 4px solid var(--neon-yellow);
    border-right: 4px solid var(--neon-yellow);
    border-bottom-right-radius: 0.75rem;
    pointer-events: none;
    opacity: 0.8;
  }

DESIGN PRINCIPLES:
  1. OCTAGONAL CLIP-FRAME — the main container uses an 8-point polygon
     (all four corners faceted at 20px). Cards use partial variants
     (clip-corner-tr, clip-angled-box). This is the signature shape.
  2. SCAN BAR — a 5px cyan bar sweeps top-to-bottom over 6s on the hero
     area. Combined with static scanlines. Creates active surveillance feel.
  3. CONTAINER MICRO-GLITCH — JS-driven random jitter (±4px translate +
     hue-rotate(90deg) for 50ms). Fires at ~3% chance per 100ms. Makes
     the whole interface feel unstable and alive.
  4. TWO-PANEL LAYOUT — hero (flex-2) + sidebar (flex-1). Hero for primary
     visual content, sidebar for stacked intel cards. Always side-by-side
     on desktop, stacked on mobile.
  5. THREE NEON COLORS — red (#ff003c) for borders, alerts, structure.
     Yellow (#fcee0a) for headlines, hazard, CTAs. Cyan (#00f0ff) for
     data readouts, scan effects, secondary info.
  6. SKEWED ACCENT BARS — -20deg skewed parallelograms in yellow and red,
     used as dividers, warning icons, and decorative elements.
  7. WARNING TICKER — full-width bar with hazard stripes at low opacity,
     mono warning text, and a skewed red alert icon block.
  8. CROSSHAIR HUD — yellow-bordered square with 4 directional bars and
     a red center dot, overlaid on hero area for targeting feel.
  9. YELLOW CTA CARDS — inverted cards (yellow bg, black text) with
     dot-grid pattern overlay and Orbitron black-weight type.
  10. DIAGONAL CORNER BRACKETS — yellow brackets at TL and BR only
      (diagonal pair), with rounded outer corners.

EXAMPLE SKELETON JSX:

  function App() {
    const containerRef = React.useRef(null);

    React.useEffect(() => {
      const el = containerRef.current;
      if (!el) return;
      const id = setInterval(() => {
        if (Math.random() > 0.97) {
          const x = (Math.random() - 0.5) * 4;
          const y = (Math.random() - 0.5) * 4;
          el.style.transform = `translate(${x}px, ${y}px)`;
          el.style.filter = 'hue-rotate(90deg)';
          setTimeout(() => {
            el.style.transform = 'none';
            el.style.filter = 'none';
          }, 50);
        }
      }, 100);
      return () => clearInterval(id);
    }, []);

    return (
      <div className="grid-bg" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <main ref={containerRef} className="clip-frame"
              style={{ width: '100%', maxWidth: '80rem', height: '90vh', background: 'var(--bg-surface)', border: '2px solid var(--neon-red)', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column', position: 'relative' }}>

          <div className="corner-tl" />
          <div className="corner-br" />

          {/* header */}
          <header className="header">
            <div className="header-left">
              <h1 className="glitch-text" data-text="APP TITLE"
                  style={{ fontSize: '3.75rem' }}>APP TITLE</h1>
              <div className="skew-divider" />
              <div>
                <span className="subtitle-label">SUBTITLE</span>
                <span className="text-glow-red" style={{ display: 'block', fontSize: '0.875rem', color: 'var(--neon-red)', letterSpacing: '0.2em', marginTop: '0.25rem' }}>
                  Secondary Text
                </span>
              </div>
            </div>
            <div className="header-stats">
              <div style={{ textAlign: 'right' }}>
                <div style={{ opacity: 0.6 }}>NET_STATUS</div>
                <div style={{ color: 'var(--neon-yellow)', fontWeight: 700 }}>CONNECTED</div>
              </div>
              <div className="stat-divider" />
              <div className="wifi-icon-box">📡</div>
            </div>
          </header>

          {/* two-panel layout */}
          <div className="two-panel">
            <div className="panel-hero">
              <div className="hero clip-angled-box" style={{ flex: 1 }}>
                <div className="scanlines" style={{ position: 'absolute', inset: 0 }} />
                <div className="scanline-bar" />
                <div className="hero-gradient" />
                <div className="live-badge"><div className="dot" /> LIVE FEED</div>
                <div className="crosshair">
                  <div className="bar bar-t" /><div className="bar bar-b" />
                  <div className="bar bar-l" /><div className="bar bar-r" />
                  <div className="center-dot" />
                </div>
              </div>
              <div className="warning-ticker">
                <div className="skew-bar" />
                <div className="content">
                  <div className="stripes" />
                  <span style={{ color: 'var(--neon-red)', fontFamily: 'Share Tech Mono', fontSize: '0.75rem', letterSpacing: '0.1em', position: 'relative', zIndex: 1 }}>
                    WARNING: UNAUTHORIZED ACCESS
                  </span>
                </div>
                <div className="alert-icon">⚠</div>
              </div>
            </div>

            <div className="panel-side">
              <div className="chat-panel clip-corner-tr" style={{ flex: 1 }}>
                <div className="chat-label">CHAT FEED</div>
                <div className="chat-feed">
                  <div className="chat-msg"><span className="user yellow">[User1]:</span> <span className="text">Message here</span></div>
                  <div className="chat-msg"><span className="user cyan">[User2]:</span> <span className="text">Reply here</span></div>
                </div>
                <div className="chat-progress"><div className="fill" /></div>
              </div>

              <div className="cta-card clip-corner-tr">
                <div className="dot-pattern" />
                <h3 style={{ fontSize: '1.5rem', lineHeight: 1 }}>ACTION<br/>ITEM</h3>
                <span style={{ fontFamily: 'Share Tech Mono', fontSize: '10px', opacity: 0.6 }}>Details here</span>
              </div>
            </div>
          </div>

          {/* footer */}
          <footer className="footer">
            <div className="stripes-left" />
            <div className="stripes-right" />
            <span className="msg">&lt;&lt; STATUS MESSAGE &gt;&gt;</span>
          </footer>

          <div className="ping-dot" style={{ top: '25%', left: '2rem' }} />
        </main>
      </div>
    );
  }

PERSONALITY:
  Chrome feels like a command center terminal in a cyberpunk operations room.
  The octagonal frame is armored, faceted, military-grade. The scan bar sweeps
  like a surveillance camera, always watching. The container glitch makes
  everything feel like it could crash at any moment — unstable, dangerous,
  alive. The two-panel layout is command-and-control: primary intel on the
  left, stacked comms and status on the right. Skewed accent bars are
  aggressive, angular, never at rest. Red dominates the structure while
  yellow screams from headlines and warnings. Cyan is cold data whispered
  in the margins. The warning ticker and hazard stripes say: you are in
  a restricted zone. The crosshair says: you are targeting something.

ANIMATIONS:
  - glitch-text: dual clip-path:inset cycling on pseudo-elements (2s + 3s, infinite, linear, alternate-reverse)
  - scan-down: translateY from -10% to 110% (6s linear infinite) on cyan scan bar
  - container-glitch: JS random translate(±4px) + hue-rotate(90deg) for 50ms (~3% per 100ms)
  - pulse: 2s cubic-bezier opacity (live dots, footer text, chat progress)
  - ping: scale(2) + opacity(0) at 75-100% (1s cubic-bezier, infinite) for ambient dots
  - hover transitions: opacity 0.5s, border-color 0.3s, transform 0.3s, scale 1.01

SVG ELEMENTS:
  - None required — CSS-only effects (clip-paths, gradients, skew transforms)
  - Optional: crosshair SVG for hero overlay
  - Optional: alert-triangle SVG for warning ticker icon

GOOGLE FONTS:
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

  Orbitron — display headlines (black weight, italic, skewed), card titles, subtitle labels
  Rajdhani — body text, UI labels, descriptions, general content
  Share Tech Mono — data readouts, status text, chat messages, warning ticker, system info
