.host-name-screen {
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #fff;
    color: #151515;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms cubic-bezier(.65,0,.35,1), visibility 0s linear 900ms;
}
.host-name-screen[hidden] { display: none !important; }
.host-name-screen.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.host-name-screen.is-leaving {
    opacity: 0;
    transform: scale(1.012);
}
.host-name-noise {
    position: absolute;
    inset: -15%;
    pointer-events: none;
    opacity: .13;
    background:
        radial-gradient(circle at 50% 38%, rgba(105,74,45,.13), transparent 30%),
        radial-gradient(circle at 50% 72%, rgba(76,52,31,.09), transparent 35%);
    filter: blur(32px);
    animation: hostAmbient 9s ease-in-out infinite alternate;
}
.host-name-panel {
    position: relative;
    width: min(520px, calc(100vw - 40px));
    padding: 60px 62px 56px;
    border: 1px solid rgba(20,20,20,.16);
    background: rgba(255,255,255,.88);
    box-shadow: 0 35px 90px rgba(55,39,25,.13);
    text-align: center;
    opacity: 0;
    transform: translateY(18px) scale(.985);
}
.host-name-screen.is-visible .host-name-panel {
    animation: hostPanelEnter 1100ms cubic-bezier(.16,1,.3,1) 250ms forwards;
}
.host-name-mark { width: 58px; margin: 0 auto 30px; }
.host-name-mark svg { width: 100%; overflow: visible; }
.host-mark-line {
    fill: none;
    stroke: #111;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    filter: drop-shadow(0 0 5px rgba(0,0,0,.18));
}
.host-name-screen.is-visible .host-mark-line-a { animation: hostDraw 1.25s cubic-bezier(.65,0,.35,1) .55s forwards; }
.host-name-screen.is-visible .host-mark-line-b { animation: hostDraw 1.25s cubic-bezier(.65,0,.35,1) 1.05s forwards; }
.host-name-kicker { margin: 0 0 19px; font-size: 8px; letter-spacing: 5px; text-transform: uppercase; }
.host-name-panel h1 { margin: 0; font-size: clamp(24px, 3vw, 31px); font-weight: 300; letter-spacing: 1.2px; }
.host-name-description { max-width: 390px; margin: 15px auto 34px; color: rgba(20,20,20,.58); font-size: 11px; line-height: 1.8; letter-spacing: .55px; }
.host-name-form { display: flex; flex-direction: column; align-items: stretch; }
.host-name-form label { margin-bottom: 10px; text-align: left; font-size: 7px; letter-spacing: 3.2px; }
.host-name-form input {
    width: 100%; box-sizing: border-box; padding: 15px 17px; border: 1px solid rgba(20,20,20,.2); outline: none;
    background: rgba(255,255,255,.72); color: #111; font: 400 14px/1.2 inherit; letter-spacing: 1.6px; text-align: center;
    transition: border-color .35s ease, box-shadow .35s ease;
}
.host-name-form input:focus { border-color: rgba(20,20,20,.65); box-shadow: 0 0 0 3px rgba(20,20,20,.06); }
.host-name-error { min-height: 17px; margin: 8px 0 7px; color: #7f342d; font-size: 9px; letter-spacing: .5px; }
.host-name-form button {
    align-self: center; min-width: 220px; padding: 16px 24px; border: 1px solid rgba(20,20,20,.32); background: transparent;
    color: #111; font: 400 8px/1 inherit; letter-spacing: 3.2px; cursor: pointer;
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}
.host-name-form button:hover { background: #151515; color: #fff; border-color: #151515; transform: translateY(-1px); }
@keyframes hostDraw { to { stroke-dashoffset: 0; } }
@keyframes hostPanelEnter { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hostAmbient { to { transform: translate3d(1.5%, -1%, 0) scale(1.04); } }
@media (max-width: 600px) {
    .host-name-panel { padding: 48px 27px 43px; }
    .host-name-description { font-size: 10px; }
}

.host-name-cancel { margin-top: 10px; border-color: transparent !important; opacity: .58; }
.host-name-cancel:hover { background: transparent !important; color: #111 !important; opacity: 1; transform: none !important; }
.host-reset-confirmation { position: absolute; inset: 0; display: grid; place-content: center; padding: 40px; background: rgba(255,255,255,.98); text-align: center; z-index: 3; }
.host-reset-confirmation[hidden] { display: none !important; }
.host-reset-confirmation p { margin: 0 0 30px; font-size: 18px; font-weight: 300; letter-spacing: 1px; }
.host-reset-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.host-reset-actions button { min-width: 170px; padding: 15px 18px; border: 1px solid rgba(20,20,20,.3); background: transparent; color: #111; font: 400 8px/1 inherit; letter-spacing: 2.4px; cursor: pointer; }
.host-reset-actions button:hover { background: #151515; color: #fff; }