*{box-sizing:border-box}body{margin:0;background:#101418;color:#f3f5f6;font:16px system-ui,sans-serif}header,main{max-width:1060px;margin:auto;padding:24px}header{border-bottom:1px solid #39434c}h1{font-size:clamp(2.5rem,8vw,4rem);margin:.15em 0}header strong{color:#ffce54}header p{color:#dbe1e5}nav{display:flex;flex-wrap:wrap;gap:.5rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1rem}.card{padding:1rem;background:#1b232a;border:1px solid #39434c;border-radius:12px;overflow-wrap:anywhere}.card h3{margin-top:0}button,input,select{font:inherit;padding:.6rem;border-radius:7px;border:1px solid #82909a}button{background:#ffce54;color:#17140b;cursor:pointer;font-weight:650}button:disabled{opacity:.5;cursor:default}button[aria-current=true]{outline:2px solid white;outline-offset:2px}input,select{width:100%;margin:.35rem 0 .7rem}label{display:block}#feedback{min-height:1.2em;color:#ffce54}small{color:#c7d1d8}@media print{header,nav,button,form,#feedback{display:none}body{background:white;color:black}.card{background:white}}

main{display:grid;grid-template-columns:205px minmax(0,1fr);gap:24px;max-width:1240px}
aside{align-self:start;background:#1b232a;border:1px solid #39434c;border-radius:12px;padding:14px}
aside h2{font-size:1rem;margin:0 0 14px}aside nav{display:grid}aside button{text-align:left}
aside button:not([aria-current=true]){background:#252f37;color:#f3f5f6}
@media(max-width:640px){main{display:block;padding:14px}aside nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

.bpr-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bpr-title-row h1{display:flex;align-items:center;gap:.2em;white-space:nowrap;font-size:clamp(1.6rem,6vw,4rem)}
.bpr-home{color:#ffce54;font-size:clamp(.78rem,2.5vw,1rem);white-space:nowrap}

.bpr-title-row h1{position:relative;padding-bottom:10px}

.bpr-title-row{position:relative;padding-bottom:10px}
.bpr-title-row h1{padding-bottom:0}
.bpr-title-row::after{
  content:"";position:absolute;left:0;bottom:0;width:95%;height:2px;
  background:#b78319 linear-gradient(90deg,transparent,#ffcf40,#fff4c0,#ffcf40,transparent)
    0 0 / 24% 100% no-repeat;
  box-shadow:0 0 6px #ffc33888;
  animation:bpr-kilau 2.8s linear infinite;
}
@keyframes bpr-kilau{from{background-position:-32% 0}to{background-position:132% 0}}
@media(prefers-reduced-motion:reduce){.bpr-title-row::after{animation:none;background-position:center}}
