/* Shared control sizing and responsive layout across the local app. */
:root{--att-control-height:44px;--att-control-radius:10px;--att-focus:#e2b714}
:is(.att-ui-app,.keyflow-wordpress-page) :is(button:not(.kf-auth-backdrop),select,.cta,.keyflow-nav-cta,.keyflow-auth-link,.kf-info-button){
  box-sizing:border-box;min-height:var(--att-control-height);max-width:100%;
  font-family:'Plus Jakarta Sans',Arial,sans-serif;font-size:14px;font-weight:700;line-height:1.35;
  border-radius:var(--att-control-radius);touch-action:manipulation;
}
:is(.att-ui-app,.keyflow-wordpress-page) :is(button,select,a,[role="button"],[role="option"]):focus-visible{
  outline:3px solid var(--att-focus);outline-offset:3px;
}
:is(.att-ui-app,.keyflow-wordpress-page) button:disabled{opacity:.55;cursor:default}
.att-ui-app select:not([multiple]){
  appearance:none;padding:10px 38px 10px 12px;cursor:pointer;
  border:1px solid var(--line,var(--border-color,#45474b));
  background-color:var(--att-select-bg,var(--panel,var(--dropdown-bg,#292a2d)));color:var(--txt,var(--text-main,#f3f3ef));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2395a7ba' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 13px center!important;padding-right:38px!important;
}
.att-ui-app select option{background:var(--panel,var(--dropdown-bg,#292a2d));color:var(--txt,var(--text-main,#f3f3ef))}
.att-ui-app .street-racer-mode{--att-select-bg:var(--ui-raised,#383a3e)}
.att-ui-app .type-run-mode{--att-select-bg:var(--ui-raised,#383a3e)}
.att-ui-app .btn,.att-ui-app :is(.primary,.secondary,.btn-secondary){padding:11px 16px;border-radius:10px}
.att-ui-app :is(.modalactions,.actions,.kf-lab-result-actions){display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.att-ui-app .modalactions>*{margin:0}
.att-ui-app .play{grid-template-rows:auto minmax(0,1fr)}
.att-ui-app .playbar{grid-template-columns:auto minmax(0,1fr) auto;padding:12px 16px;gap:12px}
.att-ui-app .playbar .title{min-width:0}
.att-ui-app .playbar .title b{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.att-ui-app .playbar .title small{font-size:11px;line-height:1.4;margin-top:3px}
.att-ui-app .playactions{grid-column:auto;display:flex;align-items:center;gap:8px;min-width:0}
.att-ui-app .playbar .btn{min-height:44px;padding:10px 13px;font-size:14px;white-space:nowrap;flex-shrink:0}
.att-ui-app .playbar #back{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:118px;height:44px;padding:10px 12px;background:rgba(143,183,207,.08);border:1px solid rgba(143,183,207,.25);color:#e7eef5;box-shadow:none;line-height:1;transition:background-color .15s,border-color .15s}
.att-ui-app .playbar #back svg{display:block;width:18px;height:18px;flex:0 0 18px;stroke:#edce80}
.att-ui-app .playbar #back span{display:block;white-space:nowrap;font-size:13px;line-height:18px;font-weight:700}
.att-ui-app .playbar #back:hover{background:rgba(143,183,207,.15);border-color:rgba(143,183,207,.5);color:#fff}
.att-ui-app .playbar #back:active{background:rgba(143,183,207,.22)}
.att-ui-app .difficulty-control{position:relative;display:block;min-width:116px;flex-shrink:0}
.att-ui-app .difficulty-control>span{position:absolute;top:6px;left:12px;font-size:8px;font-weight:800;line-height:1;letter-spacing:1px;text-transform:uppercase;color:#a4b9c9;pointer-events:none;z-index:1}
.att-ui-app .difficulty-control select.btn{width:100%;min-height:44px;padding:17px 34px 5px 12px;font-size:14px}
.att-ui-app #soundGame{width:44px;padding:10px;display:grid;place-items:center}
.att-ui-app .playmain{grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
.att-ui-app .stage{min-height:0!important}
.att-ui-app .overlay{padding:14px;align-items:center;overflow:hidden}
.att-ui-app .modal{max-width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.att-ui-app .composer{min-width:0;grid-template-columns:minmax(0,1fr) auto}
.att-ui-app :is(.promptbox,.hud,.mission>div){min-width:0}
.att-ui-app .prompt{overflow-wrap:anywhere}
.att-ui-app .hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.att-ui-app .stat{min-width:0}
.att-ui-app .results{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.att-ui-app .results>div{min-width:0}
.att-ui-app .discoverbar{grid-template-columns:minmax(0,1fr)}
.att-ui-app .chips{min-width:0;padding:3px 0 7px;scrollbar-width:thin}
.att-ui-app .chip{min-height:44px;padding:10px 15px}
.att-ui-app .search input{min-width:0;min-height:44px;font-size:16px}
.att-ui-app .sectionhead{gap:14px;align-items:center}
.att-ui-app .sectionhead>span:first-child{min-width:0}
.att-ui-app .count{flex-shrink:0}
/* Typing setup, practice and lessons. */
.att-ui-app :is(.container,.keyflow-app-wrapper){min-width:0;max-width:100%;box-sizing:border-box}
.att-ui-app.att-dark .keyflow-app-wrapper{--bg-page:#323437;--card-bg:#2c2e31;--text-main:#f0efe7;--text-muted:#a9b4c2;--border-color:#45474b;--dropdown-bg:#292a2d}
.att-ui-app.att-light .keyflow-app-wrapper{--bg-page:#f3f1ea;--card-bg:#f7f4ec;--text-main:#323437;--text-muted:#686a6d;--border-color:#d5d1c5;--dropdown-bg:#ece9df}
.att-ui-app :is(.container,.keyflow-app-wrapper) .btn{background:#e2b714!important;color:#17212b!important}
.att-ui-app .keyflow-app-wrapper .btn-secondary{font-size:14px!important;border-width:1px;border-radius:10px;padding:10px 14px;line-height:1.35}
.att-ui-app .custom-select-trigger{min-height:48px;gap:14px;border-radius:10px;padding:12px 16px;line-height:1.4;font-size:15px}
.att-ui-app .custom-select-trigger>span{min-width:0;overflow-wrap:anywhere}
.att-ui-app .custom-select-trigger .arrow{flex-shrink:0}
.att-ui-app .custom-options{max-height:min(320px,45dvh);overflow-y:auto;overscroll-behavior:contain}
.att-ui-app .custom-select-wrapper:not(.open) .custom-options{display:none}
.att-ui-app .custom-select-wrapper.open .custom-options{position:relative;top:auto;display:block;margin-top:6px;transform:none}
.att-ui-app .custom-select-wrapper:not(.open) .custom-select-trigger{box-shadow:none}
.att-ui-app .custom-select-wrapper:not(.open) .custom-select-trigger{border-color:var(--border-color)}
html:has(body.att-ui-typing),body.att-ui-typing{min-height:0!important;height:auto!important;overflow-x:hidden!important;overflow-y:visible!important}
.att-ui-app .custom-option{min-height:44px;padding:12px 16px;line-height:1.4}
.att-ui-app :is(.test-header,.header-left-group,.header-right-group,.roadmap-title,.top-nav){gap:12px;flex-wrap:wrap;min-width:0}
.att-ui-app .mode-toggle{display:flex;flex-wrap:wrap;gap:4px;overflow:visible}
.att-ui-app .mode-toggle .mode-btn{min-height:44px;padding:10px 14px;flex:1 1 auto}
.att-ui-app .close-btn{min-height:44px;padding:10px 14px;white-space:nowrap}
.att-ui-app .metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.att-ui-app .kf-lab-toolbar{gap:8px;align-items:center}
.att-ui-app .kf-lab-toolbar :is(button,select){min-height:44px;font-size:13px}
.att-ui-app .kf-lab-toolbar select{max-width:none;min-width:120px}
.att-ui-app.att-light .kf-lab-toolbar select{--att-select-bg:#ece9df;color:#323437;border-color:#d5d1c5}
.att-ui-app .kf-lab-toolbar .kf-lab-group{max-width:100%;flex-wrap:wrap;overflow:visible}
.att-ui-app .kf-lab-group button{flex:1 0 auto}
.att-ui-app .kf-lab-setting button{min-width:64px}
.att-ui-app .kf-lab-gear{min-width:44px}
.att-ui-app .hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.att-ui-app :is(.section,.learn){grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:clamp(20px,4vw,48px)}
/* WordPress navigation, authentication and editorial actions. */
.keyflow-wordpress-page .keyflow-app-nav{gap:16px;width:100%;min-width:0}
.keyflow-wordpress-page :is(.att-theme-toggle,.keyflow-menu-toggle,.kf-auth-close){width:44px!important;height:44px!important;min-width:44px;padding:10px!important;flex-shrink:0}
.keyflow-wordpress-page .keyflow-primary-links a{min-height:44px;display:flex;align-items:center}
.keyflow-wordpress-page .keyflow-quick-tests a{min-width:44px;height:44px;display:grid;place-items:center}
.keyflow-wordpress-page .keyflow-nav-cta{min-height:44px;padding:10px 16px;flex-shrink:0}
.keyflow-wordpress-page .kf-auth-card{max-height:calc(100dvh - 32px);overflow:auto}
.keyflow-wordpress-page .kf-auth-form input:not([type="checkbox"]){min-height:44px;font-size:16px;box-sizing:border-box;max-width:100%}
@media(max-width:1100px){.keyflow-wordpress-page .keyflow-quick-tests{display:none}}
@media(max-width:820px){
  .keyflow-wordpress-page .keyflow-nav-cta{display:none!important}
  .keyflow-wordpress-page .keyflow-menu-toggle{display:block!important;margin-left:auto}
  .keyflow-wordpress-page .keyflow-app-nav.kf-menu-open .keyflow-quick-tests{display:flex;flex-wrap:wrap}
}
@media(max-width:760px){
  .att-ui-app .hero{grid-template-columns:minmax(0,1fr)}
  .att-ui-app :is(.section,.learn){grid-template-columns:minmax(0,1fr)}
  .att-ui-app .composer{grid-template-columns:minmax(0,1fr);gap:8px}
  .att-ui-app .hud{grid-template-columns:repeat(4,minmax(0,1fr))}
  .att-ui-app .stat{padding:7px 8px}
  .att-ui-app .stat b{font-size:18px}
  .att-ui-app .top{align-items:flex-start}
}
@media(max-width:719px){
  .att-ui-app .playbar{grid-template-columns:auto minmax(0,1fr);padding:10px 12px;gap:9px 12px}
  .att-ui-app .playbar .title b{font-size:15px}
  .att-ui-app .playactions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,.55fr) 44px;width:100%}
  .att-ui-app .difficulty-control{min-width:0}
  .att-ui-app .playactions .btn{width:100%}
  .att-ui-app .mission{grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px}
  .att-ui-app .goal{min-width:0}
  .att-ui-app .race-status{font-size:10px;gap:5px}
  .att-ui-app .composer{padding:10px 12px}
  .att-ui-app .modal{padding:20px;border-radius:16px}
  .att-ui-app .modal h2{font-size:24px}
  .att-ui-app .modalactions>*{flex:1 1 auto;justify-content:center}
  .att-ui-app .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .att-ui-app .keyflow-app-wrapper .top-nav{justify-content:center}
  .att-ui-app .keyflow-app-wrapper .roadmap-title{align-items:flex-start}
  .att-ui-app .header-right-group{justify-content:flex-start}
  .att-ui-app .kf-lab-toolbar .kf-lab-group{flex-basis:100%}
  .att-ui-app .kf-lab-toolbar select{flex:1 1 120px;min-width:0}
}
@media(max-height:520px){
  .att-ui-app .overlay{position:fixed;inset:60px 0 0;z-index:80}
  .att-ui-app .playbar{padding:6px 8px;gap:6px 8px}
  .att-ui-app .playbar .title small{display:none}
  .att-ui-app .mission{padding:5px 8px;gap:5px}
  .att-ui-app :is(.mission p,.mission strong,#raceFeedback,.runner-feedback){display:none}
  .att-ui-app :is(.race-status,.runner-status){margin-top:0;font-size:9px}
  .att-ui-app .composer{padding:6px 8px;gap:5px}
  .att-ui-app .promptbox{padding:6px 8px}
  .att-ui-app .prompt{font-size:17px}
  .att-ui-app .hud{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .att-ui-app .stat{padding:4px 6px}
  .att-ui-app .stat b{font-size:14px;margin-top:2px}
  .att-ui-app .modal{padding:14px}
  .att-ui-app .modal h2{font-size:21px;margin:6px 0}
  .att-ui-app .modal p{font-size:12px;line-height:1.45;margin:8px 0}
}
@media(max-height:520px) and (max-width:719px){.att-ui-app .overlay{top:110px}}
@media(forced-colors:active){.att-ui-app select:not([multiple]){appearance:auto;background-image:none!important}}

/* One palette for app chrome in both themes, including all game engines. */
body.att-dark{--ui-bg:#323437;--ui-panel:#2c2e31;--ui-raised:#383a3e;--ui-text:#f0efe7;--ui-muted:#a4a6a9;--ui-line:#45474b;--ui-ink:#e2b714;--ui-error:#ff8686}
body.att-light{--ui-bg:#f3f1ea;--ui-panel:#ece9df;--ui-raised:#e5e1d6;--ui-text:#323437;--ui-muted:#686a6d;--ui-line:#d5d1c5;--ui-ink:#806600;--ui-error:#b72837}
.keyflow-wordpress-page .keyflow-menu-toggle i{background:currentColor!important}
.att-ui-app #play{background:var(--ui-bg);color:var(--ui-text);--txt:var(--ui-text);--muted:var(--ui-muted);--line:var(--ui-line)}
.att-ui-app #play :is(.playbar,.mission,.composer,.modal){background:var(--ui-panel);border-color:var(--ui-line);box-shadow:none}
.att-ui-app #play :is(.btn,.secondary,.promptbox,.stat,.results>div,.race-status>span:not(#raceFeedback),.runner-status>span){background:var(--ui-raised);border-color:var(--ui-line);color:var(--ui-text)}
.att-ui-app #play :is(.modal h2,.stat b,.results b,.input){color:var(--ui-text)}
.att-ui-app #play :is(.title small,.mission p,.goal small,.modal p,.stat small,.results small,.runner-prompt-label,.race-prompt-label,#raceFeedback,.runner-feedback){color:var(--ui-muted)}
.att-ui-app #play :is(.mission strong,.eyebrow,.prompt,.prompt .ok){color:var(--ui-ink)}
.att-ui-app #play .prompt .bad{color:var(--ui-error)}
.att-ui-app #play .primary{background:#e2b714;color:#27292c}
.att-ui-app #play .input{border-color:var(--ui-line)}
.att-ui-app #play .input::placeholder{color:var(--ui-muted);opacity:1}
.att-ui-app #play .bar{background:var(--ui-raised)}
.att-ui-app #play .bar i{background:#e2b714}
.att-ui-app #play #soundGame .game-icon{width:20px;height:20px;display:block;margin:auto}
.att-ui-app #play .overlay{background:#161719a3}
body.att-light #play .overlay{background:#f3f1eaa6}
body.att-light .keyflow-app-wrapper,body.att-dark .keyflow-app-wrapper{--bg-page:var(--ui-bg)!important;--card-bg:var(--ui-panel)!important;--text-main:var(--ui-text)!important;--text-muted:var(--ui-muted)!important;--border-color:var(--ui-line)!important;--dropdown-bg:var(--ui-raised)!important;--incorrect-color:var(--ui-error)!important;background:var(--ui-panel)!important;border-color:var(--ui-line)!important;color:var(--ui-text)!important;box-shadow:none!important}
body.att-light .keyflow-app-wrapper :is(.top-nav,.metric-card,.category-card,.lesson-sub-card){background:var(--ui-panel)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
body.att-ui-typing{--bg-page:var(--ui-bg);--card-bg:var(--ui-panel);--text-main:var(--ui-text);--text-muted:var(--ui-muted);--border-color:var(--ui-line);--dropdown-bg:var(--ui-raised);--dropdown-hover:var(--ui-panel);--incorrect-color:var(--ui-error);--incorrect-bg:color-mix(in srgb,var(--ui-error) 12%,transparent);--primary-ink:var(--ui-ink)}
body.att-ui-typing .container{background:var(--ui-panel);border:1px solid var(--ui-line);animation:none}
body.att-light.att-ui-typing :is(.header-text h1 span,.results-header span){background:none;-webkit-text-fill-color:var(--ui-ink);color:var(--ui-ink)}
.att-ui-app #play :is(.difficulty-control>span){color:var(--ui-muted)}
.att-ui-app #play #back svg{stroke:var(--ui-ink)}
.att-ui-app #play #back:hover{background:var(--ui-bg);color:var(--ui-text);border-color:var(--ui-ink)}
.att-ui-app .switch input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;opacity:0;z-index:1;cursor:pointer}
.att-ui-app .switch:has(input:focus-visible){outline:3px solid var(--ui-ink);outline-offset:4px;border-radius:20px}
.att-ui-app .switch{min-height:28px}
.att-ui-app .keyflow-app-wrapper :is(.category-header,.lesson-sub-card):focus-visible{outline:3px solid var(--ui-ink);outline-offset:3px}
.att-ui-app .gamegrid .art,.att-ui-app .ecosystem .visual[data-game-icon]{background:var(--ui-raised)!important;color:var(--ui-ink);filter:none}
.att-ui-app .gamegrid .art{height:118px;border-bottom:1px solid var(--ui-line)}
.att-ui-app .gamegrid .game-icon{width:78px;height:78px}
.att-ui-app .ecosystem .game-icon{width:56px;height:56px}
.att-ui-app .gamegrid a{display:block;height:100%;border-radius:10px}
.att-ui-app .gamegrid a:focus-visible{outline:3px solid var(--ui-ink);outline-offset:-3px}
.keyflow-wordpress-page .keyflow-learn-frame>.keyflow-frame{height:var(--kf-learn-frame-height,900px)!important;min-height:0!important;overflow:hidden!important}
html:has(body.att-ui-learn),body.att-ui-learn{min-height:0!important;height:auto!important;overflow-x:clip!important;overflow-y:visible!important}
body.att-ui-learn{padding:clamp(12px,2vw,24px)}
body.att-light .keyflow-footer-col strong{color:#806600}
body.att-light .keyflow-app-wrapper{--primary:var(--ui-ink);--correct-color:#557129}
body.att-light .keyflow-app-wrapper .dashboard-header h1 span{background:none;-webkit-text-fill-color:var(--ui-ink);color:var(--ui-ink)}
.att-ui-app .keyflow-app-wrapper .screen{scroll-margin-top:88px}
.att-ui-app .btn-primary{box-shadow:none!important}
/* Homepage tool overrides previously hard-coded dark colours in both modes. */
body.att-ui-app .kf-lab{background:var(--ui-bg)!important;color:var(--ui-text)!important}
body.att-ui-app .kf-lab :is(.kf-lab-app,.kf-lab-group,.kf-lab-toolbar,.kf-lab-main,.kf-lab-live article,.kf-lab-settings,.kf-lab-result-top article,.kf-lab-chart,.kf-lab-breakdown){background:var(--ui-panel)!important;border-color:var(--ui-line)!important;box-shadow:none!important}
body.att-ui-app .kf-lab :is(.kf-lab-toolbar select,.kf-lab-setting button,.kf-settings-close){background-color:var(--ui-raised)!important;border-color:var(--ui-line)!important;color:var(--ui-text)!important}
body.att-ui-app .kf-lab :is(.kf-lab-live b,.kf-settings-head h3,.kf-lab-setting span,.kf-lab-breakdown strong){color:var(--ui-text)!important}
body.att-ui-app .kf-lab :is(.kf-lab-words,.kf-lab-live small,.kf-settings-head small,.kf-lab-setting small,.kf-focus-footer,.kf-lab-hint){color:var(--ui-muted)!important;background:transparent!important}
body.att-ui-app .kf-lab .kf-lab-words .active{color:var(--ui-text)!important}
body.att-ui-app .kf-lab .kf-lab-words .done{color:var(--ui-ink)!important}
body.att-ui-app .kf-lab .kf-lab-words .wrong{color:var(--ui-error)!important;background:color-mix(in srgb,var(--ui-error) 12%,transparent)!important}
body.att-ui-app .kf-lab :is(.kf-mode-group button.on,.kf-duration-group button.on,.kf-toggle-group button.on,.kf-sound-quick.on,.kf-lab-setting button.on){background:#e2b714!important;color:#27292c!important}
body.att-ui-app .kf-lab :is(.kf-lab-meta b,.kf-result-kicker,.kf-volume-setting output){color:var(--ui-ink)!important}
body.att-ui-app .kf-lab .kf-lab-toolbar button:hover{background:var(--ui-raised)!important;color:var(--ui-text)!important}
body.att-ui-app .kf-lab .kf-lab-toolbar button.on:hover{background:#e2b714!important;color:#27292c!important}
body.att-light :is(.gamegrid small,.ecosystem small,.eyebrow){color:var(--ui-ink)}
body.keyflow-wordpress-page .kf-auth-card{background:var(--ui-panel)!important;border-color:var(--ui-line)!important;color:var(--ui-text)!important}
body.keyflow-wordpress-page .kf-auth-form input:not([type=checkbox]):not([type=hidden]){background:var(--ui-raised)!important;border-color:var(--ui-line)!important;color:var(--ui-text)!important}
body.keyflow-wordpress-page .kf-auth-form label{color:var(--ui-text)!important}
body.keyflow-wordpress-page .kf-auth-tabs button{background:transparent!important;color:var(--ui-muted)!important}
body.keyflow-wordpress-page .kf-auth-tabs button.is-active,body.keyflow-wordpress-page .kf-auth-close{background:var(--ui-raised)!important;color:var(--ui-text)!important}
body.keyflow-wordpress-page .kf-auth-submit{background:#e2b714!important;color:#27292c!important;text-shadow:none!important;box-shadow:none!important}
body.keyflow-wordpress-page .kf-auth-brand p,body.keyflow-wordpress-page .kf-auth-note{color:var(--ui-muted)!important}
body.att-light .keyflow-app-nav.kf-menu-open .keyflow-primary-links a{background:var(--ui-panel)!important;color:var(--ui-text)!important}
body.att-light .kf-blog .kf-topic-pills span{color:var(--ui-muted)!important}
body.att-light :is(.kf-kicker,.kf-blog-hero h1 em,.kf-console-metrics b,.kf-blog-metrics small,.kf-mini-keyboard i:nth-child(4n)){color:var(--ui-ink)!important}
body.keyflow-wordpress-page .kf-auth-tabs{background:var(--ui-bg)!important}
body.keyflow-wordpress-page .kf-auth-foot{color:var(--ui-muted)!important}
.kf-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* SVG illustrations stay sharp at every size; controls keep their compact line icons. */
.illustrated-icon{--icon-accent:#e2b714}
.illustrated-icon[data-tone="copper"]{--icon-accent:#cd8760}
.illustrated-icon[data-tone="sage"]{--icon-accent:#9dac73}
.illustrated-icon[data-tone="violet"]{--icon-accent:#aa96c8}
.att-ui-app .gamegrid .art{background:color-mix(in srgb,#e2b714 8%,var(--ui-raised))!important}
.att-ui-app .gamegrid .art:has([data-tone="copper"]){background:color-mix(in srgb,#cd8760 10%,var(--ui-raised))!important}
.att-ui-app .gamegrid .art:has([data-tone="sage"]){background:color-mix(in srgb,#9dac73 10%,var(--ui-raised))!important}
.att-ui-app .gamegrid .art:has([data-tone="violet"]){background:color-mix(in srgb,#aa96c8 10%,var(--ui-raised))!important}
.att-ui-app .gamegrid .illustrated-icon{filter:drop-shadow(0 4px 3px #00000014)}