:root{
  --bg:#071027;--deep:#050a17;--panel:#0d1937;--panel2:#101f43;
  --text:#f2f5ff;--muted:#a9b7d3;--line:rgba(130,169,255,.19);
  --accent:#82a9ff;--warm:#efc79e;--soft:#95decf;--glass:rgba(17,31,67,.50);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.problem-page{margin:0;min-width:320px;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.62;background:radial-gradient(circle at 78% 4%,rgba(73,99,205,.23),transparent 31rem),radial-gradient(circle at 8% 42%,rgba(54,103,214,.10),transparent 27rem),linear-gradient(180deg,var(--bg),var(--deep));}
a{color:inherit;text-decoration:none}
::selection{background:rgba(130,169,255,.32)}
.problem-nav{position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(130,169,255,.11);background:rgba(7,16,39,.78);backdrop-filter:blur(18px)}
.problem-nav__inner{max-width:1100px;margin:auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.problem-brand{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:760;letter-spacing:.12em;text-transform:uppercase}
.problem-brand img{width:38px;height:38px;object-fit:contain}
.problem-nav__links{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:.72rem}
.problem-nav__links a:hover{color:var(--text)}
.problem-shell{max-width:1100px;margin:auto;padding:0 22px}
.problem-hero{padding:clamp(72px,10vw,128px) 0 clamp(58px,7vw,88px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);gap:clamp(34px,6vw,82px);align-items:center}
.problem-kicker,.problem-index{color:var(--accent);font-size:.7rem;font-weight:780;letter-spacing:.17em;text-transform:uppercase}
.problem-hero h1{margin:.2em 0 .28em;font-size:clamp(3rem,7.4vw,6.6rem);line-height:.94;letter-spacing:-.052em;font-weight:720}
.problem-hero .lead{max-width:760px;margin:0;color:#dbe4f6;font-size:clamp(1.08rem,1.8vw,1.32rem)}
.problem-hero .orientation{margin:24px 0 0;color:var(--soft);font-size:.76rem;font-weight:760;letter-spacing:.12em;text-transform:uppercase}
.problem-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.problem-button{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;border:1px solid var(--line);border-radius:999px;background:rgba(17,31,67,.48);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.problem-button.primary{background:var(--accent);color:#071027;border-color:var(--accent);font-weight:780}
.problem-visual{padding:18px;border:1px solid var(--line);border-radius:28px;background:rgba(11,23,50,.58);box-shadow:0 24px 80px rgba(0,0,0,.2)}
.problem-visual img{display:block;width:100%;height:auto;border-radius:18px}
.problem-section{padding:clamp(64px,8vw,104px) 0;border-top:1px solid rgba(255,255,255,.07)}
.problem-head{display:grid;grid-template-columns:150px 1fr;gap:26px;margin-bottom:34px}
.problem-head h2{max-width:820px;margin:0;font-size:clamp(2rem,4.6vw,4rem);line-height:1;letter-spacing:-.045em}
.problem-head p{max-width:780px;margin:18px 0 0;color:var(--muted);font-size:1.06rem}
.problem-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.problem-card{min-height:210px;padding:22px;border:1px solid var(--line);border-radius:21px;background:var(--glass)}
.problem-card .label{display:block;color:var(--soft);font-size:.68rem;font-weight:760;letter-spacing:.13em;text-transform:uppercase}
.problem-card h3{margin:36px 0 10px;font-size:1.2rem;line-height:1.25}
.problem-card p{margin:0;color:#d4def2}
.problem-distinction{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.problem-panel{padding:clamp(24px,4vw,40px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(130,169,255,.07),rgba(17,31,67,.36))}
.problem-panel h3{margin:0 0 14px;font-size:clamp(1.45rem,2.4vw,2.25rem);letter-spacing:-.03em}
.problem-panel p{margin:0;color:#d6e0f3}
.problem-panel p+p{margin-top:14px}
.instrument{border:1px solid rgba(149,222,207,.28);border-radius:26px;overflow:hidden;background:rgba(12,26,54,.58)}
.instrument-head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center}
.instrument-head h3{margin:0;font-size:1.35rem}
.instrument-head span{color:var(--soft);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}
.instrument-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.instrument-step{padding:24px;border-right:1px solid var(--line)}
.instrument-step:last-child{border-right:0}
.instrument-step b{display:block;color:var(--accent);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.instrument-step strong{display:block;margin:18px 0 8px;font-size:1.15rem}
.instrument-step p{margin:0;color:var(--muted)}
.term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.term-card{padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(17,31,67,.4)}
.term-card strong{display:block;margin-bottom:7px}
.term-card p{margin:0;color:var(--muted);font-size:.93rem}
.term-card a{display:inline-block;margin-top:13px;color:var(--soft);font-size:.8rem}
.boundary-note{margin-top:22px;padding:18px 20px;border-left:2px solid var(--warm);background:rgba(239,199,158,.055);color:#d8deea}
.next-route{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end;padding:clamp(30px,4vw,46px);border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at 90% 10%,rgba(149,222,207,.08),transparent 20rem),rgba(17,31,67,.4)}
.next-route h2{margin:0;font-size:clamp(1.8rem,3.6vw,3.2rem);letter-spacing:-.04em;line-height:1}
.next-route p{max-width:680px;margin:16px 0 0;color:var(--muted)}
.problem-footer{padding:38px 0 48px;color:var(--muted);font-size:.78rem;display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.07)}
.problem-footer a{color:var(--soft)}

/* Root-only internal problem routes */
.problem-routes-section{padding:36px 0 84px}
.problem-routes-section .problem-routes-head{max-width:1140px;margin:auto;padding:0 24px 22px}
.problem-routes-section .problem-routes-head p{margin:0;color:var(--muted,#a9b7d3)}
.problem-route-grid{max-width:1140px;margin:auto;padding:0 24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.problem-route-card{display:flex;flex-direction:column;min-height:156px;padding:17px;border:1px solid var(--line,rgba(130,169,255,.19));border-radius:18px;background:var(--glass,rgba(17,31,67,.5));transition:.35s var(--ease,ease)}
.problem-route-card:hover{transform:translateY(-4px);border-color:rgba(149,222,207,.45)}
.problem-route-card span{color:var(--soft,#95decf);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.problem-route-card strong{display:block;margin:18px 0 8px;font-size:.98rem;line-height:1.28}
.problem-route-card small{margin-top:auto;color:var(--muted,#a9b7d3)}

@media(max-width:900px){
  .problem-hero,.problem-distinction{grid-template-columns:1fr}
  .problem-visual{max-width:560px}
  .problem-grid,.term-grid{grid-template-columns:1fr 1fr}
  .instrument-steps{grid-template-columns:1fr}
  .instrument-step{border-right:0;border-bottom:1px solid var(--line)}
  .instrument-step:last-child{border-bottom:0}
  .problem-route-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .problem-nav__links{display:none}
  .problem-shell{padding:0 18px}
  .problem-hero{padding-top:62px}
  .problem-head{grid-template-columns:1fr;gap:10px}
  .problem-grid,.term-grid{grid-template-columns:1fr}
  .next-route{grid-template-columns:1fr}
  .problem-footer{flex-direction:column}
  .problem-route-grid{grid-template-columns:1fr;padding:0 18px}
  .problem-routes-section .problem-routes-head{padding-left:18px;padding-right:18px}
}