/* hiimace.com: weird on purpose. Palette: hot pink, electric purple, teal, mint, ink. No yellow. */
:root{
  --ink:#1a0f2e; --paper:#fdf6ff; --pink:#ff3ea5; --purple:#7b2ff7; --teal:#00c2b8;
  --mint:#3dff9a; --blue:#2f6bff; --red:#e8233a; --grid:#e9dcff;
  --shadow:6px 6px 0 var(--ink);
  --font:"Comic Neue","Comic Sans MS","Chalkboard SE",ui-rounded,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;min-height:100vh;line-height:1.5;font-size:17px}
a{color:var(--purple);font-weight:700}
a:hover{color:var(--pink)}
:focus-visible{outline:4px dashed var(--pink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:9999}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* fake OS menubar */
.menubar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  background:var(--ink);color:#fff;padding:.4rem .8rem;font-family:var(--mono);font-size:.9rem}
.menubar .logo{font-weight:800;color:var(--mint);text-decoration:none;font-size:1rem}
.menubar nav{display:flex;gap:.25rem;flex-wrap:wrap}
.menubar nav a{color:#fff;text-decoration:none;padding:.15rem .5rem;border-radius:6px;font-weight:600}
.menubar nav a:hover,.menubar nav a[aria-current=page]{background:var(--purple);color:#fff}
.menubar .spacer{flex:1}
.menubar button{font:inherit;cursor:pointer;border:2px solid #fff;background:transparent;color:#fff;border-radius:999px;padding:.1rem .7rem}
.menubar button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:var(--ink)}
#clock{background:none;border:0;padding:0 .3rem;color:#fff}

/* desktop */
.desktop{position:relative;min-height:calc(100vh - 44px);overflow:hidden;padding:1rem}
.window{position:absolute;background:#fff;border:3px solid var(--ink);border-radius:10px;box-shadow:var(--shadow);
  width:min(360px,92vw);display:flex;flex-direction:column}
.window.focused{box-shadow:9px 9px 0 var(--pink)}
.titlebar{display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-bottom:3px solid var(--ink);
  cursor:grab;user-select:none;touch-action:none;border-radius:7px 7px 0 0;font-family:var(--mono);font-weight:700;font-size:.9rem}
.titlebar:active{cursor:grabbing}
.titlebar .dots{display:flex;gap:4px}
.titlebar .dots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);display:block}
.titlebar .dots i:nth-child(1){background:var(--red)}
.titlebar .dots i:nth-child(2){background:var(--teal)}
.titlebar .dots i:nth-child(3){background:var(--mint)}
.titlebar .ttl{flex:1}
.titlebar .min{font:inherit;border:2px solid var(--ink);background:#fff;border-radius:6px;cursor:pointer;width:26px;height:22px;line-height:1;padding:0}
.window .body{padding:.8rem 1rem}
.window.minimized .body{display:none}
.t-pink .titlebar{background:var(--pink);color:#fff}
.t-purple .titlebar{background:var(--purple);color:#fff}
.t-teal .titlebar{background:var(--teal)}
.t-mint .titlebar{background:var(--mint)}
.t-blue .titlebar{background:var(--blue);color:#fff}
.window h1{font-size:2rem;margin:.2rem 0;line-height:1.1}
.window h2{margin:.2rem 0 .5rem;font-size:1.2rem}
.wave{display:inline-block;transform-origin:70% 70%;animation:wave 2.2s infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}

/* silly buttons */
.btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.btn{font:inherit;font-weight:800;cursor:pointer;border:3px solid var(--ink);border-radius:12px;padding:.6rem .5rem;
  box-shadow:4px 4px 0 var(--ink);background:var(--mint);color:var(--ink);transition:transform .08s}
.btn:hover{transform:translate(-1px,-1px) rotate(-1deg)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.pink{background:var(--pink);color:#fff}
.btn.purple{background:var(--purple);color:#fff}
.btn.teal{background:var(--teal)}
.btn.danger{grid-column:1/-1;background:var(--red);color:#fff;font-size:1.15rem;letter-spacing:.05em}
.status{font-family:var(--mono);font-size:.85rem;min-height:1.4em;margin:.6rem 0 0}

/* stickers */
.sticker{position:absolute;font-weight:800;border:3px solid var(--ink);padding:.4rem .8rem;border-radius:999px;
  box-shadow:4px 4px 0 var(--ink);transform:rotate(var(--r,-6deg));cursor:grab;touch-action:none;user-select:none;text-decoration:none}
.sticker.s1{background:var(--pink);color:#fff}
.sticker.s2{background:var(--teal);color:var(--ink)}
.sticker.s3{background:var(--purple);color:#fff;border-radius:6px}
.sticker.s4{background:#fff;color:var(--ink);border-style:dashed}
.sticker.blob{border-radius:60% 40% 55% 45%/50% 60% 40% 50%;background:var(--mint);color:var(--ink)}

/* spawned stuff */
.bug{position:fixed;width:44px;height:44px;z-index:1500;pointer-events:none;left:0;top:0}
.card{position:fixed;z-index:1400;background:#fff;border:3px solid var(--ink);border-radius:8px;padding:.5rem .7rem;
  box-shadow:4px 4px 0 var(--ink);max-width:200px;font-size:.9rem;font-weight:700;cursor:pointer;animation:pop .3s ease-out}
@keyframes pop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(var(--r,3deg))}}
body.wobble .desktop, body.wobble main{animation:wob .9s ease-in-out 2}
@keyframes wob{0%,100%{transform:none}20%{transform:rotate(1.5deg) skewX(3deg)}40%{transform:rotate(-1.5deg) skewX(-3deg)}60%{transform:rotate(1deg) scale(1.01)}80%{transform:rotate(-1deg)}}
body.flip .desktop{transform:rotate(180deg);transition:transform .8s}
body.party{animation:hue 3s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:var(--ink);color:#fff;font-family:var(--mono);
  padding:.6rem 1rem;border-radius:10px;z-index:2000;box-shadow:4px 4px 0 var(--pink);max-width:90vw;text-align:center}

/* generic page layout */
main.page{max-width:820px;margin:2rem auto;padding:0 1rem}
.panel{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:1.2rem 1.4rem;margin-bottom:1.5rem}
.page-title{font-size:clamp(2rem,6vw,3.4rem);margin:.2rem 0 1rem;line-height:1;transform:rotate(-1.5deg);display:inline-block;
  background:var(--pink);color:#fff;padding:.2rem .8rem;border:3px solid var(--ink);box-shadow:var(--shadow)}
.post-list{list-style:none;padding:0;display:grid;gap:1.2rem}
.post-card{display:block;text-decoration:none;color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:1rem 1.2rem;box-shadow:var(--shadow);background:#fff}
.post-card:nth-child(odd){transform:rotate(-.8deg)} .post-card:nth-child(even){transform:rotate(.8deg)}
.post-card:hover{transform:rotate(0) scale(1.01);color:var(--ink)}
.post-card h2{margin:.1rem 0}
.meta{font-family:var(--mono);font-size:.85rem;opacity:.8}
.draft-badge{display:inline-block;background:var(--red);color:#fff;font-family:var(--mono);font-weight:800;font-size:.75rem;
  padding:.1rem .5rem;border-radius:4px;border:2px solid var(--ink);letter-spacing:.08em}
.draft-banner{background:repeating-linear-gradient(45deg,var(--red),var(--red) 14px,var(--ink) 14px,var(--ink) 28px);
  color:#fff;font-family:var(--mono);font-weight:800;text-align:center;padding:.5rem;border:3px solid var(--ink);border-radius:8px;margin-bottom:1rem}
.draft-banner span{background:var(--ink);padding:.1rem .6rem}
.tag{display:inline-block;color:var(--ink);background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:0 .5rem;font-size:.8rem;font-weight:700}

/* post themes: each post can have its own look */
.theme-notebook .post{background:#fff;background-image:linear-gradient(#cfe0ff 1px,transparent 1px);background-size:100% 1.9em;
  border-left:10px double var(--pink);line-height:1.9em}
.theme-terminal .post{background:#0d0221;color:var(--mint);font-family:var(--mono);border-color:var(--mint);box-shadow:6px 6px 0 var(--purple)}
.theme-terminal .post a{color:var(--pink)} .theme-terminal .post h1{color:#fff}
.theme-terminal .post h1::before{content:"> "}
.theme-zine .post{background:var(--purple);color:#fff;transform:rotate(-.6deg);font-weight:600}
.theme-zine .post h1,.theme-zine .post h2{background:#fff;color:var(--ink);display:inline-block;padding:.1rem .5rem;transform:rotate(1.5deg)}
.theme-zine .post a{color:var(--mint)}
.theme-vapor .post{background:linear-gradient(160deg,var(--pink),var(--purple) 55%,var(--teal));color:#fff}
.post blockquote{border-left:6px solid var(--pink);margin:1rem 0;padding:.2rem 1rem;font-size:1.15rem;font-style:italic}
.post code{background:rgba(123,47,247,.15);padding:.1rem .35rem;border-radius:4px;font-family:var(--mono)}

/* guestbook */
.gb-entry{border:3px solid var(--ink);border-radius:10px;padding:.7rem 1rem;margin:.8rem 0;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.gb-entry:nth-child(3n+1){background:#ffe3f3}.gb-entry:nth-child(3n+2){background:#e4fff3}.gb-entry:nth-child(3n){background:#efe5ff}
.gb-entry b{font-family:var(--mono)}
form.gb label{display:block;font-weight:800;margin:.6rem 0 .2rem}
form.gb input,form.gb textarea{width:100%;font:inherit;border:3px solid var(--ink);border-radius:8px;padding:.5rem;background:#fff}
.counter{font-family:var(--mono);background:var(--ink);color:var(--mint);padding:.1rem .5rem;border-radius:4px;letter-spacing:.2em}

footer.site{text-align:center;font-family:var(--mono);font-size:.85rem;padding:1.5rem 1rem 2.5rem}
.other-me{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;padding:.3rem .8rem;border-radius:999px;transform:rotate(-2deg)}
.other-me:hover{background:var(--purple);color:#fff}

/* mobile: windows become a stack, still draggable feel off */
@media (max-width:760px){
  .desktop{display:flex;flex-direction:column;gap:1.2rem;overflow:visible}
  .window{position:relative!important;left:auto!important;top:auto!important;width:100%;transform:rotate(var(--mr,0deg))}
  .window:nth-of-type(odd){--mr:-.6deg}.window:nth-of-type(even){--mr:.6deg}
  .sticker{position:relative!important;left:auto!important;top:auto!important;align-self:flex-start;margin:.2rem .5rem}
  .stickers{display:flex;flex-wrap:wrap;gap:.6rem}
}

/* calm mode: no motion, still weird looking */
body.calm *,body.calm *::before,body.calm *::after{animation:none!important;transition:none!important}
body.calm.flip .desktop{transform:none}
body.calm.party{filter:none}
.window[hidden]{display:none}
@media (min-width:761px){.desktop{min-height:max(calc(100vh - 44px),760px)}}