:root { --sky:#91e7ff; --deep:#075a9c; --ink:#073b64; --blue:#087bc1; --cyan:#dffaff; --line:rgba(255,255,255,.72); --shadow:0 16px 40px rgba(1,75,125,.2); }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; min-width:320px; color:var(--ink); font:16px/1.55 "Segoe UI", Tahoma, sans-serif; background:linear-gradient(180deg,#5bd0f4 0,#d9f9ff 42%,#b9ebce 100%); }
    body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background:radial-gradient(circle at 15% 18%,#fff 0 2px,transparent 3px),radial-gradient(circle at 83% 30%,#fff 0 3px,transparent 4px),radial-gradient(circle at 65% 11%,#fff 0 1px,transparent 2px); background-size:240px 180px,340px 260px,190px 160px; }
    a { color:inherit; }
    .topbar { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px clamp(20px,5vw,72px); }
    .brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.03em; text-shadow:0 2px 3px #1673a2; }
    .orb { width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 30% 20%,#fff 0 8%,#b9f4ff 17%,#11a5df 55%,#006db2 100%); border:2px solid #fff; box-shadow:inset -5px -7px 8px #0065a8,0 3px 9px #0573a8; }
    .header-tools { display:flex; align-items:center; gap:24px; }
    .topbar nav { display:flex; gap:24px; color:#fff; font-size:14px; font-weight:700; }
    .topbar nav a { text-decoration:none; opacity:.9; }
    .topbar nav a:hover { opacity:1; text-decoration:underline; }
    .volume-control { display:flex; align-items:center; gap:7px; min-width:190px; padding:6px 10px; border:1px solid rgba(255,255,255,.78); border-radius:999px; color:#fff; background:rgba(0,91,152,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); font-size:12px; font-weight:800; text-shadow:0 1px 2px #1673a2; }
    .volume-control input { width:72px; accent-color:#fff; cursor:pointer; }
    .volume-control output { min-width:28px; font-variant-numeric:tabular-nums; text-align:right; }
    .wrap { position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 24px 64px; }
    .hero { min-height:420px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; padding:42px 0 78px; }
    .eyebrow { display:inline-block; margin:0 0 16px; padding:6px 12px; border:1px solid rgba(255,255,255,.9); border-radius:999px; color:#fff; background:rgba(0,106,170,.2); font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
    h1 { margin:0; max-width:680px; color:#fff; font-size:clamp(3.4rem,8vw,7rem); line-height:.9; letter-spacing:-.07em; text-shadow:0 4px 0 #1996cb,0 7px 15px rgba(0,72,130,.35); }
    .hero p { max-width:510px; margin:26px 0 0; color:#045587; font-size:1.14rem; font-weight:600; }
    .window { position:relative; transform:rotate(2deg); border:2px solid rgba(255,255,255,.86); border-radius:18px; overflow:hidden; background:rgba(222,250,255,.48); box-shadow:var(--shadow),inset 0 0 35px rgba(255,255,255,.5); backdrop-filter:blur(9px); }
    .window:after { content:""; position:absolute; width:130px; height:260px; right:-30px; top:-100px; transform:rotate(35deg); background:rgba(255,255,255,.34); filter:blur(4px); }
    .windowbar { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; background:linear-gradient(#fff8,#a4e7ffb8); border-bottom:1px solid #fff; font-size:13px; font-weight:800; }
    .window-actions { display:flex; gap:5px; }
    .window-actions i { display:block; width:12px; height:12px; border-radius:50%; background:#fff; border:1px solid #1886bb; }
    .window-body { padding:28px 26px 32px; }
    .window-body h2 { margin:0 0 12px; font-size:1.65rem; color:#00619a; }
    .window-body p { margin:0; color:#155e83; font-size:15px; }
    .stats { display:flex; gap:12px; margin-top:25px; }
    .stat { flex:1; padding:13px; border-radius:12px; background:#ffffff73; border:1px solid #fff; text-align:center; }
    .stat strong { display:block; color:#0068aa; font-size:1.5rem; }
    .stat span { color:#267195; font-size:12px; }
    .panel { padding:30px; border:1px solid var(--line); border-radius:24px; background:rgba(238,253,255,.72); box-shadow:var(--shadow); backdrop-filter:blur(10px); }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:23px; }
    .section-head h2 { margin:0; color:#075789; font-size:2rem; letter-spacing:-.04em; }
    .section-head p { margin:0; color:#4f7d92; font-size:14px; }
    .projects { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
    .card { display:flex; flex-direction:column; min-height:190px; padding:20px; border:1px solid rgba(0,131,193,.2); border-radius:16px; background:linear-gradient(135deg,#ffffffc7,#c7f3f4a8); box-shadow:0 5px 14px rgba(6,91,135,.1); transition:transform .2s,box-shadow .2s; }
    .card:hover { transform:translateY(-4px); box-shadow:0 10px 22px rgba(6,91,135,.2); }
    .card-top { display:flex; align-items:start; justify-content:space-between; gap:15px; }
    .card h3 { margin:0; color:#076aa0; font-size:1.18rem; }
    .lang { padding:4px 9px; border-radius:999px; background:#fff9; color:#43788c; font-size:12px; white-space:nowrap; }
    .card p { flex:1; margin:12px 0 18px; color:#376b7f; font-size:14px; }
    .card a { align-self:flex-start; padding:7px 12px; border-radius:9px; color:#fff; background:linear-gradient(#29bde9,#0879be); box-shadow:inset 0 1px 0 #fff8,0 2px 4px #14739a55; font-size:13px; font-weight:800; text-decoration:none; }
    .card a:hover { filter:brightness(1.08); }
    .footer { display:flex; justify-content:space-between; gap:15px; padding:27px 4px 0; color:#27677e; font-size:13px; }
    .footer a { font-weight:800; color:#076aa0; }
    @media (max-width:760px) { .topbar { padding:15px 20px; align-items:flex-start; } .header-tools { align-items:flex-end; flex-direction:column-reverse; gap:8px; } .topbar nav { gap:12px; } .hero { grid-template-columns:1fr; gap:30px; padding-top:35px; } h1 { font-size:4.5rem; } .window { max-width:520px; margin:0 auto; } .panel { padding:20px; } .projects { grid-template-columns:1fr; } .section-head { display:block; } .section-head p { margin-top:6px; } }
    @media (max-width:440px) { .topbar nav a:first-child { display:none; } .volume-label { display:none; } .volume-control { min-width:145px; } .wrap { padding:0 16px 40px; } h1 { font-size:3.55rem; } .hero p { font-size:1rem; } .stats { gap:6px; } .stat { padding:10px 5px; } }
      .card { overflow:hidden; position:relative; z-index:1; }
    .card-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0.6; transition:opacity .3s; }
    .card:hover .card-bg { opacity:1; }
    /* BlubberBound - Bubbles/Water */
    .bg-blubber { background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.8) 0, transparent 15%), radial-gradient(circle at 20% 80%, rgba(255,255,255,0.5) 0, transparent 20%), linear-gradient(135deg, rgba(164,228,255,0.3), rgba(0,140,255,0.1)); }
    .bg-blubber::after { content:''; position:absolute; inset:0; background-image: radial-gradient(#fff 2px, transparent 2px); background-size: 30px 30px; opacity:0.2; }
    /* FlipperClipper - Film/Glossy */
    .bg-flipper { background: linear-gradient(135deg, rgba(255,230,180,0.4), rgba(255,140,0,0.1)); border-left: 8px dashed rgba(255,180,100,0.3); }
    /* RainWorldCompanion - Rain/Teal glass */
    .bg-rain { background: linear-gradient(to bottom, rgba(180,240,255,0.2), rgba(0,100,150,0.2)); }
    .bg-rain::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(15deg, transparent, transparent 10px, rgba(255,255,255,0.2) 10px, rgba(255,255,255,0.2) 11px); }
    /* Shapekey-Sync - 3D/Purple Gloss */
    .bg-shapekey { background: linear-gradient(135deg, rgba(230,200,255,0.4), rgba(150,100,255,0.1)); }
    .bg-shapekey::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 20px 20px; transform: perspective(200px) rotateX(45deg); opacity: 0.5; }
    /* FinFetcher - Tech/Music/Downloader */
    .bg-fin { background: linear-gradient(135deg, rgba(180,255,200,0.3), rgba(0,200,100,0.1)); }
    .bg-fin::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40%; background: repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(255,255,255,0.4) 4px, rgba(255,255,255,0.4) 8px); opacity:0.3; mask-image: linear-gradient(to top, black, transparent); -webkit-mask-image: linear-gradient(to top, black, transparent); }
    /* Weather App - Sky/Sun */
    .bg-weather { background: radial-gradient(circle at 100% 0%, rgba(255,235,150,0.6) 0, rgba(255,255,255,0) 50%), linear-gradient(135deg, rgba(180,230,255,0.4), rgba(100,180,255,0.1)); }
    /* Rain World Modding Wiki - Tech/Knowledge/Wiki style */
    .bg-rwmodding { background: linear-gradient(135deg, rgba(200,230,210,0.4), rgba(100,180,150,0.1)); }
    .bg-rwmodding::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.2) 10px, rgba(255,255,255,0.2) 11px); opacity: 0.5; }
    /* Seal Suite Theme */
    .seal-suite { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(190, 245, 255, 0.7), rgba(90, 190, 245, 0.6)); border-color: rgba(255,255,255,0.9); }
    .seal-suite::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 2px, transparent 3px), radial-gradient(circle at 75% 65%, rgba(255,255,255,0.4) 4px, transparent 6px), radial-gradient(circle at 90% 20%, rgba(255,255,255,0.5) 1px, transparent 2px), radial-gradient(circle at 40% 80%, rgba(255,255,255,0.6) 3px, transparent 5px); background-size: 200px 200px; animation: float 10s linear infinite; opacity: 0.8; }
    @keyframes float { from { transform: translateY(0); } to { transform: translateY(-200px); } }
    .seal-suite h2 { color: #005a9c; text-shadow: 0 1px 2px rgba(255,255,255,0.8); }