:root {
    --bg-color: #e0e7ff;
    --primary: #8b5cf6;
    --accent: #facc15;
    --secondary: #ff6b6b;
    --green: #4ade80;
    --black: #111111;
    --white: #ffffff;
    --border-color: var(--black);
    --border: 3px solid var(--border-color);
    --shadow-color: var(--black);
    --shadow: 5px 5px 0px 0px var(--shadow-color);
    --shadow-hover: 8px 8px 0px 0px var(--shadow-color);
    --shadow-active: 2px 2px 0px 0px var(--shadow-color);
    --pattern-bg: var(--primary);
    --pattern-dot: var(--black);
    --theme-glow: none;
    --card-radius: 0px;
}
body.dark-mode {
    --bg-color: #1a1a1a; --black: #ffffff; --white: #111111;
    --primary: #a78bfa; --accent: #facc15; --secondary: #ff6b6b;
    --border-color: #ffffff; --border: 3px solid var(--border-color);
    --shadow-color: #ffffff; --shadow: 5px 5px 0px 0px var(--shadow-color);
    --shadow-hover: 8px 8px 0px 0px var(--shadow-color);
    --shadow-active: 2px 2px 0px 0px var(--shadow-color);
    --pattern-bg: #2e1065; --pattern-dot: #ffffff; --theme-glow: none;
}
body.terminal-mode {
    --bg-color: #050505; --black: #00ff41; --white: #0a0a0a;
    --primary: #008f11; --accent: #00ff41; --secondary: #003b00;
    --border-color: #00ff41; --border: 3px solid var(--border-color);
    --shadow-color: #00ff41; --shadow: 5px 5px 0px 0px var(--shadow-color);
    --shadow-hover: 8px 8px 0px 0px var(--shadow-color);
    --shadow-active: 2px 2px 0px 0px var(--shadow-color);
    --pattern-bg: #001100; --pattern-dot: #00ff41;
    --theme-glow: 0 0 5px #00ff41;
}
body.alchemist-mode {
    --bg-color: #1a0f00; --black: #ffb300; --white: #2d1b00;
    --primary: #d48806; --accent: #ffd700; --secondary: #5e3a00;
    --border-color: #ffb300; --border: 3px solid var(--border-color);
    --shadow-color: #ffb300; --shadow: 5px 5px 0px 0px var(--shadow-color);
    --shadow-hover: 8px 8px 0px 0px var(--shadow-color);
    --shadow-active: 2px 2px 0px 0px var(--shadow-color);
    --pattern-bg: #3d2600; --pattern-dot: #ffb300;
    --theme-glow: 0 0 10px rgba(255,179,0,0.6);
}
body.retro-mode {
    --bg-color: #eeeeee; --black: #000000; --white: #ffffff;
    --primary: #0000ee; --accent: #ffffcc; --secondary: #cc0000;
    --border-color: #cccccc; --border: 1px solid var(--border-color);
    --shadow: none; --shadow-hover: none; --shadow-active: none;
    --pattern-bg: #eeeeee; --pattern-dot: transparent;
}
body.journal-mode {
    --bg-color: #f4f1ea; --black: #2b2b2b; --white: #faf9f6;
    --primary: #4a4a4a; --accent: #e5e0d5; --secondary: #6b6b6b;
    --border-color: #2b2b2b; --border: 1px solid var(--border-color);
    --shadow: none; --shadow-hover: none; --shadow-active: none;
    --pattern-bg: #f4f1ea; --pattern-dot: transparent; --theme-glow: none;
}
body.journal-mode { font-family:'Ibarra Real Nova','Georgia','Times New Roman',Times,serif; line-height:1.4; }
body.journal-mode h1,body.journal-mode h2,body.journal-mode h3,body.journal-mode h4 { font-family:'Playfair Display','Georgia',serif; text-transform:none; letter-spacing:-0.02em; border-bottom:4px double var(--black); padding-bottom:5px; font-weight:800; }
body.journal-mode .navbar { background:var(--bg-color); border-bottom:4px double var(--black); }
body.journal-mode .logo { background:none; border:none; box-shadow:none; font-family:serif; font-variant:small-caps; font-size:2.2rem; text-decoration:none; border-bottom:2px solid var(--black); }
body.journal-mode .hero-box,body.journal-mode .about-text-box,body.journal-mode .project-card,body.journal-mode .service-stream-box { border:1px solid var(--black); background:transparent; box-shadow:none; padding:20px; }
body.journal-mode .portfolio-grid,body.journal-mode .services-grid { column-count:3; column-gap:2rem; column-rule:1px solid #ccc; display:block; }
@media(max-width:900px){body.journal-mode .portfolio-grid,body.journal-mode .services-grid{column-count:2;}}
@media(max-width:600px){body.journal-mode .portfolio-grid,body.journal-mode .services-grid{column-count:1;}}
body.journal-mode .project-card,body.journal-mode .service-stream-box { display:inline-block; width:100%; margin-bottom:2rem; break-inside:avoid; border:none; border-bottom:1px solid #ccc; padding:0 0 1.5rem 0; }
body.journal-mode img { filter:grayscale(1) contrast(1.5) brightness(0.9) sepia(0.2); mix-blend-mode:multiply; opacity:0.85; }
body.journal-mode .about-image-box { box-shadow:none; border:2px solid var(--black); padding:5px; }
body.journal-mode .btn { border:1px solid var(--black); background:transparent; color:var(--black); text-decoration:none; box-shadow:none; text-transform:uppercase; font-size:0.8rem; font-weight:bold; border-radius:0; }
body.journal-mode .btn:hover { background:var(--black); color:var(--white); transform:none; }
body.journal-mode .highlight,body.journal-mode .highlight-alt { background:transparent; color:inherit; text-decoration:underline; text-decoration-style:double; padding:0; }
body.journal-mode .tag,body.journal-mode .manifesto-tag { background:transparent; color:var(--black); border:1px solid var(--black); font-style:italic; font-size:0.7rem; padding:1px 5px; }
body.retro-mode * { box-shadow:none !important; border-radius:0 !important; }
body.retro-mode .navbar { border-bottom:1px solid #ccc; padding:5px 0; background:#f8f8f8; }
body.retro-mode .logo { background:none; border:none; color:#000; text-decoration:underline; font-family:serif; }
body.retro-mode .hero-box,body.retro-mode .about-text-box,body.retro-mode .project-card,body.retro-mode .service-stream-box { border:1px solid #ccc; background:#fff; padding:20px; }
body.retro-mode .btn { border:1px solid #666; background:#efefef; color:#000; padding:5px 10px; font-family:serif; text-transform:none; }
body.retro-mode .btn:hover { background:#ddd; transform:none; }
body.retro-mode h1,body.retro-mode h2,body.retro-mode h3 { font-family:serif; text-transform:none; letter-spacing:normal; }
body.retro-mode a { color:#0000ee; text-decoration:underline; text-underline-offset:1px; }
body.alchemist-mode h1,body.alchemist-mode h2,body.alchemist-mode h3,body.terminal-mode h1,body.terminal-mode h2,body.terminal-mode h3 { text-shadow:var(--theme-glow); }
body.dark-mode .bg-pattern,body.terminal-mode .bg-pattern,body.alchemist-mode .bg-pattern { background-color:var(--pattern-bg); background-image:radial-gradient(var(--pattern-dot) 15%,transparent 16%),radial-gradient(var(--pattern-dot) 15%,transparent 16%); }
a { color:var(--black); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; transition:all 0.15s ease-in-out; }
a:hover { background-color:var(--accent); color:#111111; text-decoration-color:transparent; box-shadow:4px 4px 0px var(--black); padding:0 4px; }
body.dark-mode a,body.terminal-mode a,body.alchemist-mode a { color:var(--black); }
body.dark-mode a:hover,body.terminal-mode a:hover,body.alchemist-mode a:hover { background-color:var(--primary); color:#ffffff; box-shadow:4px 4px 0px var(--accent); }
.nav-links a,.logo,.btn,.filter-btn { text-decoration:none; }
.nav-links a:hover { background:transparent; box-shadow:none; color:var(--primary); }
*{margin:0;padding:0;box-sizing:border-box;}
body { font-family:'Lexend',sans-serif; background-color:var(--bg-color); color:var(--black); line-height:1.6; overflow-x:hidden; transition:background 0.3s ease,color 0.3s ease; scroll-behavior:smooth; }
h1,h2,h3,h4 { font-weight:900; text-transform:uppercase; letter-spacing:-1px; }
p,.tag,label,.manifesto-tag,.ops-badge { font-family:'Space Mono',monospace; }
.container { max-width:1100px; margin:0 auto; padding:0 20px; }
.navbar { background:var(--white); border-bottom:var(--border); position:fixed; width:100%; top:0; z-index:1000; padding:10px 0; }
.navbar .container { display:flex; justify-content:space-between; align-items:center; }
.nav-right { display:flex; align-items:center; gap:15px; }
.logo { font-size:1.5rem; font-weight:bold; background:var(--accent); color:#111111; padding:5px 10px; border:var(--border); box-shadow:3px 3px 0px 0px var(--shadow-color); transition:0.1s ease; display:inline-block; cursor:pointer; }
.logo:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0px 0px var(--shadow-color); }
.nav-links { display:flex; list-style:none; gap:20px; align-items:center; }
.nav-links a { color:var(--black); font-weight:700; text-transform:uppercase; font-size:0.9rem; }
.btn-cta { background:var(--black) !important; color:var(--white) !important; padding:8px 15px; border:none; transition:0.1s; }
.btn-cta:hover { background:var(--primary) !important; transform:scale(1.05); }
.btn-cta:active { transform:scale(0.95); }
.theme-btn,.hamburger { background:var(--white); border:var(--border); padding:8px; cursor:pointer; box-shadow:2px 2px 0px var(--shadow-color); color:var(--black); font-size:1.2rem; transition:0.1s; }
.theme-btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0px var(--shadow-color); }
.hamburger { display:none; }
.section { padding:80px 0; }
.hero { min-height:80vh; display:flex; align-items:center; justify-content:center; margin-top:80px; }
.hero-box { background:var(--white); border:var(--border); box-shadow:10px 10px 0px 0px var(--shadow-color); padding:40px; text-align:center; }
.hero h2 { font-size:3.5rem; line-height:1.1; margin-bottom:20px; }
.highlight { background:var(--accent); color:#111111; padding:0 10px; }
.highlight-alt { background:var(--primary); color:#fff; padding:0 10px; }
.hero p { min-height:1.6em; }
.hero-btns { display:flex; gap:20px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
.btn { display:inline-block; padding:12px 30px; font-weight:700; text-transform:uppercase; border:var(--border); box-shadow:var(--shadow); text-decoration:none; transition:0.1s; cursor:pointer; }
.btn:hover { transform:translate(-3px,-3px); box-shadow:var(--shadow-hover); }
.btn:active { transform:translate(2px,2px); box-shadow:var(--shadow-active); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-outline { background:var(--white); color:var(--black); }
.btn-block { width:100%; text-align:center; display:block; }
.manifesto-tag-wrap { margin-bottom:10px; }
.about-brutalist { background-color:var(--secondary); border-top:var(--border); border-bottom:var(--border); }
.about-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:50px; align-items:center; }
.about-image-box { border:var(--border); height:400px; overflow:hidden; box-shadow:15px 15px 0px 0px var(--accent); background:var(--black); transition:0.3s; }
.about-image-box:hover { box-shadow:20px 20px 0px 0px var(--shadow-color); }
.about-img-file { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(110%); transition:filter 0.4s ease,transform 0.4s ease; }
.about-img-file:hover { filter:grayscale(0%) contrast(100%); transform:scale(1.05); }
.about-text-box { background:var(--white); padding:40px; border:var(--border); box-shadow:-10px 10px 0px 0px var(--shadow-color); }
.manifesto-tag { background:var(--black); color:var(--white); padding:2px 10px; font-size:0.8rem; display:inline-block; margin-bottom:10px; }
.manifesto-container { position:relative; max-height:280px; overflow:hidden; transition:max-height 0.6s cubic-bezier(0.4,0,0.2,1); }
.manifesto-container.expanded { max-height:2000px; }
.manifesto-overlay { position:absolute; bottom:0; left:0; width:100%; height:100px; background:linear-gradient(transparent,var(--white)); pointer-events:none; transition:opacity 0.3s; }
.manifesto-container.expanded .manifesto-overlay { opacity:0; }
#manifesto-toggle { margin-top:15px; font-family:'Space Mono'; font-weight:900; cursor:pointer; text-decoration:underline; text-transform:uppercase; display:inline-block; background:none; border:none; color:var(--black); }
.mystery-text strong { display:inline-block; transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275); cursor:crosshair; color:var(--black); border-bottom:2px solid var(--accent); }
.mystery-text strong:hover { transform:scale(1.05) rotate(-1deg); color:var(--primary); text-shadow:3px 3px 0px var(--shadow-color); border-bottom:2px solid var(--border-color); }
.status-terminal { background:var(--black); color:var(--white); border:var(--border); padding:20px; margin:30px 0; font-family:'Space Mono',monospace; box-shadow:10px 10px 0px var(--primary); text-align:left; }
.terminal-header { border-bottom:1px solid #444; padding-bottom:10px; margin-bottom:15px; font-weight:900; color:var(--accent); }
.design-bg { background-color:#ffde59 !important; }
.dev-bg,.code-bg { background-color:#5ce1e6 !important; }
.ops-bg { background-color:#ff6b6b !important; }
.system-line { margin-bottom:12px; font-size:0.85rem; line-height:1.4; display:flex; align-items:flex-start; }
.ops-system-badge { background:var(--accent); color:#111111; padding:2px 6px; font-weight:900; margin-right:12px; font-size:0.75rem; border:none; flex-shrink:0; }
.ops-badge { margin-top:30px; border:2px dashed var(--black); padding:15px; font-weight:900; background:var(--accent); color:#111111; text-align:center; transition:all 0.4s ease; display:inline-block; }
.ops-badge:hover { letter-spacing:4px; background:var(--black); color:var(--white); transform:translateY(-5px); box-shadow:0px 10px 0px var(--primary); border-style:solid; }
.portfolio-white { background:var(--white); border-bottom:var(--border); }
.services-themed { background:var(--bg-color); border-bottom:var(--border); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; margin-top:40px; }
.service-stream-box { border:var(--border); background:var(--white); box-shadow:var(--shadow); transition:0.2s; height:100%; }
.service-stream-box:hover { transform:translate(-5px,-5px); box-shadow:var(--shadow-hover); }
.stream-header { padding:20px; border-bottom:var(--border); display:flex; align-items:center; gap:15px; }
.stream-list { list-style:none; padding:20px; }
.stream-list li { padding:12px 0; border-bottom:1px dashed var(--black); font-family:'Space Mono',monospace; font-size:0.85rem; display:flex; justify-content:space-between; align-items:center; color:var(--black); }
.service-price { background:var(--black); color:var(--white); padding:2px 6px; font-size:0.7rem; font-weight:900; flex-shrink:0; margin-left:10px; }
.protocol-btn-container { text-align:center; margin-top:50px; width:100%; display:flex; justify-content:center; }
.section-header h3 { font-size:2.5rem; background:var(--black); color:var(--white); display:inline-block; padding:10px 20px; transform:rotate(-2deg); margin-bottom:10px; }
.filter-buttons { text-align:center; margin-bottom:40px; }
.filter-btn { padding:10px 25px; margin:0 5px 10px 5px; border:var(--border); background:var(--white); font-family:'Space Mono',monospace; font-weight:700; box-shadow:var(--shadow); cursor:pointer; color:var(--black); transition:0.1s; }
.filter-btn:hover { transform:translate(-2px,-2px) rotate(-2deg) scale(1.1); box-shadow:var(--shadow-hover); }
.filter-btn.active { background:var(--black); color:var(--white); transform:translate(2px,2px); box-shadow:var(--shadow-active); }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px; }
.project-card { background:var(--white); border:var(--border); box-shadow:var(--shadow); transition:0.2s; display:flex; flex-direction:column; }
.project-card:hover { transform:translate(-8px,-8px); box-shadow:var(--shadow-hover); }
.card-image { height:220px; display:flex; align-items:center; justify-content:center; font-size:4rem; border-bottom:var(--border); overflow:hidden; background:#eee; }
.card-image img { transition:transform 0.5s ease; width:100%; height:100%; object-fit:cover; }
.project-card:hover .card-image img { transform:scale(1.1); }
.card-content { padding:20px; flex-grow:1; display:flex; flex-direction:column; }
.tag { background:var(--black); color:var(--white); padding:4px 8px; display:inline-block; margin-bottom:10px; font-size:0.75rem; align-self:flex-start; }
.bg-pattern { background-color:var(--pattern-bg); background-image:radial-gradient(var(--pattern-dot) 15%,transparent 16%),radial-gradient(var(--pattern-dot) 15%,transparent 16%); background-size:20px 20px; }
.contact-wrapper { max-width:700px; margin:0 auto; background:var(--white); padding:50px; border:var(--border); box-shadow:15px 15px 0px 0px var(--shadow-color); }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:8px; font-weight:900; color:var(--black); }
.form-group input,.form-group textarea { width:100%; padding:15px; border:var(--border); background:var(--white); font-family:'Space Mono',monospace; transition:0.2s; color:var(--black); }
.form-group input:focus,.form-group textarea:focus { outline:none; background:var(--white); border-color:var(--primary); box-shadow:4px 4px 0px var(--shadow-color); }
footer { padding:60px 0; background:var(--black); color:var(--white); text-align:center; }
.loading-state { text-align:center; padding:40px; font-family:'Space Mono',monospace; color:var(--black); opacity:0.6; }
@media(max-width:768px) {
    .logo { font-size:1.1rem; padding:4px 8px; }
    .hamburger { display:block; }
    .about-grid { grid-template-columns:1fr; }
    .about-image-box { height:300px; }
    .hero h2 { font-size:2.5rem; }
    .nav-links { position:fixed; right:-100%; top:65px; flex-direction:column; background:var(--white); width:100%; border-bottom:var(--border); padding:40px 0; transition:0.4s cubic-bezier(0.4,0,0.2,1); box-shadow:0 10px 0px var(--shadow-color); z-index:999; }
    .nav-links.active { right:0; }
    .contact-wrapper { padding:30px 20px; }
}