:root{
     --bg: #f4f4f4;
     --card: #fff;
     --muted: #555;
     --text: #333;
     --accent: #0a2740;
    /* navbar blue */
     --accent-2: #154162;
    /* darker secondary */
     --shadow: 0 4px 12px rgba(0,0,0,.15);
}
 html,body{
     height:100%;
     background: var(--bg);
     color: var(--text);
     margin:0;
     font-family: Sans-serif, cursive;
}
 .shell{
     max-width: 1100px;
     margin: 48px auto;
     padding: 0 16px;
}
 .heading h1{
     font-size: clamp(22px, 4vw, 6vw);
     margin:0;
     color: var(--accent);
}
 .sub{
     color: var(--muted);
     margin-top:6px;
     margin-bottom: 4vh;
}
 .carousel{
     position: relative;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 10px;
     box-shadow: var(--shadow);
     overflow: hidden;
     width: 80vw;
}

@media (min-width: 1921px) {
  .carousel{
    width: 60vw;
  }
}

 .viewport{
     position: relative;
     width: 100%;
     overflow: hidden;
     height: clamp(260px, 42vw, 520px);
     background: #eee;
}
 .track{
     display:flex;
     height:100%;
     transition: transform 500ms ease;
}
 .slide{
     min-width: 100%;
     height:100%;
     position: relative;
     background: #fff;
}
 .slide img{
     width:100%;
     height:100%;
     object-fit: cover;
}
 .card{
     position: absolute;
     left:20px;
     right: 20px;
     height:auto;
     bottom:20px;
     background: rgba(255,255,255,.95);
     border: 1px solid #ddd;
     box-shadow: var(--shadow);
     color: var(--text);
     border-radius: 10px;
     padding: 16px;
     max-width: 500px;
}
 .card h3{
     margin:0 0 6px;
     color: var(--accent)
}
 .card p{
     margin:0 0 12px;
     color: var(--muted)
}
 .badges{
     display:flex;
     gap:6px;
     margin-bottom:10px;
}
 .badge{
     font-size:12px;
     padding:6px 9px;
     border-radius:999px;
     background: var(--accent);
     color:#fff;
}
 .actions{
     display:flex;
     gap:10px;
}
 .btn{
     background: var(--accent);
     color:#fff;
     border:none;
     border-radius:6px;
     padding:8px 12px;
     cursor:pointer;
     text-decoration:none;
}
 .btn:hover{
     background: var(--accent-2);
}
 .btn.secondary{
     background:#eee;
     color:#333;
     border:1px solid #ccc;
}
 .btn.secondary:hover{
     background:#ddd;
}
 .controls{
     position:absolute;
     inset:0;
     display:flex;
     align-items:center;
     justify-content:space-between;
     pointer-events:none;
}
 .control-btn{
     pointer-events:auto;
     display:grid;
     place-items:center;
     width:40px;
     height:40px;
     border-radius:50%;
     border:1px solid #ccc;
     background:#fff;
     cursor:pointer;
}
 .control-btn svg{
     width:20px;
     height:20px;
     stroke:var(--accent);
     stroke-width:2.2;
     fill:none;
}
 .dots{
     position:absolute;
     left:0;
     right:0;
     bottom:10px;
     display:flex;
     gap:8px;
     justify-content:center;
}
 .dot{
     width:9px;
     height:9px;
     border-radius:50%;
     background:#bbb;
     border:1px solid #bbb;
}
 .dot[aria-current="true"]{
     width:24px;
     background:var(--accent);
     border-color:var(--accent);
}
 .toolbar{
     display:flex;
     justify-content:space-between;
     padding:10px 14px;
     border-bottom:1px solid #ddd;
     background:#fafafa;
}
 .pill{
     font-size:12px;
     padding:6px 10px;
     border-radius:999px;
     border:1px solid #ccc;
     background:#fff;
     color:var(--text)
}
 .toggle{
     display:flex;
     align-items:center;
     gap:8px;
     font-size:13px;
     color:var(--text);
     cursor:pointer;
}
 .toggle input{
     width:38px;
     height:22px;
     background:#ccc;
     border-radius:999px;
     border:1px solid #aaa;
     position:relative;
     appearance:none;
}
 .toggle input::after{
     content:"";
     position:absolute;
     inset:3px;
     width:16px;
     height:16px;
     border-radius:50%;
     background:#fff;
     transition: transform .2s ease
}
 .toggle input:checked{
     background:var(--accent)
}
 .toggle input:checked::after{
     transform: translateX(16px)
}
.carousel .viewport { touch-action: pan-y; }
.carousel .slide a  { touch-action: manipulation; }