/* =========================================================
   Base variables
   ========================================================= */
:root{
    --bg:#05070a;
    --bg-2:#080b10;
    --bg-3:#0b0f14;
    --paper:#070b10;

    --ink:#e6edf3;
    --ink-2:#c5ccd4;
    --muted:#8a94a2;

    --accent:#7aa2ff;
    --accent-2:#b692ff;
    --good:#3ad38b;
    --warn:#ffd166;
    --bad:#ff6b6b;

    --edge-0: rgba(255,255,255,.016);
    --edge-1: rgba(255,255,255,.024);
    --edge-2: rgba(255,255,255,.04);

    --shadow:0 10px 30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);

    --radius:16px;
    --radius-lg:22px;
    --gap:24px;
    --left-col:380px;

    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: light){
    :root{
        --bg:#fafbff; --bg-2:#ffffff; --bg-3:#f5f7fb; --paper:#ffffff;
        --ink:#0d1117; --ink-2:#222631; --muted:#4a5161;
        --edge-0: rgba(0,0,0,.06); --edge-1: rgba(0,0,0,.09); --edge-2: rgba(0,0,0,.14);
        --shadow:0 8px 18px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
    }
}

/* =========================================================
   Resets / helpers
   ========================================================= */
*{box-sizing:border-box}
html,body{height:100%;width:100%;overflow-x:hidden}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    margin:0;font-family:var(--font);color:var(--ink);
    background:
            radial-gradient(circle at 1px 1px, rgba(255,255,255,.015) 1px, transparent 1px) 0 0/22px 22px,
            linear-gradient(var(--bg), var(--bg));
    min-height:100vh;will-change:auto;
    position:relative;
}
body.loading *{transition:none !important;animation:none !important}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;display:block;height:auto}
svg{display:block}

/* ✅ Adaptive safety: let flex/grid children shrink & wrap long strings */
.plugin,.plugin__inner,
.profile-text,.map-info,.game-info,.project-content,.project-links,
.webring-prev,.webring-home,.webring-next{min-width:0}
.track-title,.project-title,.repo-name,.map-name,.game-name,.webring-text{overflow-wrap:anywhere;word-break:break-word}

*:focus-visible{
    outline:2px solid color-mix(in oklab, var(--accent) 45%, transparent);
    outline-offset:2px;
}

/* =========================================================
   Small UI atoms
   ========================================================= */
.status-indicator{
    --s:10px;display:inline-block;width:var(--s);height:var(--s);border-radius:50%;margin-right:6px;
    background:#666;border:2px solid rgba(0,0,0,.25);vertical-align:middle
}
.status-online{background:var(--good)}
.status-loading{background:var(--warn)}
.status-offline{background:var(--bad)}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,.012), color-mix(in oklab, var(--bg-3) 26%, transparent));
    border-radius:var(--radius);
    box-shadow: inset 0 0 0 1px var(--edge-0), var(--shadow);
    overflow:hidden;transform:translateZ(0);
}

.btn, .icon-btn, .meme-refresh-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 14px;border-radius:8px;border:none;
    background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 50%, rgba(0,0,0,.02) 100%);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;
    transition:all .15s cubic-bezier(.4,0,.2,1);
}
.btn:hover, .icon-btn:hover, .meme-refresh-btn:hover{
    background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.08) 50%, rgba(0,0,0,.02) 100%);
    box-shadow:0 2px 8px rgba(0,0,0,.22);
    transform:translateY(-1px);
}
.btn:active, .icon-btn:active, .meme-refresh-btn:active{
    transform:none;box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:6px}
.btn-ghost{background:rgba(255,255,255,.02)}
.icon-btn,.meme-refresh-btn{width:32px;height:32px;border-radius:8px;padding:0}

.chip{
    display:inline-flex;align-items:center;gap:.45rem;
    font:600 12px/1 var(--mono);padding:6px 9px;border-radius:999px;
    background:rgba(255,255,255,.018);
    box-shadow:inset 0 0 0 1px var(--edge-0);color:var(--ink-2)
}

.toast-root{position:fixed;top:20px;right:20px;z-index:10000;pointer-events:none;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 40px)}
.toast{
    background:var(--paper);border-radius:var(--radius);
    padding:12px 16px;color:var(--ink);font-size:14px;font-weight:500;
    box-shadow:var(--shadow);transform:translateX(400px);transition:transform .3s ease;max-width:300px;word-wrap:break-word;
}
.toast.in{transform:translateX(0)}

.ripple-host{position:relative;overflow:hidden}
.ripple{
    position:absolute;border-radius:50%;background:rgba(255,255,255,.1);
    pointer-events:none;transform:scale(0);animation:ripple-animation .6s ease-out;
}
@keyframes ripple-animation{0%{transform:scale(0);opacity:.6}100%{transform:scale(1);opacity:0}}

/* =========================================================
   Layout
   ========================================================= */
.container{
    --pad:28px;
    display:grid;grid-template-columns:minmax(280px,var(--left-col)) 1fr;
    gap:var(--gap);align-items:start;
    padding:var(--pad) clamp(16px,3vw,var(--pad));
    min-height:100vh;width:100%;max-width:100%;
    margin:0 auto;overflow-x:hidden;
}

.profile-section{
    position:sticky;top:16px;z-index:1;align-self:start;
    background:linear-gradient(180deg, color-mix(in oklab, var(--paper) 92%, transparent) 0%, var(--paper) 100%);
    border-radius:var(--radius-lg);padding:18px;
    box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
    min-height:200px;width:100%;
}
.profile-content{gap:14px;display:flex;align-items:center}
.profile-text{flex:1;min-width:0}
.profile-name{margin:.25rem 0;font-size:clamp(1.5rem, 4vw, 2rem);line-height:1.1;word-wrap:break-word}
.profile-titles{display:flex;flex-wrap:wrap;gap:8px;margin:.25rem 0 .5rem}
.profile-title{font-weight:600;color:var(--ink)}
.profile-subtitle{font-weight:600;color:var(--accent)}
.profile-bio{margin-top:.5rem;color:var(--ink-2);word-wrap:break-word}
.profile-image img{
    width:88px;height:88px;object-fit:cover;border-radius:18px;
    box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
}

.mosaic{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    grid-auto-flow:dense;
    grid-auto-rows:10px;
    gap:var(--gap);
    align-items:start;
    position:relative;z-index:1;
    padding-bottom:12px;
    contain:layout style;
    width:100%;
    min-height:200px;
}

.plugin{
    background:linear-gradient(180deg, rgba(255,255,255,.012), color-mix(in oklab, var(--bg-3) 26%, transparent));
    border-radius:var(--radius);
    box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
    overflow:visible;
    transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease;
    position:relative;z-index:2;isolation:isolate;
    min-height:80px;opacity:1;transform:none;
    width:100%;
}
.plugin:hover{box-shadow: inset 0 0 0 1px var(--edge-1), var(--shadow);z-index:3}
.plugin.reveal{opacity:1;transform:none;transition:opacity .25s ease, transform .25s ease}
.plugin.is-collapsed{opacity:.9}
.plugin.is-collapsed .plugin__inner > *:not(.plugin-header){display:none}

.plugin[data-w="2"]{grid-column:span 2}
.plugin[data-w="3"]{grid-column:span 3}

.plugin__inner{padding:14px 14px 16px;overflow:visible;contain:layout style}
.plugin__inner > * + *{margin-top:12px}

.plugin-header{
    display:flex;align-items:center;gap:10px;justify-content:space-between;
    margin:0;padding:10px 12px;border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.012), transparent);
    border:none;box-shadow:none;
}
.plugin-title{margin:0;font-weight:800;letter-spacing:.2px;font-size:1rem}
.plugin-toolbar{display:flex;gap:6px;margin-left:auto}

.drag-proxy{will-change:transform;transform-origin:center;filter:drop-shadow(0 25px 50px rgba(0,0,0,0.4))}
.plugin.dragging{transition:opacity .2s ease;opacity:.65;transform:scale(.985)}
.plugin.being-tossed{will-change:transform;transition:none;z-index:10;position:relative}
.plugin.collision-feedback{animation:collision-pulse .3s ease-out}
@keyframes collision-pulse{0%{transform:scale(1)}50%{transform:scale(.95)}100%{transform:scale(1)}}

.drag-handle{cursor:grab;user-select:none;transition:all .2s ease}
.drag-handle:active{cursor:grabbing}
.drag-handle:hover{background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008))}

.plugin.tilting{
    transition:transform .1s ease-out;transform-style:preserve-3d;
    transform:perspective(800px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));
}
.plugin.dragging.tilting,.plugin.being-tossed.tilting{transform:none !important}

.plugin-overlay{
    position:fixed;inset:0;display:grid;place-items:center;
    background:rgba(4,6,9,.85);backdrop-filter:blur(4px);
    opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:80
}
.plugin-overlay.in{opacity:1;pointer-events:auto}
.plugin--expanded{
    width:min(1100px,92vw);max-height:92vh;overflow:auto;border-radius:18px;
    transform:translateZ(0);box-shadow:inset 0 0 0 1px var(--edge-1), var(--shadow)
}

/* =========================================================
   Content blocks
   ========================================================= */
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.info-item{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.014);
    box-shadow:inset 0 0 0 1px var(--edge-0);min-height:42px;
}
.info-label{color:var(--muted);font-size:12px;font-family:var(--mono);min-width:70px;text-align:left}
.info-value{font-weight:600;text-align:right;flex:1;word-break:break-word}

.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat-item{
    display:flex;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:12px;
    background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--edge-0);
}
.stat-card{padding:12px;border-radius:var(--radius);background:rgba(255,255,255,.014);text-align:center;box-shadow:inset 0 0 0 1px var(--edge-0)}
.stat-number{font-size:20px;font-weight:700;color:var(--accent);line-height:1}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px;font-family:var(--mono)}
.stat-value{font-weight:700;margin-top:4px}

.social-links{display:flex;gap:8px;flex-wrap:wrap;padding:2px}
.social-link{
    width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.02) 100%);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:all .15s cubic-bezier(.4,0,.2,1);color:var(--ink-2);
}
.social-link:hover{
    background:linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.02) 100%);
    box-shadow:0 3px 12px rgba(0,0,0,.25);transform:translateY(-2px);color:var(--accent);
}
.social-link img{width:20px;height:20px;object-fit:contain}

.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px}
.tech-item{
    position:relative;width:50px;height:50px;border-radius:12px;
    background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--edge-0);
    display:grid;place-items:center;cursor:pointer;transition:all .2s ease;overflow:hidden;
}
.tech-item:hover{background:rgba(255,255,255,.024);box-shadow:inset 0 0 0 1px var(--edge-1), var(--shadow);transform:translateY(-2px)}
.tech-item img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.tech-item .tech-name{
    position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
    background:var(--paper);padding:4px 8px;border-radius:6px;
    font-size:11px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .2s ease;z-index:10;border:1px solid var(--edge-1);
}
.tech-item:hover .tech-name{opacity:1;bottom:-35px}
.tech-item.filtered{background:var(--accent);color:#fff}
.tech-item.filtered img{filter:brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,.25))}

.projects-section{grid-column:1 / -1;margin-top:40px}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px}
.project-card{border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);transition:all .2s ease;opacity:1}
.project-card.hidden{opacity:.3;transform:scale(.98);pointer-events:none}
.project-content{padding:14px}
.project-title{margin:.2rem 0 0;font-size:1.1rem}
.project-description{margin:.3rem 0 .6rem;color:var(--ink-2)}
.project-links{display:flex;gap:8px;flex-wrap:wrap}
.project-link{display:inline-flex;align-items:center;gap:.4rem;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--edge-0)}
.project-tech{margin-top:.6rem;display:flex;gap:6px;flex-wrap:wrap}
.tech-tag{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.014);font:600 11px/1 var(--mono);box-shadow:inset 0 0 0 1px var(--edge-0);cursor:pointer;transition:all .2s ease}
.tech-tag:hover{background:var(--accent);color:#fff}

.project-filter-notice{
    display:none;
    padding:12px 16px;
    margin-bottom:16px;
    background:var(--accent);
    color:#fff;
    border-radius:var(--radius);
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.project-filter-notice.active{display:flex}
.filter-text{font-weight:600;font-size:14px}
.clear-filter{
    padding:6px 12px;
    background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.3);
    border-radius:6px;
    color:#fff;
    font-weight:500;
    font-size:13px;
    cursor:pointer;
    transition:all .2s ease;
}
.clear-filter:hover{
    background:rgba(255,255,255,.3);
    border-color:rgba(255,255,255,.4);
}

.track-cover-large{position:relative;width:80px;height:80px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--edge-0)}
.track-cover-large img{width:100%;height:100%;object-fit:cover}
.track-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}
.track-cover-large:hover .track-overlay{opacity:1}
.play-btn{width:40px;height:40px;border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,var(--accent) 0%, color-mix(in oklch, var(--accent) 90%, black) 100%);box-shadow:0 2px 8px rgba(0,0,0,.25), 0 4px 16px color-mix(in oklch, var(--accent) 40%, transparent)}
.play-btn:hover{background:linear-gradient(135deg,var(--accent-2) 0%, color-mix(in oklch, var(--accent-2) 90%, black) 100%);transform:scale(1.05)}
.track-main{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--paper);box-shadow:var(--shadow), inset 0 0 0 1px var(--edge-0);border-radius:var(--radius)}
.track-info{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.track-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.track-title{font-size:18px;font-weight:700;color:var(--ink);line-height:1.2;word-wrap:break-word}
.track-artist,.track-album{color:var(--ink-2);font-size:14px;word-wrap:break-word}
.track-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.recent-tracks{margin-top:16px}
.recent-tracks h4{margin:0 0 12px 0;font-size:14px;color:var(--ink-2);font-weight:600}
.recent-tracks-list{display:flex;flex-direction:column;gap:8px}
.recent-track-item{display:flex;gap:12px;align-items:center;padding:8px 12px;background:rgba(255,255,255,.008);box-shadow:inset 0 0 0 1px var(--edge-0);border-radius:var(--radius)}
.recent-track-item:hover{background:rgba(255,255,255,.016)}
.recent-track-cover{width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0}
.recent-track-cover img{width:100%;height:100%;object-fit:cover}
.recent-track-info{flex:1;min-width:0}
.recent-track-name{font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-track-artist{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-track-time{font-size:11px;color:var(--muted);font-family:var(--mono);flex-shrink:0;margin-left:8px}

.maps-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.map-item{display:flex;gap:10px;padding:10px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow)}
.map-cover{width:56px;height:56px;border-radius:10px;object-fit:cover;box-shadow:inset 0 0 0 1px var(--edge-0)}
.map-name{font-weight:700;word-wrap:break-word}
.map-stats{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font:12px/1 var(--mono)}

.games-list{display:flex;flex-direction:column;gap:10px}
.game-item{display:flex;gap:12px;padding:10px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow)}
.game-icon{width:56px;height:56px;border-radius:10px;object-fit:cover;box-shadow:inset 0 0 0 1px var(--edge-0)}
.game-name{font-weight:700;word-wrap:break-word}
.game-stats{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font:12px/1 var(--mono)}

.terminal{
    margin:0;background:var(--bg-3);border-radius:12px;padding:12px;font:12.5px/1.4 var(--mono);color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--edge-0);overflow-x:auto;
}
.terminal .ascii-art{color:var(--accent-2)}
.terminal .info-key{color:var(--accent)}

.section-toggle{
    display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.014);color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:8px;
    box-shadow:inset 0 0 0 1px var(--edge-0);
}
.section-toggle:hover{background:rgba(255,255,255,.024)}
.toggle-icon{font-size:12px;transition:transform .2s ease;flex-shrink:0}
.section-toggle[aria-expanded="true"] .toggle-icon{transform:rotate(90deg)}
.section-count{margin-left:auto;color:var(--muted);font-size:12px;font-family:var(--mono)}
.collapsible-content{overflow:hidden;transition:all .3s ease;background:rgba(255,255,255,.008);border-radius:var(--radius);margin-bottom:12px}
.collapsible-content:not(.collapsed){padding:12px;box-shadow:inset 0 0 0 1px var(--edge-0)}
.collapsible-content.collapsed{max-height:0 !important;padding:0 !important;border:none !important;opacity:0;visibility:hidden;margin-bottom:0 !important}

.language-chart,.wakatime-list,.repo-list{display:flex;flex-direction:column;gap:8px}
.language-item,.waka-item,.repo-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--edge-0);background:rgba(255,255,255,.012)}
.lang-info,.waka-lang{min-width:80px;font-size:13px;font-weight:500}
.lang-percent{color:var(--muted);font-size:12px;font-family:var(--mono)}
.lang-bar,.waka-bar{flex:1;height:6px;background:var(--bg-3);border-radius:3px;overflow:hidden}
.lang-fill,.waka-fill{height:100%;background:var(--accent);transition:width .3s ease}
.time-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.time-card{padding:12px;border-radius:var(--radius);background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--edge-0);text-align:center}
.time-value{font-size:16px;font-weight:700;color:var(--accent);display:block}
.time-label{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.editor-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.editor-chip{padding:4px 8px;border-radius:12px;background:rgba(255,255,255,.014);box-shadow:inset 0 0 0 1px var(--edge-0);font-size:11px;font-family:var(--mono);color:var(--ink-2)}
.repo-name{font-weight:600;flex:1;min-width:0;word-wrap:break-word}
.repo-tags{display:flex;gap:6px;flex-shrink:0}
.repo-lang,.repo-stars{padding:2px 6px;border-radius:10px;background:rgba(255,255,255,.014);font-size:11px;font-family:var(--mono);color:var(--muted)}
.repo-stars{color:var(--accent)}

.visitors-section{
    background:linear-gradient(135deg, var(--paper) 0%, var(--bg-2) 100%);
    border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
}
.visitors-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:16px;margin-top:8px}
.visitor-stat{text-align:center;padding:12px 8px;border-radius:8px;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--edge-0);transition:all .2s ease}
.visitor-stat:hover{background:rgba(255,255,255,.04);transform:translateY(-1px)}
.visitor-number{font-size:20px;font-weight:700;color:var(--accent);display:block;line-height:1}
.visitor-label{font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
.visitor-uptime{font-size:14px;font-weight:600;color:var(--ink-2);display:block}

.source-links{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:8px}

.status-bar{
    position:fixed;left:0;right:0;bottom:10px;z-index:50;width:max-content;max-width:calc(100% - 20px);
    margin:0 auto;padding:8px 12px;border-radius:12px;background:var(--paper);
    box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);
    display:flex;align-items:center;gap:8px
}
.status-bar .status-indicator{--s:8px}
.loading{display:inline-block;width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin .8s linear infinite}
.loading-indicator{display:flex;align-items:center;gap:8px;padding:12px;background:rgba(255,255,255,.012);box-shadow:inset 0 0 0 1px var(--edge-0);border-radius:var(--radius);color:var(--muted);font-size:14px}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ===================== Webring ===================== */
.webring-section .plugin-header{
    border:none !important;
    box-shadow:none !important;
}

.webring-nav{
    display:flex !important;
    flex-wrap:nowrap;          /* force one line */
    white-space:nowrap;        /* keep items on one row */
    overflow:hidden;           /* avoid page-wide overflow */
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:var(--radius);
    background:var(--paper);
    box-shadow:var(--shadow), inset 0 0 0 1px var(--edge-0);
    width:100%;
}

.webring-prev,
.webring-home,
.webring-next{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:40px;
    padding:0 12px;            /* a bit tighter so it fits on phones */
    flex:1 1 0;                /* equal width and shrinkable */
    min-width:0;               /* allow shrinking inside flex row */
    border:none;
    border-radius:8px;
    text-decoration:none;
    cursor:pointer;
    overflow:hidden;           /* clip long labels */
    color:var(--ink);
    background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.02) 100%);
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:all .15s cubic-bezier(.4,0,.2,1);
}

.webring-home{
    background:linear-gradient(135deg, var(--accent) 0%, color-mix(in oklch, var(--accent) 85%, black) 100%);
    color:#fff;
    font-weight:600;
}

.webring-prev:hover,
.webring-next:hover{ transform:translateY(-1px) }
.webring-home:hover{
    transform:translateY(-1px);
    background:linear-gradient(135deg, var(--accent-2) 0%, color-mix(in oklch, var(--accent-2) 85%, black) 100%);
    color:#fff;
}

/* Truncate labels gracefully */
.webring-text{
    display:inline-block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:clamp(12px,3.2vw,14px); /* small screens shrink a bit */
}

.webring-prev img,
.webring-home img,
.webring-next img{
    width:16px;height:16px;flex-shrink:0;object-fit:contain;
}

/* Tiny screens: tighter spacing, still one line */
@media (max-width:520px){
    .webring-nav{gap:6px;padding:8px 10px}
    .webring-prev,.webring-home,.webring-next{height:34px;padding:0 8px}
    .webring-prev img,.webring-home img,.webring-next img{width:14px;height:14px}
}

/* =========================================================
   Neofetch machine switcher
   ========================================================= */
.machine-buttons{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.machine-btn{
    padding:8px 16px;border:none;border-radius:var(--radius);background:var(--paper);color:var(--ink);
    font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
    box-shadow:inset 0 0 0 1px var(--edge-0);
}
.machine-btn:hover{background:var(--bg-3);transform:translateY(-1px)}
.machine-btn[data-active="true"],.machine-btn.active{background:var(--accent);color:#fff}
.machine-btn[data-active="true"]:hover,.machine-btn.active:hover{background:var(--accent-2);color:#fff}
.neofetch-outputs{margin-top:16px}
.neofetch-output{display:none}
.neofetch-output:first-child{display:block}

/* =========================================================
   Utilities
   ========================================================= */
[data-tooltip]{position:relative}
[data-tooltip]::after{
    content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);
    transform:translateX(-50%);background:var(--paper);color:var(--ink);
    padding:6px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--edge-1), var(--shadow);
    white-space:nowrap;font:11px/1 var(--mono);opacity:0;pointer-events:none;transition:opacity .15s ease;
}
[data-tooltip]:hover::after{opacity:1}

.no-data{padding:20px;text-align:center;border:1px dashed var(--edge-0);border-radius:var(--radius);background:rgba(255,255,255,.008)}

@media (prefers-reduced-motion: reduce){
    .plugin,.toast,.btn,.track-overlay,.play-btn{transition:none}
    .plugin.tilting{transform:none !important}
    .ripple{animation:none}
    .plugin.being-tossed{transform:none !important}
    html{scroll-behavior:auto}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1100px){
    .plugin[data-w="3"]{grid-column:span 2}
    .stats-overview{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:780px){
    .container{
        grid-template-columns:1fr;
        gap:calc(var(--gap)*0.8);
        padding:16px;
    }
    .profile-section{position:static;margin-bottom:var(--gap)}

    .mosaic{
        grid-template-columns:1fr;           /* single column on tablets/phones */
        gap:calc(var(--gap)*0.8);
        padding-bottom:calc(var(--gap)*2)
    }
    .plugin[data-w]{grid-column:span 1}

    .info-grid,.stats-grid{grid-template-columns:1fr}
    .time-summary{grid-template-columns:1fr;gap:8px}

    .projects-grid{grid-template-columns:1fr}
    .tech-grid{grid-template-columns:repeat(auto-fill,minmax(45px,1fr))}

    .webring-nav{gap:8px;padding:10px}
    .webring-prev,.webring-home,.webring-next{height:36px;padding:0 10px}
    .webring-text{font-size:13px}
}

/* ultra-small screens safeguard */
@media (max-width:360px){
    .profile-name{font-size:clamp(1.4rem,6vw,1.7rem)}
}

@media (max-width:600px){
    .track-main{flex-direction:column;gap:12px}
    .track-cover-large{width:60px;height:60px;align-self:center}
    .recent-track-item{padding:10px}
    .recent-track-cover{width:36px;height:36px}

    .profile-content{flex-direction:column;text-align:center}
    .profile-image{order:-1}
}

@media (max-width:520px){
    .stats-overview{grid-template-columns:1fr}
    .container{padding:12px}

    .plugin-toolbar{display:none}
    .plugin-header{padding:8px 10px}

    /* stack webring buttons vertically if needed */
    .webring-prev,.webring-home,.webring-next{flex-basis:100%}
}

@media (max-width:480px){
    .toast-root{left:16px;right:16px;top:16px}
    .toast{max-width:none;transform:translateY(-100px)}
    .toast.in{transform:translateY(0)}

    .webring-text{font-size:12px}
    .webring-prev img,.webring-home img,.webring-next img{width:14px;height:14px}
}

/* ===================== Code Stats ===================== */
.code-section .plugin-header{
    border: none !important;
    box-shadow: none !important;
}

.code-section .plugin__inner{
    display: flow-root;
}

.code-section .stats-overview{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}
.code-section .stat-card{
    padding:14px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.014);
    box-shadow:inset 0 0 0 1px var(--edge-0);
    text-align:center;
}
.code-section .stat-number{
    font-size:20px;
    font-weight:700;
    color:var(--accent);
    line-height:1;
}
.code-section .stat-label{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
    font-family:var(--mono);
}

.code-section .time-summary{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:0 0 16px 0;
}
.code-section .time-card{
    padding:12px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.014);
    box-shadow:inset 0 0 0 1px var(--edge-0);
    text-align:center;
}
.code-section .time-value{
    font-size:16px;
    font-weight:700;
    color:var(--accent);
    display:block;
}
.code-section .time-label{
    font-size:11px;
    color:var(--muted);
    margin-top:2px;
    font-family:var(--mono);
}

.code-section .section-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    padding:10px 12px;
    border:none;
    border-radius:calc(var(--radius) - 2px);
    background:rgba(255,255,255,.014);
    color:var(--ink);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
    box-shadow:inset 0 0 0 1px var(--edge-0);
}
.code-section .section-toggle:hover{
    background:rgba(255,255,255,.024);
}
.code-section .toggle-icon{font-size:12px;flex-shrink:0}

.code-section .collapsible-content{
    overflow:hidden;
    transition:max-height .3s ease, opacity .3s ease, visibility .3s ease;
    background:rgba(255,255,255,.008);
    border-radius:var(--radius);
    margin:10px 0 12px;
    max-height:none;
    opacity:1;
    visibility:visible;
    padding:12px;
    box-shadow:inset 0 0 0 1px var(--edge-0);
}
.code-section .collapsible-content.collapsed{
    max-height:0 !important;
    padding:0 !important;
    opacity:0;
    visibility:hidden;
    box-shadow:none;
    margin:0 !important;
}

.code-section .language-chart,
.code-section .wakatime-list,
.code-section .repo-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.code-section .language-item,
.code-section .waka-item,
.code-section .repo-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.012);
    box-shadow:inset 0 0 0 1px var(--edge-0);
}
.code-section .lang-info,
.code-section .waka-lang{
    min-width:120px;
    font-size:13px;
    font-weight:600;
}
.code-section .lang-percent{
    color:var(--muted);
    font-size:12px;
    font-family:var(--mono);
    margin-left:auto;
}

.code-section .lang-bar,
.code-section .waka-bar{
    flex:1;
    height:6px;
    background:var(--bg-3);
    border-radius:999px;
    overflow:hidden;
}
.code-section .lang-fill,
.code-section .waka-fill{
    height:100%;
    background:var(--accent);
    transition:width .3s ease;
}

.code-section .editor-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.code-section .editor-chip{
    padding:4px 8px;
    border-radius:12px;
    background:rgba(255,255,255,.014);
    box-shadow:inset 0 0 0 1px var(--edge-0);
    font-size:11px;
    font-family:var(--mono);
    color:var(--ink-2);
}

@media (max-width:1100px){
    .code-section .stats-overview{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
    .code-section .time-summary{grid-template-columns:1fr}
    .code-section .lang-info,.code-section .waka-lang{min-width:90px}
}

/* ===================== Last.fm (Music) ===================== */
.lastfm-section .plugin-header{
    border:none !important;
    box-shadow:none !important;
}

.lastfm-section .plugin__inner{
    display: flow-root;
}

.lastfm-section .lastfm-stats{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.lastfm-section .scrobbles-text{
    font-weight:600;
    font-size:13px;
    color:var(--ink-2);
}

.lastfm-section .current-track{margin-top:8px}
.lastfm-section .track-main{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:16px;
    background:var(--paper);
    border-radius:var(--radius);
    box-shadow:var(--shadow), inset 0 0 0 1px var(--edge-0);
}

.lastfm-section .track-cover-large{
    position:relative;
    width:80px;height:80px;flex-shrink:0;border-radius:12px;
    overflow:hidden;background:var(--bg-3);
    box-shadow:inset 0 0 0 1px var(--edge-0);
}
.lastfm-section .track-cover-large img{
    width:100%;height:100%;object-fit:cover
}
.lastfm-section .track-overlay{
    position:absolute;inset:0;background:rgba(0,0,0,.4);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .2s ease
}
.lastfm-section .track-cover-large:hover .track-overlay{opacity:1}

.lastfm-section .track-info{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.lastfm-section .track-status{
    display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);font-family:var(--mono)
}
.lastfm-section .track-title{font-size:18px;font-weight:700;color:var(--ink);line-height:1.2;word-wrap:break-word}
.lastfm-section .track-artist,.lastfm-section .track-album{color:var(--ink-2);font-size:14px;word-wrap:break-word}
.lastfm-section .track-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

.lastfm-section .recent-tracks{margin-top:16px}
.lastfm-section .recent-tracks h4{
    margin:0 0 12px 0;font-size:14px;color:var(--ink-2);font-weight:600
}
.lastfm-section .recent-tracks-list{
    display:flex;flex-direction:column;gap:8px
}
.lastfm-section .recent-track-item{
    display:flex;gap:12px;align-items:center;padding:8px 12px;
    background:rgba(255,255,255,.008);
    border-radius:var(--radius);
    box-shadow:inset 0 0 0 1px var(--edge-0);
    transition:background .2s ease
}
.lastfm-section .recent-track-item:hover{background:rgba(255,255,255,.016)}
.lastfm-section .recent-track-cover{
    width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0
}
.lastfm-section .recent-track-cover img{width:100%;height:100%;object-fit:cover}
.lastfm-section .recent-track-info{flex:1;min-width:0}
.lastfm-section .recent-track-name{
    font-weight:600;font-size:13px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lastfm-section .recent-track-artist{
    font-size:12px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lastfm-section .recent-track-time{
    font-size:11px;color:var(--muted);font-family:var(--mono);flex-shrink:0;margin-left:8px
}

@media (max-width:780px){
    .lastfm-section .track-main{flex-direction:column;gap:12px}
    .lastfm-section .track-cover-large{width:60px;height:60px;align-self:center}
    .lastfm-section .recent-track-item{padding:10px}
    .lastfm-section .recent-track-cover{width:36px;height:36px}
}