: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 { --volume:50%; width:78px; height:16px; margin:0 2px; appearance:none; -webkit-appearance:none; cursor:pointer; background:transparent; }
    .volume-control input::-webkit-slider-runnable-track { height:7px; border:1px solid rgba(255,255,255,.92); border-radius:999px; background:linear-gradient(90deg,#eaffff 0,#74e6f5 var(--volume),rgba(0,70,125,.55) var(--volume),rgba(0,70,125,.28) 100%); box-shadow:inset 0 1px 2px rgba(0,72,116,.45),0 1px 0 rgba(255,255,255,.4); }
    .volume-control input::-webkit-slider-thumb { width:16px; height:16px; margin-top:-5px; border:2px solid #fff; border-radius:50%; -webkit-appearance:none; background:radial-gradient(circle at 32% 22%,#fff 0 12%,#aef8ff 25%,#24b9e1 62%,#0476b7 100%); box-shadow:inset -2px -3px 4px rgba(0,81,153,.38),0 1px 5px rgba(0,59,105,.65),0 0 5px rgba(215,255,255,.8); }
    .volume-control input::-moz-range-track { height:7px; border:1px solid rgba(255,255,255,.92); border-radius:999px; background:rgba(0,70,125,.36); box-shadow:inset 0 1px 2px rgba(0,72,116,.45),0 1px 0 rgba(255,255,255,.4); }
    .volume-control input::-moz-range-progress { height:7px; border-radius:999px; background:linear-gradient(90deg,#eaffff,#74e6f5); }
    .volume-control input::-moz-range-thumb { width:13px; height:13px; border:2px solid #fff; border-radius:50%; background:radial-gradient(circle at 32% 22%,#fff 0 12%,#aef8ff 25%,#24b9e1 62%,#0476b7 100%); box-shadow:inset -2px -3px 4px rgba(0,81,153,.38),0 1px 5px rgba(0,59,105,.65),0 0 5px rgba(215,255,255,.8); }
    .volume-control input:hover::-webkit-slider-thumb { filter:brightness(1.1); box-shadow:inset -2px -3px 4px rgba(0,81,153,.32),0 1px 6px rgba(0,59,105,.65),0 0 9px #d7ffff; }
    .volume-control output { flex:0 0 38px; width:38px; min-width:38px; padding:1px 2px; border:1px solid rgba(255,255,255,.38); border-radius:6px; background:rgba(0,80,135,.2); box-shadow:inset 0 1px rgba(255,255,255,.18); font-variant-numeric:tabular-nums; text-align:center; }
    .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); }

html { overflow-x: clip; }
body {
  overflow-x: clip;
  background: radial-gradient(ellipse at 85% 0%, #e0ffffaa, transparent 45%),
    linear-gradient(160deg, #139cdc 0%, #70def3 30%, #cef7f6 62%, #b0eac5 100%);
}
body::before {
  opacity: .55;
  mask-image: linear-gradient(#000, transparent 75%);
}
.hero { position: relative; isolation: isolate; }
.hero::before, .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 110%;
  height: 270px;
  left: -5%;
  top: 50px;
  border-radius: 50%;
  border-bottom: 2px solid #ffffffb8;
  background: linear-gradient(175deg, transparent 50%, #e8ffff12 65%, #ffffff80 99%);
  box-shadow: 0 12px 30px -18px #fff;
  transform: rotate(-17deg);
  animation: light-current 14s ease-in-out infinite alternate;
}
.hero::after {
  top: 80px;
  height: 210px;
  border-bottom-color: #b7ffceaa;
  opacity: .6;
  animation-delay: -7s;
}
.window {
  background: linear-gradient(125deg, #f1ffffb8, #b5eaff7a 60%, #eaffffb0);
  box-shadow: 0 22px 45px #005f9538, inset 0 1px 1px #fff, inset 0 -2px 5px #038ac238;
  animation: glass-drift 8s ease-in-out infinite;
}
.window::after { pointer-events: none; height: 170%; top: -30%; opacity: .7; }
.windowbar {
  background: linear-gradient(#ffffffb8, #e5fbff85 48%, #72cce45c 50%, #d6f8ffb3);
  box-shadow: 0 1px 0 #167ea230;
  text-shadow: 0 1px #fff;
}
.window-actions i { background: radial-gradient(circle at 35% 25%, #fff, #78d7ed 70%); box-shadow: 0 1px 2px #005c8233; }
.stat { background: linear-gradient(#ffffffb0, #f0ffff5c); box-shadow: inset 0 1px #fff, 0 2px 4px #0783a21a; }
.panel { position: relative; box-shadow: 0 16px 40px #014b7d2b, inset 0 1px 0 #fff, inset 0 -1px 0 #2a9baa33; }
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, #fff3, transparent 22%, transparent 80%, #fff2);
}
.card { border-color: #ffffffc9; box-shadow: 0 5px 14px #065b871a, inset 0 1px 0 #fff, inset 0 -1px 0 #258faf38; }
.card a {
  background: linear-gradient(#63d6f1, #22a9d7 47%, #087db9 50%, #1495ca);
  border: 1px solid #087bb0;
  box-shadow: inset 0 1px 0 #fff9, inset 0 -1px 0 #09679855, 0 2px 4px #14739a55;
  text-shadow: 0 1px 1px #03518380;
}
.card a:active { transform: translateY(1px); }
a:focus-visible, input:focus-visible { outline: 3px solid #005e9d; outline-offset: 4px; }
.lang { box-shadow: inset 0 1px #fff, 0 1px 2px #14739a22; }
.seal-suite::before {
  inset: -200px 0 0;
  background-image: radial-gradient(circle at 20% 30%, transparent 12px, #ffffff80 13px, #ffffff22 15px, transparent 16px),
    radial-gradient(circle at 75% 65%, transparent 0 23px, #ffffff88 24px, transparent 26px),
    radial-gradient(circle at 90% 20%, #fff9 0 2px, transparent 4px),
    radial-gradient(circle at 40% 80%, transparent 6px, #ffffffaa 7px, transparent 9px);
  background-size: 340px 320px;
  animation: water-bubbles 24s linear infinite;
}
.bg-blubber::after { animation: water-bubbles 12s linear infinite; }
.bg-rain::after { animation: rain-drift 4s linear infinite; }
.bg-shapekey::after { animation: mesh-drift 12s linear infinite; }
.bg-fin::after { transform-origin: bottom; animation: equalizer-breathe 3s ease-in-out infinite alternate; }
@keyframes light-current {
  to { transform: translateY(20px) rotate(-10deg) scaleY(.8); opacity: .7; }
}
@keyframes glass-drift {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes water-bubbles { to { background-position: 0 -320px; } }
@keyframes rain-drift { to { background-position: 12px 45px; } }
@keyframes mesh-drift { to { background-position: 20px 20px; } }
@keyframes equalizer-breathe { to { transform: scaleY(.55); opacity: .55; } }
@media (max-width:760px) {
  .hero::before, .hero::after { width: 100%; left: 0; transform: rotate(-12deg); }
}