/* --- Custom Properties & Themes --- */
:root {
    --body-font: 'Open Sans', sans-serif;
    --hud-font: 'Share Tech Mono', monospace;
    --taxi-yellow: #FFD600;
    --papi-red: #ff3d00;
    --papi-white: #f5f5f5;
    
    /* Technical Dark Manual Theme (Desktop Default) */
    --tech-bg: #121417;
    --tech-panel: #1e2124;
    --tech-text: #d1d5db;
    --tech-accent: #00FFFF;
    --tech-border: #383b42;
    --tech-warning: #FFB800;

    --boeing-bg: #0A0A0A;
    --sky-blue: #1C67BA;
    --earth-brown: #663300;
    --boeing-white: #FFFFFF;
    --boeing-green: #00FF00;
    --boeing-magenta: #FF00FF;
    --boeing-cyan: #00E5FF;
    --glass-glare: rgba(255, 255, 255, 0.03);
}

/* RESPONSIVE THEMES (Fully Restored) */
@media (max-width: 600px) { :root { --tech-bg: #E3F2FD; --tech-text: #333333; --tech-panel: #ffffff; --tech-accent: #d32f2f; --tech-border: #546E7A; --tech-warning: #d32f2f; } }
@media (min-width: 601px) and (max-width: 1024px) { :root { --tech-bg: #90A4AE; --tech-text: #000000; --tech-panel: #CFD8DC; --tech-accent: #FFD600; --tech-border: #546E7A; --tech-warning: #FFD600; } }

* { box-sizing: border-box; }
body { background-color: var(--tech-bg); color: var(--tech-text); font-family: var(--body-font); margin: 0; padding: 0; min-height: 100vh; overflow-x: hidden; transition: background-color 0.3s, color 0.3s;}

/* --- LAYOUT --- */
.aviation-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: linear-gradient(rgba(128,128,128,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(128,128,128,0.1) 1px, transparent 1px); background-size: 40px 40px; }

header { display: flex; justify-content: space-between; align-items: flex-end; background-color: #000; border-bottom: 2px solid var(--tech-accent); padding: 20px 40px; }
.header-left { display: flex; align-items: center; gap: 20px; }
.logo-area { display: flex; flex-direction: column; align-items: center; color: var(--tech-accent); }
.logo-text { font-family: var(--hud-font); font-size: 12px; font-weight: bold; margin-top: 5px;}
.titles h1 { color: #fff; font-family: var(--hud-font); margin: 0; letter-spacing: 2px; }
.subtitle { font-family: var(--hud-font); font-size: 0.9rem; color: #888; margin-top: 5px; margin-bottom:0;}

nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
nav a { color: #fff; font-family: var(--hud-font); text-decoration: none; padding: 5px 15px; border: 1px solid transparent; transition: 0.2s;}
nav a:hover { border-bottom: 1px solid var(--tech-accent); color: var(--tech-accent); }
.disabled-link { color: #555 !important; border-color: #555 !important; cursor: not-allowed; }
.disabled-link:hover { background: transparent !important; color: #555 !important; }

main { max-width: 1200px; margin: 30px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 20px;}
.grid-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

@media (max-width: 800px) { 
    .grid-sections { grid-template-columns: 1fr; } 
    header { flex-direction: column; align-items: center; gap: 20px;} 
    .header-left { flex-direction: column; text-align: center;} 
    nav ul { justify-content: center; } 
}

.tech-panel { background-color: var(--tech-panel); border: 2px solid var(--tech-border); padding: 20px; position: relative; border-left: 10px solid var(--taxi-yellow);}
.panel-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--tech-border); margin-bottom: 15px; padding-bottom: 10px; gap: 10px;}
h2 { font-family: var(--hud-font); color: var(--tech-accent); font-size: 1.2rem; margin: 0;}
.highlight { color: var(--tech-accent); font-weight: bold; font-family: var(--hud-font);}
.tech-list { padding-left: 20px; line-height: 1.8; font-weight: bold;}

button, .btn { display: inline-block; background-color: transparent; color: var(--tech-text); font-family: var(--hud-font); font-size: 1rem; padding: 8px 16px; border: 1px solid var(--tech-border); cursor: pointer; text-transform: uppercase; text-decoration: none; transition: 0.2s;}
button:hover, .btn:hover { border-color: var(--tech-accent); color: var(--tech-accent); }
.ga-btn { border-color: red; color: red; } .ga-btn:hover { background: red; color: #fff; box-shadow: 0 0 10px red;}
.highlighted-btn { border-color: var(--tech-accent); color: var(--tech-accent); }

/* 2D HERO ANIMATION */
.hero-anim-box { width: 100%; height: 300px; position: relative; overflow: hidden; background: linear-gradient(to bottom, #000000 0%, #111827 100%); border: 1px solid #000; }
.control-tower { position: absolute; bottom: 80px; left: 15%; width: 40px; height: 120px; z-index: 5; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); }
.tower-beacon { width: 6px; height: 6px; background-color: red; border-radius: 50%; box-shadow: 0 0 10px red; animation: beacon-blink 1s infinite; margin-bottom: 2px; }
.tower-cab { width: 30px; height: 25px; background: #2c3e50; display: flex; align-items: center; justify-content: center; border-bottom: 2px solid #555; }
.cab-window { width: 26px; height: 12px; background: linear-gradient(135deg, #81d4fa, #29b6f6); opacity: 0.6; }
.tower-shaft { width: 14px; height: 100%; background: linear-gradient(to right, #4b5563, #6b7280, #4b5563); border-left: 1px solid #374151; border-right: 1px solid #374151; }
@keyframes beacon-blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; box-shadow: 0 0 15px red; } }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.3; } }

.ground-reference { position: absolute; bottom: 0; width: 100%; height: 80px; background: #111; perspective: 1000px; border-top: 2px solid #000; }
.runway-strip { width: 100%; height: 80px; background: #222; transform: scaleX(1.4) rotateX(50deg) translateY(20px); position: relative; border-left: 2px solid #555; border-right: 2px solid #555; background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.02) 50%), linear-gradient(transparent 50%, rgba(0, 0, 0, 0.2) 50%); background-size: 4px 4px; }
.marking { position: absolute; background-color: #aaa; opacity: 0.8; }
.marking::before, .marking::after { content: ''; position: absolute; background-color: #aaa; }
.threshold-keys { left: 5%; top: 5px; bottom: 5px; width: 60px; background: repeating-linear-gradient(to bottom, #aaa 0px, #aaa 4px, transparent 4px, transparent 8px); }
.centerline { left: 5%; right: 0; top: 50%; height: 4px; transform: translateY(-50%); background: repeating-linear-gradient(to right, #aaa 0px, #aaa 30px, transparent 30px, transparent 60px); }
.tdz-3-bar { left: 20%; top: 0; height: 100%; width: 20px; background: transparent; } .tdz-3-bar::before, .tdz-3-bar::after { content:''; position:absolute; width: 6px; height: 25%; box-shadow: 8px 0 0 #aaa, 16px 0 0 #aaa; background: #aaa;} .tdz-3-bar::before { top: 5px; } .tdz-3-bar::after { bottom: 5px; }
.aiming-point { left: 35%; top: 0; height: 100%; width: 40px; background: transparent; } .aiming-point::before, .aiming-point::after { content:''; position:absolute; width: 100%; height: 25%; background: #aaa;} .aiming-point::before { top: 5px; } .aiming-point::after { bottom: 5px; }
.tdz-2-bar { left: 50%; top: 0; height: 100%; width: 20px; background: transparent; } .tdz-2-bar::before, .tdz-2-bar::after { content:''; position:absolute; width: 6px; height: 25%; box-shadow: 8px 0 0 #aaa; background: #aaa; } .tdz-2-bar::before { top: 5px; } .tdz-2-bar::after { bottom: 5px; }
.tdz-1-bar { left: 65%; top: 0; height: 100%; width: 10px; background: transparent; } .tdz-1-bar::before, .tdz-1-bar::after { content:''; position:absolute; width: 6px; height: 25%; background: #aaa; } .tdz-1-bar::before { top: 5px; } .tdz-1-bar::after { bottom: 5px; }

/* 2D PAPI SYSTEM */
.papi-system { position: absolute; left: 35%; top: -20px; display: flex; gap: 4px; z-index: 10;}
.papi-unit { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 5px currentColor; background-color: #555; transition: 0.5s; }
.papi-perfect .u1, .papi-perfect .u2 { background-color: #fff; box-shadow: 0 0 8px #fff; } .papi-perfect .u3, .papi-perfect .u4 { background-color: #ff0000; box-shadow: 0 0 8px #ff0000; }
.papi-high .u1, .papi-high .u2, .papi-high .u3 { background-color: #fff; box-shadow: 0 0 8px #fff; } .papi-high .u4 { background-color: #ff0000; box-shadow: 0 0 8px #ff0000; }
.papi-low .u1 { background-color: #fff; box-shadow: 0 0 8px #fff; } .papi-low .u2, .papi-low .u3, .papi-low .u4 { background-color: #ff0000; box-shadow: 0 0 8px #ff0000; }

/* 2D PLANES (.PNG Extension applied) */
.plane-wrapper { position: absolute; width: 220px; height: 100px; z-index: 10; pointer-events: none; transform-origin: bottom center; transform: scale(0.85);}
.united-plane, .ac-plane { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
.united-plane { background-image: url('united-plane.png'); }
.ac-plane { background-image: url('plane.png'); }

.main-smoke, .nose-smoke { position: absolute; width: 60px; height: 60px; background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(200, 200, 200, 0.5) 40%, rgba(150, 150, 150, 0) 70%); border-radius: 50%; display: none; filter: blur(3px); }
.main-smoke { bottom: 5px; left: 40%; } .nose-smoke { bottom: 5px; left: 80%; }
.nose-gear-light { display: block; position: absolute; left: 175px; top: 68px; width: 8px; height: 8px; background: white; border-radius: 50%; box-shadow: 0 0 12px white; z-index: 15; animation: blink 0.3s infinite alternate; }

/* Gear retract for TO/GA */
.executing-ga .united-plane, .executing-ga .ac-plane { animation: gear-retract 6s linear forwards !important; }
@keyframes gear-retract { 0% { clip-path: inset(0 0 0 0); } 30% { clip-path: inset(0 0 0 0); } 50% { clip-path: inset(0 0 15% 0); } 100% { clip-path: inset(0 0 15% 0); } }

/* Skills Panel Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.skill-item {
    background: #000;
    color: var(--taxi-yellow);
    padding: 15px;
    text-align: center;
    border: 1px solid var(--taxi-yellow);
    font-family: var(--hud-font);
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: 0.2s;
}

.skill-item:hover {
    background: var(--taxi-yellow);
    color: #000;
    box-shadow: 0 0 10px var(--taxi-yellow);
}

/* Modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.modal.hidden { display: none !important; }
.modal-content { background: var(--tech-panel); border: 1px solid var(--tech-accent); padding: 20px; color: white; max-width: 600px; font-family: var(--body-font); width:90%;}
.modal-header { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--tech-border); padding-bottom: 10px; margin-bottom: 10px;}
.close-modal { cursor: pointer; color: var(--tech-accent); font-family: var(--hud-font); font-weight: bold; }

footer { background-color: #000; font-family: var(--hud-font); border-top: 1px solid #333; margin-top: auto;}
.threshold-bar { width: 100%; height: 10px; background: repeating-linear-gradient(90deg, #fff 0px, #fff 20px, transparent 20px, transparent 40px); opacity: 0.3; }
.footer-text { color: #555; font-size: 0.8rem; padding: 20px; text-align: center;}


/* =========================================================
   MASTER BOEING AVIONICS SYSTEM (FLUSH PANEL UI)
========================================================= */
.instrument-panel {
    width: 100%;
    background-color: #1e2024; /* Dark grey MIP metal */
    display: flex;
    justify-content: center;
    border-top: 2px solid #333;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.8);
}

.panel-scaler { display: flex; gap: 20px; padding: 20px; transform-origin: top center; transition: transform 0.3s ease; }

/* 2D Portfolio Docking - Responsive Scaling */
#portfolio-avionics-slot { display: block; width: 100%; overflow: hidden; margin-top: 20px; border: 1px solid #000;}
#portfolio-avionics-slot .instrument-panel { box-shadow: none; border-top: none; }
#portfolio-avionics-slot .panel-scaler { transform: scale(0.85); margin-bottom: -50px; }

@media screen and (max-width: 1200px) { 
    #portfolio-avionics-slot .panel-scaler { transform: scale(0.70); margin-bottom: -120px; } 
}
@media screen and (max-width: 900px) { 
    #portfolio-avionics-slot .panel-scaler { transform: scale(0.55); margin-bottom: -200px; } 
}
@media screen and (max-width: 600px) { 
    #portfolio-avionics-slot .panel-scaler { flex-direction: column; transform: scale(0.85); margin-bottom: 0; align-items: center; } 
    #portfolio-avionics-slot { height: auto; padding-bottom: 20px; }
}

/* 3D View Overlays */
#sim-view { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 9999; display: none; opacity: 0; transition: opacity 0.5s; overflow-y: auto; overflow-x: hidden; }
#webgl-container { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; }
.sim-header { position: absolute; top: 0; left: 0; width: 100%; padding: 20px; display: flex; justify-content: space-between; z-index: 10000; background: linear-gradient(rgba(0,0,0,0.8), transparent); pointer-events: none;}
.sim-title { font-family: var(--hud-font); color: var(--tech-accent); font-size: 1.2rem; font-weight: bold;}

/* BOEING SCREEN INTERNALS */
.screen { 
    background-color: var(--boeing-bg); 
    border: 15px solid #0a0b0d; 
    border-radius: 2px; 
    position: relative; overflow: hidden; width: 360px; height: 440px; font-family: 'Arimo', sans-serif; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
}
.screen::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--glass-glare) 0%, transparent 40%, rgba(0,0,0,0.4) 100%); z-index: 100; pointer-events: none; }

/* BOEING PFD & BARBER POLES */
.boeing-pfd { display: flex; justify-content: space-between; align-items: center; }
.boeing-attitude-indicator { position: absolute; top: 50%; left: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); border-radius: 10px; overflow: hidden; z-index: 1; }
.boeing-horizon-cylinder { position: absolute; top: -100%; left: -50%; width: 200%; height: 300%; background: linear-gradient(to bottom, var(--sky-blue) 0%, var(--sky-blue) 50%, #ffffff 50%, var(--earth-brown) 50.5%, var(--earth-brown) 100%); }
.pitch-ladder-svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 600px; overflow: visible; }
.boeing-aircraft-symbol { position: absolute; top: 50%; left: 50%; width: 160px; height: 20px; transform: translate(-50%, -50%); z-index: 10; }
.boeing-aircraft-symbol .ac-wing { position: absolute; top: 50%; width: 50px; height: 6px; background-color: #000; border: 2px solid var(--boeing-white); }
.boeing-aircraft-symbol .ac-wing.left { left: 0; border-right: none; } .boeing-aircraft-symbol .ac-wing.right { right: 0; border-left: none; }
.boeing-aircraft-symbol .ac-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border: 2px solid var(--boeing-white); background: #000; }

.flight-director-bars { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%); z-index: 5; }
.fd-h-bar { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background: var(--boeing-magenta); }
.fd-v-bar { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: var(--boeing-magenta); }

.ils-scale { position: absolute; display: flex; justify-content: space-between; align-items: center; z-index: 20;}
.ils-dot { width: 6px; height: 6px; background: transparent; border: 2px solid var(--boeing-white); border-radius: 50%; }
.ils-diamond { position: absolute; width: 12px; height: 12px; border: 2px solid var(--boeing-magenta); transform: rotate(45deg); transition: 0.1s linear; }
.ils-v { right: 5px; top: 25%; height: 50%; width: 16px; flex-direction: column; } .ils-v .ils-diamond { top: 50%; right: 2px; }
.ils-h { bottom: 5px; left: 25%; width: 50%; height: 16px; } .ils-h .ils-diamond { left: 50%; bottom: 2px; }

.fma-board { position: absolute; top: 5px; left: 40px; right: 40px; height: 25px; display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 2px solid white; text-align: center; color: var(--boeing-green); font-weight: bold; font-size: 1.2rem; z-index: 30;}

.boeing-tape-container { width: 60px; height: 300px; background-color: rgba(60, 65, 70, 0.4); border: 2px solid #555; position: relative; overflow: hidden; z-index: 20; }
.boeing-tape-strip { position: absolute; width: 100%; top: 50%; }
.boeing-tape-readout-box { position: absolute; top: 50%; transform: translateY(-50%); background-color: #000; border: 2px solid var(--boeing-white); color: var(--boeing-white); font-size: 1.4rem; font-weight: 700; padding: 4px 0; width: 70px; text-align: center; z-index: 30;}
.spd-box { left: 0; border-left: none; } .alt-box { right: 0; border-right: none; }
.spd-box::after { content: ''; position: absolute; top: 50%; right: -8px; transform: translateY(-50%); border-left: 8px solid var(--boeing-white); border-top: 8px solid transparent; border-bottom: 8px solid transparent;}
.alt-box::after { content: ''; position: absolute; top: 50%; left: -8px; transform: translateY(-50%); border-right: 8px solid var(--boeing-white); border-top: 8px solid transparent; border-bottom: 8px solid transparent;}

/* Barber Poles & Minor Ticks */
.barber-pole { position: absolute; right: 0; width: 10px; background: repeating-linear-gradient(-45deg, #FF0000, #FF0000 10px, #000000 10px, #000000 20px); z-index: 5; border-left: 2px solid var(--boeing-white);}
.overspeed { top: 0; height: 240px; }
.underspeed { bottom: 0; height: 440px; }
.tick { position: absolute; display: flex; align-items: center; font-size: 14px; font-weight: bold; color: var(--boeing-white); width: 100%; }
.tick-spd { justify-content: flex-end; padding-right: 12px; border-right: 3px solid var(--boeing-white); position: relative; }
.tick-spd::after { content: ''; position: absolute; right: -3px; top: 50%; width: 6px; height: 2px; background: var(--boeing-white); z-index: 10;}
.tick-alt { justify-content: flex-start; padding-left: 12px; border-left: 3px solid var(--boeing-white); position: relative;}
.tick-alt::after { content: ''; position: absolute; left: -3px; top: 50%; width: 6px; height: 2px; background: var(--boeing-white); z-index: 10;}

/* BOEING ND & VSD */
.nd { display: flex; flex-direction: column; padding: 0 !important; }
.nd-map-section { height: 65%; width: 100%; padding: 15px; position: relative; border-bottom: 2px solid var(--boeing-white); display: flex; flex-direction: column; align-items: center;}
.nd-vsd-section { height: 35%; width: 100%; background: #050505; position: relative; overflow: hidden; }
.vsd-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 40px 40px; }
.vsd-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
.vsd-alt-scale { position: absolute; right: 5px; top: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: var(--boeing-cyan); font-size: 0.8rem; font-weight: bold; padding: 5px 0; }
.nd-header { width: 100%; display: flex; justify-content: space-between; color: var(--boeing-green); font-size: 1.1rem; font-weight: bold; margin-bottom: 5px; }
.nd-compass-container { width: 280px; height: 280px; position: relative; margin-top: auto; margin-bottom: 20px; overflow: hidden; transform: scale(0.85); transform-origin: top center;}
.nd-compass-ring { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--boeing-white); position: absolute; }
.nd-compass-rose { position: absolute; width: 100%; height: 100%; }
.nd-ac-symbol { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 24px solid var(--boeing-white); z-index: 10; }

/* BOEING EIS ENGINE DISPLAY */
.eis { padding: 10px 15px; display: flex; flex-direction: column; }
.eis-top-row { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: bold; color: var(--boeing-cyan); margin-bottom: 10px;}
.eis-top-row .green { color: var(--boeing-green); }
.eis-dials-wrapper { display: flex; flex-direction: column; gap: 10px; margin-top: 5px;}
.dial-block { position: relative; display: flex; flex-direction: column; align-items: center; }
.dial-title { position: absolute; top: 35px; width: 100%; text-align: center; color: var(--boeing-cyan); font-size: 1.2rem; font-weight: bold; z-index: 15;}
.rev-indicators { position: absolute; top: 10px; width: 85%; display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: bold; z-index: 20; }
.rev-text { color: var(--boeing-bg); }
.dials-row { display: flex; justify-content: space-around; width: 100%; }
.dial-container { position: relative; width: 120px; height: 120px; }
.dial-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: visible;}
.dial-readout { position: absolute; top: 12px; right: -5px; background: #000; border: 2px solid var(--boeing-white); color: var(--boeing-white); font-size: 1.6rem; font-weight: bold; padding: 0 4px; text-align: right; min-width: 55px; }

.egt-block { transform: scale(0.85); margin-top: -15px;}
.egt-container { height: 100px; width: 100px;}
.egt-readout { top: 15px; font-size: 1.4rem;}
.secondary-block { display: grid; grid-template-columns: 80px 100px 80px; justify-content: center; gap: 8px 10px; font-size: 1.2rem; font-weight: bold; margin-top: 20px;}
.sec-lbl { color: var(--boeing-cyan); text-align: center; }
.sec-val { color: var(--boeing-white); text-align: right; }
.sec-val-l { color: var(--boeing-white); text-align: left; }

/* Browser Mockup (live iframe preview) */
.browser-mockup {
    border: 1px solid var(--tech-border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 20px;
}
.browser-bar {
    background: #111315;
    border-bottom: 1px solid var(--tech-border);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 11px; height: 11px; border-radius: 50%; }
.browser-dots span:nth-child(1) { background: #FF5F57; }
.browser-dots span:nth-child(2) { background: #FFBD2E; }
.browser-dots span:nth-child(3) { background: #28C840; }
.browser-url {
    background: #1e2124;
    border: 1px solid #3a3d44;
    padding: 4px 14px;
    border-radius: 3px;
    font-family: var(--hud-font);
    font-size: 0.72rem;
    color: #9ca3af;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browser-actions { margin-left: auto; }
.browser-mockup iframe {
    width: 100%;
    height: 520px;
    border: none;
    display: block;
    background: #fff;
}
.browser-open-link {
    display: block;
    text-align: center;
    padding: 8px;
    background: #111315;
    border-top: 1px solid var(--tech-border);
    font-family: var(--hud-font);
    font-size: 0.75rem;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}
.browser-open-link:hover { color: var(--tech-accent); }
.browser-hotlink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 140px;
    padding: 28px 20px;
    background: #0c0e10;
    text-decoration: none;
    text-align: center;
    border-top: none;
    transition: background 0.2s;
}
.browser-hotlink:hover { background: #14171a; }
.browser-hotlink-url {
    font-family: var(--hud-font);
    font-size: 1rem;
    color: var(--tech-accent);
    word-break: break-all;
}
.browser-hotlink-cta {
    font-family: var(--hud-font);
    font-size: 0.8rem;
    color: #9ca3af;
    letter-spacing: 0.04em;
}
.browser-hotlink:hover .browser-hotlink-cta { color: #fff; }
@media (max-width: 800px) {
    .browser-mockup iframe { height: 380px; }
}
@media (max-width: 600px) {
    .browser-mockup iframe { height: 280px; }
}

/* NotTorn Project Section */
.project-card {
    border: 1px solid var(--tech-border);
    padding: 20px;
    margin-top: 15px;
}
.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}
.project-tags { margin-top: 8px; }
.project-tag {
    display: inline-block;
    font-family: var(--hud-font);
    font-size: 0.75rem;
    padding: 3px 8px;
    border: 1px solid;
    margin-right: 5px;
    margin-bottom: 5px;
}
.tag-java     { border-color: #FF8C00; color: #FF8C00; }
.tag-lanterna { border-color: var(--tech-accent); color: var(--tech-accent); }
.tag-jackson  { border-color: #a78bfa; color: #a78bfa; }
.tag-game     { border-color: var(--taxi-yellow); color: var(--taxi-yellow); }
.tag-next     { border-color: #ffffff; color: #ffffff; }
.tag-ts       { border-color: #3B82F6; color: #3B82F6; }
.tag-motion   { border-color: #ec4899; color: #ec4899; }
.tag-web      { border-color: #34d399; color: #34d399; }
.tag-node     { border-color: #6ead3a; color: #6ead3a; }
.tag-cobalt   { border-color: #2E42FF; color: #6b7bff; }
.tag-vanilla  { border-color: #f59e0b; color: #f59e0b; }

.nottorn-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.feature-item {
    border: 1px solid var(--tech-border);
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.feature-item code {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.feature-label {
    display: block;
    color: var(--tech-accent);
    font-family: var(--hud-font);
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 4px;
}
.nottorn-screenshots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    align-items: flex-start;
}
.nottorn-screenshots img {
    height: 110px;
    border: 1px solid var(--tech-border);
    object-fit: cover;
    transition: border-color 0.2s;
    display: block;
}
.nottorn-screenshots img:hover { border-color: var(--tech-accent); }
@media (max-width: 700px) {
    .nottorn-features { grid-template-columns: 1fr; }
    .tech-panel { padding: 14px; border-left-width: 6px; }
    .project-card { min-width: 0; max-width: 100%; }
    .project-card p,
    .panel-footer-text p { overflow-wrap: break-word; word-wrap: break-word; }
    main { padding: 0 12px; margin: 16px auto; }
}
@media (max-width: 600px) {
    .nottorn-screenshots img { height: 80px; }
    .nottorn-features { grid-template-columns: 1fr; }
    .panel-header h2 { font-size: 1rem; line-height: 1.3; }
}