:root {
          --bg-color: #f2f4f6;
          --card-bg: #ffffff;
          --header-bg: #e5e7eb;
          --text-main: #1a1a1a;
          --text-muted: #555555;
          --accent-blue: #0044cc;
          --accent-teal: #008080;
          --accent-yellow: #fff3a3;
          --border-color: #d1d5db;
          --border-dark: #1a1a1a;
          --callout-bg: #fafafa;
          --grid-dot: #d1d5db;
          
          --font-body: 'Newsreader', Georgia, serif;
          --font-ui: 'Inter', -apple-system, sans-serif;
          --font-mono: 'Chivo Mono', monospace;
        }
        
        [data-theme="dark"] {
          --bg-color: #121316;
          --card-bg: #1c1e24;
          --header-bg: #272a30;
          --text-main: #e5e7eb;
          --text-muted: #9ca3af;
          --accent-blue: #6699ff;
          --accent-teal: #2dd4bf;
          --accent-yellow: #facc15;
          --border-color: #374151;
          --border-dark: #e5e7eb;
          --callout-bg: #232730;
          --grid-dot: #2a2e39;
        }
        
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
        
        body {
          background-color: var(--bg-color);
          color: var(--text-main);
          font-family: var(--font-body);
          font-size: 19px;
          line-height: 1.65;
          padding: 20px 10px;
          background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
          background-size: 24px 24px;
          transition: background-color 0.2s ease, color 0.2s ease;
        }
        
        .article-container {
          max-width: 820px;
          margin: 20px auto;
          background: var(--card-bg);
          border: 1px solid var(--border-dark);
          box-shadow: 4px 4px 0px var(--border-dark);
          border-radius: 4px;
          overflow: hidden;
          transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        
        .window-header {
          background: var(--header-bg);
          border-bottom: 1px solid var(--border-dark);
          padding: 8px 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: var(--font-mono);
          font-size: 0.8rem;
          color: var(--text-muted);
        }
        
        .window-title {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .status-dot {
          width: 8px;
          height: 8px;
          background-color: var(--accent-teal);
          border-radius: 50%;
          display: inline-block;
        }
        
        .theme-toggle-btn {
          font-family: var(--font-mono);
          font-size: 0.75rem;
          background: var(--card-bg);
          color: var(--text-main);
          border: 1px solid var(--border-dark);
          padding: 3px 8px;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 5px;
          box-shadow: 1px 1px 0px var(--border-dark);
          transition: all 0.1s ease;
        }
        
        .theme-toggle-btn:hover {
          transform: translate(-1px, -1px);
          box-shadow: 2px 2px 0px var(--border-dark);
        }
        
        .theme-toggle-btn:active {
          transform: translate(1px, 1px);
          box-shadow: 0px 0px 0px var(--border-dark);
        }
        
        .article-content {
          padding: 40px 30px;
        }
        
        @media (min-width: 640px) {
          .article-content {
            padding: 60px 50px;
          }
        }
        
        header.article-header {
          margin-bottom: 35px;
        }
        
        .tag {
          font-family: var(--font-mono);
          font-size: 0.75rem;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          background: var(--accent-yellow);
          color: #000000;
          padding: 4px 8px;
          border: 1px solid var(--border-dark);
          display: inline-block;
          margin-bottom: 16px;
          font-weight: 600;
        }
        
        h1.article-title {
          font-family: var(--font-ui);
          font-size: 2.5rem;
          font-weight: 700;
          line-height: 1.2;
          letter-spacing: -0.02em;
          color: var(--text-main);
          margin-bottom: 20px;
        }
        
        @media (min-width: 640px) {
          h1.article-title {
            font-size: 3.2rem;
          }
        }
        
        .byline-bar {
          display: flex;
          align-items: center;
          gap: 12px;
          font-family: var(--font-ui);
          font-size: 0.9rem;
          color: var(--text-muted);
          border-top: 1px solid var(--border-color);
          border-bottom: 1px solid var(--border-color);
          padding: 10px 0;
        }
        
        .byline-bar .author {
          color: var(--text-main);
          font-weight: 600;
        }
        
        .hero-image-box {
          margin-bottom: 35px;
        }
        
        .hero-image-box img {
          width: 100%;
          height: auto;
          max-height: 480px;
          object-fit: cover;
          display: block;
          border: 1px solid var(--border-dark);
        }
        
        .caption {
          font-family: var(--font-ui);
          font-size: 0.8rem;
          color: var(--text-muted);
          margin-top: 8px;
          line-height: 1.4;
        }
        
        .article-body p {
          margin-bottom: 1.5rem;
        }
        
        .article-body h2 {
          font-family: var(--font-ui);
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--text-main);
          margin: 40px 0 20px 0;
          padding-bottom: 6px;
          border-bottom: 2px solid var(--border-dark);
        }
        
        .img-left, .img-right {
          width: 100%;
          margin-bottom: 20px;
        }
        
        .img-left img, .img-right img {
          width: 100%;
          height: auto;
          display: block;
          border: 1px solid var(--border-dark);
        }
        
        .img-full {
          width: 100%;
          margin: 35px 0;
        }
        
        .img-full img {
          width: 100%;
          height: auto;
          display: block;
          border: 1px solid var(--border-dark);
        }
        
        @media (min-width: 600px) {
          .img-left {
            float: left;
            width: 45%;
            margin-right: 25px;
            margin-top: 8px;
          }
        
          .img-right {
            float: right;
            width: 45%;
            margin-left: 25px;
            margin-top: 8px;
          }
        }
        
        .pullquote {
          background: var(--callout-bg);
          border-left: 4px solid var(--accent-teal);
          border-top: 1px solid var(--border-color);
          border-right: 1px solid var(--border-color);
          border-bottom: 1px solid var(--border-color);
          padding: 20px 24px;
          margin: 35px 0;
          clear: both;
        }
        
        .pullquote p {
          font-family: var(--font-ui);
          font-size: 1rem;
          color: var(--text-main);
          margin-bottom: 0;
        }
        
        a {
          color: var(--accent-blue);
          text-decoration: underline;
          text-underline-offset: 3px;
        }
        
        a:hover {
          color: var(--text-main);
        }
        
        .action-button {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-family: var(--font-mono);
          font-size: 0.85rem;
          background: var(--card-bg);
          color: var(--text-main);
          border: 1px solid var(--border-dark);
          padding: 8px 16px;
          text-decoration: none;
          box-shadow: 2px 2px 0px var(--border-dark);
          transition: all 0.1s ease;
          margin: 5px;
        }
        
        .action-button:hover {
          transform: translate(-1px, -1px);
          box-shadow: 3px 3px 0px var(--border-dark);
        }
        
        .action-button:active {
          transform: translate(1px, 1px);
          box-shadow: 1px 1px 0px var(--border-dark);
        }
        
        footer.article-footer {
          margin-top: 50px;
          padding-top: 25px;
          border-top: 1px solid var(--border-color);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 15px;
          font-family: var(--font-ui);
          font-size: 0.85rem;
          color: var(--text-muted);
          clear: both;
        }

        .video-right {
          width: 100%;
          margin-bottom: 20px;
        }
        
        .video-container {
          position: relative;
          width: 100%;
          padding-bottom: 56.25%;
          height: 0;
          border: 1px solid var(--border-dark);
          background-color: #000;
          box-shadow: 2px 2px 0px var(--border-dark);
        }
        
        .video-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 0;
        }
        
        @media (min-width: 600px) {
          .video-right {
        float: right;
        width: 55%;
        margin-left: 25px;
        margin-top: 8px;
          }
          .video-left {
        float: left;
        width: 55%;
        margin-right: 25px;
        margin-top: 8px;
          }
        }