/* ==========================================================================
   Éléments communs aux espaces élève et enseignant : en-tête du site,
   écrans de connexion, pages d'accueil. Même identité que la page d'accueil.
   ========================================================================== */
:root{ --serif:'Source Serif 4',Georgia,serif; --sh-gutter:clamp(20px,4.5vw,96px); }

/* En-tête identique sur toutes les pages */
.siteHead{background:linear-gradient(135deg,#12284c 0%,#0a1730 100%);border-bottom:3px solid #c5a059;position:relative;z-index:30;box-shadow:0 6px 22px -14px rgba(5,12,28,.7);}
.shIn{max-width:1680px;margin:0 auto;padding:0 var(--sh-gutter);height:78px;display:flex;align-items:center;gap:20px;}
.shBrand{display:flex;align-items:center;gap:16px;text-decoration:none;line-height:1.15;flex:none;}
.shBrand img{height:52px;width:auto;display:block;}
.shBrand span{font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#c9d3e6;border-left:1px solid rgba(255,255,255,.22);padding-left:16px;}
.shBrand b{font-family:var(--serif);font-size:1.3rem;color:#fff;font-weight:700;}
.shCtx{flex:none;font-size:.8rem;font-weight:700;color:#1d1503;background:#c5a059;border-radius:999px;padding:5px 12px;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shNav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.hBtn{appearance:none;font-family:inherit;font-weight:600;font-size:.88rem;color:#fff;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.22);border-radius:9px;padding:8px 14px;cursor:pointer;white-space:nowrap;text-decoration:none;}
.hBtn:hover{border-color:#e7c583;background:rgba(255,255,255,.13);}
.hBtn.primary{background:#c5a059;border-color:#c5a059;color:#1d1503;}
.hBtn.quiet{background:transparent;border-color:transparent;color:#c9d3e6;}
.hBtn.quiet:hover{color:#fff;border-color:rgba(255,255,255,.22);}
.hBtn:focus-visible,.tile:focus-visible,.homeTile:focus-visible{outline:3px solid #c5a059;outline-offset:2px;}
@media (max-width:900px){ .shIn{height:auto;padding-block:12px;flex-wrap:wrap;} .shBrand{flex:1 1 auto;} .shBrand img{height:42px;} .shNav{order:3;width:100%;justify-content:flex-start;margin-left:0;} }
@media (max-width:1440px){ .shBrand span{display:none;} .shNav{gap:6px;} .hBtn{padding:7px 11px;font-size:.85rem;} }

/* Écran de connexion en deux panneaux */
.authSplit{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:clamp(12px,4vw,48px) auto 0;background:#fff;border:1px solid #e3e7ef;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(10,23,48,.45);}
.authAside{background:radial-gradient(700px 300px at 100% 0%,#1d3d6e 0%,rgba(29,61,110,0) 70%),linear-gradient(160deg,#12284c,#0a1730);color:#c9d3e6;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;}
.authAside h2{font-family:var(--serif);color:#fff;font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15;margin:0 0 14px;}
.authAside p{margin:0;line-height:1.6;}
.authAside ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:.93rem;}
.authAside li{display:grid;grid-template-columns:22px 1fr;gap:10px;}
.authAside li i{width:20px;height:20px;border-radius:50%;background:rgba(197,160,89,.22);color:#e7c583;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.72rem;margin-top:2px;}
.authMain{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;}
.authMain h1{font-family:var(--serif);font-weight:600;color:#12284c;font-size:clamp(1.6rem,2.4vw,2rem);margin:0 0 8px;}
.authMain .sub{color:#5b667e;margin:0 0 24px;}
@media (max-width:820px){ .authSplit{grid-template-columns:1fr;} .authAside{order:2;} }

/* Accueil des espaces */
.homeHero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:clamp(8px,2vw,20px) 0 clamp(20px,3vw,32px);border-bottom:1px solid #e3e7ef;margin-bottom:clamp(20px,3vw,32px);}
.homeHero h1{font-family:var(--serif);font-weight:600;color:#12284c;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;margin:0;}
.homeHero .kick{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a06a06;margin-bottom:10px;}
.homeHero p{color:#5b667e;margin:8px 0 0;font-size:1.02rem;}
.homeHero .heroActions{display:flex;gap:10px;flex-wrap:wrap;}
.bigBtn{appearance:none;border:none;font-family:inherit;font-weight:700;font-size:1rem;padding:15px 24px;border-radius:12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;}
.bigBtn.gold{background:#c5a059;color:#fff;}
.bigBtn.gold:hover{background:#b48d49;}
.bigBtn.line{background:#fff;color:#12284c;border:1.5px solid #cfd6e3;}
.bigBtn.line:hover{border-color:#12284c;}
.kpiRow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #e3e7ef;border-radius:16px;background:#fff;overflow:hidden;margin-bottom:clamp(20px,3vw,32px);}
.kpiRow > div{padding:18px 22px;border-right:1px solid #e3e7ef;}
.kpiRow > div:last-child{border-right:none;}
.kpiRow .l{font-size:.82rem;color:#5b667e;font-weight:600;}
.kpiRow .v{font-family:var(--serif);font-size:2rem;color:#12284c;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;}
.kpiRow .s{font-size:.8rem;color:#8a93a6;}
.homeCols{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;}
.homeCols > *{min-width:0;}
#homeRecent,#homeRecentEvals{overflow-x:auto;}
.panel{background:#fff;border:1px solid #e3e7ef;border-radius:16px;padding:clamp(18px,2vw,26px);}
.panel h2{font-family:var(--serif);font-weight:600;color:#12284c;font-size:1.3rem;margin:0 0 4px;}
.panel .ps{color:#5b667e;font-size:.88rem;margin:0 0 14px;}
.recent{width:100%;border-collapse:collapse;font-size:.92rem;}
.recent th{text-align:left;font-size:.78rem;color:#5b667e;font-weight:600;padding:8px 10px;border-bottom:1.5px solid #12284c;text-transform:none;letter-spacing:0;background:none;}
.recent td{padding:12px 10px;border-bottom:1px solid #eef1f6;font-variant-numeric:tabular-nums;}
.recent tr.go{cursor:pointer;}
.recent tr.go:hover td{background:#f7f9fc;}
.recent .nm{font-weight:700;color:#12284c;}
.stPub{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;}
.stPub i{width:8px;height:8px;border-radius:50%;}
.tiles{display:grid;gap:10px;}
.tile{appearance:none;width:100%;text-align:left;font-family:inherit;display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid #e3e7ef;border-radius:14px;padding:14px 16px;cursor:pointer;color:inherit;text-decoration:none;}
.tile:hover{border-color:#12284c;}
.tile .ti{width:44px;height:44px;border-radius:12px;background:#eef1f7;display:grid;place-items:center;font-size:1.2rem;}
.tile b{display:block;color:#12284c;font-size:.98rem;}
.tile span{color:#5b667e;font-size:.84rem;}
.tile .ar{color:#8a93a6;font-size:1.1rem;}
.emptyNote{color:#5b667e;font-size:.92rem;padding:18px 4px;}
@media (max-width:600px){ .recent .hideSm{display:none;} .recent td,.recent th{padding-inline:6px;} }
@media (max-width:980px){ .homeCols{grid-template-columns:1fr;} .kpiRow{grid-template-columns:1fr 1fr;} .kpiRow > div:nth-child(2){border-right:none;} .kpiRow > div:nth-child(-n+2){border-bottom:1px solid #e3e7ef;} }

/* Accueil élève : deux grandes entrées */
.studentEntries{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(14px,2vw,24px);margin-bottom:clamp(20px,3vw,32px);}
.entry{appearance:none;font-family:inherit;text-align:left;cursor:pointer;border-radius:20px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:10px;min-height:210px;justify-content:space-between;border:1px solid #e3e7ef;background:#fff;color:#1d2434;}
.entry h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.2vw,1.9rem);margin:0;color:#12284c;}
.entry p{margin:0;color:#5b667e;max-width:40ch;line-height:1.6;font-size:.97rem;}
.entry .go{font-weight:700;color:#12284c;}
.entry.primary{background:radial-gradient(600px 260px at 100% 0%,#1d3d6e 0%,rgba(29,61,110,0) 70%),linear-gradient(160deg,#12284c,#0a1730);border:none;}
.entry.primary h2{color:#fff;}
.entry.primary p{color:#c9d3e6;}
.entry.primary .go{color:#e7c583;}
.entry:hover{box-shadow:0 20px 50px -30px rgba(10,23,48,.5);}
.entry:focus-visible{outline:3px solid #c5a059;outline-offset:3px;}
@media (max-width:820px){ .studentEntries{grid-template-columns:1fr;} }

/* ==========================================================================
   Couleurs des pages d'accueil (v3)
   ========================================================================== */
.homeHero.dark{position:relative;overflow:hidden;border:none;border-radius:22px;padding:clamp(26px,3.4vw,44px) clamp(22px,3.4vw,44px);
  background:radial-gradient(520px 260px at 92% 10%,rgba(197,160,89,.38) 0%,rgba(197,160,89,0) 70%),
             radial-gradient(700px 360px at 10% 120%,rgba(47,111,158,.55) 0%,rgba(47,111,158,0) 70%),
             linear-gradient(135deg,#12284c 0%,#0a1730 100%);
  box-shadow:0 30px 60px -38px rgba(10,23,48,.7);}
.homeHero.dark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 100%);mask-image:linear-gradient(90deg,transparent 35%,#000 100%);}
.homeHero.dark > *{position:relative;z-index:1;}
.homeHero.dark h1{color:#fff;}
.homeHero.dark p{color:#c9d3e6;}
.homeHero.dark .kick,.homeHero.dark .eyebrow{color:#e7c583;}
.homeHero.dark .bigBtn.line{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);}
.homeHero.dark .bigBtn.line:hover{border-color:#e7c583;color:#e7c583;}
.homeHero.dark .bigBtn.gold{background:linear-gradient(135deg,#e7c583,#c5a059);color:#241a08;box-shadow:0 10px 24px -12px rgba(197,160,89,.9);}
.homeHero.dark .bigBtn.gold:hover{filter:brightness(1.05);}

/* Indicateurs colorés */
.kpiRow.color{border:none;background:none;gap:clamp(12px,1.6vw,20px);overflow:visible;}
.kpiRow.color > div{position:relative;border:none;border-radius:16px;padding:20px 22px 18px;background:#fff;box-shadow:0 1px 0 #e3e7ef,0 14px 30px -26px rgba(10,23,48,.5);overflow:hidden;}
.kpiRow.color > div::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--k);}
.kpiRow.color > div::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--k);opacity:.08;}
.kpiRow.color .v{color:var(--kd,#12284c);}
.kpiRow.color .ki{float:right;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.05rem;background:var(--kb);color:var(--k);position:relative;z-index:1;}
.k-blue{--k:#2f6f9e;--kb:#e6f0f8;--kd:#1f4f75;}
.k-green{--k:#2f7d5b;--kb:#e3f3ea;--kd:#22604a;}
.k-gold{--k:#c5a059;--kb:#f6eedd;--kd:#8a6420;}
.k-red{--k:#c2463f;--kb:#fbe9e7;--kd:#9b342f;}
.k-violet{--k:#6b5bb5;--kb:#eeebf9;--kd:#4d3f93;}
@media (max-width:980px){ .kpiRow.color > div{border:none !important;} }

/* Raccourcis colorés */
.tile{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;border-left:4px solid var(--k,#dfe4ee);}
.tile:hover{transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(10,23,48,.55);border-color:var(--k,#12284c);}
.tile .ti{background:var(--kb,#eef1f7);color:var(--k,#12284c);}
.tile:hover .ar{color:var(--k,#12284c);}

/* Panneau des évaluations récentes */
.panel.accent{border-top:4px solid #12284c;}
.recent tr.go:hover td{background:#f3f7fc;}
.noteChip{display:inline-block;min-width:54px;text-align:center;font-weight:800;font-size:.86rem;padding:4px 10px;border-radius:999px;color:#fff;background:var(--b);font-variant-numeric:tabular-nums;}
.noteChip.light{color:#3a2a05;}
.meanBar{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.meanBar .track{width:70px;height:6px;border-radius:99px;background:#eef1f6;overflow:hidden;}
.meanBar .track i{display:block;height:100%;border-radius:99px;background:var(--b);}
@media (max-width:600px){ .meanBar .track{display:none;} }
.stPub{padding:3px 10px;border-radius:999px;}
.stPub.ok{background:#e3f3ea;color:#22604a;}
.stPub.wait{background:#fbf1dc;color:#8a5a00;}
.stPub.soon{background:#eef1f6;color:#5b667e;}
.stPub i{background:currentColor !important;}

/* Accueil élève : entrées colorées */
.entry{position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;}
.entry:hover{transform:translateY(-3px);}
.entry .eIcon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px;}
.entry.primary{background:radial-gradient(420px 220px at 100% 0%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%),linear-gradient(135deg,#ecd29b 0%,#c5a059 100%);border:none;box-shadow:0 22px 44px -28px rgba(160,106,6,.8);}
.entry.primary h2{color:#2a1d05;}
.entry.primary p{color:#4a3a17;}
.entry.primary .go{color:#12284c;}
.entry.primary .eIcon{background:rgba(255,255,255,.55);color:#7a5a1e;}
.entry.blue{background:radial-gradient(420px 220px at 100% 0%,#d9e8f6 0%,rgba(217,232,246,0) 70%),#fff;border:1px solid #d6e3f1;}
.entry.blue .eIcon{background:#e6f0f8;color:#2f6f9e;}
.entry.blue .go{color:#2f6f9e;}
.entry::after{content:"";position:absolute;right:-95px;bottom:-125px;width:200px;height:200px;border-radius:50%;border:26px solid currentColor;opacity:.06;}
.entry.primary::after{color:#fff;opacity:.25;}
.entry.blue::after{color:#2f6f9e;}
/* Espace élève : illustration « élève qui révise » dans le panneau de connexion */
.authAside.withArt{position:relative;overflow:hidden;gap:0;}
.authArt{flex:1 1 auto;min-height:300px;margin:18px calc(-1 * clamp(28px,4vw,52px)) 18px;
  background:linear-gradient(180deg,#12284c 0%,rgba(18,40,76,0) 22%,rgba(10,23,48,0) 80%,#0b1832 100%),url(eleve-revision.jpg) 40% 58%/cover no-repeat;}
@media (max-width:820px){ .authArt{min-height:240px;} }

/* ==========================================================================
   Espace élève (v4) : bandeau avec établissement, cartes d'entrée premium
   ========================================================================== */
.homeHero.dark.school{min-height:200px;}
.homeHero.dark.school::after{display:none;}
.homeHero.dark.school::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url(etablissement.svg) right -10px bottom -4px/auto 112% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.55) 45%,#000 70%);mask-image:linear-gradient(90deg,transparent 22%,rgba(0,0,0,.55) 45%,#000 70%);}
@media (max-width:700px){ .homeHero.dark.school::before{opacity:.45;background-size:auto 90%;} }

/* Carte « Évaluation du jour » : bleu nuit profond, filets et accents or */
.entry.primary{background:
    radial-gradient(520px 260px at 105% -10%,rgba(231,197,131,.30) 0%,rgba(231,197,131,0) 60%),
    radial-gradient(420px 260px at -10% 120%,rgba(47,111,158,.45) 0%,rgba(47,111,158,0) 65%),
    linear-gradient(150deg,#1b3a6b 0%,#12284c 48%,#0a1730 100%);
  border:1px solid rgba(231,197,131,.35);box-shadow:0 28px 56px -30px rgba(10,23,48,.75),inset 0 1px 0 rgba(255,255,255,.08);}
.entry.primary h2{color:#fff;}
.entry.primary p{color:#c9d3e6;}
.entry.primary .eIcon{background:linear-gradient(135deg,#f3d99d,#c5a059);color:#2a1d05;box-shadow:0 10px 22px -10px rgba(197,160,89,.9);}
.entry.primary .go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;
  background:linear-gradient(135deg,#f0d394,#c5a059);color:#241a08;box-shadow:0 12px 26px -14px rgba(197,160,89,.95);}
.entry.primary::after{color:#e7c583;opacity:.18;}
.entry.primary:hover{box-shadow:0 34px 64px -30px rgba(10,23,48,.85),inset 0 1px 0 rgba(255,255,255,.1);}

/* Carte « Mes notes » : ivoire satiné, liseré or, typographie marine */
.entry.blue{background:
    radial-gradient(460px 240px at 105% -10%,rgba(197,160,89,.20) 0%,rgba(197,160,89,0) 62%),
    linear-gradient(160deg,#fffdf8 0%,#f7f1e4 100%);
  border:1px solid #e8dcc2;box-shadow:0 24px 48px -32px rgba(122,90,30,.55),inset 0 1px 0 #fff;}
.entry.blue::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#c5a059,#e7c583,#c5a059);}
.entry.blue h2{color:#12284c;}
.entry.blue p{color:#5b5444;}
.entry.blue .eIcon{background:linear-gradient(135deg,#1b3a6b,#12284c);color:#e7c583;box-shadow:0 10px 22px -12px rgba(10,23,48,.7);}
.entry.blue .go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:10px 19px;border-radius:999px;
  border:1.5px solid #12284c;color:#12284c;background:transparent;}
.entry.blue:hover .go{background:#12284c;color:#fff;}
.entry.blue::after{color:#c5a059;opacity:.14;}
/* Espace enseignant : établissement en fond du panneau de connexion */
.authArt.school{background:linear-gradient(180deg,#12284c 0%,rgba(18,40,76,0) 18%,rgba(10,23,48,0) 82%,#0b1832 100%),
  radial-gradient(60% 55% at 50% 85%,rgba(231,197,131,.16) 0%,rgba(231,197,131,0) 70%),
  url(etablissement.svg) center bottom/94% auto no-repeat;min-height:230px;}

/* ==========================================================================
   Clavier mathématique (réponses libres)
   ========================================================================== */
.mkActive{border-color:#12284c !important;box-shadow:0 0 0 3px rgba(18,40,76,.12);}
.mkPreview{display:none;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0;padding:8px 12px;border-radius:10px;background:#f3f6fc;border:1px dashed #c8d4ea;font-size:1.05rem;color:#12284c;min-height:24px;}
.mkPreview.show{display:flex;}
.mkLbl{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7a869c;}
.mk{margin-top:16px;border-radius:18px;padding:12px 12px 14px;color:#fff;user-select:none;-webkit-user-select:none;
  background:radial-gradient(420px 160px at 100% 0%,rgba(231,197,131,.18) 0%,rgba(231,197,131,0) 70%),linear-gradient(160deg,#1b3a6b 0%,#12284c 55%,#0a1730 100%);
  border:1px solid rgba(231,197,131,.35);box-shadow:0 22px 44px -28px rgba(10,23,48,.85),inset 0 1px 0 rgba(255,255,255,.08);}
.mkHead{display:flex;justify-content:space-between;align-items:center;padding:0 4px 10px;}
.mkTitle{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#e7c583;}
.mkDot{width:7px;height:7px;border-radius:50%;background:#e7c583;box-shadow:0 0 0 3px rgba(231,197,131,.2);}
.mkToggle{appearance:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#c9d3e6;font:inherit;font-size:.74rem;font-weight:700;border-radius:999px;padding:4px 11px;cursor:pointer;}
.mk.collapsed .mkBody{display:none;}
.mk.collapsed .mkHead{padding-bottom:0;}
.mkBody{display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"fn num" "nav nav";gap:10px;}
.mkFn{grid-area:fn;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.mkNum{grid-area:num;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.mkNav{grid-area:nav;display:grid;grid-template-columns:1fr 1fr 2fr;gap:7px;}
.mkKey{appearance:none;border:none;cursor:pointer;font-family:inherit;min-height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.08rem;font-weight:700;
  transition:transform .06s ease,filter .12s ease,box-shadow .12s ease;-webkit-tap-highlight-color:transparent;}
.mkKey:active{transform:translateY(1px) scale(.98);}
.mkKey:focus-visible{outline:3px solid #e7c583;outline-offset:2px;}
.mkKey.fn{background:linear-gradient(180deg,#ffffff,#e9eef7);color:#12284c;box-shadow:0 3px 0 #b9c4d8,0 6px 14px -8px rgba(0,0,0,.6);}
.mkKey.fn:hover{filter:brightness(1.03);}
.mkKey.num{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 3px 0 rgba(0,0,0,.35);}
.mkKey.num:hover{background:rgba(255,255,255,.2);}
.mkKey.ctl{background:linear-gradient(180deg,#f0d394,#c5a059);color:#241a08;box-shadow:0 3px 0 #8a6a2c,0 6px 14px -8px rgba(0,0,0,.6);font-size:.95rem;}
.mkKey.wide{font-size:.86rem;}
.mkKey sup{font-size:.62em;margin-left:1px;}
.mkKey em{font-family:var(--serif,Georgia,serif);font-style:italic;font-size:1.2rem;}
.mkKey small{color:#9aa6bd;}
.mkBox{display:inline-block;width:.62em;height:.72em;border:1.6px solid currentColor;border-radius:2px;opacity:.75;vertical-align:middle;}
sup .mkBox{width:.62em;height:.66em;border-width:1.5px;margin-left:1px;}
.mkFrac{display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1;}
.mkFrac b{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;}
.mkFrac .mkBox{width:.56em;height:.5em;}
@media (max-width:640px){
  .mkBody{grid-template-columns:1fr;grid-template-areas:"fn" "num" "nav";}
  .mkKey{min-height:44px;}
}