:root{--ink: #0B1B36;--ink-soft: #3E5273;--paper: #F4F7FB;--bg: #DDE6F0;--accent: #1F3FD1;--periwinkle: #BFD2FF;--line: #A9BEDC;--glass: rgba(255, 255, 255, .6);--glass-edge: rgba(255, 255, 255, .95);--shadow: 0 10px 30px rgba(30, 60, 120, .1);--radius: 18px;--font-display: "Michroma", sans-serif;--font-body: "Instrument Sans", system-ui, sans-serif;--font-mono: "Space Mono", monospace}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;overflow-x:hidden;background:radial-gradient(1200px 700px at 85% -10%,#f4f8fd,#f4f8fd00 60%),radial-gradient(900px 600px at -10% 40%,#c9d7ea,#c9d7ea00 60%),var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,p,ol,ul{margin:0}a{color:var(--accent)}a:hover{color:var(--ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.section{position:relative;max-width:1240px;margin:0 auto;padding-inline:24px}.section-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:28px}.heading{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.2}.mono{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft)}.panel{border-radius:var(--radius);overflow:hidden;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow)}.panel__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(11,27,54,.08);background:linear-gradient(180deg,#fffc,#e8eff8cc);font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}.dots{background-image:radial-gradient(var(--ink) 1.1px,transparent 1.3px);background-size:14px 14px}.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--font-mono);font-size:13px;text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease}.btn:hover{background:var(--ink);color:var(--paper)}.btn--accent{border-color:var(--accent);background:var(--accent);color:#fff}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}.about{display:flex;flex-wrap:wrap;gap:24px;padding-block:24px 112px}.about__intro{flex:1 1 560px;min-width:0}.about__lights{display:flex;gap:6px}.about__lights span{width:10px;height:10px;border-radius:50%;border:1px solid #8DA3C4}.about__lights span:last-child{border-color:var(--accent);background:var(--accent)}.about__body{display:flex;flex-direction:column;gap:18px;padding:32px 32px 36px}.about__lead{max-width:620px;font-size:18px}.about__hobbies{flex:1 1 340px;min-width:0}.playlist{padding:12px 16px 16px;list-style:none;font-size:17px}.playlist li{display:flex;gap:14px;align-items:baseline;padding:12px 4px}.playlist li+li{border-top:1px dashed #B7C7DD}.playlist__number{font-family:var(--font-mono);font-size:13px;color:var(--accent)}.contact{--on-dark: #EAF0F8;--on-dark-soft: var(--line);padding-bottom:32px}.contact__panel{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:40px;padding:64px 40px 32px;border-radius:24px;background:var(--ink);color:var(--on-dark)}.globe{position:absolute;right:-70px;top:-80px;width:420px;height:420px;opacity:.42;stroke:var(--periwinkle);stroke-width:.6}.contact__main{position:relative;display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}.contact__intro{min-width:0;display:flex;flex-direction:column;gap:14px}.contact__eyebrow{color:var(--on-dark-soft)}.contact__heading{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,4vw,52px);line-height:1.15}.contact__email{font-family:var(--font-mono);font-size:20px;color:var(--periwinkle);overflow-wrap:anywhere}.contact__email:hover{color:var(--on-dark)}.contact__links{display:flex;flex-wrap:wrap;gap:12px}.contact .btn{border-color:var(--on-dark-soft);color:var(--on-dark)}.contact .btn:hover{background:#eaf0f81f}.contact .btn--light{border-color:var(--on-dark);background:var(--on-dark);color:var(--ink)}.contact .btn--light:hover{background:#fff}.contact__legal{position:relative;padding-top:20px;border-top:1px solid rgba(234,240,248,.15);font-size:12px;color:var(--on-dark-soft)}.experience{padding-bottom:112px}.tracklist{padding:8px 28px;list-style:none}.track{display:flex;flex-wrap:wrap;gap:8px 24px;padding:24px 0}.track+.track{border-top:1px solid rgba(11,27,54,.1)}.track__number{flex:0 0 40px;font-family:var(--font-mono);font-size:15px;color:var(--accent)}.track__body{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:6px}.track__title{font-size:21px;font-weight:600;line-height:1.3}.track__title a{color:var(--ink);text-decoration:none}.track__title a:hover{color:var(--accent)}.track__summary{color:var(--ink-soft)}.nav{position:sticky;top:0;z-index:10;padding:14px 24px 0}.nav__bar{max-width:1240px;margin:0 auto;padding:10px 18px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;border-radius:999px;background:#ffffff9e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-edge);box-shadow:0 6px 24px #1e3c781a}.nav a{color:var(--ink-soft);text-decoration:none}.nav a:hover{color:var(--accent)}.nav .nav__brand{font-family:var(--font-display);font-size:13px;letter-spacing:.12em;color:var(--ink)}.nav__links{display:flex;flex-wrap:wrap;gap:4px 22px;font-family:var(--font-mono);font-size:13px}.nav__toggle{display:none}@media (max-width: 640px){html{scroll-padding-top:24px}.nav{position:fixed;top:14px;right:16px;padding:0}.nav__toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 13px;border-radius:50%;border:1px solid var(--glass-edge);background:#ffffffb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 24px #1e3c781f;cursor:pointer}.nav__toggle span{height:1.5px;border-radius:1px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}.nav--open .nav__toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.nav--open .nav__toggle span:nth-child(2){opacity:0}.nav--open .nav__toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}.nav__bar{position:absolute;top:56px;right:0;min-width:200px;padding:8px;border-radius:var(--radius);background:#ffffffd9;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.nav--open .nav__bar{visibility:visible;opacity:1;transform:none}.nav .nav__brand{display:none}.nav__links{flex-direction:column;gap:0;width:100%;font-size:15px}.nav__links a{padding:10px 12px;border-radius:10px}.nav__links a:hover{background:#1f3fd10f}}.hero{display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:space-between;padding-block:88px 72px}.hero__halftone{position:absolute;right:0;top:24px;width:62%;height:520px;opacity:.1;-webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);mask-image:radial-gradient(closest-side,#000 20%,transparent 100%);pointer-events:none}.hero__intro{position:relative;flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:26px}.hero__tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}.hero__tags li{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#ffffff80}.hero__name{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,6.6vw,96px);line-height:1.02;letter-spacing:-.02em}.hero__tagline{max-width:500px;font-size:20px;line-height:1.5;color:var(--ink-soft)}.hero__actions{display:flex;flex-wrap:wrap;gap:12px}.waveform{width:100%;max-width:520px;height:64px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.waveform path{vector-effect:non-scaling-stroke}.waveform__echo{stroke:#8fa8d8;stroke-width:1.2}.waveform__lead{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.hero__deck{position:relative;flex:0 1 460px;min-width:260px;display:flex;flex-direction:column;align-items:center;gap:16px}.hero__ring{position:relative;width:100%;max-width:460px;aspect-ratio:1;border-radius:50%;background:#ffffff6b;border:1px solid var(--glass-edge);box-shadow:0 30px 70px #1e3c782e,inset 0 0 0 10px #ffffff59}.hero__ring:before{content:"";position:absolute;top:7%;right:7%;bottom:7%;left:7%;border-radius:50%;box-shadow:0 10px 30px #1f3fd12e}.hero__notes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.note{position:absolute;font-size:24px;line-height:1}.disc{position:absolute;top:7%;right:7%;bottom:7%;left:7%;border-radius:50%;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:radial-gradient(circle,transparent 0 15%,rgba(255,255,255,.85) 15.5% 17%,transparent 17.5%),conic-gradient(from 20deg,#eaf2ff,#bfd2ff,#f3e8ff,#c9f1ff,#fff,#d3dfff,#e9ddff,#cff6ff,#eaf2ff);box-shadow:inset 0 0 0 1px #0b1b361f;will-change:transform}.disc:active{cursor:grabbing}.disc:before,.disc:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%}.disc:before{background:repeating-radial-gradient(circle,rgba(255,255,255,.22) 0 1px,transparent 1px 4px)}.disc:after{background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.75) 48%,transparent 60%)}.disc__label{position:absolute;top:33%;right:33%;bottom:33%;left:33%;z-index:1;border-radius:50%;background:#eef4fce6;box-shadow:inset 0 0 0 1px #0b1b3624}.disc__label:after{content:"";position:absolute;top:35.3%;right:35.3%;bottom:35.3%;left:35.3%;border-radius:50%;background:var(--bg);box-shadow:inset 0 1px 3px #0b1b3659}.hero__hint{font-size:12px}.projects{padding-bottom:120px}.projects__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px}.card{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#ffffff9e;border:1px solid var(--glass-edge);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.card:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 18px 40px #1f3fd129}.card:has(.card__source:focus-visible){outline:2px solid var(--accent);outline-offset:3px}.card__source:focus-visible{outline:none}.card__art{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;color:var(--ink)}.card__volume{position:absolute;left:16px;bottom:12px;font-family:var(--font-mono);font-size:11px;pointer-events:none}.card__body{position:relative;flex-grow:1;display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px}.card__title{font-family:var(--font-display);font-weight:400;font-size:18px;line-height:1.3}.card__summary{flex-grow:1;color:var(--ink-soft)}.card__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}.card__source{color:inherit;text-decoration:none}.card__source:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.card__links{display:flex;gap:14px;color:var(--accent)}.card__demo{position:relative;z-index:1;text-decoration:none}.card__demo:hover{text-decoration:underline}.preview{position:absolute;top:0;right:0;bottom:0;left:0}.preview svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.preview__dots{position:absolute;right:16px;top:16px;width:120px;height:80px;opacity:.18}.preview__dots--low{top:auto;bottom:16px;width:90px;height:60px;opacity:.25}.preview--lamp{background:linear-gradient(160deg,#c4d6f1,#eaf0f9)}.preview--cursor{background:radial-gradient(circle at 60% 50%,#fff,#fff0 40%),linear-gradient(200deg,#bfd3f2,#eef3fb)}.preview--route{background:linear-gradient(160deg,#d3e0f3,#f2f6fc)}.preview--chroma{--spread: 0;--pan: 0;background:linear-gradient(160deg,#dce6f5,#f4f7fc)}.preview--chroma:hover{--spread: 1}.chroma-layer{position:absolute;left:39%;top:24%;width:22%;height:52%;transition:transform .5s cubic-bezier(.22,1,.36,1)}.chroma-layer--left{background:#a9c1ea;opacity:.9;transform:translate(calc(-40% - var(--spread) * 95% - var(--pan) * 16%),calc(14% - var(--spread) * 10%)) rotate(calc(var(--spread) * -5deg))}.chroma-layer--middle{background:#c8b8f0;mix-blend-mode:multiply;opacity:.8;transform:translate(calc(var(--pan) * 10%),calc(var(--spread) * 6%))}.chroma-layer--right{background:#9edceb;mix-blend-mode:multiply;opacity:.8;transform:translate(calc(40% + var(--spread) * 95% + var(--pan) * 16%),calc(-14% - var(--spread) * 2%)) rotate(calc(var(--spread) * 5deg))}
