:root{
  --bg:#0d0716; --panel:rgba(20,12,32,.92); --panel-solid:#150c26;
  --border:rgba(168,85,247,.28); --border-soft:rgba(168,85,247,.14);
  --txt:#f3eefc; --muted:#b9a8d9; --dim:#7d6b9c;
  --acc:#a855f7; --acc2:#ec4899;
  --tag:#38bdf8;
  --r:16px;
  --topbar-h:56px;
  --rail-w:72px;
  --dock-h:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif; color:var(--txt);
  background:var(--bg);
  background-image:radial-gradient(rgba(168,85,247,.13) 1px, transparent 1px);
  background-size:22px 22px;
  overflow:hidden; height:100dvh; width:100vw; position:relative;
}
/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:10;pointer-events:none;background:linear-gradient(180deg,rgba(13,7,22,.9) 0%,rgba(13,7,22,.6) 70%,transparent 100%)}
.ident{display:flex;align-items:center;gap:10px;pointer-events:auto}
.ident img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--acc)}
.ident .name{font-weight:700;font-size:15px}
.ident .tagline{font-size:11.5px;color:var(--muted)}
.clock{font-size:12.5px;color:var(--muted);pointer-events:auto;text-align:right}
/* topbar social links (mobile only — desktop uses the bottom dock) */
.topbar-socials{display:none}
@media (max-width:768px){
  .topbar-socials{display:flex;gap:4px;align-items:center;pointer-events:auto}
}
.topbar-socials a{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.topbar-socials a:hover{color:#fff;background:rgba(168,85,247,.2)}
.topbar-socials a svg{width:16px;height:16px;fill:currentColor}
@media (max-width:480px){.ident .tagline{display:none}.clock{display:none}}
/* left icon nav (desktop) */
.rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:50}
.rail button{width:64px;height:64px;border-radius:14px;border:1px solid var(--border-soft);background:var(--panel);color:var(--txt);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-family:inherit;transition:.15s}
.rail button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.rail button:hover{border-color:var(--acc);transform:translateY(-1px)}
.rail button.active{background:linear-gradient(135deg,rgba(168,85,247,.35),rgba(236,72,153,.25));border-color:var(--acc)}
/* mobile bottom nav */
.tabbar{position:fixed;bottom:0;left:0;right:0;display:none;grid-template-columns:repeat(5,1fr);gap:3px;background:rgba(13,7,22,.95);border-top:1px solid var(--border-soft);padding:6px 6px calc(8px + env(safe-area-inset-bottom));z-index:50;backdrop-filter:blur(10px)}
.tabbar button{width:100%;height:50px;min-width:0;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9.5px;font-family:inherit;transition:.15s;padding:2px}
.tabbar button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.tabbar button.active{color:var(--txt);background:rgba(168,85,247,.15);border-color:var(--acc)}
/* desktop windows */
.win{position:absolute;left:50%;top:110px;transform:translateX(-50%);min-width:340px;max-width:min(560px,90vw);background:var(--panel);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 24px 70px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(8px)}
#win-about{top:110px}
#win-projects,#win-support,#win-tools,#win-contact{top:150px}
.win.hidden{display:none}
.win.focused{box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px var(--acc);z-index:100}
.titlebar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border-soft);cursor:grab;user-select:none;background:rgba(168,85,247,.07);touch-action:none}
.titlebar:active{cursor:grabbing}
.titlebar .t{font-weight:600;font-size:14px}
.titlebar .x{width:26px;height:26px;border-radius:8px;border:1px solid var(--border-soft);background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.titlebar .x:hover{color:#fff;border-color:var(--acc2)}
.winbody{padding:16px;overflow-y:auto;max-height:min(62vh,560px);overscroll-behavior:contain}
.winbody::-webkit-scrollbar{width:8px}
.winbody::-webkit-scrollbar-thumb{background:rgba(168,85,247,.35);border-radius:8px}
/* about */
.hero{width:100%;max-width:280px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;margin:0 auto 12px;display:block}
.kicker{color:var(--acc2);font-size:12.5px;font-weight:600;margin-bottom:4px;text-align:center}
.about h2{font-size:22px;margin-bottom:8px;text-align:center}
.about p{font-size:14px;line-height:1.65;color:#ddd2f2;margin-bottom:10px}
/* rows */
.prow{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--border-soft);border-radius:12px;margin-bottom:10px;text-decoration:none;color:inherit;background:rgba(255,255,255,.015);min-height:72px}
.prow:hover{border-color:var(--acc)}
.prow img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#241640}
.prow .tt{font-weight:600;font-size:14.5px}
.prow .dd{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.prow .tg{font-size:11px;color:var(--tag);font-weight:600;margin-top:4px;display:inline-block}
.prow .arw{margin-left:auto;color:var(--dim);font-size:18px;flex-shrink:0}
.prow .ico{width:44px;height:44px;border-radius:10px;background:rgba(168,85,247,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prow .ico svg{width:22px;height:22px;stroke:var(--acc);fill:none;stroke-width:1.8}
.prow .ico.ph{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,rgba(168,85,247,.5),rgba(236,72,153,.4));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:22px;color:#fff;flex-shrink:0}
.countline{text-align:center;color:var(--dim);font-size:12.5px;padding:6px 0 2px}
/* contact */
.contact .msg{font-size:13.5px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.field input,.field textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border-soft);background:rgba(0,0,0,.3);color:var(--txt);font-family:inherit;font-size:16px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--acc)}
.btn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:none;border-radius:10px;padding:12px 22px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;min-height:44px}
.btn:hover{filter:brightness(1.12)}
.fnote{margin-top:10px;font-size:12.5px;color:var(--dim)}
/* footer */
.copy{position:fixed;bottom:20px;left:20px;font-size:12px;color:var(--dim);z-index:5}
/* visual editor (active when ?edit=true in URL) */
#edit-save-bar{position:fixed;top:60px;right:16px;z-index:9999;display:flex;gap:8px}
#edit-save-bar button{background:var(--acc,#a855f7);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:14px;font-family:inherit;cursor:pointer;transition:background .2s}
#edit-save-bar button:hover{background:var(--acc2,#ec4899)}
#edit-save-bar button:active{transform:scale(.97)}
/* bottom dock (desktop only) */
.dock{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:var(--panel);border:1px solid var(--border-soft);border-radius:16px;padding:8px 12px;z-index:40}
.dock a{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.dock a:hover{color:#fff;background:rgba(168,85,247,.2)}
.dock a svg{width:19px;height:19px;fill:currentColor}
/* ---------- MOBILE / SMALL SCREENS ---------- */
@media (max-width:768px){
  .rail{display:none}
  .tabbar{display:grid}
  .dock{display:none}
  .copy{display:none}
  .win{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;min-width:0;max-width:none;min-height:auto;max-height:calc(100dvh - var(--topbar-h) - 56px);
    margin:0;border-radius:20px 20px 0 0;transform:translateY(105%);transition:transform .28s cubic-bezier(.22,.9,.32,1);
    z-index:20;
  }
  .win.open{transform:translateY(0)}
  .win.focused{z-index:20}
  .titlebar{cursor:default;padding:12px 14px calc(10px + env(safe-area-inset-top))}
  .titlebar .t{font-size:15px}
  .winbody{padding:16px 16px calc(20px + env(safe-area-inset-bottom));max-height:calc(100dvh - var(--topbar-h) - 56px - 110px)}
  .about h2{font-size:20px}
  .prow{padding:10px}
  .prow .tt{font-size:14px}
  .prow .dd{font-size:12.5px}
  /* on mobile, only the currently open panel shows */
  .win{display:flex}
  .win:not(.open){display:none}
}
/* ---------- VERY SMALL ---------- */
@media (max-width:420px){
  .ident img{width:32px;height:32px}
  .ident .name{font-size:14px}
  .prow img{width:48px;height:48px}
  .prow .ico{width:40px;height:40px}
  .prow .ico svg{width:20px;height:20px}
}