@import url("./fonts/medeo.css");

:root{
  --y:#ffdd2d;
  --y-deep:#f2cf00;
  --ink:#171717;
  --ink-2:#2c2c2c;
  --muted:#6f6f68;
  --line:#e4e4e0;
  --line-2:#d6d6d0;
  --paper:#ffffff;
  --soft:#f6f6f2;
  --soft-2:#f0f0ea;
  --green:#1f6b3f;
  --green-bg:#eaf3ea;
  --red:#a8322a;
  --sans:"Medeo Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Medeo Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--soft);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--y);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--y);flex:none}

/* header */
.pb-head{position:relative;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.pb-head__in{min-height:76px;display:flex;align-items:center;gap:22px}
.pb-logo{display:flex;align-items:center;gap:12px;flex:none}
.pb-logo img{height:34px;width:auto}
.pb-logo span{font-family:var(--mono);font-size:9px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);max-width:120px}
.pb-nav{display:flex;align-items:center;gap:4px;margin-left:14px}
.pb-nav a{font-size:13px;padding:8px 10px;color:var(--ink-2);border-bottom:2px solid transparent}
.pb-nav a:hover{border-color:var(--ink)}
.pb-head__right{margin-left:auto;display:flex;align-items:center;gap:16px}
.pb-head__note{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.5}
.pb-head__note b{display:block;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink)}
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 18px;border:1px solid var(--ink);background:var(--y);font-weight:600;font-size:14px;line-height:1;white-space:nowrap}
.pb-btn--ghost{background:transparent}
.pb-btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.pb-btn:hover{background:var(--y-deep)}
.pb-btn--dark:hover{background:#000}
.pb-btn--sm{min-height:36px;padding:0 14px;font-size:12px}

/* shared ui */
.pb-search{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--ink);min-height:60px}
.pb-search input{flex:1;min-width:0;border:0;background:transparent;padding:0 18px;height:58px;font-size:17px;outline:none}
.pb-search input::placeholder{color:#9a9a92}
.pb-search button{flex:none;align-self:stretch;border:0;border-left:1px solid var(--ink);background:var(--y);padding:0 22px;font-weight:600}
.pb-search button:hover{background:var(--y-deep)}
.pb-search kbd{flex:none;font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);padding:4px 6px;color:var(--muted);margin-right:14px}

.pb-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-top:28px}
.pb-stats div{padding:14px 16px 0 0;border-right:1px solid var(--line)}
.pb-stats div:last-child{border-right:0}
.pb-stats b{display:block;font-size:26px;line-height:1;letter-spacing:-.03em}
.pb-stats span{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.pb-foot{border-top:1px solid var(--line);padding:30px 0;background:var(--paper);margin-top:60px}
.pb-foot__in{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pb-foot__in a{color:var(--ink);border-bottom:1px solid var(--y)}
.pb-foot__links{display:flex;gap:18px;flex-wrap:wrap}

/* area common */
.area-head{padding:34px 0 26px;border-bottom:1px solid var(--ink)}
.crumbs{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.crumbs a{border-bottom:1px solid transparent}
.crumbs a:hover{border-color:var(--ink)}
.crumbs span{color:#a4a49c}
.area-code{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.area-title{font-size:clamp(28px,4vw,48px);line-height:1.05;letter-spacing:-.035em;margin:10px 0 14px;max-width:22ch}
.area-lead{max-width:64ch;color:var(--ink-2);font-size:16px;margin:0}
.area-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.area-meta b{color:var(--ink)}

.q-toolbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 0}
.q-toolbar__in{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:flex;border:1px solid var(--line-2);background:#fff}
.seg button{border:0;background:transparent;padding:8px 12px;font-size:12px;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.is-on{background:var(--ink);color:#fff}
.q-search{display:flex;align-items:center;border:1px solid var(--line-2);background:#fff;padding:0 10px;height:36px;min-width:220px;flex:1;max-width:360px}
.q-search input{border:0;background:transparent;outline:none;width:100%;font-size:13px}
.q-jump{display:flex;align-items:center;gap:6px;margin-left:auto}
.q-jump input{width:64px;height:36px;border:1px solid var(--line-2);background:#fff;padding:0 8px;font-size:13px}
.q-jump button{height:36px;border:1px solid var(--ink);background:#fff;padding:0 12px;font-size:12px}
.q-count{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:6px}

.q-list{border-top:1px solid var(--ink)}
.q{padding:24px 0;border-bottom:1px solid var(--line);scroll-margin-top:86px}
.q.is-flash{animation:flash 1.4s var(--ease)}
@keyframes flash{0%,100%{background:transparent}20%{background:#fffbe0}}
.q-head{display:flex;gap:14px;align-items:flex-start}
.q-num{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);padding-top:4px;min-width:48px}
.q-text{margin:0;font-size:18px;line-height:1.45;letter-spacing:-.01em;max-width:78ch}
.q-opts{list-style:none;margin:14px 0 0;padding:0 0 0 62px;display:grid;gap:7px}
.q-opt{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid transparent;border-radius:1px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.q-opt__n{flex:none;font-family:var(--mono);font-size:11px;color:#9a9a92;min-width:14px;padding-top:3px}
.q-opt.is-correct{background:var(--green-bg);border-color:#b9d4bd;color:#184b2c}
.q-opt.is-correct .q-opt__n{color:var(--green)}
.q-src{margin:12px 0 0 62px;font-family:var(--mono);font-size:10px;line-height:1.55;color:#8b8b83;max-width:90ch}
.q-reveal{display:none;margin:12px 0 0 62px;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 2px;font-size:12px}
.q-img{margin:14px 0 0 62px;max-width:560px;border:1px solid var(--line)}
[data-mode="answers"] .q-opt:not(.is-correct){display:none}
[data-mode="hide"] .q-opt.is-correct{background:transparent;border-color:transparent;color:var(--ink-2)}
[data-mode="hide"] .q-opt.is-correct .q-opt__n{color:#9a9a92}
[data-mode="hide"] .q.is-revealed .q-opt.is-correct{background:var(--green-bg);border-color:#b9d4bd;color:#184b2c}
[data-mode="hide"] .q-reveal{display:inline-block}
[data-mode="hide"] .q.is-revealed .q-reveal{display:none}

/* index lists */
.area-nav{position:sticky;top:22px;border-top:1px solid var(--ink);padding-top:12px}
.area-nav h4{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500}
.area-nav__list{max-height:calc(100vh - 190px);overflow:auto;display:grid;gap:1px;padding-right:6px}
.area-nav__list a{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:7px 8px;font-size:12px;color:var(--muted);border:1px solid transparent}
.area-nav__list a b{font-family:var(--mono);font-size:10px;color:var(--ink);font-weight:500}
.area-nav__list a:hover{background:#fff;border-color:var(--line)}
.area-nav__list a.is-on{background:var(--y);border-color:var(--ink);color:var(--ink)}

.pb-empty{padding:34px 0;color:var(--muted);font-size:14px}
.pb-load{min-height:60vh;display:grid;place-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pb-error{border:1px solid var(--line);background:#fff;padding:24px;margin:30px 0}

@media (max-width:980px){
  .pb-nav{display:none}
  .pb-head__note{display:none}
}
@media (max-width:620px){
  .pb-head__in{min-height:64px;gap:12px}
  .pb-logo img{height:28px}
  .pb-logo span{display:none}
  .pb-head__right{gap:8px}
  .pb-btn{min-height:38px;padding:0 12px;font-size:12px}
  .pb-search{min-height:52px}
  .pb-search input{height:50px;font-size:15px;padding:0 12px}
  .pb-search button{padding:0 14px;font-size:12px}
  .pb-search kbd{display:none}
  .pb-stats b{font-size:21px}
  .q-opts,.q-src,.q-reveal{padding-left:0;margin-left:0}
  .q-head{gap:8px}
  .q-text{font-size:16px}
  .q-jump{margin-left:0;width:100%}
  .q-jump input{flex:1;width:auto}
  .q-num{min-width:38px}
  .area-title{max-width:none}
}


@media (max-width:760px){
  .area-nav{display:none}
}