/* purple.lt — synthwave */
:root{--bg:#12002B;--pink:#FF3EA5;--hot:#FF2E93;--cyan:#3EF0FF;--violet:#8A2BE2;--text:#F4E8FF;--dim:#C9B2EA;
  --ink:#1A0633;--paper:#F6F0FF;--paper2:#E4D6FB;--link:#5A12D6}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 "Chakra Petch",Verdana,sans-serif}
a{color:var(--cyan)}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* stars */
.stars,body.inner::before{background-image:
  radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 140px,#9ff,transparent),
  radial-gradient(1.5px 1.5px at 160px 70px,#fff,transparent),radial-gradient(1px 1px at 230px 200px,#fbd,transparent),
  radial-gradient(2px 2px at 300px 110px,#fff,transparent),radial-gradient(1px 1px at 60px 250px,#fff,transparent),
  radial-gradient(1.5px 1.5px at 340px 280px,#9ff,transparent);background-size:360px 320px}

/* ticker banner */
.ticker{overflow:hidden;white-space:nowrap;background:var(--hot);color:#12002B;font:700 14px/1 "Chakra Petch",sans-serif;
  letter-spacing:.25em;padding:9px 0;border-bottom:2px solid #fff;box-shadow:0 0 24px rgba(255,46,147,.7)}
.ticker span{display:inline-block;padding-left:100%;animation:tick 40s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

/* logo + tagline */
.logo{margin:0;font:400 clamp(48px,14vw,120px)/1 "Monoton",Impact,sans-serif;color:#fff;letter-spacing:.02em;
  text-shadow:0 0 6px #fff,0 0 18px var(--pink),0 0 40px var(--pink),0 0 70px var(--violet)}
.logo a{color:inherit;text-decoration:none}
.soon{margin:18px 0 0;font:600 clamp(18px,4.5vw,26px)/1.2 "Chakra Petch",sans-serif;letter-spacing:.35em;color:var(--cyan);text-shadow:0 0 10px var(--cyan)}

/* hero scene (home + 404) */
.scene{position:relative;min-height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#0B0020 0%,#2A0350 45%,#5B0A6E 62%,#12002B 62.1%)}
.hero{min-height:560px;height:calc(100vh - 34px)}
.sun{position:absolute;bottom:38%;left:50%;width:min(64vw,360px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,#FFE45C 0%,#FF8A3D 40%,#FF3EA5 75%);
  -webkit-mask:linear-gradient(#000 55%,transparent 55% 59%,#000 59% 67%,transparent 67% 72%,#000 72% 79%,transparent 79% 85%,#000 85% 91%,transparent 91%);
          mask:linear-gradient(#000 55%,transparent 55% 59%,#000 59% 67%,transparent 67% 72%,#000 72% 79%,transparent 79% 85%,#000 85% 91%,transparent 91%);
  box-shadow:0 0 80px rgba(255,62,165,.5)}
.content{position:relative;z-index:2;text-align:center;padding:0 16px;margin-top:-14vh}
.floor{position:absolute;z-index:1;background-color:#12002B;left:-50%;right:-50%;bottom:0;height:38%;transform:perspective(300px) rotateX(60deg);transform-origin:top;
  background-image:linear-gradient(var(--pink) 2px,transparent 2px),linear-gradient(90deg,var(--pink) 2px,transparent 2px);
  background-size:60px 60px;animation:drive 2s linear infinite;opacity:.8;
  -webkit-mask:linear-gradient(transparent,#000 30%);mask:linear-gradient(transparent,#000 30%)}
@keyframes drive{to{background-position:0 60px}}
.foot{position:absolute;bottom:14px;left:0;right:0;z-index:2;margin:0;text-align:center;font-size:13px;color:var(--dim)}


/* retro window */
.win{width:min(92vw,380px);margin:24px auto 0;text-align:left;background:var(--paper);color:var(--ink);
  border:2px solid;border-color:#fff #3B1C63 #3B1C63 #fff;
  box-shadow:5px 5px 0 #000,0 0 0 3px var(--hot),0 0 38px rgba(255,46,147,.55);font:15px/1.6 Tahoma,Verdana,sans-serif}
.win-title{display:flex;align-items:center;justify-content:space-between;padding:5px 5px 5px 10px;color:#fff;font-weight:bold;
  text-shadow:0 1px 0 rgba(0,0,0,.45);background:linear-gradient(90deg,#FF2E93,#8A2BE2 60%,#3B1AAD)}
.win-title .file{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding-right:8px}
.win-title .btns{display:flex;gap:2px}
.win-title .btns span,.win-title .btns a.x{width:16px;height:14px;background:var(--paper2);color:var(--ink);font:bold 10px/13px Tahoma,sans-serif;text-align:center;
  border:1px solid;border-color:#fff #3B1C63 #3B1C63 #fff;text-shadow:none}
.win-body{padding:16px 18px 18px}
.win-body p{margin:0 0 12px}
.win-body a{color:var(--link)}
.win-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.win-btn{display:block;width:fit-content;margin:12px 0 0 auto;padding:4px 16px;background:var(--paper2);color:var(--ink)!important;text-decoration:none;font-weight:bold;
  border:2px solid;border-color:#fff #3B1C63 #3B1C63 #fff}
.win-actions .win-btn{margin:0}
.win-btn:active{border-color:#3B1C63 #fff #fff #3B1C63}
.win-btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}

/* inner pages (blog, posts, about) */
body.inner{min-height:100%;background:linear-gradient(180deg,#0B0020 0%,#2A0350 55%,#12002B 100%) fixed}
body.inner::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none}
body.inner::after{content:"";position:fixed;z-index:-1;left:-50%;right:-50%;bottom:0;height:34%;pointer-events:none;
  transform:perspective(300px) rotateX(60deg);transform-origin:top;opacity:.5;
  background-image:linear-gradient(var(--pink) 2px,transparent 2px),linear-gradient(90deg,var(--pink) 2px,transparent 2px);background-size:60px 60px;
  -webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
.page{max-width:920px;margin:0 auto;padding:36px 20px 60px}
.page .logo{font-size:clamp(40px,11vw,76px);text-align:center;margin-bottom:26px}
.win-page{width:100%;margin:0 auto}
nav.menu{display:flex;justify-content:flex-start;gap:0;margin:0;padding:3px 5px;font-size:14px;background:var(--paper2);border-bottom:2px solid #B9A4E2}
nav.menu a{color:var(--ink);padding:3px 14px;text-decoration:none;font-weight:bold}
nav.menu a:hover,nav.menu a:focus-visible{background:#5A12D6;color:#fff;outline:none}
.win-page .win-body{padding:26px 32px 34px;font:17px/1.8 Tahoma,Verdana,sans-serif}
.win-page .win-body p{margin:0 0 16px}
.win-page a{color:var(--link)}
.win-page article h1{font:700 36px/1.2 "Chakra Petch",sans-serif;color:#2A0350;margin:0 0 4px}
.win-page article h2{font:700 24px/1.3 "Chakra Petch",sans-serif;color:#7A1FFF;margin:30px 0 8px}
.win-page article h3{font:700 19px/1.3 "Chakra Petch",sans-serif;color:#7A1FFF;margin:22px 0 6px}
.meta,.posts time{display:block;font-size:14px;color:#5A4A78}
.win-page .meta{margin:4px 0 20px}
.posts{list-style:none;padding:0;margin:0}
.posts li{padding:18px 0;border-bottom:1px solid #C9B8EC}
.posts li:last-child{border-bottom:0}
.win-page .posts a{font:700 22px/1.4 "Chakra Petch",sans-serif;color:#2A0350;text-decoration:none}
.win-page .posts a:hover{color:#D4007A}
blockquote{margin:18px 0;padding:6px 16px;border-left:4px solid var(--hot);color:#3B1C63;background:#EFE5FF}
code{font:14px ui-monospace,Menlo,monospace;background:#DCCBF7;color:var(--ink);padding:1px 5px;border-radius:3px}
pre{background:var(--ink);color:#F4E8FF;padding:12px 14px;overflow:auto;border:2px solid;border-color:#3B1C63 #F4EEFF #F4EEFF #3B1C63}
pre code{background:none;color:inherit;padding:0}
hr{border:0;border-top:2px dashed #C9B8EC;margin:24px 0}
.win-page img{max-width:100%;height:auto}
footer{text-align:center;font-size:13px;color:var(--dim);margin-top:44px}

@media (prefers-reduced-motion:reduce){.floor{animation:none}.ticker span{animation:none;padding-left:0}}
@media (max-width:600px){.page{padding:24px 12px 48px}.win-page .win-body{padding:18px 16px 24px;font-size:16px}.hero{height:auto;min-height:600px}}

/* big clickable post cards */
.posts li{padding:0 0 16px;border:0}
.posts li:last-child{padding-bottom:0}
.win-page .posts a.post-card{display:block;position:relative;padding:18px 22px 16px;background:#fff;color:var(--ink);text-decoration:none;
  font:400 16px/1.6 Tahoma,Verdana,sans-serif;border:2px solid;border-color:#fff #3B1C63 #3B1C63 #fff;box-shadow:3px 3px 0 #3B1C63;transition:transform .12s,box-shadow .12s}
.posts a.post-card .t{display:block;font:700 24px/1.3 "Chakra Petch",sans-serif;color:#2A0350;padding-right:90px}
.posts a.post-card time{margin:2px 0 8px}
.posts a.post-card .s{display:block;color:#3B1C63}
.posts a.post-card .go{position:absolute;right:18px;top:18px;padding:5px 14px;background:var(--hot);color:#12002B;font:700 14px/1 "Chakra Petch",sans-serif;
  letter-spacing:.1em;text-transform:uppercase;border:2px solid;border-color:#fff #7A0040 #7A0040 #fff}
.win-page .posts a.post-card:hover,.win-page .posts a.post-card:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #3B1C63,0 0 22px rgba(255,46,147,.6);outline:none}
.posts a.post-card:hover .t{color:#D4007A}
@media (max-width:600px){.posts a.post-card .go{position:static;display:inline-block;margin-top:10px}.posts a.post-card .t{padding-right:0}}

/* visual blocking: tray + striped cards */
.win-page ul.posts{padding:18px;background:#D9C8F5;border:2px solid;border-color:#3B1C63 #fff #fff #3B1C63;margin-top:14px}
.posts li{padding:0 0 20px}
.posts li:last-child{padding-bottom:0}
.win-page .posts a.post-card{border:2px solid #3B1C63;border-left:10px solid var(--hot);box-shadow:4px 4px 0 #3B1C63;padding:18px 22px 16px 20px}
.win-page .posts a.post-card:hover,.win-page .posts a.post-card:focus-visible{border-left-color:#8A2BE2;box-shadow:7px 7px 0 #3B1C63,0 0 22px rgba(255,46,147,.6)}
.win-page .posts a.post-card time{display:inline-block;margin:2px 0 10px;padding:1px 8px;background:#EFE5FF;border:1px solid #B9A4E2;font-size:12px;font-weight:bold;letter-spacing:.04em}

/* home buttons: same design as the blog's "Read" button */
.hello{display:inline-block;margin:24px auto 0;max-width:520px;padding:14px 24px;font-size:18px;line-height:1.6;color:#fff;
  background:rgba(18,0,43,.88);border:2px solid;border-color:#fff #7A0040 #7A0040 #fff;box-shadow:4px 4px 0 #000,0 0 26px rgba(255,46,147,.45)}
.btn-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn-retro{display:inline-block;padding:14px 30px;background:var(--hot);color:#12002B;text-decoration:none;font:700 17px/1 "Chakra Petch",sans-serif;
  letter-spacing:.12em;text-transform:uppercase;border:2px solid;border-color:#fff #7A0040 #7A0040 #fff;box-shadow:4px 4px 0 #000,0 0 26px rgba(255,46,147,.6);
  transition:transform .12s,box-shadow .12s}
.btn-retro.alt{background:var(--paper2);color:var(--ink);border-color:#fff #3B1C63 #3B1C63 #fff;box-shadow:4px 4px 0 #000,0 0 26px rgba(138,43,226,.6)}
.btn-retro:hover,.btn-retro:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000,0 0 32px rgba(255,46,147,.85);outline:none}
.btn-retro:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000;border-color:#7A0040 #fff #fff #7A0040}

/* photos in posts */
.win-page figure{margin:26px 0;text-align:center}
.win-page figure img{display:block;margin:0 auto;max-width:100%;height:auto;background:#fff;border:3px solid;border-color:#fff #3B1C63 #3B1C63 #fff;
  box-shadow:5px 5px 0 #3B1C63,0 0 22px rgba(255,46,147,.35)}
.win-page figcaption{margin-top:12px;font-size:14px;color:#4A3A66}

.win-title .btns a.x{display:block;text-decoration:none;cursor:pointer}
.win-title .btns a.x:hover,.win-title .btns a.x:focus-visible{background:#FF2E93;color:#fff;outline:none}