@font-face {
    font-family: "Bauer Media Sans";
    src: url("fonts/BauerMediaSans-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bauer Media Sans";
    src: url("fonts/BauerMediaSans-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bauer Media Sans";
    src: url("fonts/BauerMediaSans-Bold.otf") format("opentype");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
*{
    box-sizing:border-box
}
body {
    margin: 0;
    background: #f3f5f8;
    color: #172033;
    font-family: "Bauer Media Sans", Arial, sans-serif;
}
.shell{
    width:min(820px,calc(100% - 32px));
    margin:42px auto
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px
}
.brand .mark{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#111827;
    color:white;
    display:grid;
    place-items:center;
    font-weight:800
}
.brand strong,.brand span{
    display:block
}
.brand span{
    font-size:13px;
    color:#6b7280;
    margin-top:2px
}
.card{
    background:#fff;
    border:1px solid #e3e7ee;
    border-radius:18px;
    padding:clamp(24px,5vw,48px);
    box-shadow:0 14px 45px rgba(23,32,51,.07)
}
.eyebrow{
    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    color:#667085;
    margin:0 0 10px
}
h1{
    font-size:clamp(30px,5vw,44px);
    letter-spacing:-.04em;
    margin:0 0 12px
}
h2{
    font-size:18px;
    margin:28px 0 5px
}
.intro,.hint{
    color:#667085;
    line-height:1.55
}
.notice{
    background:#fff7db;
    border:1px solid #f3dfa0;
    padding:12px 14px;
    border-radius:10px;
    margin:24px 0
}
.notice.ready{
    background:#ecfdf3;
    border-color:#b7ebc8
}
.transport{
    display:flex;
    align-items:center;
    gap:18px;
    margin:25px 0
}
.play{
    border:0;
    width:58px;
    height:58px;
    border-radius:50%;
    font-size:20px;
    background:#111827;
    color:white;
    cursor:pointer
}
.play:disabled{
    opacity:.4
}
.timeline{
    flex:1
}
.timeline input{
    width:100%
}
.times{
    display:flex;
    justify-content:space-between;
    font-variant-numeric:tabular-nums;
    font-size:12px;
    color:#667085
}
.switches,.choices{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
    gap:10px;
    margin-top:15px
}
.sample-btn,.choice-btn{
    border:1px solid #d5dae3;
    background:white;
    border-radius:12px;
    padding:17px 12px;
    font-weight:800;
    font-size:18px;
    cursor:pointer
}
.sample-btn.active{
    background:#111827;
    color:#fff;
    border-color:#111827
}
.choice-btn.selected{
    outline:3px solid #111827;
    border-color:#111827
}
.divider{
    height:1px;
    background:#e7eaf0;
    margin:34px 0
}
.submit{
    width:100%;
    border:0;
    border-radius:12px;
    padding:15px 18px;
    margin-top:18px;
    background:#111827;
    color:#fff;
    font-size:16px;
    font-weight:750;
    cursor:pointer
}
.submit:disabled{
    opacity:.35;
    cursor:not-allowed
}
.message{
    text-align:center;
    font-weight:650
}
.success{
    color:#067647
}
footer{
    text-align:center;
    color:#8a93a3;
    font-size:12px;
    margin:18px
}
.admin-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px
}
.admin-table th,.admin-table td{
    text-align:left;
    padding:10px;
    border-bottom:1px solid #e7eaf0
}
.form-row{
    display:grid;
    gap:7px;
    margin:12px 0
}
.form-row input,.form-row textarea{
    padding:11px;
    border:1px solid #ccd2dc;
    border-radius:8px;
    font:inherit
}
code{
    background:#f2f4f7;
    padding:2px 5px;
    border-radius:5px
}
@media(max-width:520px){
    .shell{
        margin:20px auto
    }
    .card{
        padding:22px
    }
    .transport{
        gap:12px
    }
}