* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Verdana, Geneva, Arial, sans-serif; color: #2b1306; background: #d8bf94 url('/assets/images/wallpaper-tile.webp?v=real1') repeat; font-size: 16px; }
a { color: #001fb0; text-decoration: underline; }
.page-shell { width: 1236px; max-width: calc(100vw - 28px); margin: 16px auto 40px; background: #b8864c; border: 4px solid #4f2108; border-radius: 8px; box-shadow: 0 12px 28px rgba(61, 27, 7, .35), inset 0 0 0 2px #d3a15f; overflow: hidden; }
.site-header { background: #d8a160; border-bottom: 4px solid #612908; line-height: 0; }
.header-logo { display: block; width: 100%; }
.header-logo img { display: block; width: 100%; height: auto; }
.main-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 13px 28px 16px; background: #74330d; border-bottom: 4px solid #4e2006; }
.nav-button { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 8px 12px; color: #0027b4; font-size: 28px; font-weight: 900; text-decoration: none; background: linear-gradient(#fff0c8, #e6c082 48%, #c9904e); border: 3px outset #f8ddb0; border-radius: 8px; box-shadow: inset 2px 2px 0 rgba(255,255,255,.62), inset -2px -2px 0 rgba(75,31,7,.28), 2px 3px 0 rgba(38,14,3,.28); }
.nav-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nav-button img { width: 58px; height: 50px; object-fit: contain; }
.main-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px; padding: 10px; background: #b8864c; }
.sidebar { display: flex; flex-direction: column; gap: 10px; }
.side-box, .w3c-badge { background: #f9e6bd; border: 3px ridge #74320d; box-shadow: inset 1px 1px 0 rgba(255,255,255,.75); }
.side-box h2 { margin: 0; padding: 9px 13px 8px; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1.1; color: #fff1c6; background: linear-gradient(#7d3910, #5b2307); text-shadow: 2px 2px 0 #2a0e01; }
.side-pad { padding: 14px 14px 13px; min-height: 142px; }
.side-pad p { margin: 0 0 10px; line-height: 1.35; }
.smile-icon { display: block; width: 34px; height: 34px; margin: 4px auto 0; }
.quick-links { list-style: none; margin: 0; padding: 14px 16px 16px; }
.quick-links li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 17px; }
.quick-links img { width: 31px; height: 31px; object-fit: contain; }
.track-line { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 9px; padding: 13px 14px 5px; }
.track-line img { width: 38px; height: 38px; }
.track-copy strong { display: block; font-size: 16px; }
.track-copy em { display: block; font-size: 15px; }
.player-controls { display: flex; align-items: center; gap: 4px; padding: 7px 13px 13px; }
.player-controls button { min-width: 31px; height: 30px; padding: 0; border: 2px outset #efd2a0; background: linear-gradient(#fff1c3,#d8b273); color: #2c1305; font-weight: 900; font-size: 13px; cursor: pointer; }
.player-controls button:active { border-style: inset; }
.speaker { margin-left: 4px; font-family: Georgia, serif; color: #90734f; font-weight: 900; font-size: 15px; letter-spacing: -3px; }
.meters { margin-left: auto; height: 27px; display: flex; align-items: flex-end; gap: 2px; }
.meters i { width: 6px; border: 1px solid #598636; background: linear-gradient(#55d47a,#f3e66a); }
.meters i:nth-child(1) { height: 7px; } .meters i:nth-child(2) { height: 11px; } .meters i:nth-child(3) { height: 16px; } .meters i:nth-child(4) { height: 21px; } .meters i:nth-child(5) { height: 26px; }
.w3c-badge { display: grid; place-items: center; min-height: 80px; padding: 10px; background: #fee2a8; }
.w3c-badge img { max-width: 185px; width: 100%; height: auto; }
.content { min-width: 0; }
.hero-frame { border: 4px ridge #70300b; background: #5b2307; line-height: 0; box-shadow: inset 0 0 0 2px #b77a39; }
.hero-frame img { display: block; width: 100%; height: auto; }
.welcome-panel { margin-top: 10px; min-height: 178px; display: grid; grid-template-columns: minmax(0,1fr) 150px; align-items: center; gap: 16px; padding: 24px 28px 22px; border: 4px ridge #70300b; background: linear-gradient(#fff0c7, #f4d5a0); box-shadow: inset 1px 1px 0 rgba(255,255,255,.75); }
.welcome-panel h1 { margin: 0; font-family: Georgia, 'Bookman Old Style', serif; color: #5a2207; font-size: 36px; line-height: 1.05; text-shadow: 1px 2px 0 #fff1c7; }
.dash { border-top: 2px dashed #7b3b12; margin: 10px 0 12px; }
.welcome-panel p { margin: 0; line-height: 1.35; font-size: 17px; }
.bench-tree { width: 145px; max-width: 100%; height: auto; justify-self: end; }
.site-footer { position: relative; min-height: 86px; display: flex; align-items: center; justify-content: center; padding: 18px 170px; border-top: 4px solid #74320d; background: linear-gradient(#5d2508,#421604); color: #fff0c6; text-align: center; font-size: 15px; }
.footer-main nav { margin-top: 6px; }
.footer-main a { color: #9bbcff; }
.made-with { position: absolute; right: 20px; top: 17px; width: 118px; padding: 8px 6px; border: 3px outset #f1d29c; background: #ffe7ae; color: #2f1305; font-size: 14px; line-height: 1.15; }
.made-with span { color: #d61818; font-weight: 900; }
@media (max-width: 900px) { .page-shell { width: calc(100vw - 16px); } .main-nav { grid-template-columns: 1fr 1fr; padding-left: 14px; padding-right: 14px; } .main-grid { grid-template-columns: 1fr; } .sidebar { display: grid; grid-template-columns: 1fr 1fr; } .w3c-badge { grid-column: span 2; } .site-footer { padding-left: 16px; padding-right: 16px; flex-direction: column; gap: 12px; } .made-with { position: static; } }
@media (max-width: 560px) { .main-nav, .sidebar { grid-template-columns: 1fr; } .nav-button { font-size: 24px; } .welcome-panel { grid-template-columns: 1fr; } .bench-tree { justify-self: center; } .w3c-badge { grid-column: auto; } }