/* Shared coastal world and playful shell; chart and categories are visible
   immediately, with secondary details in an accessible native dialog. */
body.proof-playful{
  --app-paper:#fff9e9;
  --app-surface:#fffdf5;
  --app-ground:transparent;
  --app-ink:#214b40;
  --app-muted:#576d61;
  --app-rim:#ddd5bf;
  --app-sea:#2f6f4e;
  --app-deep:#205443;
  --app-soft:#e4eed9;
  --app-edge:#c9bea2;
  --app-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --app-jp:var(--app-font);
  --proof-heading:'Baloo 2','Hiragino Maru Gothic ProN',var(--app-font);
  --proof-safe-top:env(safe-area-inset-top,0px);
  --proof-safe-right:env(safe-area-inset-right,0px);
  --proof-safe-bottom:env(safe-area-inset-bottom,0px);
  --proof-safe-left:env(safe-area-inset-left,0px);
  position:relative;
  height:auto;
  min-height:100svh;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--sea-fallback-4,#1b6e96);
  color:var(--app-ink);
  font-family:var(--app-font);
}

body.proof-playful.dw-has-shell{padding-top:0}
body.proof-playful.dw-has-nav{padding-bottom:calc(110px + var(--proof-safe-bottom))}
body.proof-playful.lang-jp [data-jp]{font-family:var(--app-font)}

/* A light header, with the same object mark and cream language control as home. */
body.proof-playful .dw-hd{
  position:relative;
  inset:auto;
  width:100%;
  max-width:1000px;
  height:auto;
  min-height:76px;
  margin:0 auto;
  padding:calc(14px + var(--proof-safe-top)) 124px 10px max(20px,var(--proof-safe-left));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:5px;
  background:transparent!important;
  border:0;
  box-shadow:none;
  z-index:10;
}
body.proof-playful .dw-hd .dw-logo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  font:800 20px/1.2 var(--proof-heading);
  letter-spacing:.08em;
  color:var(--sky-ink,var(--app-ink))!important;
  text-shadow:var(--sky-shadow,none);
}
body.proof-playful .dw-brand{display:inline-flex;align-items:center;gap:9px;min-width:0}
body.proof-playful .dw-brand-object{
  display:block;
  width:40px;
  height:40px;
  flex:none;
  object-fit:contain;
  border:2px solid var(--app-paper);
  border-radius:15px;
  background:var(--app-paper);
  box-shadow:0 3px 0 var(--app-edge);
}
body.proof-playful .dw-hd .dw-pill{
  grid-column:1/-1;
  justify-self:start;
  max-width:100%;
  min-height:26px;
  margin:0 0 0 49px;
  padding:3px 9px;
  gap:6px;
  border:1px solid var(--app-rim);
  border-radius:11px;
  background:var(--app-paper);
  box-shadow:inset 0 1px 0 #fffdf5,0 2px 0 #ded5bd;
  color:var(--app-muted);
  font:600 11px/1.5 var(--app-font);
}
body.proof-playful .dw-hd .dw-pill .seg{padding:0;border:0;background:none;box-shadow:none;min-height:0}
body.proof-playful #drewLangToggle{
  position:absolute;
  top:calc(16px + var(--proof-safe-top));
  right:max(20px,var(--proof-safe-right));
  min-height:44px;
  padding:8px 11px;
  border:1px solid var(--app-rim);
  border-radius:16px;
  background:linear-gradient(#fffdf5,#f5e9cf);
  color:var(--app-deep);
  box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--app-edge);
  font:700 13px/1.2 var(--app-font);
  z-index:20;
  transition:transform 150ms ease,box-shadow 150ms ease;
}
body.proof-playful #drewLangToggle:active{transform:translateY(3px);box-shadow:inset 0 1px 1px #214b4020,0 1px 0 var(--app-edge)}

/* The existing dock keeps its destinations and due counter. */
body.proof-playful .dw-nav{
  position:fixed;
  left:8px;
  right:8px;
  top:auto;
  bottom:0;
  width:auto;
  transform:none;
  display:flex;
  flex-direction:row;
  gap:2px;
  margin:0;
  padding:5px max(4px,var(--proof-safe-right)) calc(8px + var(--proof-safe-bottom)) max(4px,var(--proof-safe-left));
  border:1px solid var(--app-rim);
  border-bottom:0;
  border-radius:25px 25px 0 0;
  background:linear-gradient(#fffdf5,#f9f1df);
  box-shadow:inset 0 2px 0 #fff,0 -3px 18px #123b4f15;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:30;
}
body.proof-playful .dw-nav a{
  flex:1 1 0%;
  min-width:44px;
  min-height:64px;
  padding:4px 0 3px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:17px;
  color:var(--app-muted);
  opacity:1;
  font:500 11px/1.4 var(--app-font);
  transition:transform 140ms ease,background 140ms ease;
}
body.proof-playful .dw-nav a:last-child{flex-grow:1.25}
body.proof-playful .dw-nav a.on{background:var(--app-soft);box-shadow:inset 0 1px 0 #fff,0 2px 0 #baccb1;color:var(--app-deep);font-weight:800}
body.proof-playful .dw-nav a:active{transform:translateY(2px)}
body.proof-playful .dw-nav a [data-jp]{font:inherit;letter-spacing:normal;white-space:normal;overflow-wrap:normal;word-break:normal}
body.proof-playful .dw-nav .dw-ic{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:none}
body.proof-playful .dw-nav-object{display:block;width:36px;height:36px;object-fit:contain;flex:none}
body.proof-playful .dw-nav-object + svg{display:none}
body.proof-playful .dw-nav .dw-badge{top:0;right:-7px;background:var(--app-sea);border:1px solid var(--app-paper);font:700 10px/1.3 var(--app-font);min-width:17px;height:17px}
body.proof-playful .dw-ft{position:relative;z-index:1;max-width:900px;margin:24px auto 0;padding:0 20px 10px;gap:4px 8px;color:#fff9e9;text-shadow:0 2px 8px #062838b3,0 1px 2px #06283899;opacity:1;font:500 11px/1.6 var(--app-font)}
body.proof-playful .dw-ft a{display:inline-flex;align-items:center;min-height:44px;padding:4px 5px}
body.proof-playful .dw-ft .sep{align-self:center;opacity:.45}
body.proof-playful :is(.dw-nav a,#drewLangToggle,.dw-ft a):focus-visible{outline:3px solid var(--app-deep);outline-offset:4px}
body.proof-playful .dw-ft a:focus-visible{outline-color:#fff9e9}


@media(min-width:880px){
  body.proof-playful{--dw-nav-inset:228px}
  body.proof-playful.dw-has-nav{padding-left:var(--dw-nav-inset);padding-bottom:24px}
  body.proof-playful .dw-hd{display:flex;flex-wrap:wrap;min-height:82px;padding:24px 132px 10px 24px;gap:14px}
  body.proof-playful .dw-hd .dw-pill{margin:0 0 0 auto;font-size:12px}
  body.proof-playful #drewLangToggle{top:24px;right:max(24px,calc((100vw - 228px - 940px)/2))}
  body.proof-playful .dw-nav{left:18px;right:auto;top:20px;bottom:20px;width:190px;flex-direction:column;justify-content:flex-start;gap:9px;padding:15px 10px;border:1px solid var(--app-rim);border-radius:27px;box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--app-edge),0 12px 30px #163c4d14}
  body.proof-playful .dw-nav a{flex:none;width:100%;min-height:56px;flex-direction:row;align-items:center;justify-content:flex-start;padding:8px 9px;gap:10px;font-size:14px;text-align:left}
  body.proof-playful .dw-nav a:last-child{flex-grow:0}
  body.proof-playful .dw-nav .dw-badge{right:-4px;top:-2px}
  body.proof-playful .dw-ft{margin-top:28px;padding-bottom:10px}
}
@media(max-width:359px){
  body.proof-playful .dw-hd{padding-left:max(14px,var(--proof-safe-left));padding-right:112px}
  body.proof-playful .dw-hd .dw-logo{font-size:17px;gap:7px}
  body.proof-playful .dw-brand-object{width:35px;height:35px}
  body.proof-playful .dw-hd .dw-pill{margin-left:42px;font-size:10px}
  body.proof-playful #drewLangToggle{right:max(14px,var(--proof-safe-right))}
  body.proof-playful .dw-nav{left:4px;right:4px}
  body.proof-playful .dw-nav a{font-size:10px}
}
@media(max-width:879px) and (max-height:500px) and (orientation:landscape){
  body.proof-playful .dw-nav a{min-height:44px;flex-direction:row;gap:5px}
  body.proof-playful .dw-nav :is(.dw-ic,.dw-nav-object){width:30px;height:30px}
  body.proof-playful.dw-has-nav{padding-bottom:calc(84px + var(--proof-safe-bottom))}
}

/* Main view: comfortable targets, a live chart and four category rows. Secondary
   report data keeps its original nodes in the detail dialog. */
body.proof-playful .pgHero{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:4px 20px 0;display:block}
body.proof-playful .pgHero .eye{font:700 11px/1.5 var(--app-font);letter-spacing:.13em;color:var(--sky-sub);text-shadow:var(--sky-shadow)}
body.proof-playful .pgHero .ttl{display:block;margin:3px 0 0;color:#fff9e9;font:800 27px/1.25 var(--proof-heading);letter-spacing:-.025em;text-shadow:0 2px 8px #062838b3,0 1px 2px #06283899}
body.proof-playful .pgHero .uline{display:none}
body.proof-playful #app{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:12px 20px 18px}
body.proof-playful #app.proof-ready{display:flex;flex-direction:column;gap:13px}
body.proof-playful #app.proof-ready > :not(dialog){margin:0;animation:none}
body.proof-playful #app .hero{position:relative;min-height:151px;padding:15px 126px 15px 18px;border:1px solid #b3f8df;border-radius:26px;background:radial-gradient(ellipse 90% 85% at 50% -10%,#ffffffaa,transparent 80%),linear-gradient(#76e6c3,#38cfa9);box-shadow:inset 0 2px 0 #eafff4,0 6px 0 #168b75,0 10px 20px #133f4933;transform:none;rotate:0deg;animation:none;color:#123f38;text-align:left}
body.proof-playful #app .hero :is(.lbl,.big,.lv){color:#123f38;font-family:var(--proof-heading);text-shadow:none}
body.proof-playful #app .hero .lbl{font-size:12px;letter-spacing:.08em;font-weight:700}
body.proof-playful #app .hero .big{margin:3px 0;font-size:43px;line-height:1.08;white-space:nowrap}
body.proof-playful #app .hero .big .u{font-size:14px;color:#276957}
body.proof-playful #app .hero .lv{margin:1px 0 0;font-size:14px;line-height:1.35}
body.proof-playful #app .hero .delta{position:relative;display:block;width:calc(100% + 105px);max-width:100%;margin-top:8px;padding:0;border:0;border-radius:0;background:none;color:#164f3e;font:700 12px/1.5 var(--app-font);animation:none}
body.proof-playful #app .hero .delta.down{color:#653b23}
body.proof-playful #app .proof-summary-art{position:absolute;right:10px;top:12px;width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 6px 3px #17584930);pointer-events:none}
body.proof-playful #app :is(.proof-openers,.proof-actions,.cta){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.proof-playful #app .proof-openers{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:3px}
body.proof-playful #app :is(.proof-openers,.proof-actions,.cta) .sg-button{--sg-height:47px;--sg-radius:17px;--sg-depth:5px;--sg-press:3px;width:100%;min-width:44px;min-height:47px;margin:0;padding:9px 8px;font:800 13px/1.4 var(--app-font);white-space:normal}
body.proof-playful #app .proof-openers .sg-button{--sg-height:52px;min-height:52px;font-size:14px}
body.proof-playful #app [data-proof-open="score"]{--sg-face-top:#96dcfa;--sg-face-bottom:#59baee;--sg-rim:#d5f4ff;--sg-base:#2b84b4;--sg-ink:#133b56}
body.proof-playful #app [data-proof-open="skills"]{--sg-face-top:#c1b4fa;--sg-face-bottom:#a28aea;--sg-rim:#e8dfff;--sg-base:#7560b6;--sg-ink:#34254f}
body.proof-playful #app [data-proof-open="week"]{--sg-face-top:#b5ed78;--sg-face-bottom:#83d54c;--sg-rim:#e0ffb7;--sg-base:#548f35;--sg-ink:#234416}
body.proof-playful #app #shareBtn.sg-button{--sg-face-top:#f5bde3;--sg-face-bottom:#e397cf;--sg-rim:#ffe0f5;--sg-base:#b6689e;--sg-ink:#592d4b}
body.proof-playful #app .proof-more{--sg-height:44px;--sg-depth:3px;--sg-press:2px;min-height:44px;align-self:center;min-width:200px;padding:8px 18px;font:700 12px/1.4 var(--app-font)}
body.proof-playful #app > .empty{padding:22px;font:600 14px/1.7 var(--app-font);color:var(--app-ink);background:var(--app-paper);border:1px solid var(--app-rim);box-shadow:0 5px 0 var(--app-edge);border-radius:24px}
body.proof-playful #app :is(.proof-openers,.proof-actions,.cta,.proof-more) :focus-visible{outline:3px solid #fff9e9;outline-offset:5px}

/* Native dialog supplies Escape handling, modal focus, and inert background.
   Its own scroll area keeps every detailed row available at text zoom. */
body.proof-playful #proofDetails{position:fixed;inset:0;width:calc(100% - 28px);max-width:620px;max-height:calc(100svh - 32px - var(--proof-safe-top) - var(--proof-safe-bottom));margin:auto;padding:0;border:1px solid var(--app-rim);border-radius:26px;background:var(--app-paper);color:var(--app-ink);box-shadow:0 8px 0 #c5b795,0 20px 60px #06283855;overflow-y:auto;overscroll-behavior:contain}
body.proof-playful #proofDetails:not([open]){display:none}
body.proof-playful #proofDetails[open]{display:block}
body.proof-playful #proofDetails::backdrop{background:#0e394779;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
body.proof-playful #proofDetails [hidden]{display:none!important}
body.proof-playful .proof-details-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px 18px;background:var(--app-paper);border-bottom:1px solid var(--app-rim)}
body.proof-playful .proof-details-head h2{margin:0;font:800 17px/1.4 var(--proof-heading)}
body.proof-playful #proofDetailsClose{--sg-height:44px;--sg-radius:15px;--sg-depth:4px;--sg-press:2px;min-height:44px;flex:none;padding:9px 14px;font:800 13px/1.3 var(--app-font)}
body.proof-playful :is(.proof-report,.proof-info){padding:0 16px 20px}
body.proof-playful #proofDetails .seg{margin:14px 0 12px;padding:4px;border-radius:17px;background:#ebe5d4;box-shadow:inset 0 2px 3px #244b4020}
body.proof-playful #proofDetails .seg button{min-width:44px;min-height:44px;padding:8px 3px;font:700 14px/1.3 var(--app-font);color:var(--app-muted);opacity:1}
body.proof-playful #proofDetails .seg button.on{background:#fffdf5;color:var(--app-deep);border-radius:13px;box-shadow:0 2px 0 #c5b795}
body.proof-playful #proofDetails .pane{animation:none}
body.proof-playful #proofDetails :is(.row,.skill,.stat,.move){animation:none;border:1px solid var(--app-rim);border-radius:18px;background:#fffdf5;box-shadow:0 3px 0 #ded4b9;color:var(--app-ink)}
body.proof-playful #proofDetails .row{padding:13px 12px}
body.proof-playful #proofDetails .toeic{flex-wrap:wrap;gap:9px}
body.proof-playful #proofDetails .toeic .val{margin-left:auto}
body.proof-playful #proofDetails .row :is(.s,.mv){font-size:12px;line-height:1.5}
body.proof-playful #proofDetails .row .t{font-size:14px}
body.proof-playful #proofDetails .row .n{font-size:22px;color:var(--app-deep)}
body.proof-playful #proofDetails :is(a,button){min-height:44px;touch-action:manipulation}
body.proof-playful #proofDetails a{align-items:center}
body.proof-playful #proofDetails :is(a.pt,a.n,.row>a){display:inline-flex;align-items:center;min-height:44px}
body.proof-playful #proofDetails .skill{padding:13px 11px;gap:8px;flex-wrap:wrap}
body.proof-playful #proofDetails .skill .nm{flex-basis:100%;font-size:14px}
body.proof-playful #proofDetails .skill .track{min-width:70px}
body.proof-playful #proofDetails .skill .pt{margin:0;padding-top:5px}
body.proof-playful #proofDetails .skill .fill{animation:none}
body.proof-playful #proofDetails .stats{gap:11px}
body.proof-playful #proofDetails .stat{padding:12px}
body.proof-playful #proofDetails .stat .n{font-size:26px;color:var(--app-deep)}
body.proof-playful #proofDetails .stat .k{font-size:12px}
body.proof-playful #proofDetails .move{min-height:70px;padding:12px;gap:10px}
body.proof-playful #proofDetails .move.hot{border-color:#6fb991;background:#edf7e8}
body.proof-playful #proofDetails .move .tt{font-size:14px}
body.proof-playful #proofDetails .move .ds{font-size:12px}
body.proof-playful #proofDetails .sec{margin:21px 2px 12px;color:var(--app-deep);font:800 13px/1.4 var(--app-font)}
body.proof-playful #proofDetails .proof-history{padding:10px 12px 13px;margin-bottom:13px;border-radius:16px;background:#e0f5e7}
body.proof-playful #proofDetails .proof-history .spark{display:block;margin:0 auto}
body.proof-playful #proofDetails .spark polyline{stroke:#2f6f4e;animation:none;stroke-dashoffset:0}
body.proof-playful #proofDetails .spark circle{fill:#2f6f4e;animation:none}
body.proof-playful #proofDetails .heronote{color:var(--app-muted);font:500 12px/1.6 var(--app-font);margin-top:7px}
body.proof-playful #proofDetails .proof-report-note{margin-top:16px;color:var(--app-muted);text-align:center;font:500 12px/1.6 var(--app-font)}
body.proof-playful #proofDetails .proof-report-note :is(.foot,.hand){margin:10px 0 0;font:inherit;color:inherit}
body.proof-playful #proofDetails .proof-info-links{display:flex;position:static;flex-direction:column;align-items:stretch;margin:0;padding:12px 0 0;text-shadow:none;color:var(--app-ink);font:600 14px/1.5 var(--app-font)}
body.proof-playful #proofDetails .proof-info-links a{display:flex;align-items:center;min-height:48px;padding:9px 13px;margin-bottom:8px;border:1px solid var(--app-rim);border-radius:14px;background:#fffdf5;text-decoration:none}
body.proof-playful #proofDetails .proof-info-links .sep{display:none}
body.proof-playful #proofDetails :is(button,a):focus-visible{outline:3px solid var(--app-deep);outline-offset:3px}
@media(min-width:880px){body.proof-playful .pgHero{padding-top:20px}body.proof-playful #app{padding-top:18px;gap:20px}body.proof-playful #app .hero{min-height:185px;padding-top:24px;padding-bottom:24px}body.proof-playful #app .proof-summary-art{width:145px;height:145px}}
@media(max-width:879px){
  body.proof-playful.dw-has-nav{padding-bottom:calc(88px + var(--proof-safe-bottom))}
  body.proof-playful .dw-hd{min-height:0;padding-top:calc(8px + var(--proof-safe-top));padding-bottom:4px;gap:2px}
  body.proof-playful .dw-hd .dw-pill{min-height:21px;padding:1px 8px;font-size:10px}
  body.proof-playful #drewLangToggle{top:calc(9px + var(--proof-safe-top))}
  body.proof-playful .dw-nav a{min-height:58px}
  body.proof-playful #app{padding-top:11px;padding-bottom:9px}
}
@media(max-width:879px) and (max-height:700px){
  body.proof-playful .pgHero .ttl{font-size:25px}
  body.proof-playful #app.proof-ready{gap:11px}
  body.proof-playful #app .hero{min-height:140px;padding-top:12px;padding-bottom:12px}
  body.proof-playful #app .hero .big{font-size:39px}
  body.proof-playful #app .hero .delta{font-size:11px;margin-top:6px}
  body.proof-playful #app .proof-summary-art{top:10px;width:106px;height:106px}
}
@media(prefers-reduced-motion:reduce){body.proof-playful :is(.dw-nav a,#drewLangToggle){transition:none}}

/* The learner's history and all four categories are the main view. Secondary
   report actions stay available in details; no data is copied or recalculated. */
body.proof-playful #app .hero{display:grid;grid-template-columns:1fr auto;min-height:0;padding:16px 18px 12px;text-align:left;gap:2px 12px}
body.proof-playful #app .hero .lbl{grid-column:1;letter-spacing:.04em}
body.proof-playful #app .hero .big{grid-column:1;grid-row:2;margin:0;font-size:39px;line-height:1.05}
body.proof-playful #app .hero .lv{grid-column:2;grid-row:1/3;align-self:center;font-size:15px;margin:0;padding:6px 10px;border-radius:12px;background:#eaffef80}
body.proof-playful #app .hero .delta{grid-column:1/-1;width:auto;max-width:none;font-size:11px;margin:2px 0 5px;line-height:1.3}
body.proof-playful #app .proof-chart{display:flex;flex-direction:column;grid-column:1/-1;width:100%;min-width:0;padding:9px 10px 6px;border:1px solid #ffffff80;border-radius:16px;background:#f4fff0e8;color:#246653}
body.proof-playful .proof-chart-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font:800 12px/1.3 var(--app-font);color:#234f42}
body.proof-playful .proof-chart-count{font-weight:500;font-size:10px;color:#4c6f5f}
body.proof-playful .proof-chart-plot{position:relative;height:clamp(100px,14svh,152px);min-height:0;margin-top:3px}
body.proof-playful #app .proof-chart .spark{display:block;position:absolute;inset:0;width:100%;max-width:none;height:100%;margin:0;color:#218269;overflow:visible}
body.proof-playful .proof-chart .spark polyline{animation:none;stroke-dasharray:none;stroke-dashoffset:0;filter:none}
body.proof-playful .proof-chart-point{position:absolute;width:8px;height:8px;border:2px solid #fffdf5;border-radius:50%;background:#218269;transform:translate(-50%,-50%);pointer-events:none}
body.proof-playful .proof-chart-grid{stroke:#cadfd0;stroke-width:1;stroke-dasharray:3 4}
body.proof-playful .proof-chart-yaxis{position:absolute;inset:0 auto 0 0;width:6.765%;color:#4c6f5f;font:9px/1 var(--app-font);pointer-events:none}
body.proof-playful .proof-chart-yaxis span{position:absolute;right:0;transform:translateY(-50%)}
body.proof-playful .proof-chart-yaxis span:nth-child(1){top:7.142857%}
body.proof-playful .proof-chart-yaxis span:nth-child(2){top:50%}
body.proof-playful .proof-chart-yaxis span:nth-child(3){top:92.857143%}
body.proof-playful .proof-chart-xaxis{display:flex;justify-content:space-between;padding:0 2.941% 0 8.824%;color:#4c6f5f;font:9px/1.4 var(--app-font)}
body.proof-playful .proof-chart-empty{position:absolute;top:25%;left:15%;right:3%;margin:0;text-align:center;color:#35624f;font:11px/1.5 var(--app-font)}
body.proof-playful #app .proof-skill-overview{display:block;padding:12px 14px 8px;border:1px solid #ded5bf;border-radius:24px;background:linear-gradient(#fffdf5,#faf0d9);box-shadow:inset 0 2px 0 #fff,0 5px 0 #bdaf8a}
body.proof-playful .proof-skills-title{margin:0 0 5px;color:#214b40;font:800 14px/1.4 var(--proof-heading)}
body.proof-playful #app .proof-skill-overview .skill{display:grid;grid-template-columns:84px minmax(35px,1fr) 39px 37px;align-items:center;gap:7px;min-height:42px;padding:3px 0;margin:0;border:0;border-top:1px solid #e4e5d1;border-radius:0;box-shadow:none;background:none;animation:none}
body.proof-playful #app .proof-skill-overview .skill .nm{min-width:0;font:700 12px/1.3 var(--app-font);color:#234f42}
body.proof-playful #app .proof-skill-overview .skill .tag{display:block;width:max-content;max-width:100%;margin:2px 0 0;padding:1px 4px;font:600 8px/1.3 var(--app-font);border-radius:5px}
body.proof-playful #app .proof-skill-overview .skill .track{height:9px;min-width:0;background:#e8e4d5;box-shadow:inset 0 1px 2px #465e4330}
body.proof-playful #app .proof-skill-overview .skill .fill{background:linear-gradient(#7fd8b1,#35a781);animation:none;box-shadow:inset 0 1px 0 #c5f6db}
body.proof-playful #app .proof-skill-overview .skill:nth-of-type(2) .fill{background:linear-gradient(#95caf9,#4a94da)}
body.proof-playful #app .proof-skill-overview .skill:nth-of-type(3) .fill{background:linear-gradient(#bd9eec,#9166cf)}
body.proof-playful #app .proof-skill-overview .skill:nth-of-type(4) .fill{background:linear-gradient(#f4bd83,#de945c)}
body.proof-playful #app .proof-skill-overview .skill .fill::after{display:none}
body.proof-playful #app .proof-skill-overview .skill .sc{font:800 15px/1.3 var(--proof-heading);color:#214b40;text-align:right}
body.proof-playful #app .proof-skill-overview .skill .d{font-size:11px;text-align:right}
body.proof-playful #app .proof-skill-overview .skill.unmeasured .sc{font:500 10px/1.3 var(--app-font);white-space:nowrap;color:#617267}
body.proof-playful #app .proof-skill-overview .skill.unmeasured .d{display:none}
body.proof-playful #app .proof-skill-overview .skill.unmeasured .pt{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;font-size:0;color:#2d6b52;text-decoration:none;border-radius:10px}
body.proof-playful #app .proof-skill-overview .skill.unmeasured .pt::after{content:'練習 ›';font:700 10px/1.2 var(--app-font)}
/* English mode (founder, 1 Oct: English is a setting; "Not measured" was cut off by a Japanese 練習 link): the link reads
   Practice, and unmeasured rows give the score and the link the room their English needs. lang.js marks Japanese mode
   with body.lang-jp. */
body.proof-playful:not(.lang-jp) #app .proof-skill-overview .skill.unmeasured .pt::after{content:'Practice ›'}
body.proof-playful:not(.lang-jp) #app .proof-skill-overview .skill.unmeasured{grid-template-columns:84px minmax(20px,1fr) 64px 56px}
body.proof-playful #app .proof-skill-overview .pt:focus-visible{outline:3px solid #2d6b52;outline-offset:1px}
body.proof-playful #app .proof-openers{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:1px}
body.proof-playful #app .proof-openers .sg-button{min-width:0;min-height:44px;--sg-height:44px;--sg-radius:16px;--sg-depth:4px;padding:8px 6px;font-size:12px}
body.proof-playful #app .proof-openers .proof-more{min-width:0;align-self:stretch;font-size:11px}
body.proof-playful #proofDetails :is(.proof-actions,.cta){margin-top:15px}
body.proof-playful #proofDetails .heronote{color:var(--app-muted);font:500 12px/1.5 var(--app-font);margin:10px 0}
@media(min-width:880px){
  body.proof-playful #app .hero{padding:20px 23px 15px}
  body.proof-playful #app .hero .big{font-size:47px}
  body.proof-playful .proof-chart-plot{height:140px}
  body.proof-playful #app .proof-skill-overview .skill{grid-template-columns:120px minmax(80px,1fr) 55px 50px;min-height:47px}
  body.proof-playful #app .proof-skill-overview .skill .nm{font-size:14px}
}
@media(min-width:1120px){
  body.proof-playful .pgHero{max-width:1000px}
  body.proof-playful #app.proof-ready{max-width:1000px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;gap:20px}
  body.proof-playful .proof-chart-plot{height:180px}
  body.proof-playful #app .proof-skill-overview{display:grid;grid-template-rows:auto repeat(4,minmax(47px,1fr))}
  body.proof-playful #app .proof-openers{grid-column:1/-1}
}
@media(min-width:360px) and (max-width:600px) and (min-height:600px) and (orientation:portrait){
  body.proof-playful .dw-hd{height:calc(62px + var(--proof-safe-top));min-height:62px;padding-top:calc(8px + var(--proof-safe-top));padding-bottom:8px}
  body.proof-playful .dw-hd .dw-pill{display:none}
  body.proof-playful.dw-has-nav{padding-bottom:calc(78px + var(--proof-safe-bottom))}
  body.proof-playful .pgHero{padding:0 20px}
  body.proof-playful .pgHero .eye{display:none}
  body.proof-playful .pgHero .ttl{margin:0;font-size:25px;line-height:31px;color:var(--sky-ink);text-shadow:var(--sky-shadow)}
  body.proof-playful #app.proof-ready{height:calc(100svh - 171px - var(--proof-safe-top) - var(--proof-safe-bottom));padding:10px 20px 10px;display:grid;grid-template-rows:minmax(175px,1fr) auto 44px;gap:11px}
  body.proof-playful #app .hero{padding:10px 13px 9px;border-radius:23px;grid-template-rows:auto auto minmax(85px,1fr)}
  body.proof-playful #app .hero .lbl{font-size:10px}
  body.proof-playful #app .hero .big{font-size:33px}
  body.proof-playful #app .hero .lv{grid-row:1/3;align-self:start;justify-self:end;font-size:13px;padding:4px 8px}
  body.proof-playful #app .hero .delta{grid-column:2;grid-row:2;align-self:end;justify-self:end;font-size:10px;margin:0 0 5px}
  body.proof-playful #app .proof-chart{min-height:0;padding:6px 8px 5px}
  body.proof-playful .proof-chart-plot{height:auto;flex:1}
  body.proof-playful .proof-chart-heading{font-size:11px}
  body.proof-playful #app .proof-skill-overview{padding:9px 12px 6px;border-radius:22px}
  body.proof-playful .proof-skills-title{font-size:13px;margin-bottom:3px}
  body.proof-playful #app .proof-skill-overview .skill{min-height:38px;grid-template-columns:78px minmax(28px,1fr) 38px 39px;gap:5px;padding:0}
}

/* Two score views share the same card; switching never hides category progress. */
body.proof-playful #app .hero .proof-metric{display:contents}
body.proof-playful #app .hero .proof-metric[hidden]{display:none!important}
body.proof-playful #app .proof-chart-switch{grid-column:2;grid-row:1/3;display:flex;align-items:start;gap:6px;align-self:start}
body.proof-playful #app .proof-chart-switch .sg-button{--sg-height:44px;--sg-radius:14px;--sg-depth:3px;--sg-press:2px;min-height:44px;min-width:60px;padding:8px 10px;font:800 12px/1.4 var(--app-font)}
body.proof-playful #app .proof-chart-switch [aria-selected=true]{--sg-face-top:#a5dcf9;--sg-face-bottom:#6bbde5;--sg-rim:#e1f7ff;--sg-base:#408bad;--sg-ink:#204557}
body.proof-playful #app .proof-chart-switch :focus-visible{outline:3px solid #204557;outline-offset:3px}
body.proof-playful #app .hero .proof-metric .lv{grid-column:1;grid-row:3;align-self:center;justify-self:start;font-size:11px;padding:3px 7px}
body.proof-playful #app .hero .proof-metric .delta{grid-column:2;grid-row:3;align-self:center;justify-self:end;margin:0;font-size:10px;text-align:right}
body.proof-playful #app .hero .proof-metric .proof-chart{grid-row:4;margin-top:5px}
body.proof-playful #app .hero .proof-toeic-value{font-size:31px;letter-spacing:-.04em}
body.proof-playful #app .hero[data-metric=toeic]{background:radial-gradient(ellipse 90% 85% at 50% -10%,#ffffffaa,transparent 80%),linear-gradient(#a2ddf6,#73bde7);border-color:#d9f2ff;box-shadow:inset 0 2px 0 #eefaff,0 6px 0 #438bae,0 10px 20px #133f4933}
body.proof-playful #app .proof-chart-toeic{background:#f1f9fff2}
body.proof-playful .proof-range-stem{stroke:#517cb2;stroke-width:4;stroke-linecap:round}
body.proof-playful .proof-range-cap{stroke:#315e98;stroke-width:2;fill:none}
@media(min-width:360px) and (max-width:600px) and (min-height:600px) and (orientation:portrait){
  body.proof-playful #app .hero{grid-template-rows:auto auto auto minmax(65px,1fr)}
  body.proof-playful #app .hero .proof-toeic-value{font-size:26px}
  body.proof-playful #app .proof-chart-switch .sg-button{min-width:58px;padding:8px 7px;font-size:11px}
  body.proof-playful #app .hero .proof-metric .lv{font-size:10px;padding:2px 6px}
}