/* V6-Preview viewer styles */

:root {
    --bg:        #0f1117;
    --text:      #e4e6ed;
    --text-dim:  #8b8fa3;
    --accent:    #4f8cff;
    --warning:   #fbbf24;
    --banner-bg: rgba(15, 17, 23, 0.88);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    background: var(--bg);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ── Root container ────────────────────────────────────────────────────── */

#viewer-root {
    position: fixed;
    inset: 0;
}

/* ── Context-sensitive cursors ────────────────────────────────────────── */
/* 32×32 SVG icons, hotspot at centre (16,16).                           */
/*   Orbit   — circular arrow + dot (idle hover = "you can rotate")      */
/*   Rotate  — same, brighter (left-drag active)                         */
/*   Pan     — four-way arrows + dot (right-drag active)                 */

:root {
    --cursor-orbit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgba(228,230,237,0.55)' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='2' fill='rgba(228,230,237,0.8)' stroke='none'/%3E%3Cpath d='M16 7A9 9 0 1 1 7 16'/%3E%3Cpolyline points='4,13 7,16 10,13' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, grab;
    --cursor-rotate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgba(228,230,237,0.9)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='2' fill='rgba(228,230,237,1)' stroke='none'/%3E%3Cpath d='M16 7A9 9 0 1 1 7 16'/%3E%3Cpolyline points='4,13 7,16 10,13' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, grabbing;
    --cursor-pan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgba(228,230,237,0.85)' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='2' fill='rgba(228,230,237,1)' stroke='none'/%3E%3Cpath d='M16 7v18M7 16h18'/%3E%3Cpolyline points='13,10 16,7 19,10' stroke-linejoin='round'/%3E%3Cpolyline points='13,22 16,25 19,22' stroke-linejoin='round'/%3E%3Cpolyline points='10,13 7,16 10,19' stroke-linejoin='round'/%3E%3Cpolyline points='22,13 25,16 22,19' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, move;
}

/* ── Canvas ────────────────────────────────────────────────────────────── */

#canvas-container {
    position: absolute;
    inset: 0;
}

#canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;  /* let OrbitControls handle touch events */
    cursor: var(--cursor-orbit);
}

#canvas-container canvas.cursor--rotating {
    cursor: var(--cursor-rotate);
}

#canvas-container canvas.cursor--panning {
    cursor: var(--cursor-pan);
}

/* ── Generic overlay (loader + error) ─────────────────────────────────── */

.overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.overlay[hidden] { display: none; }

.overlay-text {
    margin-top: 18px;
    font-size: 15px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

/* ── Error overlay ─────────────────────────────────────────────────────── */

.overlay--error {
    background: var(--bg);
}

.error-box {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    padding: 32px;
}

.error-icon {
    font-size: 44px;
    color: var(--warning);
    margin-bottom: 16px;
    line-height: 1;
}

.error-msg {
    font-size: 17px;
    color: var(--text-dim);
    max-width: 320px;
    line-height: 1.5;
}

/* ── "Newer version" banner ────────────────────────────────────────────── */

.banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--banner-bg);
    border-bottom: 1px solid rgba(79, 140, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    color: var(--text-dim);
}

.banner[hidden] { display: none; }

#banner-text {
    flex: 1;
}

.banner-link {
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}

.banner-link:hover { text-decoration: underline; }
.banner-link[hidden] { display: none; }

.banner-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 16px;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.banner-close:hover { opacity: 1; }

/* ── Navigation controls ───────────────────────────────────────────────── */

#nav-controls {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    background: rgba(15, 17, 23, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#nav-controls[hidden] { display: none; }

#nav-controls button {
    width: 48px;
    height: auto;
    min-height: 48px;
    padding: 6px 4px 4px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(228, 230, 237, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;  /* prevent double-tap zoom on buttons */
}

#nav-controls button:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #e4e6ed;
}

#nav-controls button:active {
    background: rgba(255, 255, 255, 0.18);
}

#nav-controls button.active {
    background: rgba(79, 140, 255, 0.18);
    color: var(--accent);
}

#nav-controls button svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.nav-label {
    font-size: 11px;
    font-weight: 500;
    color: inherit;
    letter-spacing: 0.04em;
    line-height: 1;
    opacity: 0.7;
    pointer-events: none;
}

.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 2px 5px;
}

/* ── Cinematic splash ─────────────────────────────────────────────────── */

.splash {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.splash[hidden] { display: none; }

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 440px;
    padding: 0 32px;
}

/* Elements start invisible — animations bring them in */
.splash-logo-wrap,
.splash-company,
.splash-line,
.splash-project,
.splash-greeting,
.splash-notes,
.splash-footer { opacity: 0; }

/* ── Logo ─────────────────────────────────────────────────────────────── */

.splash-logo-wrap {
    position: relative;
    margin-bottom: 28px;
}

.splash-logo-glow {
    position: absolute;
    inset: -20px;
    border-radius: 28px;
    background: radial-gradient(circle, rgba(79, 140, 255, 0.10) 0%, transparent 70%);
    filter: blur(16px);
}

.splash-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 16px;
    background: #000;
    padding: 8px;
    position: relative;
}

/* ── Company name ─────────────────────────────────────────────────────── */

.splash-company {
    font-size: 38px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* ── Accent line ──────────────────────────────────────────────────────── */

.splash-line {
    width: 56px;
    height: 2px;
    background: var(--accent);
    margin: 28px 0;
    border-radius: 1px;
    transform-origin: center;
}

/* ── Project name ─────────────────────────────────────────────────────── */

.splash-project {
    font-size: 24px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 10px;
}

/* ── Greeting ─────────────────────────────────────────────────────────── */

.splash-greeting {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 8px;
}

.splash-greeting[hidden] { display: none; }

/* ── Notes ─────────────────────────────────────────────────────────────── */

.splash-notes {
    font-size: 18px;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 420px;
}

/* ── Footer (disclaimer) ──────────────────────────────────────────────── */

.splash-footer {
    margin-top: 40px;
}

.splash-footer[hidden] { display: none; }

.splash-disclaimer {
    font-size: 14px;
    color: rgba(139, 143, 163, 0.35);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* ── CTA ──────────────────────────────────────────────────────────────── */

.splash-cta {
    position: absolute;
    bottom: 72px;
    font-size: 17px;
    font-weight: 500;
    color: rgba(228, 230, 237, 0.6);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: splashCtaPulse 2.5s ease-in-out infinite;
}

.splash-cta[hidden] { display: none; }

/* ── Powered-by (bottom of splash) ────────────────────────────────────── */

.splash-powered {
    position: absolute;
    bottom: 28px;
    font-size: 14px;
    color: rgba(139, 143, 163, 0.3);
    letter-spacing: 0.03em;
}

/* ── Loading spinner ──────────────────────────────────────────────────── */

.splash-loader {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.splash-loader[hidden] { display: none; }

.splash-spinner {
    width: 48px;
    height: 48px;
    animation: splashSpin 1.6s linear infinite;
}

.splash-spinner-arc {
    animation: splashArcPulse 1.6s ease-in-out infinite;
}

.splash-spinner-dot {
    animation: splashDotGlow 1.6s ease-in-out infinite;
}

.splash-loader-text {
    font-size: 13px;
    font-weight: 400;
    color: rgba(139, 143, 163, 0.5);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    animation: splashLoaderPulse 2s ease-in-out infinite;
}

/* ── Stagger entrance (triggered by .splash--animated) ────────────────── */

.splash--animated .splash-logo-wrap {
    animation: splashFadeScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.splash--animated .splash-company {
    animation: splashFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.splash--animated .splash-line {
    animation: splashLineDraw 0.5s ease-out 0.9s both;
}

.splash--animated .splash-project {
    animation: splashFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}

.splash--animated .splash-greeting {
    animation: splashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}

.splash--animated .splash-notes {
    animation: splashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.8s both;
}

.splash--animated .splash-footer {
    animation: splashFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2.1s both;
}

/* ── Dismiss ──────────────────────────────────────────────────────────── */

.splash--dismiss {
    animation: splashDismiss 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

/* ── Keyframes ────────────────────────────────────────────────────────── */

@keyframes splashFadeScale {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes splashFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes splashLineDraw {
    from { transform: scaleX(0); opacity: 1; }
    to   { transform: scaleX(1); opacity: 1; }
}

@keyframes splashCtaPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

@keyframes splashSpin {
    to { transform: rotate(360deg); }
}

@keyframes splashArcPulse {
    0%, 100% { stroke-dasharray: 30 121; opacity: 0.5; }
    50%      { stroke-dasharray: 70 81;  opacity: 1;   }
}

@keyframes splashDotGlow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

@keyframes splashLoaderPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.7; }
}

@keyframes splashDismiss {
    to { opacity: 0; transform: translateY(-40px); }
}

/* ── Gesture hints ────────────────────────────────────────────────────── */

.gesture-hints {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    animation: ghintIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.gesture-hints[hidden] { display: none; }

/* Expanded state (shown via trigger click) — needs pointer events to catch outside clicks */
.gesture-hints--expanded {
    pointer-events: auto;
    animation: ghintIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gesture-hints--dismiss {
    animation: ghintOut 0.5s ease-out forwards;
}

/* ── Help trigger button (bottom-right, after collapse) ────────────── */

.ghint-trigger {
    position: absolute;
    bottom: 18px;
    right: 70px;
    z-index: 10;
    height: 40px;
    padding: 0 16px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: rgba(15, 17, 23, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.ghint-trigger[hidden] { display: none; }

.ghint-trigger svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
    flex-shrink: 0;
}

.ghint-trigger-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.ghint-trigger:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #e4e6ed;
}

.ghint-trigger:active {
    background: rgba(255, 255, 255, 0.18);
}

.ghint-trigger--enter {
    animation: ghintTriggerIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both,
               ghintTriggerPulse 2s ease-in-out 0.8s 2;
}

/* Device toggle — only one group visible */
.ghint-group { display: none; }

.gesture-hints--pointer .ghint-group--pointer,
.gesture-hints--touch   .ghint-group--touch {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 28px;
    background: rgba(15, 17, 23, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ghint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ghint-icon {
    width: 48px;
    height: 48px;
    color: var(--text-dim);
}

.ghint-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-transform: uppercase;
}

.ghint-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* ── Gesture icon animations — Desktop ───────────────────────────────── */

.ghint-drag-arrows {
    animation: ghintDragSway 2s ease-in-out infinite;
}

.ghint-scroll-wheel {
    animation: ghintScrollBob 1.5s ease-in-out infinite;
}

.ghint-pan-arrows {
    animation: ghintPanPulse 2s ease-in-out infinite;
}

/* ── Gesture icon animations — Touch ─────────────────────────────────── */

.ghint-finger-swipe {
    animation: ghintSwipeDot 2.5s ease-in-out infinite;
}

.ghint-trail {
    animation: ghintSwipeTrail 2.5s ease-in-out infinite;
}

.ghint-pinch-a {
    animation: ghintPinchA 2s ease-in-out infinite;
}

.ghint-pinch-b {
    animation: ghintPinchB 2s ease-in-out infinite;
}

.ghint-spread-arrows {
    animation: ghintSpreadArrows 2s ease-in-out infinite;
}

.ghint-twofinger-a {
    animation: ghintTwoFingerDrag 2.2s ease-in-out infinite;
}

.ghint-twofinger-b {
    animation: ghintTwoFingerDrag 2.2s ease-in-out 0.05s infinite;
}

.ghint-twofinger-arrows {
    animation: ghintTwoFingerArrows 2.2s ease-in-out infinite;
}

/* ── Gesture keyframes ───────────────────────────────────────────────── */

@keyframes ghintIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes ghintOut {
    to { opacity: 0; }
}

@keyframes ghintDragSway {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    25%      { transform: translateX(-3px); opacity: 1; }
    75%      { transform: translateX(3px); opacity: 1; }
}

@keyframes ghintScrollBob {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(3px); opacity: 0.4; }
}

@keyframes ghintSwipeDot {
    0%   { transform: translate(8px, 28px); opacity: 0.3; }
    20%  { opacity: 0.8; }
    50%  { transform: translate(30px, 12px); opacity: 0.8; }
    80%  { opacity: 0.8; }
    100% { transform: translate(8px, 28px); opacity: 0.3; }
}

@keyframes ghintSwipeTrail {
    0%   { stroke-dashoffset: 40; }
    50%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -40; }
}

@keyframes ghintPinchA {
    0%, 100% { transform: translate(15px, 20px); }
    50%      { transform: translate(8px, 20px); }
}

@keyframes ghintPinchB {
    0%, 100% { transform: translate(25px, 20px); }
    50%      { transform: translate(32px, 20px); }
}

@keyframes ghintSpreadArrows {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.8; }
}

@keyframes ghintPanPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.8; transform: scale(1.06); }
}

@keyframes ghintTriggerIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ghintTriggerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 140, 255, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(79, 140, 255, 0.18); }
}

@keyframes ghintTwoFingerDrag {
    0%, 100% { transform: translate(16px, 26px); }
    50%      { transform: translate(24px, 14px); }
}

@keyframes ghintTwoFingerArrows {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.8; }
}

/* ── Slim bar (after splash dismiss) ──────────────────────────────────── */

.brand-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(10, 12, 18, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.brand-bar[hidden] { display: none; }

.brand-bar.visible {
    opacity: 1;
    transform: translateY(0);
}

.brand-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand-bar-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 6px;
    background: #000;
    padding: 3px;
}

.brand-bar-logo[hidden] { display: none; }

.brand-bar-company {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.brand-bar-project {
    flex: 1;
    font-size: 14px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* ── Bottom-right watermark ────────────────────────────────────────────── */

.brand-watermark {
    position: absolute;
    bottom: 14px;
    right: 18px;
    z-index: 10;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    color: rgba(139, 143, 163, 0.3);
    letter-spacing: 0.03em;
    pointer-events: none;
    user-select: none;
}

.brand-watermark[hidden] { display: none; }

/* ── Shared accent colour ─────────────────────────────────────────────── */

.brand-accent {
    color: rgba(79, 140, 255, 0.6);
    font-weight: 500;
}

/* ── Mobile responsive ────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .splash-content {
        padding: 0 24px;
    }

    .splash-logo {
        width: 76px;
        height: 76px;
    }

    .splash-company {
        font-size: 28px;
    }

    .splash-project {
        font-size: 20px;
    }

    .splash-notes {
        font-size: 16px;
    }

    .splash-cta {
        bottom: 56px;
        font-size: 15px;
    }

    .gesture-hints {
        bottom: 64px;
    }

    .gesture-hints--pointer .ghint-group--pointer,
    .gesture-hints--touch   .ghint-group--touch {
        padding: 12px 20px;
        gap: 16px;
    }

    .ghint-icon {
        width: 38px;
        height: 38px;
    }

    .ghint-label {
        font-size: 12px;
    }

    .ghint-divider {
        height: 38px;
    }

    .brand-bar {
        padding: 8px 12px;
        gap: 8px;
    }

    .brand-bar-project {
        display: none;
    }

    .ghint-trigger {
        right: 52px;
        height: 36px;
        padding: 0 12px 0 10px;
    }

    .ghint-trigger svg {
        width: 18px;
        height: 18px;
    }

    .ghint-trigger-label {
        font-size: 12px;
    }

    .splash-greeting {
        font-size: 15px;
    }

    .brand-watermark {
        bottom: 10px;
        right: 12px;
        font-size: 11px;
    }

    .splash-loader {
        bottom: 80px;
    }

    .splash-spinner {
        width: 40px;
        height: 40px;
    }

    .splash-loader-text {
        font-size: 11px;
    }
}