/* Approved OpenDesign Hangman panel; shared site and game foundations load first. */
:root{--play-paper:oklch(95.7% .009 95);--play-border:oklch(78% .015 80);--key-border:oklch(64% .012 70);--key-hover:oklch(92% .009 95);--rule:oklch(85% .012 95);--ink-hover:oklch(10% .018 70);--gutter:clamp(16px,4.5vw,64px)}
body{min-width:0}
button,select,a{-webkit-tap-highlight-color:transparent}
button,select{font-family:var(--body)}
button{touch-action:manipulation}
button:disabled{opacity:1}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
[tabindex="-1"]:focus,.hm-shell [tabindex="-1"]:focus,.attempts-dialog [tabindex="-1"]:focus{outline:0}









.site-header{max-width:1440px}
.masthead{padding-block:24px 20px;gap:24px}
.masthead .brand img{width:310px;max-width:100%;height:auto}
.masthead-note{font-size:13px;max-width:330px}
.main-nav a{font-size:14px;min-height:44px}
.hangman-panel-main{max-width:1112px;min-height:0;padding:27px var(--gutter) 38px;margin:auto}
.page-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}
.page-intro h1{font:500 clamp(28px,3.1vw,38px)/1.22 var(--display);letter-spacing:-.035em;margin:0 0 9px}
.page-intro p{font-size:14px;color:var(--muted);margin:0}
.page-intro .intro-index{font-size:13px;text-align:right;max-width:150px;padding-bottom:3px}
.hm-shell{container-type:normal;max-width:none;width:100%;margin:0;padding:24px 32px 0;border:1px solid var(--play-border);border-radius:8px;background:var(--play-paper);box-shadow:0 3px 0 oklch(90% .009 95 / .6);position:relative}
[data-hangman-app]{min-width:0;min-height:435px}
[data-hangman-app][data-state=ready],[data-hangman-app][data-state=vocabulary-preparation]{min-height:435px}
.game-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--rule);min-height:60px}
.game-status p{margin:0;font-size:14px;line-height:1.4;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.game-topic{font-weight:550}
.game-progress{color:var(--muted);font-size:13px}
.game-status-actions{display:flex;align-items:center;gap:14px}
.game-score{display:inline-flex;align-items:baseline;justify-content:center;gap:8px;padding:8px 10px;min-height:44px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--fg);font-size:13px}
.game-score strong{font:550 23px/1 var(--body);font-variant-numeric:tabular-nums}
.game-score:hover{background:var(--surface);border-color:var(--key-border);color:var(--fg)}
.game-info-symbol{display:inline-grid;place-items:center;width:15px;height:15px;border:1px solid currentColor;border-radius:50%;font-size:10px;align-self:center}
.game-status-actions .text-button{font-size:12px}
.hm-board{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:34px;padding:18px 38px 20px;border:0;min-height:208px}
.hm-drawing{width:136px;height:153px;max-width:100%;justify-self:center;stroke-width:2.5}
.hm-drawing .hm-body{color:var(--accent)}
.hm-word-area{display:flex;flex-direction:column;align-items:center;min-width:0;gap:16px}
.hm-word-label{font-size:12px;order:3;text-align:center;color:var(--muted)}
.hm-word{display:grid;grid-template-columns:repeat(var(--word-count),minmax(0,1fr));gap:5px;width:min(100%,calc(var(--word-count)*46px));margin:0;container-type:inline-size}
.hm-letter{width:100%;min-width:0;height:52px;display:grid;place-items:center;border-bottom:2px solid var(--fg);background:var(--surface);border-radius:3px 3px 0 0;font:500 clamp(14px,calc(100cqi / var(--word-count)*.7),30px)/1 var(--display)}
.hm-letter[data-revealed=true]{background:transparent}
.hm-letter[data-missed=true]{color:var(--error);border-color:var(--error)}
.hm-mistakes{display:flex;align-items:center;justify-content:center;gap:10px;order:-1;font-size:13px;margin:0;text-align:center;flex-wrap:wrap}
.hm-mistakes strong{font-weight:550;font-variant-numeric:tabular-nums}
.mistake-dots{display:inline-flex;gap:5px;align-items:center}
.mistake-dots i{width:6px;height:6px;border-radius:50%;background:var(--fg);border:1px solid var(--fg)}
.mistake-dots i.used{background:transparent;border-color:var(--key-border)}
.hm-turn-controls{max-width:748px;margin:0 auto;min-height:226px;padding-bottom:20px;min-width:0}
.hm-keyboard{margin:0;padding:0;border:0;min-width:0}
.hm-keyboard legend{font:500 13px/1.4 var(--body);text-align:center;width:100%;padding:0;margin-bottom:12px}
.hm-keys{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:6px}
.hm-key{grid-column:span 2;height:48px;min-height:44px;min-width:0;padding:0;border:1px solid var(--key-border);border-radius:4px;background:var(--surface);color:var(--fg);font:500 16px/1 var(--body);box-shadow:0 2px 0 oklch(83% .008 95 / .5);gap:3px;transition:background .12s,border-color .12s,transform .12s}
.hm-key:nth-child(19){grid-column:2/span 2}
.hm-key:hover:enabled{background:var(--surface);color:var(--fg);border-color:var(--fg);box-shadow:0 2px 0 var(--key-border)}
.hm-key:active:enabled{transform:translateY(1px);box-shadow:none}
.hm-key[data-state=correct]{background:var(--success-bg);color:var(--success);border-color:var(--success);box-shadow:none}
.hm-key[data-state=wrong]{color:var(--muted);background:var(--play-paper);border-color:var(--rule);box-shadow:none;text-decoration:line-through}
.hm-key::after{font-size:10px}
.hm-key-hint{font-size:12px;text-align:center;color:var(--muted);margin:13px 0 0;line-height:1.5}
.hm-key-hint kbd{font:inherit;padding:1px 4px;border:1px solid var(--rule);border-radius:3px}
.game-help{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:8px 0;border-top:1px solid var(--rule)}
.game-help .help-links{display:flex;gap:14px;align-items:center}
.text-button{min-height:44px;padding:9px 0;background:transparent;color:var(--fg);font:400 13px/1.4 var(--body);letter-spacing:0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.text-button:hover{color:var(--fg);text-decoration-thickness:2px;background:transparent}
.help-note{font-size:12px;color:var(--muted);margin:0}
.game-help [data-finish]{margin-left:auto}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:48px;padding:12px 24px;background:var(--fg);color:var(--surface);border:1px solid var(--fg);border-radius:4px;font:500 14px/1.4 var(--body);letter-spacing:0}
.button:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:var(--surface)}
.button:active{transform:translateY(1px)}
.game-actions{display:flex;align-items:center;gap:12px 24px;margin:0;flex-wrap:wrap}
.hm-ready{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.3fr);gap:42px;align-items:center;padding:15px 0 30px;min-height:435px}
.game-identity{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hv-ready-title{font:500 29px/1.25 var(--display);letter-spacing:-.025em;margin:0 0 12px;max-width:260px}
.hv-ready-lead{font-size:14px;line-height:1.65;max-width:31ch;margin:0;color:var(--muted)}
.ready-illustration{display:flex;align-items:end;gap:12px;margin:20px 0 0}
.ready-illustration .hm-drawing{width:88px;height:99px}
.ready-word{font:500 27px/1.5 var(--display);letter-spacing:6px;border-bottom:2px solid var(--fg);padding:0 4px;margin:0 0 7px}
.game-setup{min-width:0}
.hm-field{font-size:13px;font-weight:500;margin:0 0 10px;display:block}
.topic-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0;padding:0;border:0;min-width:0}
.topic-option{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--fg);font:400 13px/1.3 var(--body);text-align:left}
.topic-option:hover{background:var(--surface);border-color:var(--fg);color:var(--fg)}
.topic-option[aria-pressed=true]{background:var(--surface);border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg);font-weight:500}
.topic-option .topic-check{flex-shrink:0}
.hm-topic-note{font-size:12px;margin:12px 0;color:var(--muted);line-height:1.5}
.hm-custom-heading{margin-top:16px}
.hm-add-list{margin-top:8px}
.topic-option span{overflow-wrap:anywhere}
.hm-list-form :is(input,textarea){display:block;width:100%;min-width:0;padding:10px 12px;margin:0 0 18px;border:1px solid var(--muted);background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--body)}
.hm-list-form textarea{min-height:160px;resize:vertical}
.hm-list-form #hm-list-help{margin:0 0 10px;color:var(--muted)}
.hm-custom-list{list-style:none;padding:0!important;margin:0 0 20px!important}
.hm-custom-list li{padding:12px 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.hm-custom-list strong,.hm-custom-list small{display:block}
.hm-custom-list .hm-actions{margin-top:4px;gap:16px}
.hm-custom-list :disabled{color:var(--muted);cursor:default}
.hm-feedback{padding:0;margin:0;background:transparent;border:0}
.game-feedback-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 13px}
.game-feedback-head h2{font:550 14px/1.4 var(--body);color:var(--success);margin:0;letter-spacing:0}
.hm-feedback[data-result=lost]{background:transparent;border:0}
.hm-feedback[data-result=lost] h2{color:var(--error)}
.game-round-points{font-size:12px;color:var(--muted);margin:0}
.hm-answer-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hm-answer{font:500 28px/1.3 var(--display);margin:0}
.hm-meaning{font-size:16px;margin:0}
.hm-example{border-top:1px solid var(--rule);padding-top:14px}
.hm-example p[lang=en]{font:400 17px/1.55 var(--display);margin:0}
.hm-turn-controls:has(.hm-feedback){max-width:650px}
.hm-turn-controls>.game-actions{margin-top:20px;justify-content:space-between}
.feedback-meta{font-size:12px;color:var(--muted)}
.hm-complete{padding:38px 0 30px;text-align:center;max-width:620px;margin:auto;min-height:435px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hm-complete .section-caption{font-size:13px;color:var(--muted);margin:0 0 12px}
.hm-complete h2{font:500 36px/1.22 var(--display);margin:0 0 18px}
.game-final-score{margin:0 0 4px;min-height:64px}
.game-final-score strong{font:500 60px/1 var(--display);letter-spacing:-.04em}
.hm-summary{font-size:14px;line-height:1.65;max-width:42ch;margin:8px 0 22px}
.result-saved{font-size:12px;color:var(--muted);margin:8px 0 0}
.hv-review-toggle{margin-top:12px}






.hv-details{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--play-border);border-radius:7px;background:var(--bg);color:var(--fg);overflow:visible}
.hv-details::backdrop,.attempts-dialog::backdrop{background:oklch(20% .018 70 / .45)}
.hv-panel{max-height:calc(100dvh - 26px);display:flex;flex-direction:column}
.hv-panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.hv-panel-header h2{font:500 24px/1.3 var(--display);margin:0}
.hv-panel-scroll{padding:20px;overflow:auto;min-height:0;font-size:14px;line-height:1.65}
.hv-panel-scroll ul{padding-left:20px;margin:0}
.hv-panel-scroll li+li{margin-top:10px}
.hm-vocabulary{padding:0;border:0;margin:0}
.hm-vocabulary h2{display:none}
.hm-vocabulary ul{list-style:none;padding:0}
.hm-vocabulary li{grid-template-columns:150px minmax(0,1fr);gap:20px}
.hm-review{padding:0!important;list-style:none}
.attempts-dialog{border-radius:7px;border-color:var(--play-border)}
.attempts-close{border-radius:4px}
.game-score-rules{display:grid;grid-template-columns:1fr 1fr;gap:18px;border-block:1px solid var(--border);padding:18px 0;margin-bottom:16px}
.game-score-rules p{margin:0}
.game-score-rules strong{display:block;font:500 32px/1.4 var(--display)}
.game-score-example{font-size:13px}
.inline-warning{font-size:13px;color:var(--error);padding:10px 0;margin:0}
@media(min-width:701px) and (max-width:1000px){.hangman-panel-main{padding-inline:28px}.hm-shell{padding-inline:24px}.hm-ready{gap:26px;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}.masthead-note{max-width:280px}.hm-board{padding-inline:20px}}
@media(max-width:700px){





 .site-header.wrap{padding-inline:20px}
 .masthead{padding:15px 0;min-height:72px;gap:10px}
 .masthead .brand{min-width:0;flex-shrink:1}
 .masthead .brand img{width:254px;max-width:100%;height:auto}
 .masthead-note{display:none}
 .menu-toggle{display:flex;width:44px;height:44px;min-width:44px;padding:12px}
 .main-nav{display:none;padding:8px 0 12px;flex-direction:column;align-items:stretch;gap:0}
 .main-nav.open{display:flex}
 .main-nav a{font-size:14px;min-height:44px}
 .hangman-panel-main{padding:14px 8px 20px;max-width:600px}
 .page-intro{margin:0 8px 17px;display:block}
 .page-intro h1{font-size:25px;margin-bottom:6px;letter-spacing:-.035em}
 .page-intro p{font-size:12px;line-height:1.5}
 .page-intro .intro-index{display:none}
 .hm-shell{padding:12px 12px 0;border-radius:7px}
 [data-hangman-app],[data-hangman-app][data-state=ready],[data-hangman-app][data-state=vocabulary-preparation]{min-height:0}
 .game-status{padding-bottom:10px;min-height:54px;gap:6px;align-items:center}
 .game-status p{display:block;font-size:12px}
 .game-topic,.game-progress{display:block}
 .game-progress{font-size:11px;margin-top:3px}
 .game-score{font-size:11px;padding:8px 5px;gap:6px}
 .game-score strong{font-size:20px}
 .game-info-symbol{width:14px;height:14px;font-size:9px}
 .game-status-actions{gap:0}
 .hm-board{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:12px 0 16px;min-height:144px;align-items:center}
 .hm-drawing{width:72px;height:81px}
 .hm-word-area{gap:12px}
 .hm-word-label{font-size:10px}
 .hm-word{gap:3px;width:min(100%,calc(var(--word-count)*31px))}
 .hm-letter{height:38px;font-size:clamp(13px,calc(100cqi / var(--word-count)*.74),23px)}
 .hm-mistakes{font-size:11px;gap:6px;line-height:1.5}
 .mistake-dots{gap:4px}
 .mistake-dots i{width:5px;height:5px}
 .hm-board[data-long-word=true]{grid-template-columns:1fr 1fr;gap:8px;padding-top:10px}
 .hm-board[data-long-word=true] .hm-drawing{grid-column:1;width:62px;height:70px;justify-self:start;margin-left:14px}
 .hm-board[data-long-word=true] .hm-word-area{display:contents}
 .hm-board[data-long-word=true] .hm-mistakes{grid-column:2;grid-row:1;flex-direction:column;gap:6px;order:0}
 .hm-board[data-long-word=true] .hm-word{grid-column:1/-1;width:100%}
 .hm-board[data-long-word=true] .hm-word-label{grid-column:1/-1}
 .hm-turn-controls{padding-bottom:15px;min-height:246px}
 .hm-keyboard legend{font-size:12px;margin-bottom:10px}
 .hm-keys{grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
 .hm-key{height:46px;min-height:44px;font-size:15px;border-radius:3px;gap:2px}
 .hm-key:nth-child(19){grid-column:span 2}
 .hm-key:nth-child(15),.hm-key:nth-child(21){grid-column:2/span 2}
 .hm-key::after{font-size:8px}
 .hm-key-hint{font-size:10px;margin-top:11px;line-height:1.5}
 .desktop-key-hint{display:none}
 .game-help{gap:6px;padding:6px 0;flex-wrap:wrap;justify-content:flex-start}
 .game-help .help-links{gap:12px}
 .game-help .text-button{font-size:10px}
 .help-note{display:none}
 .text-button{font-size:12px}
 .button{min-height:48px;font-size:13px;padding:12px 16px}
 .hm-ready{display:block;padding:8px 0 18px;min-height:0}
 .game-identity{margin-bottom:20px}
 .hv-ready-title{font-size:26px;max-width:none;margin-bottom:10px}
 .hv-ready-lead{font-size:12px;line-height:1.6;max-width:44ch}
 .ready-illustration{display:none}
 .topic-options{gap:5px}
 .topic-option{min-height:46px;padding:8px 9px;font-size:12px}
 .hm-field{font-size:12px}
 .hm-topic-note{font-size:11px;margin:12px 0}
 .game-actions{gap:10px 20px}
 .hm-actions .button{width:auto}
 .game-setup .button{flex:1}
 .game-feedback-head{gap:8px;margin-bottom:12px}
 .game-feedback-head h2{font-size:12px}
 .game-round-points{font-size:11px}
 .hm-answer{font-size:25px}
 .hm-meaning{font-size:14px}
 .hm-example p[lang=en]{font-size:15px}
 .hm-turn-controls>.game-actions{margin-top:20px}
 .hm-turn-controls>.game-actions .button{width:100%}
 .feedback-meta{font-size:11px}
 .hm-complete{min-height:350px;padding:30px 0}
 .hm-complete h2{font-size:29px}
 .hm-summary{font-size:13px}
 .game-final-score strong{font-size:54px}




 .hm-vocabulary li{grid-template-columns:1fr;gap:4px}
 .hv-panel-header{padding:12px 14px}
 .hv-panel-header h2{font-size:21px}
 .hv-panel-scroll{padding:16px}
}
@media(max-width:359px){
 .site-header.wrap{padding-inline:14px}
 .masthead .brand img{width:228px}
 .page-intro h1{font-size:23px}
 .hm-shell{padding-inline:6px}
 .hm-board{gap:8px;grid-template-columns:62px minmax(0,1fr)}
 .hm-drawing{width:62px;height:70px}
 .hm-mistakes{gap:5px}
 .hm-keys{grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
 .hm-key:nth-child(15),.hm-key:nth-child(21){grid-column:span 2}
 .hm-key:nth-child(7),.hm-key:nth-child(12),.hm-key:nth-child(17),.hm-key:nth-child(22){grid-column:2/span 2}
 .hm-turn-controls{min-height:294px}
 .game-help .text-button{font-size:10px}
 .game-help .help-links{gap:10px}
 .hv-ready-title{font-size:24px}
 .topic-option{font-size:11px}
}
@media(min-width:600px) and (max-height:500px) and (orientation:landscape){



 .masthead{min-height:56px;padding-block:6px}.masthead .brand img{width:220px}.masthead-note{display:none}
 .site-header .main-nav{display:none}.site-header .main-nav.open{display:flex}.menu-toggle{display:flex}
 .hangman-panel-main{max-width:1000px;padding:10px 16px 20px}
 .page-intro{margin:0 0 12px}.page-intro h1{font-size:24px;margin:0}.page-intro>div>p,.intro-index{display:none}
 .hm-shell{padding:10px 16px 0}
 [data-hangman-app]:is([data-state=playing],[data-state=won],[data-state=lost]){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:12px 20px;min-height:0}
 .game-status{grid-column:1/-1;padding-bottom:6px;min-height:44px}.game-status p{font-size:12px}
 .game-progress{font-size:11px}.game-status-actions .text-button{font-size:11px}
 .hm-board{display:flex;flex-direction:column;padding:0 0 12px;gap:8px;min-height:0;justify-content:center}
 .hm-board .hm-drawing{width:66px;height:74px}
 .hm-word-area{display:flex;flex-direction:column;gap:8px;width:100%}
 .hm-mistakes{font-size:11px;gap:6px}.hm-word-label{font-size:10px}
 .hm-word{gap:3px;width:min(100%,calc(var(--word-count)*30px))}.hm-letter{height:32px;font-size:clamp(13px,calc(100cqi / var(--word-count)*.7),22px)}
 .hm-turn-controls{width:100%;min-height:0;padding-bottom:12px}
 .hm-keys{grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
 .hm-key{height:44px;font-size:14px}
 .hm-key:nth-child(19){grid-column:span 2}
 .hm-key:nth-child(15),.hm-key:nth-child(21){grid-column:2/span 2}
 .hm-keyboard legend{font-size:11px;margin-bottom:8px}
 .hm-key-hint{font-size:10px;margin-top:8px}.desktop-key-hint{display:none}
 .hm-board[data-long-word=true]{display:flex}.hm-board[data-long-word=true] .hm-word-area{display:flex}.hm-board[data-long-word=true] .hm-drawing{margin:0}.hm-board[data-long-word=true] .hm-mistakes{flex-direction:row;order:-1}
 .hm-ready{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:25px;min-height:0;padding:12px 0 22px}
 .hv-ready-title{font-size:27px}.hv-ready-lead{font-size:12px}.ready-illustration{display:none}
 .topic-option{font-size:11px;min-height:44px}.hm-topic-note{font-size:11px}
 .hm-complete{min-height:300px;padding:22px 0}.game-help{padding:3px 0}.game-help .text-button{font-size:11px}.help-note{display:none}
 .hm-feedback{padding:0}.game-feedback-head h2{font-size:12px}.hm-answer{font-size:24px}.hm-meaning{font-size:13px}.hm-example p[lang=en]{font-size:14px}.hm-turn-controls>.game-actions{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

@media(min-width:600px) and (max-width:639px) and (max-height:500px) and (orientation:landscape){
 .hm-keys{grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
 .hm-key:nth-child(15),.hm-key:nth-child(21){grid-column:span 2}
 .hm-key:nth-child(7),.hm-key:nth-child(12),.hm-key:nth-child(17),.hm-key:nth-child(22){grid-column:2/span 2}
}

@media(min-width:600px) and (max-height:500px) and (orientation:landscape){
 .hm-board[data-long-word=true]{grid-column:1/-1;display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:center}
 .hm-board[data-long-word=true] .hm-word-area{display:flex;min-width:0}
 .hm-board[data-long-word=true]+.hm-turn-controls{grid-column:1/-1;max-width:748px}
}

/* Keep the approved 44px letter targets with classic browser scrollbars as well. */
@media(max-width:389px){
 .hm-keys{grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
 .hm-key:nth-child(15),.hm-key:nth-child(21){grid-column:span 2}
 .hm-key:nth-child(7),.hm-key:nth-child(12),.hm-key:nth-child(17),.hm-key:nth-child(22){grid-column:2/span 2}
}
@media(max-width:319px){
 .hm-keys{grid-template-columns:repeat(10,minmax(0,1fr))}
 .hm-key:nth-child(n){grid-column:span 2}
 .hm-key:nth-child(26){grid-column:5/span 2}
}