/* Homepage-only presentation. Existing loaders, uploads, options and modal actions are untouched. */
body.index-page.home-top-page {
    position: relative;
    isolation: isolate;
    background-color: #f6f8f4;
}

body.index-page.home-top-page::before,
body.index-page.home-top-page::after {
    content: '';
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

body.index-page.home-top-page::before {
    background: radial-gradient(ellipse at 18% 24%, rgba(205,184,231,.65), transparent 49%),
        radial-gradient(ellipse at 87% 73%, rgba(173,220,201,.65), transparent 47%);
    animation: home-aurora-drift 22s ease-in-out infinite alternate;
}

body.index-page.home-top-page::after {
    background: radial-gradient(ellipse at 75% 20%, rgba(246,231,199,.35), transparent 42%),
        radial-gradient(ellipse at 20% 84%, rgba(184,222,221,.35), transparent 43%);
    animation: home-aurora-drift 28s ease-in-out -11s infinite alternate-reverse;
}

@keyframes home-aurora-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to { transform: translate3d(5%, 4%, 0) scale(1.06); }
}

/* Styles are loaded in the head, before the original loading overlay is painted. */
body.index-page.home-top-page > .loader {
    box-sizing: border-box;
    inset: 0 !important;
    display: flex;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 24px;
    border-radius: 0;
    background: radial-gradient(ellipse at 20% 15%, #e8ddf2, transparent 60%),
        radial-gradient(ellipse at 90% 85%, #d8eee4, transparent 60%), #f6f8f4 !important;
    background-size: auto;
    animation: none;
    font-family: 'Meiryo', 'メイリオ', sans-serif;
}

body.index-page.home-top-page > .loader > div {
    box-sizing: border-box;
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 114px auto;
    justify-items: center;
    align-items: center;
    align-content: start !important;
    width: min(100%, 240px);
    min-height: 244px;
    padding: 22px 28px 38px;
    gap: 20px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 30px;
    background: rgba(255,255,255,.65);
    box-shadow: 0 24px 70px -28px rgba(57,83,66,.25);
}

body.index-page.home-top-page > .loader > div::before {
    content: '';
    box-sizing: border-box;
    grid-area: 1 / 1;
    width: 114px;
    height: 114px;
    border: 2px solid #e0e8e1;
    border-top-color: #6c9f8e;
    border-right-color: #b6a3d5;
    border-radius: 50%;
    animation: home-loading-orbit 1.8s linear infinite;
}

body.index-page.home-top-page > .loader img {
    grid-area: 1 / 1;
    display: block;
    margin: 0 !important;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 24px;
    box-shadow: 0 8px 20px -9px rgba(67,69,111,.35);
    animation: home-loading-breathe 2.6s ease-in-out infinite;
}

body.index-page.home-top-page > .loader > div::after {
    content: 'Zizily';
    grid-area: 2 / 1;
    color: #245548;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.04em;
}

body.index-page.home-top-page > .loader::after {
    content: '•  •  •';
    position: absolute;
    left: 50%;
    top: calc(50% + 94px);
    transform: translateX(-50%);
    color: #8db09e;
    font-size: 14px;
    line-height: 1.6;
    animation: home-loading-breathe 1.8s ease-in-out infinite;
}

@keyframes home-loading-orbit { to { transform: rotate(360deg); } }
@keyframes home-loading-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

body.index-page.home-top-page .home-brand { margin-bottom: 20px; }
body.index-page.home-top-page .home-brand img { width: 46px; height: 46px; }
body.index-page.home-top-page .heading-section .sub-heading { margin-bottom: 0; }
body.index-page.home-top-page .heading-section h1 {
    font-size: clamp(32px, 3.7vw, 60px);
    white-space: nowrap;
    overflow-wrap: normal;
}
body.index-page.home-top-page .home-brand-name { display: inline; }

/* Opening celebration stays above the page and never intercepts user input. */
body.index-page.home-top-page .home-welcome-celebration {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    pointer-events: none;
}
body.index-page.home-top-page .home-welcome-confetti {
    position: absolute;
    top: 70%;
    width: 8px;
    height: 13px;
    border-radius: 2px;
    background: var(--welcome-color);
    animation: home-welcome-burst var(--welcome-duration) var(--welcome-delay) linear both;
}
body.index-page.home-top-page .home-welcome-confetti.from-left { left: -8px; }
body.index-page.home-top-page .home-welcome-confetti.from-right { right: -8px; }
@keyframes home-welcome-burst {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
    5% { opacity: 1; }
    35% { opacity: 1; transform: translate3d(var(--welcome-apex-x), var(--welcome-rise), 0) rotate(180deg); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--welcome-x), 45vh, 0) rotate(var(--welcome-spin)); }
}

/* Large-file delivery: edit only the UI around the unchanged React component. */
body.index-page.home-top-page #tab4 { padding-block: 12px !important; }
body.index-page.home-top-page #tab4 #react-root { min-width: 0; }
body.index-page.home-top-page #tab4 #react-root > .text-center:first-child { margin: 0 0 20px !important; }
body.index-page.home-top-page #tab4 #react-root h6 { line-height: 1.8; }
body.index-page.home-top-page #tab4 #react-root .files-box {
    width: 100%;
    min-height: 190px;
    margin: 0 0 18px;
    padding: 24px 16px;
    gap: 12px;
    flex-direction: column;
    align-items: center;
    border: 1px dashed #b9d5c5;
    border-radius: 16px;
    background: #f4f8f5 !important;
    scrollbar-width: thin;
}

body.index-page.home-top-page #tab4 #react-root .files-box::before {
    content: '\f603';
    font-family: 'bootstrap-icons';
    color: #75a58f;
    font-size: 30px;
    line-height: 1;
}

body.index-page.home-top-page #tab4 #react-root .files-box.dragging { background: #e5f1e9 !important; border-color: #20766b; }
body.index-page.home-top-page #tab4 #react-root .files-box h4 { font-size: 16px; line-height: 1.75 !important; word-break: normal !important; overflow-wrap: anywhere; color: #82998b !important; }

body.index-page.home-top-page #tab4 #react-root > .col-12 > .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 46px;
    height: auto !important;
    max-width: 100%;
    padding: 12px 18px !important;
    border: 1px solid transparent;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #287e73, #186459);
    color: #fff;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.7;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 5px 12px -7px rgba(26,103,89,.4);
}

body.index-page.home-top-page #tab4 #react-root > .col-12.mb-3:not(.text-center) > .btn::before { content: '\f603'; font-family: 'bootstrap-icons'; font-size: 17px; font-weight: normal; }
body.index-page.home-top-page #tab4 #react-root > .col-12.text-center > .btn { width: 100% !important; }
body.index-page.home-top-page #tab4 #react-root > .col-12 > .btn:disabled { background: #e7eee9; color: #8b9b90 !important; opacity: 1; box-shadow: none; border-color: #dfe7e1; }
body.index-page.home-top-page #tab4 #react-root > .col-12 > .btn > .d-flex { flex-wrap: wrap; justify-content: center !important; line-height: 1.7; }

body.index-page.home-top-page #tab4 #react-root > .d-flex:has(> .bioInput) {
    gap: 12px !important;
    align-items: stretch !important;
    margin-block: 14px !important;
}

body.index-page.home-top-page #tab4 #react-root > .d-flex > .bioInput {
    flex: 1 1 0;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px;
    height: auto !important;
    padding: 11px 13px !important;
    border: 1px solid #d7e2da !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #294c3c;
    font-family: 'Meiryo', 'メイリオ', sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

body.index-page.home-top-page #tab4 #react-root > .d-flex > .bioInput:disabled { background: #f0f4f1 !important; color: #a0aca4; }
body.index-page.home-top-page #tab4 #react-root > .d-flex > .bioInput:focus { outline: none; border-color: #20766b !important; box-shadow: 0 0 0 3px rgba(32,118,107,.1); }
body.index-page.home-top-page #tab4 #react-root > .d-flex > .bioInput::placeholder { color: #91a095; }
body.index-page.home-top-page #tab4 #react-root > .d-flex > .date-placeholder {
    z-index: 1 !important;
    left: 14px !important;
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100% - 130px);
    padding: 2px 0;
    border-radius: 0 !important;
    background: #fff !important;
    color: #84988b !important;
    font-size: 12px;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
}

body.index-page.home-top-page #tab4 #react-root > .d-flex:has(> .bioInput:disabled) > .date-placeholder { background: #f0f4f1 !important; }
body.index-page.home-top-page #tab4 #react-root > .d-flex > .btn-new {
    flex: 0 0 108px;
    width: 108px !important;
    min-width: 0 !important;
    min-height: 48px;
    height: auto !important;
    padding: 5px !important;
    border: 1px solid #bbd8c8;
    border-radius: 12px !important;
    background: #dcece2;
    cursor: pointer;
}

body.index-page.home-top-page #tab4 #react-root > .d-flex > .btn-new.bg-gray { background: #e4eae6 !important; border-color: #d7e0d9; }
body.index-page.home-top-page #tab4 #react-root > .d-flex > .btn-new > button {
    min-width: 55%;
    width: auto !important;
    max-width: 100%;
    min-height: 36px;
    height: auto;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid #d8e7dd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #467761 !important;
    font-size: 12px;
    line-height: 1.65;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 5px rgba(38,72,49,.06);
}

body.index-page.home-top-page #tab4 #react-root > .d-flex > .btn-new > button.inactiveBTN { color: #8b9b90 !important; background: #f4f6f4 !important; }

/* Explanatory carousel: preserve its content, targets, and navigation behaviour. */
body.index-page.home-top-page #home_modal .modal-dialog { max-width: 600px; margin: 24px auto; padding: 12px; }
body.index-page.home-top-page #home_modal .modal-content {
    min-height: 0;
    height: auto;
    margin-top: 0 !important;
    border: 1px solid #dde8df;
    border-radius: 24px !important;
    background: #fff;
    box-shadow: 0 24px 80px rgba(19,44,32,.18);
}

body.index-page.home-top-page #home_modal .modal-header { position: relative !important; padding: 16px 18px 0; }
body.index-page.home-top-page #home_modal .btn-close { padding: 8px; border-radius: 50%; background-color: #f1f5f2; opacity: .6; }
body.index-page.home-top-page #home_modal .modal-body { position: relative; display: block !important; padding: 12px 20px 64px; }
body.index-page.home-top-page #home_modal .carousel-inner { padding: 0 !important; }
body.index-page.home-top-page #home_modal .carousel-item > div > .card { margin: 0 !important; padding: 0; border: 0; background: transparent; }
body.index-page.home-top-page #home_modal .card-body.px-0 { min-height: 0; display: block; padding: 0 !important; }
body.index-page.home-top-page #home_modal .card-body.px-0 > .col-12 > .row { margin: 0; }
body.index-page.home-top-page #home_modal h2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; margin: 0 0 20px; color: #234738; font-size: 24px; line-height: 1.65; overflow-wrap: anywhere; }
body.index-page.home-top-page #home_modal h2 > span { display: inline-flex !important; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e7f1ea; color: #20766b; font-size: 22px; }
body.index-page.home-top-page #home_modal .card.rounded-3 { margin: 0 0 12px !important; border: 1px solid #dde7df !important; border-radius: 14px !important; background: #f7faf7; }
body.index-page.home-top-page #home_modal .card.rounded-3 .card-body { padding: 16px !important; margin: 0 !important; background: transparent !important; text-align: left; }
body.index-page.home-top-page #home_modal h6 { margin-bottom: 8px; color: #315743; font-size: 14px !important; line-height: 1.75; overflow-wrap: anywhere; }
body.index-page.home-top-page #home_modal .modal-body p { margin: 0; color: #6e8274; font-size: 12px !important; line-height: 1.95; overflow-wrap: anywhere; text-align: left; }
body.index-page.home-top-page #home_modal .carousel-control-prev,
body.index-page.home-top-page #home_modal .carousel-control-next {
    top: auto;
    bottom: 12px;
    display: inline-flex;
    justify-content: center !important;
    align-items: center;
    width: 40px !important;
    height: 40px;
    border: 1px solid #cfdfd4;
    border-radius: 12px;
    background: #e8f2eb;
    color: #20766b !important;
    opacity: 1;
}

body.index-page.home-top-page #home_modal .carousel-control-prev { left: calc(50% - 48px); }
body.index-page.home-top-page #home_modal .carousel-control-next { right: calc(50% - 48px) !important; }
body.index-page.home-top-page #home_modal .carousel-control-prev-icon,
body.index-page.home-top-page #home_modal .carousel-control-next-icon { display: inline-flex; justify-content: center; align-items: center; width: auto; height: auto; background-image: none; }
body.index-page.home-top-page #home_modal .carousel-control-prev-icon i,
body.index-page.home-top-page #home_modal .carousel-control-next-icon i { font-size: 18px !important; line-height: 1; }
body.index-page.home-top-page #home_modal .modal-footer { padding: 0 20px 22px; }
body.index-page.home-top-page #home_modal #home_authButton {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    min-height: 48px;
    height: auto;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 13px !important;
    background: #20766b;
    color: #fff;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.7;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    body.index-page.home-top-page .home-brand { margin-bottom: 16px; }
    body.index-page.home-top-page .home-brand img { width: 38px; height: 38px; }
    body.index-page.home-top-page .heading-section h1 { font-size: clamp(32px, 9vw, 42px); }
    body.index-page.home-top-page #tab4 #react-root > .d-flex > .bioInput { font-size: 16px; min-height: 50px; }
    body.index-page.home-top-page #tab4 #react-root > .d-flex > .btn-new { flex-basis: 96px; width: 96px !important; }
    body.index-page.home-top-page #tab4 #react-root > .d-flex > .date-placeholder { max-width: calc(100% - 122px); font-size: 11px; }
    body.index-page.home-top-page #home_modal .modal-dialog { width: calc(100% - 16px); margin: 16px auto; padding: 0; }
    body.index-page.home-top-page #home_modal .modal-body { padding: 10px 16px 62px; }
    body.index-page.home-top-page #home_modal .card.rounded-3 .card-body { padding: 14px !important; }
    body.index-page.home-top-page #home_modal h2 { font-size: 21px; }
    body.index-page.home-top-page #home_modal h6 { font-size: 13px !important; }
    body.index-page.home-top-page #home_modal .modal-body p { font-size: 11px !important; }
    body.index-page.home-top-page #home_modal .modal-footer { padding: 0 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    body.index-page.home-top-page::before,
    body.index-page.home-top-page::after { animation: none; will-change: auto; }
    body.index-page.home-top-page > .loader > div::before,
    body.index-page.home-top-page > .loader img,
    body.index-page.home-top-page > .loader::after { animation: none; }
    body.index-page.home-top-page .home-welcome-confetti { display: none; animation: none; }
}

/* Short-link limit modal: decorative GIF and subtle green upgrade action only. */
body.index-page.home-top-page #linkShortenerModal .modal-dialog { max-width: 460px; padding: 12px; margin-inline: auto; }
body.index-page.home-top-page #linkShortenerModal .modal-content { border: 1px solid #dce7df; border-radius: 24px !important; background: #fff; box-shadow: 0 24px 80px rgba(19,44,32,.18); }
body.index-page.home-top-page #linkShortenerModal .modal-header { padding: 16px 18px 0; }
body.index-page.home-top-page #linkShortenerModal .btn-close { padding: 8px !important; border-radius: 50%; background-color: #f1f5f2; opacity: .6; }
body.index-page.home-top-page #linkShortenerModal .modal-body { padding: 2px 28px 24px !important; }
body.index-page.home-top-page #linkShortenerModal .home-limit-face { display: flex; justify-content: center; align-items: center; margin: 0 auto 12px; width: 88px; height: 88px; }
body.index-page.home-top-page #linkShortenerModal .home-limit-face img { display: block; width: 88px; height: 88px; object-fit: contain; }
body.index-page.home-top-page #linkShortenerModal h3 { margin: 0 0 18px; color: #234738; font-size: 25px; line-height: 1.6; }
body.index-page.home-top-page #linkShortenerModal .card { margin: 0 0 20px !important; border: 1px solid #dfe8e1 !important; border-radius: 14px; background: #f6f9f6; }
body.index-page.home-top-page #linkShortenerModal .card-body { padding: 18px; }
body.index-page.home-top-page #linkShortenerModal .card .row { margin: 0; }
body.index-page.home-top-page #linkShortenerModal .card .col-12 { margin: 0 !important; padding: 0; }
body.index-page.home-top-page #linkShortenerModal .card .small { display: block; color: #637b6c; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
body.index-page.home-top-page #linkShortenerModal .modal-body > .btn-new {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 48px;
    height: auto;
    padding: 12px 36px;
    border: 1px solid #2f8f70;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #3b9a78, #1b7459);
    color: #fff;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.8;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    box-shadow: 0 5px 14px -7px rgba(31,113,79,.45);
}
body.index-page.home-top-page #linkShortenerModal .modal-body > .btn-new::before {
    content: '';
    position: absolute;
    inset: -20% auto -20% -45%;
    z-index: -1;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    animation: home-limit-shimmer 4.6s ease-in-out infinite;
    pointer-events: none;
}
body.index-page.home-top-page #linkShortenerModal .modal-body > .btn-new::after {
    content: '✦';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #d8f2df;
    font-size: 15px;
    line-height: 1;
    animation: home-limit-twinkle 2.8s ease-in-out infinite;
    pointer-events: none;
}
body.index-page.home-top-page #linkShortenerModal .modal-body > .btn-new:hover { filter: brightness(1.07); }
body.index-page.home-top-page #linkShortenerModal .home-limit-credit { display: block; margin-top: 14px; color: #83978a; font-size: 9px; line-height: 1.6; }
body.index-page.home-top-page #linkShortenerModal .home-limit-credit a { color: inherit; text-decoration: none; }
@keyframes home-limit-shimmer { 0%, 60% { left: -45%; } 90%, 100% { left: 140%; } }
@keyframes home-limit-twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 600px) {
    body.index-page.home-top-page #linkShortenerModal .modal-dialog { width: calc(100% - 16px); padding: 0; }
    body.index-page.home-top-page #linkShortenerModal .modal-body { padding: 2px 20px 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.index-page.home-top-page #linkShortenerModal .modal-body > .btn-new::before,
    body.index-page.home-top-page #linkShortenerModal .modal-body > .btn-new::after { animation: none; }
    body.index-page.home-top-page #linkShortenerModal .modal-body > .btn-new::before { display: none; }
}