/* Shared presentation for document pages and the retained GWT page headers. */
.dt-car-studio .dt-page-head { width:min(900px,calc(100% - 32px)); }
.dt-car-detail-dialog { overflow:hidden; }
.dt-car-detail { color:#eeece7;font-family:Inter,sans-serif; }
.dt-car-detail > div { border-color:#38383e !important; }
.dt-car-detail > :last-child { width:120px !important;min-height:40px;margin:20px auto !important;padding:8px 18px !important;background:#2b2b31 !important;color:#eee !important;border:1px solid #48484f !important;border-radius:8px !important; }
.dt-car-studio-body .dt-studio-arrange { color:#ffcc45; }
.dt-car-studio-body table img { filter:invert(.75); }
.dt-car-studio-body { width:min(900px,calc(100% - 32px));margin:22px auto 40px;border:1px solid #ffffff24;border-radius:14px;background:#171719;color:#e0dbd1; }
.dt-car-studio-body .dt-studio-car { display:inline-grid !important;place-items:center;width:100px;height:150px;padding:12px !important;background:#242428 !important;border:1px solid #45454b !important;border-radius:10px; }
.dt-car-studio-body .dt-studio-car:hover { border-color:#ffcc45 !important; }
.dt-car-studio-body .dt-studio-car canvas { width:auto !important;height:auto !important;max-width:76px;max-height:124px; }
.dt-car-studio-body a { color:#ffcc45; }
.page-back, .dt-page-back { width: 44px; height: 44px; }
.page-heading { white-space: normal; overflow: visible; }
.page-intro { margin: -3px 0 3px; color: var(--text-dim); line-height: 1.65; font-size: 14px; }
.eyebrow { color: #f5d76e; font: 700 12px/1.4 Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 12px; }
.home-intro { padding: 3px 2px 8px; }
.home-intro h1 { margin: 0 0 10px; font: 400 clamp(32px, 5vw, 42px)/1.15 Anton, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.home-intro p { color: #c8bfae; font: 14px/1.65 Inter, sans-serif; margin: 0; max-width: 48ch; }
/* Keep homepage account details quieter than the racing modes. */
.player-card { border-color: #ffffff26; }
.player-card-top { background: #1c1c1f; }
.player-identity { color: #f7f3ea; }
.player-name { font: 500 16px/1.4 Inter, Arial, sans-serif; letter-spacing: 0; }
.player-avatar { background: #29292d; border-color: #777166; box-shadow: none; }
.home-panel .player-card { border-color: var(--line); box-shadow: 0 6px 16px #0004; }
.home-panel .player-card-top { padding: 6px 12px; background: #1c1c1f; }
.home-panel .player-identity { color: #dedad2; }
.home-panel .player-identity:hover .player-name { color: var(--gold); }
.home-panel .player-avatar { width: 32px; height: 32px; border: 1px solid #777166; box-shadow: none; }
.home-panel .player-name { font: 500 15px/1.4 var(--font-ui); letter-spacing: 0; }
.home-panel .coins-pill { height: 36px; padding: 0 10px; gap: 6px; }
.home-signin { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-size: 14px; text-underline-offset: 4px; white-space: nowrap; }
.home-panel .player-card-bonus { min-height: 44px; padding: 8px 12px; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid var(--line-soft); }
.home-panel .bonus-left { gap: 6px; }
.home-panel .bonus-dot { width: 6px; height: 6px; box-shadow: none; }
.home-panel .bonus-kicker, .home-panel .bonus-timer-label { display: inline; font: 400 13px/1.5 var(--font-ui); letter-spacing: 0; text-transform: none; color: #d1cbc1; }
.home-panel .is-claimable .bonus-timer-label { display: none; }
.home-panel .bonus-num, .home-panel .bonus-countdown { font-size: 18px; }
.home-panel .bonus-right { margin-left: auto; gap: 5px; flex-wrap: wrap; }
.home-panel .bonus-countdown:empty { display: none; }
.home-panel .player-card-bonus .coin-img { width: 18px; height: 18px; }
.home-panel .mode-sub { font-size: 14px; line-height: 1.5; color: #d1cbc1; }
.mode-status { font-size: 12px; line-height: 1.5; color: #b9b3a8; }
.home-panel .mode-small .mode-body { align-items: center; min-height: 78px; height: 100%; }
.home-panel .mode-small .mode-title { line-height: 1.2; }
.home-panel .mode-small .mode-sub { font-size: 13px; }
.home-panel .social { justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.home-panel .social-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; background: transparent; border-radius: 8px; box-shadow: none; }
.home-panel .social-app { width: auto; padding: 0 8px; font-size: 13px; }
.home-panel .social-btn svg { width: 18px; height: 18px; }
.home-panel .social-btn:hover { transform: none; background: #ffffff0d; }
.home-panel .stat { padding: 12px; }
.home-panel .stat-value { font-size: 26px; }
.home-panel .stat-label { font-size: 12px; letter-spacing: .08em; }
.home-panel .stats { box-shadow: none; }
@media (max-width: 520px) {
  .home-panel .mode-pair { grid-template-columns: 1fr; gap: 12px; }
  .home-panel .mode-small .mode-title { font-size: 20px; }
}
@media (max-width: 420px) {
  .home-panel .player-card-top { gap: 6px; }
  .home-panel .player-identity { gap: 6px; }
  .home-panel .player-avatar { width: 28px; height: 28px; }
  .home-panel .player-name, .home-signin { font-size: 14px; }
  .home-panel .coins-pill { padding: 0 8px; gap: 4px; }
  .home-panel .coins-pill .coin-img { width: 18px; height: 18px; }
}
.text-link { color: #f5d76e; text-underline-offset: 4px; font: 400 13px/1.5 Inter, sans-serif; letter-spacing: normal; text-transform: none; }
.subtle { color: #b9b3a8; font: 13px/1.6 Inter, sans-serif; margin: 0; }
.intro-card { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 32px; padding: 30px; border: 1px solid rgba(255,189,15,.24); border-radius: 14px; background: linear-gradient(120deg, #26231c, #141416); box-shadow: 0 16px 35px #0005; }
.intro-card h2 { font: 400 clamp(26px, 3vw, 34px)/1.2 Anton, sans-serif; margin: 0 0 14px; color: #f7f3ea; }
.intro-card p:not(.eyebrow) { font: 14px/1.75 Inter, sans-serif; color: #c8bfae; margin: 0; max-width: 56ch; }
.intro-card .btn { margin-top: 20px; }
.lesson-steps { display: grid; gap: 18px; list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 1px solid #ffffff1a; }
.lesson-steps li { display: flex; align-items: center; gap: 12px; font: 13px/1.5 Inter, sans-serif; color: #e0dbd1; }
.lesson-steps span { font: 700 23px/1 'Barlow Condensed', sans-serif; color: #f5d76e; }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 0 0; }
.section-heading h2, .help-strip h2, .notice-card h2 { margin: 0; font: 700 24px/1.2 'Barlow Condensed', sans-serif; color: #f7f3ea; }
.lesson-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lesson-loading { min-height: 480px; border-radius: 12px; }
#lessonProgress.is-loading { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lesson-loading { animation: none; } }
.lesson-card, .workshop-card { overflow: hidden; border-radius: 12px; background: #171719; border: 1px solid #ffffff1a; box-shadow: 0 8px 20px #0004; }
.lesson-card { display: flex; flex-direction: column; }
.lesson-card .lesson-media { max-width: 320px; margin-top: 12px; }
.lesson-number { align-self: flex-start; flex-shrink: 0; margin: 12px 0 0 12px; padding: 7px 10px; font: 700 18px/1 'Barlow Condensed', sans-serif; background: #121212e8; color: #f5d76e; border: 1px solid #ffffff24; border-radius: 7px; }
.lesson-body, .workshop-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: 10px; padding: 22px; }
.lesson-body h3, .workshop-body h3 { font: 700 23px/1.25 'Barlow Condensed', sans-serif; margin: 0; color: #f7f3ea; overflow-wrap: anywhere; }
.lesson-description { white-space: pre-line; font: 14px/1.65 Inter, sans-serif; color: #c8bfae; margin: 0; }
.lesson-stars { display: flex; gap: 5px; font-size: 22px; color: #66615a; }
.lesson-stars .earned { color: #ffcc1a; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dt-icon-link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 5px; border: 1px solid #ffffff1f; border-radius: 8px; background: #ffffff0f; color: #c8bfae; text-decoration: none; vertical-align: middle; transition: background .18s, border-color .18s, color .18s; }
.dt-icon-link::before { content: ''; display: block; width: 20px; height: 20px; background: currentColor; mask: var(--dt-action-icon) center / contain no-repeat; }
.dt-replay-link { --dt-action-icon: url('/home/assets/action-play.png'); }
.dt-leaderboard-link { --dt-action-icon: url('/home/assets/action-trophy.png'); }
.dt-icon-link:hover { background: #ffffff1f; border-color: #ffbd0f66; color: #ffcc1a; }
.dt-icon-link:focus-visible { outline: 2px solid #ffcc1a; outline-offset: 2px; }
.page-head-with-actions .page-heading { white-space: normal; }
.page-head-with-actions > .dt-icon-link { margin-left: auto; }
.lesson-body .button-row, .workshop-body .button-row { margin-top: auto; padding-top: 10px; }
.is-locked .lesson-media img { filter: grayscale(.8); opacity: .6; }
.locked-label { margin: 0; font: 13px/1.6 Inter, sans-serif; color: #b9b3a8; }
.help-strip, .notice-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px; border: 1px solid #ffffff1a; border-radius: 12px; background: #151517; }
.help-strip p, .notice-card p { color: #c8bfae; font: 13px/1.7 Inter, sans-serif; margin: 8px 0 0; max-width: 62ch; }
.help-strip { margin-top: 12px; }
.notice-card { border-color: #b58a32; }
.notice-card[hidden], .button-row[hidden] { display: none; }
.collection-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.collection-tabs .chip { min-height: 44px; padding: 9px 20px; }
.workshop-card { display: flex; flex-direction: column; }
.workshop-media { position: relative; display: block; align-self: center; width: calc(100% - 24px); max-width: 240px; aspect-ratio: 1; overflow: hidden; border-radius: 12px; clip-path: inset(0 round 12px); background: #101212; border: 1px solid #ffffff1a; text-decoration: none; }
a.workshop-media:hover { border-color: #ffcc1a80; }
.workshop-image { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.dt-race-button { box-sizing: border-box; appearance: none; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--race-button-size, 64px); height: var(--race-button-size, 64px); padding: 0; border: 2px solid #f5c842; border-radius: 50%; background: #191b1ef2; color: #ffcf40; box-shadow: 0 4px 16px #0009, inset 0 0 0 3px #ffffff0a; cursor: pointer; text-decoration: none; vertical-align: middle; transition: background .18s, color .18s, box-shadow .18s; }
.dt-race-button::before { content: ''; display: block; width: 36%; height: 42%; margin-left: 6%; background: currentColor; -webkit-mask: url('/home/assets/race-play.svg') center / contain no-repeat; mask: url('/home/assets/race-play.svg') center / contain no-repeat; }
.dt-race-button:hover:not(:disabled), .dt-race-media:hover .dt-race-button, .dt-race-media:focus-visible .dt-race-button { background: #ffcf40; color: #17191c; box-shadow: 0 4px 20px #0009, 0 0 0 4px #ffcf4026; }
.dt-race-button:focus-visible, .dt-race-media:focus-visible { outline: 3px solid #fff4c5; outline-offset: 4px; }
.dt-race-button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.dt-race-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.dt-race-overlay > button { pointer-events: auto; }
.dt-track-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: #c8bfae; font-size: 14px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
.dt-track-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dt-track-stat::before { content: ''; flex: 0 0 20px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--stat-icon) center / contain no-repeat; mask: var(--stat-icon) center / contain no-repeat; }
.dt-track-stat-plays { --stat-icon: url('/home/assets/stat-play.svg'); }
.dt-track-stat-likes { --stat-icon: url('/home/assets/stat-like.svg'); }
.dt-track-stat-likes.is-mine::before { --stat-icon: url('/home/assets/stat-like-filled.svg'); background: #b7b7b7; }
.dt-track-layout { display: flex; }
.dt-track-preview { position: relative; flex-shrink: 0; }
.dt-track-hero .dt-track-layout { flex-direction: column; align-items: center; gap: 12px; }
.dt-track-hero .dt-track-info { width: 100%; }
@media (prefers-reduced-motion: reduce) { .dt-race-button { transition: none; } }
.lesson-body, .workshop-body { padding: 18px; }
.workshop-description { display: -webkit-box; width: 100%; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; max-height: 2.5em; }
.workshop-description.is-expanded { display: block; max-height: none; -webkit-line-clamp: unset; line-clamp: unset; white-space: pre-line; }
.workshop-description-toggle { padding: 2px 0; border: 0; background: none; cursor: pointer; text-decoration: underline; }
.workshop-description-toggle[hidden] { display: none; }
.workshop-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.workshop-header > .workshop-driver { flex: 1; padding-top: 5px; }
/* Shared player identity: wrap details within the available component width. */
.workshop-driver { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; color: #f7f3ea; font: 500 14px/1.4 Inter, Arial, sans-serif; letter-spacing: 0; text-transform: none; text-decoration: none; vertical-align: middle; }
.workshop-driver-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workshop-driver.is-vip .workshop-driver-name { color: #f5d76e; }
a.workshop-driver, .player-identity:has(.workshop-driver) { border-radius: 4px; cursor: pointer; }
a.workshop-driver .workshop-driver-name, .player-identity .workshop-driver-name { text-decoration: underline; text-decoration-color: #c8bfae66; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.workshop-driver:hover, a.workshop-driver:focus-visible, .player-identity:has(.workshop-driver):hover, .player-identity:has(.workshop-driver):focus-visible { background-color: #ffffff09; }
a.workshop-driver:hover .workshop-driver-name, a.workshop-driver:focus-visible .workshop-driver-name, .player-identity:hover .workshop-driver-name, .player-identity:focus-visible .workshop-driver-name { text-decoration-color: currentColor; }
.workshop-country { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; height: 22px; padding: 2px 4px; border: 1px solid #ffffff26; border-radius: 5px; background: #ffffff06; }
.workshop-flag { flex-shrink: 0; width: 22px; height: 14px; object-fit: contain; border-radius: 1px; }
.workshop-player-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: #c8bfae; }
.workshop-player-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workshop-role, .workshop-win { display: inline-flex; align-items: center; flex-shrink: 0; gap: 3px; padding: 1px 4px; border: 1px solid #f5d76e40; border-radius: 5px; background: #f5d76e12; color: #f5d76e; font: 600 11px/18px Inter, Arial, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.workshop-role .workshop-player-icon, .workshop-win .workshop-player-icon { color: inherit; }
.workshop-role.is-moderator { color: #95d9f5; background: #67c9ef12; border-color: #67c9ef40; }
.workshop-win { font-weight: 500; font-size: 12px; }
.player-name:has(.workshop-driver) { white-space: normal; overflow: visible; }
.player-name .workshop-driver { font-size: inherit; }
.friend-info .workshop-driver { font-size: 14px; }
.track-card-creator:has(.workshop-driver) { flex: 1; height: 22px; }
.track-card-creator .workshop-driver { font-size: 13px; }
drift-team-single-line-driver { display: flex; min-width: 0; max-width: 100%; height: 22px; overflow: hidden; }
drift-team-single-line-driver.workshop-driver, drift-team-single-line-driver > .workshop-driver { display: flex; flex: 1; flex-wrap: nowrap; height: 22px; overflow: hidden; }
drift-team-single-line-driver [hidden] { display: none; }
.track-card-meta { gap: 4px; letter-spacing: 0; font-size: 12px; }
.track-card-meta .dt-track-stats { flex-wrap: nowrap; gap: 4px; font-size: inherit; letter-spacing: 0; }
.track-card-meta .dt-track-stat { gap: 3px; }
.track-card-meta .dt-track-stat::before { flex-basis: 14px; width: 14px; height: 14px; }
.track-card-coins { flex-shrink: 0; white-space: nowrap; }
.track-card-head:has(.workshop-driver) { flex-wrap: wrap; align-items: flex-start; }
.track-card-head:has(.workshop-driver) .track-card-creator { flex-basis: 100%; }
.driver-identity h1 .workshop-driver { font-size: inherit; line-height: 1.25; }
.driver-identity h1 .workshop-role, .driver-identity h1 .workshop-win { align-self: center; }
.dt-chat-sender .workshop-driver { font-size: inherit; }
.notification-message .workshop-driver { margin-bottom: 4px; }
.workshop-controls { display: flex; flex-shrink: 0; gap: 2px; }
.workshop-description-toggle:focus-visible, .workshop-media:focus-visible { outline: 2px solid #ffcc1a; outline-offset: 2px; }
.workshop-scores { display: grid; gap: 12px; margin-bottom: 24px; }
.scores-dialog { --dialog-width:620px; }
.workshop-driver:focus-visible { outline: 2px solid #ffcc1a; outline-offset: 3px; }
.btn-quiet { color: #b9b3a8; background: transparent; box-shadow: none; }
.btn-secondary, .btn-danger { min-height: 44px; padding: 12px 18px; border: 1px solid; border-radius: 8px; font-size: 17px; letter-spacing: .03em; transition: color .18s, background .18s, border-color .18s, box-shadow .18s; }
.btn-secondary { color: #e0dbd1; background: #ffffff06; border-color: #ffffff26; box-shadow: none; }
.btn-secondary:hover:not(:disabled) { color: #fff; background: #ffffff0d; border-color: #ffffff45; filter: none; }
.btn-danger { color: #ffb4b4; background: linear-gradient(180deg, #422326, #321c1f); border-color: #a44b50; box-shadow: inset 0 1px 0 #ffffff08; }
.btn-danger:hover:not(:disabled) { color: #ffe4e4; background: linear-gradient(180deg, #59292e, #452126); border-color: #db7278; filter: none; }
.btn-danger:active:not(:disabled) { background: #32191d; box-shadow: inset 0 2px 4px #0004; }
.btn-danger:focus-visible { outline: 2px solid #ffb4b4; outline-offset: 3px; }
.dt-page-head { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: min(540px, calc(100% - 32px)); margin: 22px auto 0; text-align: left; }
.dt-page-head h1 { color: #f7f3ea; font: 400 34px/1.15 Anton, sans-serif; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.dt-page-back { box-sizing: border-box; display: grid; place-items: center; flex-shrink: 0; color: #c8bfae; font: 32px/1 Inter, sans-serif; text-decoration: none; border: 1px solid #ffffff20; border-radius: 50%; background: #0005; cursor: pointer; }
.dt-page-back:hover { color: #ffcc1a; border-color: #ffcc1a80; }
.dt-page-back:focus-visible { outline: 2px solid #ffcc1a; outline-offset: 4px; }
.dt-mode-copy { font: 14px/1.7 Inter, sans-serif; color: #c8bfae; padding: 16px 20px 0; text-align: left; margin: 0; }
.dt-invite-url { box-sizing: border-box; min-width: 0; padding: 10px; border: 1px solid #ffffff26; border-radius: 6px; color: #e0dbd1; background: #111113; }
.dt-invite-url:focus { outline: 2px solid #ffcc1a; outline-offset: 2px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 12px 18px; color: #111; background: #ffcc1a; border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 1039px) {
    .intro-card { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
    .lesson-steps { border-left: 0; padding-left: 0; border-top: 1px solid #ffffff1a; padding-top: 22px; }
    .lesson-grid { grid-template-columns: 1fr; }
    .editor-intro { grid-template-columns: 1fr; }
    .help-strip, .notice-card { align-items: flex-start; flex-direction: column; padding: 22px; }
}
@media (max-width: 480px) {
    .dt-page-head h1 { font-size: 28px; }
    .intro-card { padding: 22px; }
    .collection-tabs .chip { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}