/* xaynakive.com · the page
   realistic mixed with an ethereal dream: ice melting in golden hour. */

@font-face{font-family:'Nightcore';src:url(https://cdn.jsdelivr.net/gh/xaynakives/fonts@main/Nightcore.ttf);font-display:swap}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ── palette: colours borrowed from anodised aluminium ── */
:root{
  --sierra:#a5bfd8; --sierra-d:#809dbd; --sierra-dd:#5d7ea3;
  --pink15:#f4d9df; --pink15-d:#e6bcc6;
  --lav17:#d8cdea; --lav17-d:#b7a6d9;
  --star:#f1ebe1; --star-d:#e0d6c7; --star-dd:#c7baa6;
  --zpink:#f4afc4; --zpink-d:#e690ab;
  --gold:#f5c98a;
  --s1:#f7c59f; --s3:#e79bb0; --lav:#c6b8e8;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --page:#0c1122; --ink:#edf2fb; --muted:#a3b2c9; --faint:#76849b;
  --line:rgba(198,184,232,.16); --glass:rgba(16,23,44,.55); --card:rgba(18,26,52,.42);
  --facebg:rgba(17,26,50,.46); --faceline:rgba(198,184,232,.18);
  --accent:#c6b8e8; --accent-2:#f7c59f; --field:rgba(255,255,255,.05);
  color-scheme:dark;
}
html[data-theme="light"]{
  --page:#e6edf6; --ink:#26314a; --muted:#56617c; --faint:#6f7a92;
  --line:rgba(130,130,190,.26); --glass:rgba(236,235,251,.6); --card:rgba(238,236,251,.42);
  --facebg:rgba(236,234,251,.5); --faceline:rgba(160,155,205,.42);
  --accent:#6f55b8; --accent-2:#b0607f; --field:rgba(255,255,255,.55);
  color-scheme:light;
}

html{scroll-behavior:smooth;background:var(--page)}
body{background:var(--page);color:var(--ink);font-family:"Mali",sans-serif;line-height:1.65;overflow-x:hidden;transition:color .5s,background-color .5s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--page);font-family:"DM Mono",monospace;font-size:12px;padding:10px 14px;border-radius:10px;transition:top .2s}
.skip:focus{top:12px}

/* ── the machined metal button: starlight at rest, presses into sierra blue ── */
.metal{display:inline-grid;place-items:center;cursor:pointer;color:#4a4235;border:1px solid rgba(255,255,255,.8);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px),linear-gradient(160deg,#faf6f0 0%,#ece4d7 52%,#ddd2c1 100%);
  box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 -1px 1px rgba(120,105,80,.26),0 5px 14px -5px rgba(20,25,35,.38);
  transition:transform .12s,background .18s,box-shadow .18s,color .18s,border-color .18s,opacity .3s}
.metal:hover{box-shadow:inset 0 1px .5px #fff,inset 0 -1px 1px rgba(120,105,80,.2),0 7px 18px -5px rgba(20,25,35,.42)}
.metal:active,.metal.pressed{transform:translateY(1px);color:#15263a;border-color:rgba(135,170,200,.9);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 3px),linear-gradient(160deg,#b8cee2 0%,#8eadca 50%,#7294b6 100%);
  box-shadow:inset 0 2px 4px rgba(25,45,70,.45),inset 0 -1px .5px rgba(255,255,255,.4),0 1px 3px rgba(15,25,40,.3)}
.metal:focus-visible{outline:2px solid #9fbad4;outline-offset:3px}
.metal:disabled{opacity:.35;cursor:default;transform:none}

/* anodised finish, headings only: a whisper of sheen, never chrome */
.anod{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,color-mix(in srgb,var(--ink) 62%,#c9d8ea) 50%,var(--ink) 62%,var(--ink) 100%);background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position 1.6s var(--ease)}
.anod:hover,.reveal.in .anod{background-position:0 0}
@supports not (background-clip:text){.anod{color:var(--ink);background:none}}

/* ── atmosphere ── */
body::after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(720px circle at 14% 6%,rgba(255,232,190,.8),rgba(255,226,206,.3) 34%,transparent 62%),radial-gradient(900px circle at 96% 100%,rgba(250,214,190,.35),transparent 55%)}
html[data-theme="light"] body::after{opacity:1}
#stars{position:fixed;inset:0;z-index:-4;width:100%;height:100%;pointer-events:none;transition:opacity .8s}
html[data-theme="light"] #stars{opacity:0}
.bow-fix{position:fixed;inset:0;z-index:-2;pointer-events:none;display:flex;align-items:center;justify-content:center}
.bow{flex:none;width:min(140vw,260vh);transform:rotate(-5deg)}
#bowPath{opacity:.5}
html[data-theme="dark"] #bowPath{stroke:url(#bowLav);opacity:.4}
#rain{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* ── nav: a glass pill ── */
nav{position:fixed;top:16px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 14px}
.navpill{position:relative;display:flex;align-items:center;gap:clamp(12px,2.6vw,24px);width:100%;max-width:1180px;padding:12px 14px 12px 24px;min-height:60px;border-radius:24px;border:1px solid var(--line);background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);box-shadow:0 12px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="light"] .navpill{box-shadow:0 14px 40px -16px rgba(120,120,190,.35),inset 0 1px 0 rgba(255,255,255,.75)}
.brand{font-family:"Sacramento",cursive;font-size:30px;line-height:1;margin-right:auto;color:var(--ink)}
.links{display:flex;gap:clamp(12px,2.2vw,22px);align-items:center}
.links a{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--muted);transition:color .25s}
.links a:hover{color:var(--accent-2)}
.links a.cta{border:1px solid var(--line);border-radius:20px;padding:.5rem .85rem;color:var(--ink)}
.links a.cta:hover{border-color:var(--accent-2)}
.ios{width:46px;height:28px;border-radius:999px;border:none;padding:0;cursor:pointer;flex:none;position:relative;background:rgba(120,132,155,.42);transition:background .3s}
html[data-theme="light"] .ios{background:linear-gradient(90deg,var(--s1),var(--s3))}
.ios .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:linear-gradient(160deg,#fff,#ece6dc);box-shadow:0 2px 5px rgba(0,0,0,.32),inset 0 -1px 1px rgba(120,105,80,.2);transition:transform .28s var(--ease)}
html[data-theme="light"] .ios .knob{transform:translateX(18px)}
.menu-btn{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--glass);cursor:pointer;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu-btn i{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:820px){
  .menu-btn{display:flex}
  .links{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:8px;
    -webkit-backdrop-filter:blur(24px) saturate(125%);backdrop-filter:blur(24px) saturate(125%);box-shadow:0 22px 54px rgba(0,0,0,.4);display:none}
  .links.open{display:flex}
  .links a{padding:12px 14px;border-radius:11px;font-size:12px}
  .links a.cta{border:none}
}

/* ── the void + Mythirium ── */
.void{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.cube-wrap{width:200px;height:200px;perspective:1000px}
.cube{width:200px;height:200px;position:relative;transform-style:preserve-3d}
.face{position:absolute;width:200px;height:200px;display:flex;align-items:center;justify-content:center;border-radius:14px;padding:12px;cursor:pointer;overflow:hidden;
  background:var(--facebg);border:1px solid var(--faceline);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 0 26px rgba(198,184,232,.05),inset 0 0 18px rgba(198,184,232,.04);transition:box-shadow .5s,border-color .5s,background .5s}
html[data-theme="light"] .face{-webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 34px -12px rgba(140,140,200,.34),inset 0 0 34px rgba(246,182,200,.12)}
.face::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;border-radius:inherit;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(247,197,159,.36),rgba(231,155,176,.16) 45%,transparent 68%);transition:opacity .6s}
.face:hover::before,.face:focus-visible::before{opacity:1}
.face:hover,.face:focus-visible{border-color:rgba(247,197,159,.5)}
.face:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.face>*{position:relative;z-index:1}
.face.lifted{visibility:hidden}
.face.front{transform:translateZ(100px)}.face.back{transform:rotateY(180deg) translateZ(100px)}
.face.left{transform:rotateY(-90deg) translateZ(100px)}.face.right{transform:rotateY(90deg) translateZ(100px)}
.front-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.pfp{width:104px;height:104px;border-radius:50%;object-fit:cover;border:2px solid rgba(198,184,232,.28);background:linear-gradient(150deg,var(--sierra),var(--lav17))}
.pfp.gone{visibility:hidden}
.frontname{line-height:1}
/* polaroids on the faces stay still */
.face-polaroid{background:linear-gradient(165deg,rgba(252,249,244,.62),rgba(236,229,218,.5));padding:8px 8px 22px;border-radius:2px;transform:rotate(-3deg);width:158px;box-shadow:0 12px 28px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.face-polaroid .pol-img{width:100%;aspect-ratio:3/2;border-radius:1px;overflow:hidden;background:linear-gradient(150deg,#c9d6e8,#e7cfdc 60%,#f1dcc0)}
.face-polaroid img{width:100%;height:100%;object-fit:cover;display:block}
.face-polaroid img.gone{display:none}
.face-polaroid figcaption{font-family:"Sacramento",cursive;text-align:center;margin-top:6px;color:#3b3b48;font-size:1.05rem;line-height:1}
/* golden hour: the shadow warms slowly while you pay attention, and cools back when you leave */
.shadow-3d{position:absolute;width:200px;height:200px;border-radius:22px;pointer-events:none;transform:rotateX(90deg) translateZ(-196px) rotateY(180deg);
  box-shadow:0 0 42px 34px rgba(170,190,235,.12),inset 0 0 40px 34px rgba(198,184,232,.05);transition:box-shadow 3.2s ease}
html[data-theme="light"] .shadow-3d{box-shadow:0 0 42px 30px rgba(120,130,190,.15),inset 0 0 40px 30px rgba(150,150,200,.06)}
.cube-wrap:hover .shadow-3d,.cube-wrap:focus-within .shadow-3d,.cube-wrap.warm .shadow-3d{transition:box-shadow 7s cubic-bezier(.3,.1,.3,1);box-shadow:0 0 70px 52px rgba(250,200,112,.34),inset 0 0 40px 30px rgba(255,214,150,.12)}
.scrolldown{position:absolute;bottom:5vh;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);animation:bob 2.6s ease-in-out infinite;padding:8px}
@keyframes bob{50%{transform:translateY(6px);opacity:.55}}

/* the front face's glitch, kept calm: slices and colour shifts only */
.heros{position:relative;display:inline-block;font-family:"Nightcore",serif;font-size:1rem;letter-spacing:1px;color:#e6eefb;text-shadow:0 0 8px rgba(168,216,240,.55)}
html[data-theme="light"] .heros{color:#8f72d0;text-shadow:none}
.layers::before,.layers::after{content:attr(data-text);position:absolute;width:110%;z-index:-1;font-family:"DM Mono",monospace}
.layers::before{top:9px;left:14px;color:#e0287d}
.layers::after{top:5px;left:-10px;color:#1bc7fb}
.glitch>span{animation:paths 6s step-end infinite}
.glitch::before{animation:paths 6s step-end infinite,gop 6s step-end infinite,movement 10s step-end infinite}
.glitch::after{animation:paths 6s step-end infinite,gop 6s step-end infinite,movement 8s step-end infinite}
@keyframes paths{
  0%{clip-path:polygon(0 43%,83% 43%,83% 22%,23% 22%,23% 24%,91% 24%,91% 26%,18% 26%,18% 83%,29% 83%,29% 17%,41% 17%,41% 39%,18% 39%,18% 82%,54% 82%,54% 88%,19% 88%,19% 4%,39% 4%,39% 14%,76% 14%,76% 52%,23% 52%,23% 35%,19% 35%,19% 8%,36% 8%,36% 31%,73% 31%,73% 16%,1% 16%,1% 56%,50% 56%,50% 8%)}
  5%{clip-path:polygon(0 29%,44% 29%,44% 83%,94% 83%,94% 56%,11% 56%,11% 64%,94% 64%,94% 70%,88% 70%,88% 32%,18% 32%,18% 96%,10% 96%,10% 62%,9% 62%,9% 84%,68% 84%,68% 50%,52% 50%,52% 55%,35% 55%,35% 87%,25% 87%,25% 39%,15% 39%,15% 88%,52% 88%)}
  30%{clip-path:polygon(0 53%,93% 53%,93% 62%,68% 62%,68% 37%,97% 37%,97% 89%,13% 89%,13% 45%,51% 45%,51% 88%,17% 88%,17% 54%,81% 54%,81% 75%,79% 75%,79% 76%,38% 76%,38% 28%,61% 28%,61% 12%,55% 12%,55% 62%,68% 62%,68% 51%,0 51%,0 92%,63% 92%,63% 4%,65% 4%)}
  76%{clip-path:polygon(0 26%,15% 26%,15% 73%,72% 73%,72% 70%,77% 70%,77% 75%,8% 75%,8% 42%,4% 42%,4% 61%,17% 61%,17% 12%,26% 12%,26% 63%,73% 63%,73% 43%,90% 43%,90% 67%,50% 67%,50% 41%,42% 41%,42% 46%,50% 46%,50% 84%,96% 84%,96% 78%,49% 78%,49% 25%,63% 25%,63% 14%)}
  1%,7%,33%,78%{clip-path:none}
}
@keyframes movement{0%{top:0;left:-20px}15%{top:10px;left:10px}60%{top:5px;left:-10px}75%{top:-5px;left:20px}100%{top:10px;left:5px}}
@keyframes gop{0%{opacity:.1}5%{opacity:.7}30%{opacity:.4}76%{opacity:.4}1%,7%,33%,78%{opacity:0}}

/* ── layout ── */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,6vw,44px)}
section{position:relative;z-index:1}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.kicker{font-family:"DM Mono",monospace;font-weight:400;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.6rem;margin-bottom:2.2rem}
.kicker::before{content:"";width:7px;height:7px;background:var(--accent-2);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* hero */
.hero{min-height:94vh;display:flex;flex-direction:column;justify-content:center;padding-top:90px}
.hero-inner{max-width:min(880px,94%)}
.hero-kick{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.34em;color:var(--muted);margin-bottom:1.6rem}
.hero-title{font-family:"Silkscreen",monospace;font-weight:400;font-size:clamp(2.2rem,5.6vw,3.9rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.hero-aside{font-family:"Sacramento",cursive;font-size:clamp(1.9rem,3.8vw,2.6rem);line-height:1;color:var(--accent);margin:.5rem 0 0 .2rem;transform:rotate(-2deg);transform-origin:left}
.hero-lede{font-size:clamp(1.02rem,1.8vw,1.18rem);line-height:1.7;margin:1.4rem 0 0;max-width:58ch;opacity:.92}
.hero-sub{font-style:italic;font-size:clamp(.92rem,1.6vw,1.02rem);color:var(--muted);margin:.6rem 0 0}
.hero-roles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.hero-roles li{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.42rem .82rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.btn{display:inline-block;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.12em;padding:14px 22px;border-radius:12px;border:1px solid var(--line);cursor:pointer;color:var(--ink);background:var(--glass);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden;transition:transform .25s var(--ease),border-color .25s,color .25s,box-shadow .25s}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn:hover{border-color:var(--s3);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(231,155,176,.5)}
.btn:hover::after{animation:sheen .8s ease}
.btn:active{transform:translateY(1px)}
@keyframes sheen{0%{left:-70%;opacity:0}25%{opacity:.8}100%{left:135%;opacity:0}}
.btn.solid{background:var(--ink);color:var(--page);border-color:var(--ink)}
.btn.solid:hover{background:linear-gradient(90deg,var(--s1),var(--s3));border-color:transparent;color:#2a1622}
@media(max-width:560px){.actions{gap:.55rem}.btn{padding:.75rem 1rem}}

/* selected work: window cards */
.worlds{padding-block:12vh}
.win{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  box-shadow:0 24px 64px -32px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);margin-bottom:2.6rem;transition:border-color .5s,box-shadow .5s}
html[data-theme="light"] .win{box-shadow:0 26px 60px -30px rgba(120,120,190,.42),inset 0 1px 0 rgba(255,255,255,.6)}
.win:hover{border-color:rgba(247,197,159,.38);box-shadow:0 28px 70px -30px rgba(240,180,120,.32)}
.win::before{content:"";position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;transform:rotate(-6deg);background:linear-gradient(115deg,transparent 6%,#a8d8f2,#ceb6f4,#f4bbce,#f3daa1,transparent 94%);opacity:.12}
html[data-theme="light"] .win::before{opacity:.2}
.win-bar,.win-body{position:relative;z-index:1}
.win-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.2)}
html[data-theme="light"] .win-bar{background:rgba(150,140,190,.1)}
.st{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.st .g{width:8px;height:8px;border-radius:50%;background:currentColor}
.st.dev{color:#e0b060}.st.done{color:var(--muted)}
html[data-theme="light"] .st.dev{color:#a7702a}
.st.dev .g{background:conic-gradient(currentColor 0 50%,transparent 0);border:1px solid currentColor}
.win-bar .cat{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--muted)}
.win-body{display:grid;grid-template-columns:1.05fr .95fr;min-height:340px}
.win-body::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(247,197,159,.28),rgba(231,155,176,.14) 45%,transparent 68%);transition:opacity .6s}
.win-body:hover::before{opacity:1}
.w-txt{position:relative;z-index:2;padding:clamp(1.6rem,3.4vw,2.8rem);display:flex;flex-direction:column;justify-content:center}
.w-txt h3{font-family:"Silkscreen",monospace;font-weight:400;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.2}
.proof{margin-top:1rem;display:flex;flex-direction:column;gap:.7rem}
.proof p{font-size:.93rem;color:var(--muted)}
.proof p b{display:block;font-family:"DM Mono",monospace;font-weight:400;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:.12rem}
.w-tech{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 2px}
.w-tech li{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.04em;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem}
.w-links{display:flex;gap:18px;margin-top:1.1rem;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.1em}
.w-links a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:.25s}
.w-links a:hover{color:var(--accent-2);border-color:var(--accent-2)}
.w-photo{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:2rem}
.polaroid{background:linear-gradient(170deg,#fcfaf6,#efe8dd);padding:14px 14px 24px;border-radius:3px;box-shadow:0 22px 45px -14px rgba(0,0,0,.5),inset 0 1px 0 #fff;transform:rotate(-3deg);width:min(430px,82%);transition:transform .6s var(--ease)}
.win.alt .polaroid{transform:rotate(2.5deg)}
.win:hover .polaroid{transform:rotate(-1deg)}
.polaroid .ph{aspect-ratio:7/4;overflow:hidden;border-radius:1px;background:linear-gradient(150deg,#c9d6e8,#e7cfdc 60%,#f1dcc0)}
.polaroid img{width:100%;height:100%;display:block;object-fit:cover}
.polaroid img.gone{display:none}
.polaroid figcaption{font-family:"Sacramento",cursive;text-align:center;margin-top:12px;color:#3b3b48;font-size:1.35rem;line-height:1}
.win.alt .w-txt{order:2}.win.alt .w-photo{order:1}
@media(max-width:760px){.win-body{grid-template-columns:1fr}.w-photo{order:-1!important;padding:1.6rem 1.6rem .2rem}.w-txt{order:0!important}}

/* experience: a clean timeline */
.xp{padding-block:12vh}
.xplist{border-top:1px solid var(--line)}
.xprow{display:grid;grid-template-columns:150px 1fr;gap:clamp(1rem,4vw,3rem);padding:1.6rem .2rem;border-bottom:1px solid var(--line);align-items:baseline}
.xp-when{font-family:"Silkscreen",monospace;font-size:11px;letter-spacing:.06em;color:var(--accent);padding-top:.35rem}
.xp-what h3{font-family:"Silkscreen",monospace;font-weight:400;font-size:clamp(1.1rem,2.3vw,1.45rem);line-height:1.3;margin-bottom:.3rem}
.xp-what .role-sub{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.xp-what p{font-size:.93rem;color:var(--muted);line-height:1.7;margin-top:.5rem;max-width:72ch}
@media(max-width:640px){.xprow{grid-template-columns:1fr;gap:.4rem}}

/* how i got here */
.story{padding-block:12vh}
.prose{font-size:clamp(1rem,1.9vw,1.14rem);line-height:1.9;max-width:72ch;margin-bottom:1.1rem;color:var(--ink);opacity:.9}
.prose .accent{color:var(--accent);font-weight:600}

/* the other things */
.dive{padding-block:10vh 14vh;text-align:center}
.dive-line{font-family:"Sacramento",cursive;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.2;max-width:24ch;margin:0 auto 2rem;color:var(--ink)}

/* send a signal */
.sendsig{padding-block:12vh}
.sendsig-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:820px){.sendsig-grid{grid-template-columns:1fr}}
.sig-form{display:flex;flex-direction:column;gap:14px}
.sf-field label{display:block;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sf-field input,.sf-field textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--ink);font-family:"Mali",sans-serif;font-size:14px;outline:none;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:border-color .2s,box-shadow .2s}
.sf-field input:focus,.sf-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.sf-field textarea{resize:vertical;min-height:110px;max-height:260px;line-height:1.6}
.sf-send{align-self:flex-start;margin-top:4px}
.sf-note{font-family:"DM Mono",monospace;font-size:11px;min-height:16px;color:var(--accent-2)}
.sf-note.ok{color:#3aa874}

/* Ocean: an old little soul, soft bubbles, terminal feel */
.ocean{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;height:clamp(460px,62vh,540px);background:var(--card);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(40px) saturate(160%);backdrop-filter:blur(40px) saturate(160%);box-shadow:0 30px 80px -30px rgba(20,24,60,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.ocean-bar{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.08),transparent)}
.ocean-ava{width:36px;height:36px;flex:none;border-radius:50%;box-shadow:0 3px 10px rgba(90,130,190,.4)}
.ocean-ava svg{width:100%;height:100%;display:block}
.ocean-id b{font-family:"Silkscreen",monospace;font-weight:400;font-size:16px;line-height:1}
.ocean-id span{display:block;font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.06em;color:var(--muted);margin-top:3px}
.ocean-body{flex:1;min-height:0;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:9px;scrollbar-width:none;scroll-behavior:smooth}
.ocean-body::-webkit-scrollbar{display:none}
.obub{max-width:82%;padding:9px 14px;font-size:13.5px;line-height:1.5;position:relative;animation:obub .32s var(--ease) both}
@keyframes obub{from{opacity:0;transform:translateY(8px) scale(.96)}}
.obub.them{align-self:flex-start;border-radius:19px 19px 19px 6px;background:linear-gradient(180deg,rgba(252,252,254,.2),rgba(228,230,238,.12));border:1px solid rgba(255,255,255,.14)}
html[data-theme="light"] .obub.them{background:linear-gradient(180deg,#fff,#f1eefa);border-color:rgba(150,140,200,.24);box-shadow:0 3px 10px -4px rgba(120,110,180,.3)}
.obub.me{align-self:flex-end;border-radius:19px 19px 6px 19px;background:linear-gradient(180deg,#b7cde2,#8eadca);color:#14243a;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(80,110,160,.35)}
.obub.typing{display:flex;gap:4px;align-items:center}
.obub.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:otype 1.1s infinite}
.obub.typing i:nth-child(2){animation-delay:.15s}.obub.typing i:nth-child(3){animation-delay:.3s}
@keyframes otype{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.ocmd{align-self:center;font-family:"DM Mono",monospace;font-size:10.5px;color:var(--faint);margin:3px 0;text-align:center;animation:obub .32s both}
.ocmd .p,.oi-prompt{color:var(--accent)}
.ocean-quick{display:flex;flex-wrap:wrap;gap:7px;padding:10px 16px 4px}
.oq{font-family:"DM Mono",monospace;font-size:11px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.18s}
.oq:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);transform:translateY(-1px)}
.ocean-input{display:flex;align-items:center;gap:8px;padding:10px 16px 14px;font-family:"DM Mono",monospace;font-size:12px;position:relative}
.ocean-input input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font:inherit;caret-color:transparent;padding:6px 0}
.ocean-input input::placeholder{color:var(--faint)}
.ocean-input:focus-within{box-shadow:inset 0 1px 0 var(--line)}
.oi-cursor{position:absolute;right:16px;width:7px;height:13px;background:var(--accent);animation:blink 1.1s steps(1) infinite;pointer-events:none}
.ocean-input.typing .oi-cursor{display:none}
.ocean-input.typing input{caret-color:var(--accent)}
@keyframes blink{50%{opacity:0}}

/* glasstapes: the shared diary */
.gt{padding-block:6vh 12vh}
.gt-win{border-radius:20px;position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(165,191,216,.14),rgba(216,205,234,.1));border:1px solid var(--line);
  -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);box-shadow:0 30px 80px -30px rgba(20,24,60,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.gt-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.07),transparent)}
.gt-title{font-family:"Silkscreen",monospace;font-size:1rem}
.gt-meta{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.03em;color:var(--muted);margin-left:auto}
.gt-body{display:grid;grid-template-columns:280px 1fr}
.gt-left{padding:22px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;background:rgba(255,255,255,.02)}
.gt-mailbox{width:92px;filter:drop-shadow(0 8px 14px rgba(20,20,50,.35))}
.mbox-svg{width:100%;height:auto;display:block;overflow:visible}
.mbox-flag{transform-origin:52.5px 40px;transition:transform .5s var(--ease)}
.gt-win.delivered .mbox-flag{animation:flagUp 1.2s var(--ease)}
@keyframes flagUp{0%,100%{transform:none}30%,70%{transform:rotate(-80deg)}}
.gt-list{width:100%;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;scrollbar-width:thin;padding:2px}
.gt-page{width:100%;text-align:left;cursor:pointer;background:var(--field);border:1px dashed var(--line);border-radius:10px;padding:9px 11px;transition:border-color .25s,transform .25s}
.gt-page:hover{border-color:var(--accent);transform:translateY(-1px)}
.gt-page .who{display:flex;justify-content:space-between;gap:8px;font-family:"Silkscreen",monospace;font-size:9px;color:var(--accent)}
.gt-page .who time{font-family:"DM Mono",monospace;color:var(--faint);font-size:9px;white-space:nowrap}
.gt-page .msg{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gt-right{padding:22px}
.gt-prompt{font-size:.98rem;line-height:1.6;color:var(--muted);margin:0 0 14px}
.gt-nick,.gt-text{width:100%;background:var(--field);border:1px solid var(--line);border-radius:11px;padding:10px 13px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.gt-nick{margin-bottom:9px;font-family:"Silkscreen",monospace;font-size:11px;min-height:42px}
.gt-text{resize:vertical;min-height:96px;font-family:"Mali",sans-serif;font-size:14.5px;line-height:1.55;
  background-image:repeating-linear-gradient(transparent 0 calc(1.55em - 1px),var(--line) calc(1.55em - 1px) 1.55em);background-attachment:local;background-position:0 10px}
.gt-nick:focus,.gt-text:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.gt-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.gt-left-n{font-family:"DM Mono",monospace;font-size:10px;color:var(--faint)}
.ds-send{font-family:"Silkscreen",monospace;font-size:11px;padding:12px 22px;border-radius:999px;min-height:44px}
.gt-local{font-family:"DM Mono",monospace;font-size:10px;color:var(--faint);margin-top:12px}
/* write a page → it folds into an envelope → sealed → drops into the mailbox */
.envelope{position:absolute;left:calc(280px + 50% - 140px - 60px);top:48%;width:120px;height:78px;opacity:0;pointer-events:none;z-index:6;border-radius:5px;
  background:linear-gradient(160deg,#fbf8f2,#ece4d6);box-shadow:0 12px 26px -8px rgba(20,20,50,.5)}
.env-paper{position:absolute;left:10%;right:10%;bottom:12%;height:92%;background:repeating-linear-gradient(transparent 0 7px,rgba(130,150,200,.25) 7px 8px),#fffdf8;border-radius:2px;transform-origin:bottom}
.env-flap{position:absolute;inset:0 0 auto 0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-top:42px solid #e3d9c8;transform-origin:top center;transform:rotateX(180deg);z-index:2}
.env-seal{position:absolute;left:50%;top:44%;width:18px;height:18px;z-index:3;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle at 35% 30%,#e7dcf6,#a08bd0);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.gt-win.sending .gt-text{animation:foldAway .5s ease forwards}
.gt-win.sending .envelope{animation:envSend 2s cubic-bezier(.5,.05,.25,1) forwards}
.gt-win.sending .env-paper{animation:paperIn .5s .2s ease forwards}
.gt-win.sending .env-flap{animation:flapShut .35s .7s ease forwards}
.gt-win.sending .env-seal{animation:sealPop .4s 1s both}
@keyframes foldAway{to{opacity:.25;transform:scaleY(.6)}}
@keyframes paperIn{to{transform:scaleY(.3);opacity:0}}
@keyframes flapShut{to{transform:rotateX(0)}}
@keyframes sealPop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.35)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes envSend{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1)}60%{opacity:1;transform:translate(0,-6px) rotate(-3deg)}100%{opacity:0;transform:translate(var(--ex,-300px),var(--ey,-60px)) scale(.12) rotate(-14deg)}}
.ds-toast{position:absolute;left:50%;top:56px;transform:translate(-50%,-14px);opacity:0;pointer-events:none;z-index:7;font-family:"Silkscreen",monospace;font-size:10px;color:#2a2440;
  background:linear-gradient(120deg,var(--lav17),var(--pink15));border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 16px;box-shadow:0 10px 26px -8px rgba(80,40,120,.5)}
.ds-toast.show{animation:toastPop 2.4s ease forwards}
@keyframes toastPop{0%{opacity:0;transform:translate(-50%,-14px) scale(.85)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
@media(max-width:760px){.gt-body{grid-template-columns:1fr}.gt-left{border-right:none;border-bottom:1px solid var(--line)}.gt-mailbox{width:70px}.envelope{left:calc(50% - 60px)}}

/* the letter reader: an envelope that opens to reveal a card */
.letter-layer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(8,10,20,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html[data-theme="light"] .letter-layer{background:rgba(150,160,200,.35)}
.letter-layer[hidden]{display:none}
.letter{position:relative;width:min(420px,100%);padding-top:40px}
.lt-env{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:8px;background:linear-gradient(160deg,#f8f3ea,#e7dccb);box-shadow:0 24px 50px -16px rgba(0,0,0,.5)}
.lt-flap{position:absolute;left:0;right:0;top:0;height:0;border-left:210px solid transparent;border-right:210px solid transparent;border-top:120px solid #ddd0bd;transform-origin:top;animation:ltFlap .6s .1s ease forwards}
@keyframes ltFlap{to{transform:rotateX(180deg);opacity:.0}}
.lt-card{position:relative;margin:0 22px 26px;padding:26px 24px 20px;border-radius:6px;background:linear-gradient(170deg,#fefcf8,#f4eee4);color:#2d2742;box-shadow:0 10px 30px -10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(200,185,160,.4);animation:ltRise .7s .45s var(--ease) both}
@keyframes ltRise{from{transform:translateY(60%);opacity:0}}
.lt-who{font-family:"Silkscreen",monospace;font-size:12px;color:#6f55b8}
.lt-text{font-size:1.02rem;line-height:1.7;margin:12px 0;white-space:pre-wrap;word-break:break-word}
.lt-when{font-family:"DM Mono",monospace;font-size:10px;color:#8a8398}
.lt-close{margin-top:14px;font-family:"DM Mono",monospace;font-size:11px;padding:9px 16px;border-radius:999px}

/* footer */
footer{padding-block:8vh 12vh;text-align:center}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,28px);margin-bottom:1.4rem}
.socials a{font-family:"DM Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s}
.socials a:hover{color:var(--accent);border-color:var(--accent)}
.pixel{font-family:"Silkscreen",monospace;font-size:11px;color:var(--accent);margin-bottom:10px}
.sig,.curious{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--faint)}
.curious{margin-top:8px;color:var(--gold)}

/* the curiosity reward */
.secret-cat{position:fixed;bottom:36px;left:-80px;width:64px;z-index:150;pointer-events:none;animation:catWalk 5s linear forwards}
.secret-cat svg{width:100%;height:auto;display:block;animation:catBob .4s ease-in-out infinite alternate}
@keyframes catWalk{to{left:110vw}}
@keyframes catBob{to{transform:translateY(-2px)}}
.secret-toast{position:fixed;left:50%;bottom:44px;transform:translate(-50%,20px);opacity:0;z-index:150;pointer-events:none;max-width:88vw;text-align:center;font-family:"Silkscreen",monospace;font-size:11px;line-height:1.5;color:#2a2440;
  background:linear-gradient(120deg,var(--star),var(--pink15) 50%,var(--lav17));border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:12px 18px;box-shadow:0 18px 40px -12px rgba(80,40,120,.5);transition:opacity .5s,transform .5s}
.secret-toast.go{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .reveal{opacity:1;transform:none;transition:none}
  .glitch>span,.glitch::before,.glitch::after{animation:none!important}
  .glitch::before,.glitch::after{opacity:0}
  .scrolldown{animation:none}
  .secret-cat{display:none}
  .cube-wrap:hover .shadow-3d,.cube-wrap:focus-within .shadow-3d{transition:box-shadow .01s}
}