/* Front page welcome panel: green phosphor "player card" built around the dithered portrait. */

.g-container.home-welcome-panel {
    --panel-color: rgb(104, 168, 88);
    --welcome-phosphor: #b4dca4;
    --welcome-phosphor-rgb: 180, 220, 164;
    --welcome-phosphor-dim: #7f9c75;
    --welcome-bright: #eef5ea;
    --welcome-line: #3e5537;
    --welcome-bevel-light: #6d8f62;
    --welcome-bevel-dark: #18241a;
    --welcome-surface: #121b10;
    --welcome-surface-deep: #060a05;
    --welcome-ink: #0a1208;
    --welcome-cream: #cfd8b8;
    --welcome-glow: 0 0 4px rgba(var(--welcome-phosphor-rgb), 0.25);

    background:
        radial-gradient(ellipse at 20% 0%, rgba(var(--welcome-phosphor-rgb), 0.06), transparent 60%),
        rgba(0, 0, 0, 0.93);
}

.home-welcome {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    text-align: left;
}

/* Header */

.home-welcome-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.home-welcome-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-welcome-title {
    margin: 0;
    font-size: 2.3rem;
    line-height: 1;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 0 0 rgba(255, 40, 80, 0.55), -2px 0 0 rgba(0, 240, 255, 0.45), 0 0 10px rgba(var(--welcome-phosphor-rgb), 0.2);
    cursor: default;
}

.home-welcome-title span {
    display: inline-block;
}

.home-welcome-title:hover span {
    animation: welcome-letter-hop 0.6s steps(4) calc(var(--i) * 60ms) both;
}

.home-welcome-title span:hover {
    color: var(--welcome-phosphor);
}

@keyframes welcome-letter-hop {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-7px); }
    70%      { transform: translateY(2px); }
}

.home-welcome-tagline {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--welcome-phosphor);
    text-shadow: var(--welcome-glow);
}

.home-welcome-caret {
    margin-left: 2px;
    animation: welcome-blink 1s steps(1) infinite;
}

@keyframes welcome-blink {
    50% { opacity: 0; }
}

/* Visit counter, styled as an old-school odometer hit counter */

.home-welcome-hits {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px 5px;
    border: 2px solid;
    border-color: var(--welcome-bevel-light) var(--welcome-bevel-dark) var(--welcome-bevel-dark) var(--welcome-bevel-light);
    background:
        repeating-linear-gradient(0deg, rgba(var(--welcome-phosphor-rgb), 0.03) 0 1px, transparent 1px 3px),
        linear-gradient(160deg, var(--welcome-surface) 0%, var(--welcome-surface-deep) 70%);
    cursor: default;
}

.home-welcome-hits-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--welcome-phosphor-dim);
}

.home-welcome-hits-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.home-welcome-hits-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.home-welcome-hits-version {
    font-family: 'PixelOperatorMono', monospace;
    letter-spacing: 0;
    text-transform: none;
    color: #8a9a84;
}

.home-welcome-hits-digits {
    display: flex;
    gap: 2px;
    font-family: 'PixelOperatorMono', monospace;
    font-size: 18px;
    line-height: 1;
    color: var(--welcome-phosphor);
    text-shadow: var(--welcome-glow);
}

.home-welcome-hits-digit {
    position: relative;
    display: block;
    width: 14px;
    height: 20px;
    overflow: hidden;
    border: 1px solid var(--welcome-line);
    background: linear-gradient(180deg, var(--welcome-surface) 0%, var(--welcome-surface-deep) 48%, #000 48% 52%, var(--welcome-surface-deep) 52%, var(--welcome-surface) 100%);
}

/* Darkened top and bottom edges make each cell read as a curved drum. */
.home-welcome-hits-digit::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, transparent 34%, transparent 66%, rgba(0, 0, 0, 0.75) 100%);
}

.home-welcome-hits-reel {
    display: flex;
    flex-direction: column;
}

.home-welcome-hits-digit.is-spinning .home-welcome-hits-reel {
    will-change: transform, filter;
}

.home-welcome-hits-reel span {
    display: block;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.home-welcome-hits-digit.is-landed {
    animation: welcome-hits-land 0.5s ease-out;
}

.home-welcome-hits-digit.is-landed .home-welcome-hits-reel {
    animation: welcome-hits-pop 0.5s ease-out;
}

.home-welcome-hits.is-ready {
    animation: welcome-hits-ready 0.8s ease-out;
}

.home-welcome-hits:hover {
    border-color: var(--welcome-phosphor) var(--welcome-line) var(--welcome-line) var(--welcome-phosphor);
}

@keyframes welcome-hits-land {
    0% {
        border-color: var(--welcome-phosphor);
        box-shadow: 0 0 8px rgba(var(--welcome-phosphor-rgb), 0.55), inset 0 0 6px rgba(var(--welcome-phosphor-rgb), 0.35);
    }
}

@keyframes welcome-hits-pop {
    0%   { color: var(--welcome-bright); transform: scale(1.3); }
    45%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

@keyframes welcome-hits-ready {
    0%   { box-shadow: 0 0 0 0 rgba(var(--welcome-phosphor-rgb), 0); }
    30%  { box-shadow: 0 0 14px 2px rgba(var(--welcome-phosphor-rgb), 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(var(--welcome-phosphor-rgb), 0); }
}

/* Player card */

.home-welcome-card {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding: 10px;
    border: 2px solid var(--panel-color);
    border-color: var(--welcome-bevel-light) var(--welcome-bevel-dark) var(--welcome-bevel-dark) var(--welcome-bevel-light);
    background:
        repeating-linear-gradient(0deg, rgba(var(--welcome-phosphor-rgb), 0.03) 0 1px, transparent 1px 3px),
        linear-gradient(160deg, var(--welcome-surface) 0%, var(--welcome-surface-deep) 70%);
}

.home-welcome-card::before {
    content: "";
    position: absolute;
    top: -2px;
    right: 14px;
    width: 46px;
    height: 10px;
    background: url('/static/backgrounds/pattern%20470.gif');
    opacity: 0.6;
}

.home-welcome-portrait {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-welcome-portrait-screen {
    --welcome-portrait-src: url('/static/red_2_dithered.webp');
    --welcome-portrait-position: center;
    /* Overridden from CAM_SWITCH_MS in welcome.js. */
    --welcome-cam-tune: 35ms;
    --welcome-cam-settle: 65ms;

    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1639 / 2048;
    padding: 0;
    overflow: hidden;
    border: 3px solid #000;
    outline: 2px solid var(--welcome-line);
    background: #0b140a;
    box-shadow: 0 0 0 4px #050505, 0 0 14px rgba(var(--welcome-phosphor-rgb), 0.1);
    cursor: url('/static/cursors/kenney_cursor-pixel-pack/Tiles/tile_0134.png') 3 2, pointer;
}

.home-welcome-portrait-screen:focus-visible {
    outline: 2px dotted var(--welcome-phosphor);
    outline-offset: 2px;
}

.home-welcome-portrait-img,
.home-welcome-portrait-glitch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--welcome-portrait-position);
    /* The source dither is ~8px per cell; nearest-neighbour downscaling turns it into moire. */
    image-rendering: auto;
}

.home-welcome-portrait-img {
    filter: contrast(1.08) brightness(1.04);
    animation: welcome-flicker 6s steps(1) infinite;
    transition: transform 0.25s steps(3);
}

.home-welcome-portrait-screen:hover .home-welcome-portrait-img {
    transform: scale(1.04);
}

@keyframes welcome-flicker {
    0%, 100% { filter: contrast(1.08) brightness(1.04); }
    47%      { filter: contrast(1.2) brightness(1.18); }
    48%      { filter: contrast(1.08) brightness(0.92); }
    49%      { filter: contrast(1.08) brightness(1.04); }
}

.home-welcome-portrait-glitch {
    background: var(--welcome-portrait-src) var(--welcome-portrait-position) / cover no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

.home-welcome-portrait-glitch.is-red {
    filter: sepia(1) saturate(6) hue-rotate(-40deg);
}

.home-welcome-portrait-glitch.is-cyan {
    filter: sepia(1) saturate(6) hue-rotate(130deg);
}

.home-welcome-portrait-screen:hover .home-welcome-portrait-glitch,
.home-welcome-portrait-screen.is-glitching .home-welcome-portrait-glitch {
    opacity: 0.55;
}

.home-welcome-portrait-screen:hover .home-welcome-portrait-glitch.is-red {
    animation: welcome-glitch-red 1.4s steps(1) infinite;
}

.home-welcome-portrait-screen:hover .home-welcome-portrait-glitch.is-cyan {
    animation: welcome-glitch-cyan 1.4s steps(1) infinite;
}

.home-welcome-portrait-screen.is-glitching .home-welcome-portrait-glitch.is-red {
    opacity: 0.85;
    animation: welcome-glitch-red 0.3s steps(1) infinite;
}

.home-welcome-portrait-screen.is-glitching .home-welcome-portrait-glitch.is-cyan {
    opacity: 0.85;
    animation: welcome-glitch-cyan 0.3s steps(1) infinite;
}

@keyframes welcome-glitch-red {
    0%   { transform: translate(-3px, 0);  clip-path: inset(10% 0 70% 0); }
    20%  { transform: translate(4px, 0);   clip-path: inset(55% 0 30% 0); }
    40%  { transform: translate(-2px, 1px); clip-path: inset(30% 0 52% 0); }
    60%  { transform: translate(5px, 0);   clip-path: inset(78% 0 6% 0); }
    80%  { transform: translate(-4px, 0);  clip-path: inset(2% 0 88% 0); }
    100% { transform: translate(0, 0);     clip-path: inset(45% 0 45% 0); }
}

@keyframes welcome-glitch-cyan {
    0%   { transform: translate(3px, 0);   clip-path: inset(62% 0 20% 0); }
    20%  { transform: translate(-5px, 0);  clip-path: inset(15% 0 72% 0); }
    40%  { transform: translate(2px, -1px); clip-path: inset(80% 0 4% 0); }
    60%  { transform: translate(-3px, 0);  clip-path: inset(38% 0 48% 0); }
    80%  { transform: translate(4px, 0);   clip-path: inset(68% 0 18% 0); }
    100% { transform: translate(0, 0);     clip-path: inset(5% 0 85% 0); }
}

/* Camera switch: static burst while the picture collapses to a line, then it opens on the new feed. */

.home-welcome-portrait-static {
    position: absolute;
    inset: -10%;
    /* Inline SVG noise: a seamless snow tile, no extra request. */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 192px 192px repeat;
    filter: brightness(0.82) contrast(3.2) sepia(0.35) hue-rotate(50deg);
    image-rendering: pixelated;
    opacity: 0;
    pointer-events: none;
}

.home-welcome-portrait-screen.is-tuning .home-welcome-portrait-static {
    animation: welcome-static-in var(--welcome-cam-tune) steps(3) forwards, welcome-static-jitter 40ms steps(3) infinite;
}

.home-welcome-portrait-screen.is-tuned .home-welcome-portrait-static {
    animation: welcome-static-out var(--welcome-cam-settle) steps(6) forwards, welcome-static-jitter 40ms steps(3) infinite;
}

.home-welcome-portrait-screen.is-tuning .home-welcome-portrait-img {
    animation: welcome-cam-off var(--welcome-cam-tune) steps(4) forwards;
}

.home-welcome-portrait-screen.is-tuned .home-welcome-portrait-img {
    animation: welcome-cam-on var(--welcome-cam-settle) steps(6);
}

.home-welcome-portrait-screen.is-tuned .home-welcome-portrait-cam {
    animation: welcome-cam-label var(--welcome-cam-settle) steps(1);
}

@keyframes welcome-static-in {
    from { opacity: 0.4; }
    to   { opacity: 0.95; }
}

@keyframes welcome-static-out {
    0%   { opacity: 0.95; }
    40%  { opacity: 0.6; }
    100% { opacity: 0; }
}

@keyframes welcome-static-jitter {
    0%   { background-position: 0 0; }
    33%  { background-position: -37px 61px; }
    66%  { background-position: 83px -29px; }
    100% { background-position: -11px -73px; }
}

@keyframes welcome-cam-off {
    to { transform: scale(1.15, 0.03); filter: brightness(3) contrast(1.4); }
}

@keyframes welcome-cam-on {
    0%   { transform: scale(1.15, 0.03); filter: brightness(3) contrast(1.4); }
    35%  { transform: scale(1.04, 1.08); filter: brightness(1.5) contrast(1.2); }
    60%  { transform: scale(1, 0.97); }
    100% { transform: scale(1); filter: contrast(1.08) brightness(1.04); }
}

@keyframes welcome-cam-label {
    0%, 50% { opacity: 0; }
    25%, 75% { opacity: 1; color: var(--welcome-phosphor); }
}

.home-welcome-portrait-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
}

.home-welcome-portrait-scanlines::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 18%;
    background: linear-gradient(180deg, transparent, rgba(var(--welcome-phosphor-rgb), 0.08), transparent);
    animation: welcome-roll 5s linear infinite;
}

@keyframes welcome-roll {
    from { top: -20%; }
    to   { top: 105%; }
}

.home-welcome-portrait-rec,
.home-welcome-portrait-cam,
.home-welcome-portrait-hint {
    position: absolute;
    font-family: 'PixelOperatorMono', monospace;
    font-size: 11px;
    line-height: 1;
    color: var(--welcome-cream);
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
}

.home-welcome-portrait-rec {
    top: 6px;
    left: 6px;
}

.home-welcome-portrait-rec::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    background: #ff2b2b;
    box-shadow: 0 0 4px #ff2b2b;
    animation: welcome-blink 1.2s steps(1) infinite;
}

.home-welcome-portrait-cam {
    top: 6px;
    right: 6px;
}

.home-welcome-portrait-hint {
    left: 0;
    right: 0;
    bottom: 6px;
    text-align: center;
    color: var(--welcome-phosphor);
    opacity: 0;
    transition: opacity 0.2s steps(2);
}

.home-welcome-portrait-screen:hover .home-welcome-portrait-hint,
.home-welcome-portrait-screen:focus-visible .home-welcome-portrait-hint {
    opacity: 1;
}


/* Name that glitches into the "Kato" alias */

.home-welcome-alias {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: bold;
    color: var(--panel-color);
    cursor: url('/static/cursors/kenney_cursor-pixel-pack/Tiles/tile_0134.png') 3 2, pointer;
}

.home-welcome-alias:hover .home-welcome-alias-text {
    text-decoration: underline dotted;
}

.home-welcome-alias:focus-visible {
    outline: 1px dotted var(--welcome-phosphor);
    outline-offset: 2px;
}

.home-welcome-alias-text {
    position: relative;
    display: inline-block;
}

.home-welcome-alias-text::before,
.home-welcome-alias-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.home-welcome-alias.is-alias {
    color: var(--welcome-bright);
    text-shadow: 0 0 5px rgba(var(--welcome-phosphor-rgb), 0.5);
    letter-spacing: 1px;
}

.home-welcome-alias.is-glitching .home-welcome-alias-text {
    animation: welcome-alias-jitter 0.14s steps(2) infinite;
}

.home-welcome-alias.is-glitching .home-welcome-alias-text::before {
    opacity: 0.85;
    color: #ff2b55;
    animation: welcome-alias-split-red 0.18s steps(2) infinite;
}

.home-welcome-alias.is-glitching .home-welcome-alias-text::after {
    opacity: 0.85;
    color: #00f0ff;
    animation: welcome-alias-split-cyan 0.18s steps(2) infinite;
}

@keyframes welcome-alias-jitter {
    0%   { transform: translate(0, 0) skewX(0deg); }
    50%  { transform: translate(1px, -1px) skewX(-8deg); }
    100% { transform: translate(-1px, 1px) skewX(6deg); }
}

@keyframes welcome-alias-split-red {
    0%   { transform: translateX(-3px); clip-path: inset(0 0 55% 0); }
    100% { transform: translateX(2px);  clip-path: inset(35% 0 20% 0); }
}

@keyframes welcome-alias-split-cyan {
    0%   { transform: translateX(3px);  clip-path: inset(50% 0 0 0); }
    100% { transform: translateX(-2px); clip-path: inset(10% 0 60% 0); }
}
/* Profile stats */

.home-welcome-profile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.home-welcome-profile-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--welcome-ink);
    background: linear-gradient(90deg, var(--welcome-phosphor), #6f8f64);
}

.home-welcome-profile-file {
    font-family: 'PixelOperatorMono', monospace;
    letter-spacing: 0;
}

.home-welcome-stats {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.home-welcome-stat {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px;
    align-items: baseline;
    padding-bottom: 3px;
    border-bottom: 1px dashed rgba(var(--welcome-phosphor-rgb), 0.16);
}

.home-welcome-stat dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--welcome-phosphor-dim);
}

.home-welcome-stat dd {
    margin: 0;
    font-size: 13px;
    color: #f2f2f2;
}

.home-welcome-dim {
    color: #8a9a84;
}

.home-welcome-status {
    color: var(--welcome-phosphor) !important;
    text-shadow: var(--welcome-glow);
}

.home-welcome-meters {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
}

.home-welcome-meter {
    display: grid;
    grid-template-columns: 64px 1fr 34px;
    gap: 8px;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--welcome-phosphor-dim);
}

.home-welcome-meter-track {
    height: 8px;
    padding: 1px;
    border: 1px solid var(--welcome-line);
    background: #000;
}

.home-welcome-meter-track i {
    display: block;
    height: 100%;
    width: var(--fill);
    background: repeating-linear-gradient(90deg, var(--welcome-phosphor) 0 5px, transparent 5px 7px);
    box-shadow: 0 0 4px rgba(var(--welcome-phosphor-rgb), 0.25);
    animation: welcome-meter-fill 1.4s steps(10) both;
}

.home-welcome-meter.is-low .home-welcome-meter-track i {
    background: repeating-linear-gradient(90deg, #ff6b4a 0 5px, transparent 5px 7px);
    box-shadow: 0 0 6px rgba(255, 107, 74, 0.5);
}

.home-welcome-meter-value {
    text-align: right;
    color: var(--welcome-cream);
}

@keyframes welcome-meter-fill {
    from { width: 0; }
}

/* Terminal notes */

.home-welcome-term.window {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    border: 2px solid;
    border-color: #ffffff #5f5f5f #5f5f5f #ffffff;
    box-shadow: 0 0 0 2px #808080 !important;
}

.home-welcome-term .window-bar {
    gap: 6px;
    padding: 1px 4px;
}

.home-welcome-term .window-title {
    padding-left: 0;
    font-size: 13px;
}

.home-welcome-term-icon {
    width: 14px;
    height: 14px;
}

.home-welcome-tabs {
    display: flex;
    gap: 2px;
    padding: 4px 4px 0;
    background: var(--w98-gray);
}

.home-welcome-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 2px;
    font-family: inherit;
    font-size: 11px;
    color: #000;
    background: var(--w98-gray);
    border: 2px solid;
    border-color: #ffffff #5f5f5f transparent #ffffff;
    border-bottom: none;
    position: relative;
    top: 2px;
    cursor: url('/static/cursors/kenney_cursor-pixel-pack/Tiles/tile_0134.png') 3 2, pointer;
}

.home-welcome-tab img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.home-welcome-tab:hover {
    background: #d4d4d4;
}

.home-welcome-tab.is-active {
    z-index: 1;
    top: 0;
    padding-bottom: 4px;
    font-weight: bold;
}

.home-welcome-tab:focus-visible {
    outline: 1px dotted #000;
    outline-offset: -4px;
}

.home-welcome-term-screen {
    position: relative;
    flex: 1 1 auto;
    min-height: 114px;
    margin: 0 4px 4px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 2px solid;
    border-color: #5f5f5f #ffffff #ffffff #5f5f5f;
    font-family: 'PixelOperatorMono', monospace;
    font-size: 14px;
    line-height: 1.3;
    color: var(--welcome-phosphor);
    text-shadow: var(--welcome-glow);
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, #0e170c 0%, #040703 100%);
    scrollbar-color: var(--welcome-line) #040703;
}

.home-welcome-term-screen p {
    margin: 0 0 6px;
}

.home-welcome-term-screen .hl {
    color: var(--welcome-bright);
    text-shadow: 0 0 5px rgba(var(--welcome-phosphor-rgb), 0.45);
}

.home-welcome-term-prompt {
    color: #c9c9c9;
    text-shadow: none;
}

.home-welcome-term-screen:not(.is-typing) .home-welcome-term-prompt:first-child .home-welcome-term-cursor,
.home-welcome-term-screen.is-typing .home-welcome-term-idle {
    display: none;
}

.home-welcome-term-idle {
    margin-top: 10px !important;
}

.home-welcome-term-user {
    color: var(--welcome-phosphor);
}

.home-welcome-term-path {
    color: #7fb6ff;
}

.home-welcome-term-cursor {
    display: inline-block;
    width: 7px;
    height: 12px;
    margin-left: 2px;
    vertical-align: -1px;
    background: var(--welcome-phosphor);
    animation: welcome-blink 1s steps(1) infinite;
}

.home-welcome-pane.is-booting {
    animation: welcome-pane-in 0.3s steps(3);
}

@keyframes welcome-pane-in {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

.home-welcome-mail {
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-welcome-mail-hand {
    width: 22px;
    animation: welcome-point 0.8s steps(2) infinite;
}

@keyframes welcome-point {
    50% { transform: translateX(3px); }
}

.home-welcome-now {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.home-welcome-now li::before {
    content: "> ";
    color: var(--welcome-phosphor-dim);
}

.home-welcome-now span {
    display: inline-block;
    min-width: 80px;
    color: var(--welcome-bright);
}

/* Chat strip */

.home-welcome-chat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding: 6px 4px 0;
    border-top: 2px dotted rgba(var(--welcome-phosphor-rgb), 0.3);
}

.home-welcome-chat-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.home-welcome-chat-title img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.home-social-links a {
    display: inline-block;
    transition: transform 0.15s steps(2);
}

.home-social-links a:hover,
.home-social-links a:focus-visible {
    transform: translateY(-3px) rotate(-2deg);
}

@media (max-width: 700px) {
    .home-welcome-now {
        grid-template-columns: 1fr;
    }

    .home-welcome-card {
        grid-template-columns: 116px 1fr;
        gap: 10px;
        padding: 8px;
    }
}

@media (max-width: 460px) {
    .home-welcome-card {
        grid-template-columns: 1fr;
    }

    .home-welcome-portrait {
        width: 170px;
        margin: 0 auto;
    }

    .home-welcome-tab {
        padding: 3px 5px 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-welcome *,
    .home-welcome *::before,
    .home-welcome *::after {
        animation: none !important;
        transition: none !important;
    }
}