body {

    background: linear-gradient(180deg,#f7fbff 0%, #eef6ff 50%, #f2f8fb 100%);
    background-attachment:fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}


.line-container {
    width: 150%;
    height: 8px;
    background: #333;
    overflow: hidden;
    border-radius: 2px;
}


.line-container::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;opacity:.02;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,0.02) 0 1px, transparent 1px 6px)}


.animated-line {
    width: 1700%;
    height: 100%;
    background: linear-gradient(90deg, #ff6ec4, #7873f5);
    animation: moveLine 4s linear infinite;
    border-radius: 2px;
}

@keyframes moveLine {

    0%   { transform: translateX(-800%); }
    100% { transform: translateX(800%); }
}


.line-controls{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.line-controls{display:flex;gap:10px;justify-content:center;margin-bottom:12px;position:relative;z-index:10}
.theme-label{background:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;border:1px solid #ddd;font-weight:600;position:relative;z-index:11;user-select:none}
.theme-label:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.theme-label span{display:inline-block}


.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;pointer-events:none}


#theme-default:checked ~ .line-container .animated-line{background:linear-gradient(90deg,#ff6ec4,#7873f5)}
#theme-ocean:checked ~ .line-container .animated-line{background:linear-gradient(90deg,#1e90ff,#2ed573)}
#theme-sunset:checked ~ .line-container .animated-line{background:linear-gradient(90deg,#ff9a3c,#ff4757)}
#theme-mono:checked ~ .line-container .animated-line{background:linear-gradient(90deg,#999,#222)}