/* =============================================================
	 ROLE 1: BRAND SYSTEM TOKENS (Goth-Metal DARK / Lofi-Summer LIGHT)
	 ============================================================= */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;max-width:100%;overflow-x:hidden;} /* prevent horizontal scroll */
body{overflow:hidden;touch-action:manipulation;}
/* Provide breathing room below content so dock doesn't overlap scrollable mobile content */
body.with-dock-padding{padding-bottom:160px;}
[hidden]{display:none !important;} /* ensure hidden popover / elements are removed visually */
a{text-decoration:none;color:var(--accent);transition:color .2s var(--ease-base);}a:hover{text-decoration:underline;}
::selection{background:var(--accent);color:#fff;}

/* Motion tokens */
:root{--ease-fast:cubic-bezier(.4,0,.6,1);--ease-base:cubic-bezier(.4,0,.2,1);--ease-slow:cubic-bezier(.25,.46,.45,.94);--dur-fast:120ms;--dur-base:180ms;--dur-slow:420ms;}

/* LIGHT THEME (lofi summer chill) */
:root[data-theme="light"]{
	--font-body:Inter, Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--font-heading:'Cormorant Garamond', 'Cinzel', Georgia, serif;
	--bg:#faf9fb;
	--bg-alt:#f1eff6;
	--surface:#ffffff;
	--surface-alt:#f5f2fa;
	--text:#1f1c27;
	--muted:#5a5763;
	--border:rgba(40,28,60,.18);
	--accent:#ff6f6f;
	--accent-alt:#a389ff;
	--accent-glow:255 111 111;
	--success:#2e9c5d;--warning:#d59b00;--error:#d64040;
	--shadow-sm:0 1px 2px rgba(10,10,20,.06),0 0 0 1px rgba(60,40,80,.05);
	--shadow:0 4px 12px -2px rgba(80,60,120,.18),0 2px 4px -1px rgba(90,60,120,.08);
	--shadow-glow:0 0 0 1px rgba(255,111,111,.35),0 4px 22px -4px rgba(255,111,111,.55);
	--glow-accent:0 0 0 1px rgba(255,111,111,.5),0 0 0 4px rgba(255,111,111,.15),0 6px 30px -8px rgba(255,111,111,.45);
	--noise-opacity:.08;
	--scanline-opacity:0;
	--gradient-hero:radial-gradient(circle at 40% 35%,rgba(255,143,143,.35),transparent 60%),linear-gradient(140deg,#fff,#f4f1fa 65%);
	--heading-letter:.5px;--heading-line:1.05;--body-line:1.55;
}

/* DARK THEME (goth-metal horror) */
:root[data-theme="dark"]{
	--font-body:Inter, Poppins, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--font-heading:'Cinzel', 'Cormorant Garamond', Georgia, serif;
	--bg:#08060a;
	--bg-alt:#120f18;
	--surface:#181320;
	--surface-alt:#221b2c;
	--text:#ece8f4;
	--muted:#9a91ab;
	--border:rgba(180,120,255,.14);
	--accent:#ff1e56;
	--accent-alt:#6633dd;
	--accent-glow:255 30 86;
	--success:#4cc671;--warning:#e2b441;--error:#ff4d4d;
	--shadow-sm:0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(100,60,160,.25);
	--shadow:0 6px 18px -6px rgba(0,0,0,.8),0 2px 8px -2px rgba(0,0,0,.7);
	--shadow-glow:0 0 0 1px rgba(255,30,86,.4),0 0 22px -2px rgba(102,51,221,.55),0 14px 50px -10px rgba(0,0,0,.85);
	--glow-accent:0 0 0 1px rgba(255,30,86,.55),0 0 0 4px rgba(255,30,86,.18),0 8px 40px -10px rgba(255,30,86,.55),0 0 60px -10px rgba(102,51,221,.7);
	--noise-opacity:.22;
	--scanline-opacity:.18;
	--gradient-hero:radial-gradient(circle at 35% 40%,rgba(255,30,86,.18),transparent 55%),radial-gradient(circle at 70% 65%,rgba(102,51,221,.15),transparent 60%),linear-gradient(140deg,#0c0911,#140f1d 60%,#1a1325);
	--heading-letter:1px;--heading-line:1.03;--body-line:1.55;
}

:root{--radius-sm:6px;--radius:14px;--radius-lg:22px;--focus-ring:0 0 0 2px #000,0 0 0 4px var(--accent);--backdrop-blur:blur(20px) saturate(140%);--border-base:1px solid var(--border);--code-bg:rgba(0,0,0,.5);--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Cascadia Code", "Fira Code", monospace;}

h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:var(--heading-letter);line-height:var(--heading-line);margin:0 0 .6em;font-weight:700;}
p{line-height:var(--body-line);margin:0 0 1em;}
code,pre{font-family:var(--font-mono);}

/* Hero */
.hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3.5rem 1.2rem 6.5rem;pointer-events:none;background:var(--gradient-hero);} 
.hero-title{font-size:clamp(2.4rem,6.8vw,4.6rem);margin:0;font-weight:700;letter-spacing:.5px;line-height:1.04;background:linear-gradient(120deg,var(--accent),var(--accent-alt));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 20px rgba(var(--accent-glow),.25));}
.hero .alias{font-size:clamp(1rem,2.2vw,1.3rem);font-weight:600;opacity:.85;}
.hero-tagline{margin:.9rem 0 1.2rem;font-size:clamp(.9rem,1.6vw,1.1rem);color:var(--muted);max-width:760px;font-weight:500;}
.status-chips{list-style:none;display:flex;gap:.65rem;padding:0;margin:0 0 1.2rem;pointer-events:auto;}
.chip{background:linear-gradient(135deg,var(--surface),var(--surface-alt));border:1px solid var(--border);padding:.55rem .9rem;font-size:.62rem;letter-spacing:1px;text-transform:uppercase;font-weight:600;border-radius:999px;color:var(--muted);position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem;box-shadow:var(--shadow-sm);} 
.chip-available{color:var(--success);} 
.chip[data-chip="timezone"]{min-width:90px;justify-content:center;}
.chip.omnitrix{background:#0b3; color:#fff; box-shadow:0 0 0 1px #0f5,0 0 18px -4px #0f5 inset;}
.rotating{display:inline-flex;position:relative;min-width:240px;height:1.5em;}
.rotating .word{position:absolute;inset:0;opacity:0;transform:translateY(40%);transition:opacity var(--dur-slow) var(--ease-base),transform var(--dur-slow) var(--ease-base);font-weight:600;background:linear-gradient(90deg,var(--accent),var(--accent-alt));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
.rotating .word.is-active{opacity:1;transform:translateY(0);} 

/* Dock */
.dock{position:fixed;bottom:.75rem;left:50%;transform:translateX(-50%);display:flex;gap:.6rem;padding:.55rem .7rem;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.07));backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);border:1px solid var(--border);border-radius:30px;z-index:90;box-shadow:var(--shadow);pointer-events:auto;}
html[data-theme="dark"] .dock{background:rgba(20,15,30,.55);}
.dock-btn{all:unset;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;font-size:1.2rem;line-height:1;border-radius:16px;color:var(--muted);position:relative;transition:background var(--dur-base) var(--ease-base),transform var(--dur-base) var(--ease-base),color var(--dur-fast) var(--ease-fast);} 
.dock-btn:hover,.dock-btn:focus-visible{background:linear-gradient(135deg,var(--surface),var(--surface-alt));color:var(--text);box-shadow:var(--shadow-sm);} 
.dock-btn:active{transform:translateY(2px);} 

.control-pill{display:flex;align-items:center;gap:.4rem;background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);padding:.4rem .55rem;border-radius:40px;box-shadow:var(--shadow-sm);pointer-events:auto;}
.pill-btn{all:unset;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:1.05rem;color:var(--muted);transition:var(--dur-base) var(--ease-base);position:relative;}
.pill-btn:hover,.pill-btn:focus-visible{color:var(--text);background:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 120%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.audio-wrapper{position:relative;display:flex;align-items:center;}
.volume-pop{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--surface-alt),var(--surface));border:1px solid var(--border);padding:.65rem .55rem;border-radius:16px;display:flex;justify-content:center;box-shadow:var(--shadow);width:50px;animation:fadeUp var(--dur-base) var(--ease-base);z-index:140;} /* elevated z-index so slider is never under windows */
@keyframes fadeUp{0%{opacity:0;transform:translate(-50%,8px);}100%{opacity:1;transform:translate(-50%,0);} }
.volume-pop input[type=range]{
	writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;height:130px;width:34px;padding:0;margin:0;display:block;background:transparent;cursor:pointer;
}
.volume-pop input[type=range]::-webkit-slider-runnable-track{width:8px;background:linear-gradient(var(--surface-alt),var(--surface));border:1px solid var(--border);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);} 
.volume-pop input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-alt));border:2px solid #fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.4);margin-top:-5px;transition:.2s var(--ease-base);} 
.volume-pop input[type=range]::-webkit-slider-thumb:hover{filter:brightness(1.1);} 
.volume-pop input[type=range]::-moz-range-track{width:8px;background:linear-gradient(var(--surface-alt),var(--surface));border:1px solid var(--border);border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);} 
.volume-pop input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-alt));border:2px solid #fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.4);transition:.2s var(--ease-base);} 
.volume-pop input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:2px;}

#desktop{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;} /* center when empty */

/* Window */
.window{position:absolute;top:12%;left:12%;width:min(52rem,80vw);min-width:18rem;min-height:14rem;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);overflow:hidden;animation:popIn .6s var(--ease-base);} /* fluid window sizing */
@keyframes popIn{0%{opacity:0;transform:translateY(30px) scale(.92);}60%{opacity:1;}100%{transform:translateY(0) scale(1);} }
.window.maximized{top:.5rem!important;left:.5rem!important;width:calc(100% - 1rem)!important;height:calc(100vh - 7rem)!important;max-height:none!important;transition:all .45s var(--ease-base);} /* use vh & rem */
.window:focus-within{box-shadow:var(--shadow-glow);} /* removed minimized state */
.window-bar{display:flex;align-items:center;gap:.9rem;padding:.55rem .85rem .6rem .75rem;user-select:none;cursor:grab;background:linear-gradient(120deg,var(--surface-alt),var(--surface));backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);position:relative;}
.window-bar:active{cursor:grabbing;}
.window-dots{display:flex;align-items:center;gap:.5rem;}
.window-dots .dot{width:14px;height:14px;border-radius:50%;display:block;position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);} 
/* Only close + maximize remain */
.dot-close{background:var(--error);} .dot-max{background:var(--success);} 
.window-title{flex:1;margin:0;font-size:.78rem;font-weight:600;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;font-family:var(--font-body);} 
/* Removed popout button section */
.resize-handle{position:absolute;width:18px;height:18px;right:4px;bottom:4px;cursor:nwse-resize;background:linear-gradient(135deg,var(--accent),transparent);border-radius:4px;opacity:.45;transition:var(--dur-base) var(--ease-base);} 
.window:hover .resize-handle{opacity:1;} 
.window-content{padding:1rem 1rem 1.4rem;overflow:auto;font-size:.86rem;line-height:1.55;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;}
.window-content::-webkit-scrollbar{width:10px;} .window-content::-webkit-scrollbar-track{background:transparent;} .window-content::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent),var(--accent-alt));border-radius:10px;border:2px solid transparent;background-clip:content-box;} .window-content::-webkit-scrollbar-thumb:hover{filter:brightness(1.1);} 

/* About */
.about p{margin:.4rem 0 1rem;}
.chips{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem;}
.chips li{background:linear-gradient(135deg,var(--surface-alt),var(--surface));color:var(--accent);padding:.45rem .8rem;font-size:.62rem;letter-spacing:.5px;text-transform:uppercase;font-weight:600;border-radius:999px;border:1px solid var(--border);box-shadow:var(--shadow-sm);} 

/* Projects */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;}
.project-card{background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);border-radius:16px;padding:.85rem .9rem .95rem;display:flex;flex-direction:column;gap:.45rem;position:relative;overflow:hidden;transition:transform var(--dur-base) var(--ease-base),box-shadow var(--dur-base) var(--ease-base);cursor:pointer;perspective:800px;}
.project-card:hover{transform:translateY(-5px) rotateX(6deg);box-shadow:var(--shadow-glow);} 
.project-card h3{margin:0;font-size:.95rem;background:linear-gradient(90deg,var(--accent),var(--accent-alt));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;}
.project-card p{margin:0;font-size:.72rem;color:var(--muted);line-height:1.3;}

/* Content gallery */
.content-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.8rem;margin-bottom:1rem;}
.content-item{background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);aspect-ratio:1/1;border-radius:14px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--dur-base) var(--ease-base),box-shadow var(--dur-base) var(--ease-base);} 
.content-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-glow);} 
.content-item img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.85);transition:var(--dur-base) var(--ease-base);} 
.content-item:hover img{filter:brightness(.95) saturate(1.1);} 
.hint{margin:.6rem 0 0;font-size:.65rem;color:var(--muted);letter-spacing:.5px;}

/* Blog */
.posts-ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;}
.posts-ul li{background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem .85rem;display:flex;flex-direction:column;gap:.3rem;cursor:pointer;transition:transform var(--dur-base) var(--ease-base),box-shadow var(--dur-base) var(--ease-base);} 
.posts-ul li:hover{box-shadow:var(--shadow-glow);transform:translateY(-4px);} 
.posts-ul h3{margin:0;font-size:.85rem;font-weight:600;color:var(--text);} 
.posts-ul time{font-size:.55rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);} 
.blog-post-view{line-height:1.55;}
.blog-post-view h1,.blog-post-view h2,.blog-post-view h3{margin:1.2em 0 .4em;font-weight:600;}
.blog-post-view p{margin:.75em 0;}
.blog-post-view code{background:var(--code-bg);padding:.2rem .4rem;border-radius:6px;font-size:.75rem;}
.empty-state{padding:1rem;font-size:.7rem;color:var(--muted);text-align:center;border:1px dashed var(--border);border-radius:12px;margin-top:1rem;}
.hidden{display:none !important;}

/* Contact */
.contact-form{display:flex;flex-direction:column;gap:.6rem;}
.contact-form label{font-size:.7rem;display:flex;flex-direction:column;gap:.3rem;font-weight:600;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;}
.contact-form input,.contact-form textarea{background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);padding:.7rem .75rem;border-radius:10px;color:var(--text);font:inherit;font-size:.8rem;resize:vertical;box-shadow:var(--shadow-sm);} 
.contact-form textarea{min-height:160px;}
.form-status{font-size:.65rem;letter-spacing:.5px;color:var(--muted);margin:.4rem 0 0;min-height:1em;}
.honeypot{position:absolute;left:-10000px;opacity:0;}

/* Socials */
.socials{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem;}
.social-link{display:block;background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);padding:.75rem .8rem;border-radius:12px;font-size:.65rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;text-align:center;color:var(--muted);transition:transform var(--dur-base) var(--ease-base),box-shadow var(--dur-base) var(--ease-base);} 
.social-link:hover{color:var(--text);box-shadow:var(--shadow-glow);transform:translateY(-3px);} 

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:200;}
.lightbox.hidden{display:none;}
.lightbox-content{max-width:92%;max-height:82vh;overflow:auto;background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);padding:1rem;border-radius:18px;box-shadow:var(--shadow-glow);} 
.lightbox-close{position:absolute;top:1rem;right:1rem;background:linear-gradient(145deg,var(--surface),var(--surface-alt));border:1px solid var(--border);color:var(--text);width:46px;height:46px;border-radius:12px;font-size:1.2rem;display:grid;place-items:center;cursor:pointer;transition:var(--dur-base) var(--ease-base);} 
.lightbox-close:hover{background:var(--accent);color:#fff;} 

/* Buttons generic (re-usable) */
.btn{background:linear-gradient(135deg,var(--surface),var(--surface-alt));border:1px solid var(--border);color:var(--text);font-size:.65rem;letter-spacing:.6px;text-transform:uppercase;font-weight:600;padding:.55rem .95rem;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:transform var(--dur-fast) var(--ease-fast),box-shadow var(--dur-base) var(--ease-base);position:relative;overflow:hidden;}
.btn:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(var(--accent-glow)/0.12),transparent 60%);opacity:0;transition:opacity var(--dur-base) var(--ease-base);} 
.btn:hover:before,.btn:focus-visible:before{opacity:1;}
.btn:hover,.btn:focus-visible{box-shadow:var(--shadow-sm);transform:translateY(-2px);} 
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-alt));color:#fff;border:1px solid rgba(var(--accent-glow)/.5);} 
.btn-primary:hover{box-shadow:var(--glow-accent);}
.btn-ghost{background:transparent;color:var(--muted);} 
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent);} 

/* Footer */
.site-footer{position:fixed;bottom:0;left:0;width:100%;text-align:center;font-size:.55rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:.55rem 0 .6rem;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5));pointer-events:none;z-index:40;font-weight:600;}

/* Noise & scanlines */
.noise-overlay{position:fixed;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");mix-blend-mode:overlay;opacity:var(--noise-opacity);}
.scanlines{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;opacity:var(--scanline-opacity);} 

/* Terminal (easter egg) */
.terminal{display:flex;flex-direction:column;gap:.6rem;font-size:.7rem;}
.term-output{background:var(--code-bg);padding:.75rem;border:1px solid var(--border);border-radius:12px;height:180px;overflow:auto;font-family:var(--font-mono);}
.terminal form{display:flex;}
#term-input{flex:1;background:var(--surface-alt);border:1px solid var(--border);padding:.55rem .7rem;border-radius:10px;color:var(--text);font-family:var(--font-mono);font-size:.7rem;}

pre{background:var(--code-bg);padding:.9rem 1rem;border-radius:14px;overflow:auto;font-size:.72rem;line-height:1.4;border:1px solid var(--border);} pre code{background:none;padding:0;}
code{background:var(--code-bg);padding:.25rem .45rem;border-radius:6px;font-size:.7rem;}
html[data-theme="dark"] .hero-title{animation:glitchHue 9s linear infinite alternate;}
@keyframes glitchHue{0%,95%{filter:hue-rotate(0deg) drop-shadow(0 0 0 rgba(var(--accent-glow),0));}100%{filter:hue-rotate(25deg) drop-shadow(0 0 22px rgba(var(--accent-glow),.35));}}

/* Accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;} .rotating .word{transition:none!important;} .project-card:hover,.content-item:hover,.btn:hover{transform:none!important;}}

/* Responsive */
@media (max-width:860px){.window{width:90%;left:5%!important;top:12%!important;}}
/* Tablet breakpoint adjustments */
@media (max-width:768px){
	.hero-title{font-size:clamp(2.2rem,8vw,3.6rem);} /* scale down large heading */
	.hero{padding:3rem 1rem 6rem;}
	.window{width:92%;left:4%!important;top:10%!important;}
	.dock-btn{width:3rem;height:3rem;font-size:1.05rem;}
	.pill-btn{width:2.4rem;height:2.4rem;}
	.project-card p,.content-item .hint{font-size:.7rem;}
}
@media (max-width:620px){ /* mobile modal mode */
	body{overflow:auto;}
	body.with-dock-padding{padding-bottom:200px;} /* a bit more on very small screens */
	.hero{position:relative;min-height:640px;padding:4.5rem 1rem 11rem;}
	#desktop{position:relative;inset:auto;min-height:40vh;}
	.window{position:relative !important;top:auto !important;left:auto !important;margin:1rem auto;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;border-radius:26px;box-shadow:var(--shadow-glow);}
	.window-bar{cursor:default;}
	.resize-handle{display:none;}
	.dock{bottom:.35rem;left:50%;transform:translateX(-50%);flex-wrap:wrap;row-gap:.4rem;padding:.6rem .7rem .75rem;}
	.dock-btn{width:48px;height:48px;}
	.control-pill{order:10;}
}
/* Phone narrow (<=480px) refine to single column & bigger tap targets */
@media (max-width:480px){
	.hero{padding:3.8rem .9rem 10rem;}
	.hero-title{font-size:clamp(2rem,10vw,3rem);} 
	.dock{gap:.45rem;padding:.55rem .6rem calc(.7rem + env(safe-area-inset-bottom));}
	.dock-btn{width:3.1rem;height:3.1rem;font-size:1.15rem;}
	.pill-btn{width:2.6rem;height:2.6rem;}
	.window{margin:.85rem auto;}
	.window-content{font-size:.9rem;}
	.project-card{padding:.7rem .75rem .8rem;}
	.project-card h3{font-size:.85rem;}
	.project-card p{font-size:.66rem;}
}

/* Extra small adjustments for landscape phones */
@media (max-width:480px) and (orientation:landscape){
	.hero{min-height:520px;}
	.dock{gap:.4rem;}
	.dock-btn{width:42px;height:42px;}
}

/* ==================== Easter Egg / SFX Visual Enhancements ==================== */
/* Speed trail effect */
.speed-trail{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:180;}
.speed-trail:before{content:"";position:absolute;left:-20%;top:50%;width:140%;height:6px;background:linear-gradient(90deg,transparent,var(--accent),transparent);filter:blur(6px) brightness(1.4);animation:trailMove 1.2s cubic-bezier(.7,.1,.3,1);}
@keyframes trailMove{0%{transform:translateY(-50%) translateX(-10%) scaleX(.4);opacity:0;}10%{opacity:1;}70%{opacity:1;}100%{transform:translateY(-50%) translateX(25%) scaleX(1.6);opacity:0;}}

/* Lightning flash accent (re-uses flashEmoji base) */
.flash-pulse{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(var(--accent-glow),.6),transparent 55%);animation:flashPulse .6s ease-out;z-index:170;mix-blend-mode:screen;}
@keyframes flashPulse{0%{opacity:0;}20%{opacity:1;}100%{opacity:0;}}

/* Reduced motion fallbacks: simply ensure decorative effects fade instantly */
@media (prefers-reduced-motion:reduce){
	.speed-trail:before{animation-duration:.25s;}
	.flash-pulse{animation-duration:.25s;}
}

/* ===== Additional Easter Egg Visuals ===== */
.egg-guitar{position:fixed;z-index:250;font-size:3.2rem;pointer-events:none;animation:eggGuitar .9s var(--ease-base) forwards;filter:drop-shadow(0 6px 20px rgba(var(--accent-glow),.35));}
@keyframes eggGuitar{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-40deg);}40%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(8deg);}70%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(25deg);}}

.cursor-trail{position:fixed;inset:0;pointer-events:none;z-index:250;}
.cursor-trail .trail-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-alt));opacity:.8;animation:trailFade 1s linear forwards;mix-blend-mode:screen;}
@keyframes trailFade{0%{transform:scale(.4);opacity:.9;}80%{opacity:.1;}100%{transform:scale(1.2);opacity:0;}}
@media (prefers-reduced-motion:reduce){.cursor-trail .trail-dot{animation-duration:.35s;}}

.egg-lightning-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:250;pointer-events:none;animation:overlayFade .9s ease-out forwards;}
@keyframes overlayFade{0%{opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{opacity:0;}}
.egg-lightning-overlay .bolt{position:absolute;width:140px;max-width:28vw;animation:boltFlash .6s ease-in-out forwards;filter:drop-shadow(0 0 12px rgba(255,255,130,.8));}
@keyframes boltFlash{0%{opacity:0;transform:scale(.6) rotate(8deg);}20%{opacity:1;transform:scale(1) rotate(-4deg);}70%{opacity:1;}100%{opacity:0;transform:scale(.7) rotate(10deg);}}
@media (prefers-reduced-motion:reduce){.egg-lightning-overlay{animation-duration:.45s;} .egg-lightning-overlay .bolt{animation-duration:.35s;}}

.omnitrix-pulse{position:relative;}
.omnitrix-pulse:after{content:"";position:absolute;inset:-6px;border:2px solid #0f5;border-radius:999px;animation:omniPulse 1.2s ease-out infinite;filter:drop-shadow(0 0 10px #0f5);} 
@keyframes omniPulse{0%{opacity:1;transform:scale(.7);}70%{opacity:0;transform:scale(1.4);}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.omnitrix-pulse:after{animation-duration:.6s;}}

.clapboard{position:fixed;top:-120px;left:-120px;z-index:250;font-size:4rem;pointer-events:none;animation:clapSlide 1.2s cubic-bezier(.7,.1,.2,1) forwards;}
@keyframes clapSlide{0%{transform:translate(0,0) rotate(-25deg);opacity:0;}15%{opacity:1;}35%{transform:translate(160px,160px) rotate(6deg);}70%{opacity:1;}100%{transform:translate(0,260px) rotate(-35deg);opacity:0;}}
@media (prefers-reduced-motion:reduce){.clapboard{animation-duration:.7s;}}

.konami-toast{position:fixed;bottom:calc(1rem + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:linear-gradient(135deg,var(--surface-alt),var(--surface));border:1px solid var(--border);padding:.55rem .9rem;border-radius:14px;font-size:.65rem;letter-spacing:.5px;font-weight:600;color:var(--text);box-shadow:var(--shadow);z-index:260;animation:toastIn .65s var(--ease-base),toastOut .55s var(--ease-base) 2.8s forwards;pointer-events:none;}
@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(12px) scale(.9);}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}
@keyframes toastOut{0%{opacity:1;}100%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.95);}}