/* Interview prep layout — Warm Horizon; tokens alias design-tokens.css */

.ip-page {
  --paper: var(--color-paper);
  --paper-2: var(--color-paper-2);
  --paper-3: var(--color-paper-3);
  --white: #ffffff;
  --ink: var(--color-ink);
  --ink-2: var(--color-ink-2);
  --muted: var(--color-muted);
  --ink-deep: var(--color-accent-ink);
  --accent: var(--color-accent);
  --accent-ink: var(--color-accent-ink);
  --accent-tint: #fff0e9;
  --accent-deep: #a83c14;
  --green: #1f7a4d;
  --green-tint: #e6f4ec;
  --amber: #8a5a00;
  --amber-tint: #fdf3dc;
  --red: #a3292b;
  --red-tint: #fbeaea;
  --border-subtle: #e3e8ed;
  --border: var(--color-rule);
  --surface: var(--bg-base);
  --surface-card: var(--white);
  --surface-tint: var(--color-paper-2);
  --surface-inverted: var(--color-ink);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-inverted: var(--color-paper);
  --action: var(--color-accent);
  --action-hover: var(--color-accent-hover);
  --action-text: var(--color-accent-ink);
  --focus: var(--color-focus);
  --text-xs: 12px; --lh-xs: 16px; --text-sm: 14px; --lh-sm: 20px; --text-base: 16px; --lh-base: 24px;
  --text-lg: 18px; --lh-lg: 28px; --text-xl: 20px; --lh-xl: 28px; --text-2xl: 24px; --lh-2xl: 32px;
  --text-3xl: 30px; --lh-3xl: 36px; --text-4xl: 36px; --lh-4xl: 40px; --text-5xl: 48px; --lh-5xl: 48px;
  --s-0: 0; --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px; --s-400: 32px;
  --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px; --r-full: 9999px;
  --hair: 1px solid var(--border-subtle);
  --container: 1232px;
  --measure: 68ch;
  --tap: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --paper-glass: rgba(252, 250, 247, 0.86);
  --paper-glass-strong: rgba(252, 250, 247, 0.94);
  --text-on-ink: #c9d6e4;
  --ink-raise: rgba(255, 255, 255, 0.07);
  --ink-raise-2: rgba(255, 255, 255, 0.1);
  --ink-raise-3: rgba(255, 255, 255, 0.14);
  --code-text: #e8eef5;
  --elev-2: 0 8px 24px rgba(14, 58, 105, 0.08);
}




.ip-page *{box-sizing:border-box;margin:0}
.ip-page{color-scheme:light;-webkit-text-size-adjust:100%;background:var(--surface);color:var(--text);font:400 var(--text-base)/var(--lh-base) var(--font-body);overflow-x:hidden}
.ip-page a{color:inherit}
.ip-page img,.ip-page svg{display:block;max-width:100%}
.ip-page :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-4)}
.ip-page .skip{position:absolute;left:-9999px}
.ip-page .skip:focus{left:var(--s-200);top:var(--s-200);background:var(--white);padding:var(--s-75) var(--s-100);z-index:9}
.ip-page .wrap{width:100%;max-width:min(100%,var(--container));margin:0 auto;padding:0 var(--s-400);box-sizing:border-box;min-width:0}
/* text styles */
.ip-page .heading-1{font:600 var(--text-5xl)/var(--lh-5xl) var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.ip-page .heading-3{font:600 var(--text-3xl)/var(--lh-3xl) var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.ip-page .heading-5{font:600 var(--text-2xl)/var(--lh-2xl) var(--font-display);text-wrap:balance}
.ip-page .heading-6{font:600 var(--text-xl)/var(--lh-xl) var(--font-display);text-wrap:balance}
.ip-page .title-2{font:500 var(--text-lg)/var(--lh-lg) var(--font-body)}
.ip-page .title-3{font:600 var(--text-base)/var(--lh-base) var(--font-body)}
.ip-page .body-lg{font:400 var(--text-lg)/var(--lh-lg) var(--font-body);color:var(--text-2);text-wrap:pretty}
.ip-page .body-3{font:400 var(--text-base)/var(--lh-base) var(--font-body);color:var(--text-2);text-wrap:pretty}
.ip-page .body-6{font:400 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-2);text-wrap:pretty}
.ip-page .caption{font:500 var(--text-xs)/var(--lh-xs) var(--font-body);color:var(--text-muted)}
.ip-page .num{font-variant-numeric:tabular-nums}
.ip-page .mono{font-family:var(--font-mono);font-size:var(--text-sm)}
/* icons */
.ip-page .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.ip-page .ic-sm{width:16px;height:16px}
/* nav */
.ip-page .nav{position:sticky;top:var(--s-100);z-index:5;margin:var(--s-100) auto 0;max-width:var(--container);padding:0 var(--s-400)}
.ip-page .nav-in{display:flex;align-items:center;gap:var(--s-300);padding:var(--s-75) var(--s-75) var(--s-75) var(--s-200);background:rgba(252,250,247,.86);backdrop-filter:blur(12px);border:var(--hair);border-radius:var(--r-16)}
.ip-page .logo{font:600 var(--text-xl)/var(--lh-xl) var(--font-display);text-decoration:none;display:flex;align-items:center;gap:var(--s-75)}
.ip-page .logo b{width:28px;height:28px;border-radius:var(--r-8);background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:var(--text-sm)}
.ip-page .nav-links{display:flex;gap:var(--s-50);margin-left:auto;list-style:none;padding:0}
.ip-page .nav-links a{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--s-100);border-radius:var(--r-8);text-decoration:none;font:500 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-2);transition:background .3s var(--ease)}
.ip-page .nav-links a:hover{background:var(--surface-tint)}
.ip-page .nav-links a[aria-current]{color:var(--text);background:var(--surface-tint)}
/* buttons */
.ip-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-75);min-height:var(--tap);padding:var(--s-75) var(--s-200);border-radius:var(--r-12);font:600 var(--text-base)/var(--lh-base) var(--font-body);text-decoration:none;border:1px solid transparent;transition:background .3s var(--ease),transform .5s var(--ease);white-space:nowrap}
.ip-page .btn:active{transform:translateY(1px)}
.ip-page .btn-primary{background:var(--action);color:var(--action-text)}.ip-page .btn-primary:hover{background:var(--action-hover)}
.ip-page .btn-secondary{background:var(--white);color:var(--text);border-color:var(--border)}.ip-page .btn-secondary:hover{background:var(--surface-tint)}
.ip-page .btn-sm{min-height:36px;padding:var(--s-50) var(--s-100);font-size:var(--text-sm);line-height:var(--lh-sm);border-radius:var(--r-8)}
.ip-page .btn[aria-disabled=true]{opacity:.5;pointer-events:none}
/* chips */
.ip-page .chip{display:inline-flex;align-items:center;gap:var(--s-50);padding:var(--s-25) var(--s-75);border-radius:var(--r-6);font:600 var(--text-xs)/var(--lh-xs) var(--font-body);background:var(--surface-tint);color:var(--text-2)}
.ip-page .chip-easy{background:var(--green-tint);color:var(--green)}
.ip-page .chip-mid{background:var(--amber-tint);color:var(--amber)}
.ip-page .chip-hard{background:var(--red-tint);color:var(--red)}
.ip-page .chip-dot::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
/* sections */
.ip-page .section{padding:var(--s-800) 0}
.ip-page .section-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-300);margin-bottom:var(--s-400)}
.ip-page .section-head p{max-width:52ch}
/* hub hero */
.ip-page .hero{padding:var(--s-900) 0 var(--s-700);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-600);align-items:end}
.ip-page .hero > div{min-width:0}
.ip-page .hero h1{max-width:680px}
.ip-page .hero .body-lg{max-width:560px;margin-top:var(--s-300)}
.ip-page .hero-actions{display:flex;gap:var(--s-100);margin-top:var(--s-400);flex-wrap:wrap}
.ip-page .hero-card{background:var(--surface-card);border:var(--hair);border-radius:var(--r-24);padding:var(--s-300);display:block;text-decoration:none;color:inherit;min-width:0;overflow-wrap:anywhere}
.ip-page .hero-card .q{font:600 var(--text-lg)/var(--lh-lg) var(--font-display);margin:var(--s-100) 0 var(--s-75);overflow-wrap:anywhere;min-width:0}
.ip-page .hero-card .cite{margin-top:var(--s-200);padding:var(--s-100);background:var(--surface-tint);border-radius:var(--r-12);display:flex;gap:var(--s-75);align-items:flex-start}
/* topic bento */
.ip-page .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-200)}
.ip-page .topic{position:relative;display:flex;flex-direction:column;gap:var(--s-100);padding:var(--s-300);background:var(--surface-card);border:var(--hair);border-radius:var(--r-24);transition:transform .5s var(--ease),border-color .3s var(--ease)}
.ip-page .topic-cover{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:var(--s-100);flex:1;min-width:0;overflow-wrap:anywhere}
.ip-page .topic:hover{transform:translateY(-2px);border-color:var(--border)}
.ip-page .topic .ic-box{width:44px;height:44px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--surface-tint)}
.ip-page .topic .meta{margin-top:auto;display:flex;gap:var(--s-100);align-items:center;padding-top:var(--s-200)}
.ip-page .topic-xl{grid-column:span 6;grid-row:span 2;background:var(--surface-inverted);color:var(--text-inverted);border-color:var(--surface-inverted)}
.ip-page .topic-xl .body-3, .ip-page .topic-xl .caption{color:#c9d6e4}
.ip-page .topic-xl .ic-box{background:rgba(255,255,255,.1)}
.ip-page .topic-xl .sample{margin-top:var(--s-300);display:grid;gap:var(--s-75);list-style:none;padding:0}
.ip-page .topic-xl .sample li{padding:var(--s-100) var(--s-200);border-radius:var(--r-12);background:rgba(255,255,255,.07);font:500 var(--text-sm)/var(--lh-sm) var(--font-body)}
.ip-page .topic-xl .sample a, .ip-page .topic-md .sample a, .ip-page .topic-sm .sample a{text-decoration:none;color:inherit;display:block;min-width:0;overflow-wrap:anywhere}
.ip-page .topic-md .sample, .ip-page .topic-sm .sample{margin-top:var(--s-200);display:grid;gap:var(--s-50);list-style:none;padding:0}
.ip-page .topic-md .sample li, .ip-page .topic-sm .sample li{font:500 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-2)}
.ip-page .caption.muted{color:var(--text-3)}
.ip-page .topic-md{grid-column:span 6}
.ip-page .topic-sm{grid-column:span 3}
.ip-page .topic-soon{background:transparent;border-style:dashed;text-decoration:none;color:inherit}
/* question list */
.ip-page .filters{display:flex;gap:var(--s-75);flex-wrap:wrap;margin-bottom:var(--s-200)}
.ip-page .filter{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-200);border-radius:var(--r-12);border:1px solid var(--border);background:var(--white);font:500 var(--text-sm)/var(--lh-sm) var(--font-body);text-decoration:none;color:var(--text-2)}
.ip-page .filter[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ip-page .qlist{list-style:none;padding:0;background:var(--surface-card);border:var(--hair);border-radius:var(--r-24);overflow:hidden}
.ip-page .qrow{display:grid;grid-template-columns:1fr auto auto auto;gap:var(--s-300);align-items:center;padding:var(--s-200) var(--s-300);text-decoration:none;transition:background .3s var(--ease)}
.ip-page .qrow:hover{background:var(--surface-tint)}
.ip-page .qlist li+li{box-shadow:0 -1px 0 var(--border-subtle)}
.ip-page .qrow .t{font:600 var(--text-base)/var(--lh-base) var(--font-body)}
.ip-page .qrow .sub{display:block;margin-top:var(--s-25)}
.ip-page .qrow .arrow{color:var(--text-muted)}
.ip-page .qlist-more{margin-top:var(--s-300)}
/* trust */
.ip-page .trust{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-300)}
.ip-page .trust-main{background:var(--accent-tint);border-radius:var(--r-24);padding:var(--s-500)}
.ip-page .trust-main .body-3{margin-top:var(--s-200);max-width:46ch}
.ip-page .rules{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-200)}
.ip-page .rule{background:var(--surface-card);border:var(--hair);border-radius:var(--r-16);padding:var(--s-300);display:flex;flex-direction:column;gap:var(--s-75)}
.ip-page .rule .ic{color:var(--accent-deep)}
/* tagline */
.ip-page .tagline{padding:var(--s-900) 0}
.ip-page .tagline p{font:600 var(--text-5xl)/1.1 var(--font-display);max-width:880px;letter-spacing:-.02em;text-wrap:balance}
html.js .ip-page .tagline .w{opacity:.3;transition:opacity .6s var(--ease)}
html.js .ip-page .tagline .w.on{opacity:1}
@media (prefers-reduced-motion:reduce){html.js .ip-page .tagline .w{opacity:1;transition:none}}
/* cta band */
.ip-page .cta{background:var(--surface-inverted);color:var(--text-inverted);border-radius:var(--r-24);padding:var(--s-700) var(--s-600);display:grid;grid-template-columns:1fr auto;gap:var(--s-400);align-items:center}
.ip-page .cta .body-3{color:#c9d6e4;margin-top:var(--s-100);max-width:52ch}
/* footer */
.ip-page .foot{padding:var(--s-600) 0;margin-top:var(--s-800);display:flex;justify-content:space-between;gap:var(--s-300);flex-wrap:wrap;box-shadow:0 -1px 0 var(--border-subtle)}
.ip-page .foot nav{display:flex;gap:var(--s-300)}
.ip-page .foot a{text-decoration:none;color:var(--text-muted);font-size:var(--text-sm)}
/* question page */
.ip-page .crumbs{display:flex;flex-wrap:wrap;gap:var(--s-75);list-style:none;padding:var(--s-600) 0 var(--s-300);font:500 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-muted)}
.ip-page .crumbs li+li::before{content:"/";margin-right:var(--s-75);color:var(--border)}
.ip-page .crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap);padding-block:var(--s-75);box-sizing:border-box}.ip-page .crumbs a:hover{color:var(--text)}
.ip-page .qhead{max-width:820px}
.ip-page .qhead .chips{display:flex;gap:var(--s-75);flex-wrap:wrap;margin-bottom:var(--s-200)}
.ip-page .qhead .byline{margin-top:var(--s-300);display:flex;gap:var(--s-200);flex-wrap:wrap}
.ip-page .layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-700);align-items:start;margin-top:var(--s-600)}
.ip-page .answer{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--r-24);padding:var(--s-400)}
.ip-page .answer h2{display:flex;align-items:center;gap:var(--s-75)}
.ip-page .answer ol{margin-top:var(--s-200);padding-left:var(--s-300);display:grid;gap:var(--s-100)}
.ip-page .prose{max-width:var(--measure)}
.ip-page .prose section{margin-top:var(--s-700)}
.ip-page .prose h2{margin-bottom:var(--s-200);scroll-margin-top:var(--s-900)}
.ip-page .prose p+p, .ip-page .prose p+pre, .ip-page .prose pre+p, .ip-page .prose ul+p, .ip-page .prose p+ul{margin-top:var(--s-200)}
.ip-page .prose ul{padding-left:var(--s-300);display:grid;gap:var(--s-75);color:var(--text-2)}
.ip-page .prose code{font-family:var(--font-mono);font-size:var(--text-sm);background:var(--surface-tint);padding:var(--s-25) var(--s-50);border-radius:var(--r-4)}
.ip-page .prose pre{background:var(--ink-deep);color:#e8eef5;border-radius:var(--r-16);padding:var(--s-300);overflow-x:auto;font:400 var(--text-sm)/var(--lh-sm) var(--font-mono)}
.ip-page .prose pre code{background:none;padding:0;color:inherit}
.ip-page sup a{color:var(--accent-deep);text-decoration:none;font-weight:700;font-size:var(--text-xs)}
.ip-page blockquote{margin-top:var(--s-200);padding:var(--s-200) var(--s-300);background:var(--surface-tint);border-radius:var(--r-16)}
.ip-page blockquote p{font:500 var(--text-base)/var(--lh-base) var(--font-body);color:var(--text)}
.ip-page blockquote footer{margin-top:var(--s-75)}
.ip-page .diagram{margin-top:var(--s-300);background:var(--surface-card);border:var(--hair);border-radius:var(--r-24);padding:var(--s-300)}
.ip-page .diagram svg{width:100%;height:auto}
.ip-page .diagram figcaption{margin-top:var(--s-200)}
.ip-page .followups{display:grid;gap:var(--s-100)}
.ip-page .followups details{background:var(--surface-card);border:var(--hair);border-radius:var(--r-16)}
.ip-page .followups summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-200);min-height:var(--tap);padding:var(--s-200) var(--s-300);font:600 var(--text-base)/var(--lh-base) var(--font-body)}
.ip-page .followups summary::-webkit-details-marker{display:none}
.ip-page .followups summary .ic{transition:transform .5s var(--ease)}
.ip-page .followups details[open] summary .ic{transform:rotate(45deg)}
.ip-page .followups details>div{padding:0 var(--s-300) var(--s-300)}
.ip-page .mistakes{list-style:none;padding:0!important;display:grid;gap:var(--s-100)!important}
.ip-page .mistake{display:flex;gap:var(--s-100);padding:var(--s-200);background:var(--red-tint);border-radius:var(--r-16);color:var(--text)}
.ip-page .mistake .ic{color:var(--red);margin-top:2px}
.ip-page .sources{list-style:none;padding:0!important;counter-reset:src;display:grid;gap:0!important;background:var(--surface-card);border:var(--hair);border-radius:var(--r-16)}
.ip-page .cite-item{counter-increment:src;display:grid;grid-template-columns:32px 1fr;gap:var(--s-100);padding:var(--s-200) var(--s-300)}
.ip-page .cite-item+.cite-item{box-shadow:0 -1px 0 var(--border-subtle)}
.ip-page .cite-item::before{content:counter(src);font:600 var(--text-sm)/var(--lh-sm) var(--font-mono);color:var(--accent-deep)}
.ip-page .cite-item:target{background:var(--accent-tint)}
.ip-page .cite-item a{color:var(--text);font-weight:600}
/* aside */
.ip-page .aside{position:sticky;top:var(--s-900);display:grid;gap:var(--s-300)}
.ip-page .toc{padding:var(--s-300);border:var(--hair);border-radius:var(--r-16);background:var(--surface-card)}
.ip-page .toc ol{list-style:none;padding:0;margin-top:var(--s-100);display:grid;gap:var(--s-25)}
.ip-page .toc a{display:block;padding:var(--s-75) var(--s-100);border-radius:var(--r-8);text-decoration:none;font:500 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-2)}
.ip-page .toc a:hover{background:var(--surface-tint);color:var(--text)}
.ip-page .jobs{padding:var(--s-300);border-radius:var(--r-16);background:var(--surface-inverted);color:var(--text-inverted)}
.ip-page .jobs .caption{color:#c9d6e4}
.ip-page .jobs ul{list-style:none;padding:0;margin:var(--s-200) 0;display:grid;gap:var(--s-75)}
.ip-page .role{display:block;padding:var(--s-100);border-radius:var(--r-8);background:rgba(255,255,255,.07);text-decoration:none;transition:background .3s var(--ease)}
.ip-page .role:hover{background:rgba(255,255,255,.14)}
.ip-page .role .t{font:600 var(--text-sm)/var(--lh-sm) var(--font-body);display:block}
.ip-page .jobs .btn{width:100%}
.ip-page .pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-200);margin-top:var(--s-800)}
.ip-page .pager a{display:flex;flex-direction:column;gap:var(--s-50);padding:var(--s-300);border:var(--hair);border-radius:var(--r-16);background:var(--surface-card);text-decoration:none;transition:border-color .3s var(--ease)}
.ip-page .pager a:hover{border-color:var(--border)}
.ip-page .pager .next{text-align:right;align-items:flex-end}
/* skeleton + empty states (for server partials) */
.ip-page .skeleton{background:var(--paper-3);border-radius:var(--r-8);min-height:16px}
.ip-page .empty{padding:var(--s-400);text-align:center;border:1px dashed var(--border);border-radius:var(--r-16)}
/* 768 */
@media (max-width:1024px){
.ip-page   .hero{grid-template-columns:1fr;padding-top:var(--s-800)}
.ip-page   .bento{grid-template-columns:repeat(2,1fr)}
.ip-page   .topic-xl, .ip-page   .topic-md, .ip-page   .topic-sm{grid-column:span 2;grid-row:auto}
.ip-page   .topic-sm{grid-column:span 1}
.ip-page   .trust{grid-template-columns:1fr}
.ip-page   .layout{grid-template-columns:minmax(0,1fr);gap:var(--s-600)}
.ip-page   .aside{position:static}
.ip-page   .toc{display:none}
}
/* 390 */
@media (max-width:640px){
.ip-page   .wrap, .ip-page   .nav{padding:0 var(--s-200)}
.ip-page   .nav-links li:not(:last-child){display:none}
.ip-page   .heading-1{font-size:var(--text-4xl);line-height:var(--lh-4xl)}
.ip-page   .heading-3{font-size:var(--text-2xl);line-height:var(--lh-2xl)}
.ip-page   .tagline p{font-size:var(--text-3xl);line-height:var(--lh-3xl)}
.ip-page   .hero{padding:var(--s-600) 0 var(--s-400);gap:var(--s-400)}
.ip-page   .section{padding:var(--s-600) 0}
.ip-page   .section-head{flex-direction:column;align-items:start}
.ip-page   .bento{grid-template-columns:1fr}
.ip-page   .topic-sm{grid-column:span 3}
.ip-page   .qrow{grid-template-columns:1fr auto;gap:var(--s-100);padding:var(--s-200)}
.ip-page   .qrow .rt, .ip-page   .qrow .arrow{display:none}
.ip-page   .rules{grid-template-columns:1fr}
.ip-page   .trust-main{padding:var(--s-300)}
.ip-page   .cta{grid-template-columns:1fr;padding:var(--s-400) var(--s-300)}
.ip-page   .answer{padding:var(--s-300)}
.ip-page   .pager{grid-template-columns:1fr}
.ip-page   .tagline{padding:var(--s-700) 0}
}
.ip-page .qhead h1, .ip-page .prose code{overflow-wrap:anywhere}
.ip-page .qa summary .qt, .ip-page .crumbs li, .ip-page .crumbs a{overflow-wrap:anywhere;min-width:0}
.ip-page .qa summary .qt{display:block;max-width:100%}
.ip-page .qa summary > *{min-width:0}
.ip-page .qa summary{min-width:0;max-width:100%;width:100%;overflow:hidden;box-sizing:border-box}
.ip-page .qa details, .ip-page .qa, .ip-page .topic-layout, .ip-page .topic-layout > div{min-width:0;max-width:100%}
.ip-page .crumbs{min-width:0;max-width:100%}
.ip-page .topic-head .heading-1{overflow-wrap:anywhere;min-width:0;text-wrap:pretty;max-width:100%}
.ip-page .cite-item{grid-template-columns:32px minmax(0,1fr)}.ip-page .cite-item a{overflow-wrap:anywhere}.ip-page .prose, .ip-page .prose section{min-width:0}
/* ================= v2 additions ================= */
.ip-page .heading-1, .ip-page .heading-3, .ip-page .heading-5{overflow-wrap:anywhere;min-width:0}
/* reading type (ui-ux-pro-max: 16 to 18 body, 1.6 to 1.75 lh, 60 to 70ch) */
.ip-page .read p, .ip-page .read li{font-size:var(--text-lg);line-height:30px;color:var(--text-2)}
.ip-page .read{max-width:66ch}
.ip-page .read h2{font:600 var(--text-2xl)/var(--lh-2xl) var(--font-display);margin:var(--s-700) 0 var(--s-200);scroll-margin-top:120px}
.ip-page .read p+p{margin-top:var(--s-200)}

/* ---------- chapter bar: sticky jump chips + CSS-only progress ---------- */
.ip-page .chapbar{position:sticky;top:0;z-index:6;background:var(--paper-glass-strong);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--border-subtle);max-width:100%;overflow-x:clip}
.ip-page .chapbar-in{max-width:var(--container);margin:0 auto;padding:var(--s-75) var(--s-400);display:flex;align-items:center;gap:var(--s-200);min-width:0;overflow:hidden;max-width:100%}
.ip-page .chapbar .here{font:600 var(--text-sm)/var(--lh-sm) var(--font-display);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1}
.ip-page .jump{display:flex;gap:var(--s-75);overflow-x:auto;scrollbar-width:none;list-style:none;padding:0;margin:0;flex:1;scroll-snap-type:x proximity;min-width:0;max-width:100%}
.ip-page .jump::-webkit-scrollbar{display:none}
.ip-page .jump a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s-100);border-radius:var(--r-12);border:1px solid var(--border);background:var(--white);white-space:nowrap;text-decoration:none;font:500 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-2);scroll-snap-align:start;transition:background .3s var(--ease)}
.ip-page .jump a:hover{background:var(--surface-tint)}
.ip-page .progress{height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.ip-page .progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ip-page .progress{animation:none;display:none}}

/* ---------- topic page ---------- */
.ip-page .topic-head{padding:var(--s-500) 0 var(--s-300);max-width:720px}
.ip-page .topic-head .body-lg{margin-top:var(--s-200)}
.ip-page .topic-facts{display:flex;flex-wrap:wrap;gap:var(--s-100) var(--s-300);margin-top:var(--s-300)}
.ip-page .topic-facts span{display:inline-flex;align-items:center;gap:var(--s-75)}
/* index-first TOC */
.ip-page .chapters{list-style:none;padding:0;margin-top:var(--s-400);display:grid;grid-template-columns:minmax(0,1fr);background:var(--surface-card);border:var(--hair);border-radius:var(--r-24);overflow:hidden}
.ip-page .chapter-link{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s-100);align-items:center;min-height:64px;padding:var(--s-100) var(--s-300);text-decoration:none;transition:background .3s var(--ease)}
.ip-page .chapter-link:hover{background:var(--surface-tint)}
.ip-page .chapters li+li{box-shadow:0 -1px 0 var(--border-subtle)}
.ip-page .chapter-link .n{font:600 var(--text-sm)/var(--lh-sm) var(--font-mono);color:var(--accent-deep)}
.ip-page .chapter-link .t{font:600 var(--text-base)/var(--lh-base) var(--font-body)}
.ip-page .chapter-link .d{display:block;font:400 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-muted)}
/* sections of questions */
.ip-page .unit{margin-top:var(--s-800);scroll-margin-top:80px}
.ip-page .unit-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-100) var(--s-200);align-items:baseline;margin-bottom:var(--s-300)}
.ip-page .unit-head .n{font:600 var(--text-sm)/var(--lh-sm) var(--font-mono);color:var(--accent-deep)}
.ip-page .unit-head p{grid-column:2;max-width:60ch}
.ip-page .qa{list-style:none;padding:0;display:grid;gap:var(--s-75)}
.ip-page .qa details{background:var(--surface-card);border:var(--hair);border-radius:var(--r-16);transition:border-color .3s var(--ease)}
.ip-page .qa details[open]{border-color:var(--border)}
.ip-page .qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-75) var(--s-200);align-items:center;min-height:var(--tap);padding:var(--s-200);width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}
.ip-page .qa summary::-webkit-details-marker{display:none}
.ip-page .qa summary:hover{background:var(--surface-tint);border-radius:var(--r-16)}
.ip-page .qa .qt{font:600 var(--text-base)/var(--lh-base) var(--font-body);text-wrap:wrap;overflow-wrap:anywhere;min-width:0;max-width:100%}
.ip-page .qa .qm{grid-column:1;display:flex;gap:var(--s-100);align-items:center}
.ip-page .qa .tog{grid-row:1/span 2;grid-column:2;width:32px;height:32px;border-radius:var(--r-8);display:grid;place-items:center;background:var(--surface-tint)}
.ip-page .qa .tog .ic{transition:transform .5s var(--ease)}
.ip-page .qa details[open] .tog .ic{transform:rotate(45deg)}
.ip-page .qa .ans{padding:0 var(--s-200) var(--s-200)}
.ip-page .qa .ans p{font-size:var(--text-base);line-height:26px;color:var(--text-2);max-width:62ch}
.ip-page .qa .ans a.more{display:inline-flex;align-items:center;gap:var(--s-75);min-height:var(--tap);margin-top:var(--s-75);font:600 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--accent-deep);text-decoration:none}
.ip-page .qa .ans a.more:hover{text-decoration:underline}
.ip-page .next-topic{margin-top:var(--s-800);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-300);align-items:center;padding:var(--s-400);border-radius:var(--r-24);background:var(--surface-inverted);color:var(--text-inverted);text-decoration:none}
.ip-page .next-topic .caption{color:var(--text-on-ink)}
.ip-page .next-topic .go{width:48px;height:48px;border-radius:var(--r-12);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.ip-page .topic-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-600)}

/* ---------- question page v2 ---------- */
.ip-page .q2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-400)}
.ip-page .rail{display:none}
.ip-page .qcard{background:var(--accent-tint);border-radius:var(--r-24);padding:var(--s-300)}
.ip-page .qcard h2{font:600 var(--text-lg)/var(--lh-lg) var(--font-display);margin-bottom:var(--s-100)}
.ip-page .qcard ol{padding-left:var(--s-300);display:grid;gap:var(--s-75)}
.ip-page .qcard li{font-size:var(--text-base);line-height:26px;color:var(--text)}
.ip-page .srcs{margin-top:var(--s-700);background:var(--surface-card);border:var(--hair);border-radius:var(--r-16)}
.ip-page .srcs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:var(--s-100) var(--s-300);font:600 var(--text-base)/var(--lh-base) var(--font-body)}
.ip-page .srcs summary::-webkit-details-marker{display:none}
.ip-page .srcs[open] summary .ic{transform:rotate(45deg)}
.ip-page .srcs .sources{border:0;border-radius:0;box-shadow:0 -1px 0 var(--border-subtle)}
.ip-page .srcs:has(:target){}
.ip-page .roles-compact{margin-top:var(--s-600)}
.ip-page .roles-compact ul{list-style:none;padding:0;margin-top:var(--s-200);display:grid;gap:0;background:var(--surface-card);border:var(--hair);border-radius:var(--r-16);overflow:hidden}
.ip-page .roles-compact li+li{box-shadow:0 -1px 0 var(--border-subtle)}
.ip-page .roles-compact .role2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-100);align-items:center;min-height:56px;padding:var(--s-100) var(--s-200);text-decoration:none}
.ip-page .roles-compact .role2:hover{background:var(--surface-tint)}
.ip-page .roles-compact .t{font:600 var(--text-sm)/var(--lh-sm) var(--font-body);display:block}
.ip-page .roles-compact .all{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--s-75);font:600 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--accent-deep);text-decoration:none}
.ip-page .pager2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-100);margin-top:var(--s-600)}
.ip-page .pager2 a{display:flex;flex-direction:column;gap:var(--s-25);min-height:var(--tap);padding:var(--s-200);border:var(--hair);border-radius:var(--r-16);background:var(--surface-card);text-decoration:none}
.ip-page .pager2 .title-3{font-size:var(--text-sm);line-height:var(--lh-sm)}
.ip-page .pager2 .next, .ip-page .pager2 .prev{min-width:0;overflow-wrap:anywhere}
.ip-page .pager2 .next{text-align:right}

/* ---------- hub mobile track list (desktop bento untouched) ---------- */
.ip-page .tracks-m{display:none}

/* ---------- mobile first overrides, ≤640 ---------- */
@media (max-width:640px){
  .ip-page .chapbar-in{padding:var(--s-50) var(--s-200);gap:var(--s-100)}
  .ip-page .chapbar .here{display:none}
  .ip-page .topic-head{padding:var(--s-300) 0 var(--s-100)}
  .ip-page .chapter-link{padding:var(--s-100) var(--s-200);grid-template-columns:32px minmax(0,1fr) auto}
  .ip-page .unit{margin-top:var(--s-600)}
  .ip-page .unit-head{grid-template-columns:minmax(0,1fr)}
  .ip-page .unit-head p{grid-column:1}
  .ip-page .next-topic{padding:var(--s-300)}
  .ip-page .read p, .ip-page .read li{font-size:17px}
  .ip-page .read h2{font-size:var(--text-xl);line-height:var(--lh-xl);margin-top:var(--s-600)}
  .ip-page .crumbs{padding:var(--s-200) 0 var(--s-200)}
  /* hub */
  .ip-page .hero{padding:var(--s-400) 0 var(--s-300)}
  .ip-page .hero .body-lg{font-size:var(--text-base);line-height:var(--lh-base);margin-top:var(--s-100)}
  .ip-page .hero-actions{margin-top:var(--s-200)}
  .ip-page .hero-actions .btn{flex:1}
  .ip-page .hero-card{display:none}
  .ip-page #topics .bento{display:none}
  .ip-page .tracks-m{display:block;list-style:none;padding:0;background:var(--surface-card);border:var(--hair);border-radius:var(--r-16);overflow:hidden}
  .ip-page .tracks-m li+li{box-shadow:0 -1px 0 var(--border-subtle)}
  .ip-page .tracks-m a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s-100);align-items:center;min-height:64px;padding:var(--s-100) var(--s-200);text-decoration:none}
  .ip-page .tracks-m .ic-box{width:40px;height:40px;border-radius:var(--r-8);display:grid;place-items:center;background:var(--surface-tint)}
  .ip-page .tracks-m .t{font:600 var(--text-base)/var(--lh-base) var(--font-body);display:block}
  .ip-page #topics .section-head p{display:none}
  .ip-page .section-head{margin-bottom:var(--s-200)}
  .ip-page .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s-200)) var(--s-200);padding:0 var(--s-200)}
  .ip-page .filter{white-space:nowrap}
  .ip-page .trust-main{padding:var(--s-300)}
  .ip-page .rules{grid-template-columns:1fr 1fr;gap:var(--s-100)}
  .ip-page .rule{padding:var(--s-200)}
  .ip-page .rule .body-6{display:none}
  .ip-page .tagline{padding:var(--s-600) 0}
  .ip-page .tagline p{font-size:var(--text-2xl);line-height:var(--lh-2xl)}
  .ip-page .cta .heading-3{font-size:var(--text-2xl)}
}
/* ---------- 768+ ---------- */
@media (min-width:641px){
  .ip-page .chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-page .chapters li+li{box-shadow:none}
  .ip-page .chapters li{box-shadow:inset 0 -1px 0 var(--border-subtle)}
}
/* ---------- 1440 ---------- */
@media (min-width:1025px){
  .ip-page .chapbar .jump{justify-content:flex-start}
  .ip-page .topic-layout{grid-template-columns:minmax(0,1fr) 280px;gap:var(--s-700);align-items:start}
  .ip-page .topic-aside{position:sticky;top:96px}
  .ip-page .rail ol{list-style:none;padding:0;margin-top:var(--s-100);display:grid;gap:var(--s-25)}
  .ip-page .rail a{display:flex;align-items:center;min-height:36px;padding:0 var(--s-100);border-radius:var(--r-8);text-decoration:none;font:500 var(--text-sm)/var(--lh-sm) var(--font-body);color:var(--text-2)}
  .ip-page .rail a:hover{background:var(--surface-tint);color:var(--text)}
  .ip-page .q2 .chapbar-m{display:none}
  .ip-page .q2 .roles-compact{margin-top:0}
}
@media (max-width:1024px){.ip-page .topic-aside{display:none}.ip-page .q2-side{display:contents}}
@media (min-width:1025px){.ip-page .chapbar-q{display:none}}
.ip-page .srcs summary .ic{transition:transform .5s var(--ease)}
.ip-page .read .sec{margin-top:var(--s-700)}
.ip-page .read .diagram, .ip-page .read pre, .ip-page .read blockquote, .ip-page .read .followups, .ip-page .read .mistakes{max-width:100%}
.ip-page .read .followups p, .ip-page .read .mistake span{font-size:var(--text-base);line-height:26px}
.ip-page:has(.chapbar) .nav{position:static}
.ip-page .wrap.section{padding-left:var(--s-400);padding-right:var(--s-400);box-sizing:border-box;max-width:100%}
.ip-page .prose .qcard{margin-top:0}
.ip-page .read .qcard h2{margin:0 0 var(--s-100);font-size:var(--text-lg);line-height:var(--lh-lg)}
@media (max-width:640px){.ip-page .wrap.section{padding-left:var(--s-200);padding-right:var(--s-200)}}
@media (min-width:1025px){
  .ip-page .q2{grid-template-columns:200px minmax(560px,1fr) 280px;grid-template-areas:"rail article side";gap:var(--s-600);align-items:start}
  .ip-page .q2 > .rail{grid-area:rail;display:block;position:sticky;top:96px}
  .ip-page .q2 > article.prose{grid-area:article;min-width:0}
  .ip-page .q2 > .q2-side{grid-area:side;position:sticky;top:96px;display:grid!important;gap:var(--s-300)}
  .ip-page .pager2{grid-template-columns:1fr;margin-top:0}
  .ip-page .pager2 .next{text-align:left}
}

/* ===== v3 visual layer: "Whiteboard" — neo-brutalist, on-brand but louder. Overrides only; structure from v2 unchanged. ===== */
.ip-page{
  --blue:#1f5eff; --blue-tint:#e4ecff; --sun:#ffc93c; --sun-tint:#fff4cf; --teal:#0f8f7a;
  --accent:#ff6b35; --accent-tint:#ffe6d9;
  --line:2px solid var(--ink); --line-3:3px solid var(--ink);
  --hard:4px 4px 0 var(--ink); --hard-sm:3px 3px 0 var(--ink); --hard-accent:6px 6px 0 var(--accent);
  --r-8:4px; --r-12:6px; --r-16:8px; --r-24:10px;
  --dots:radial-gradient(rgba(14,58,105,.18) 1.2px,transparent 1.4px) 0 0/16px 16px;
  --grid:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px;
  --elev-2:var(--hard);
}
.ip-page .heading-1{font-weight:700;letter-spacing:-.035em;font-size:clamp(40px,6.4vw,84px);line-height:.98}
.ip-page .heading-3{font-weight:700;letter-spacing:-.02em}
.ip-page .nav{border-bottom:var(--line)!important;background:var(--paper)!important}
.ip-page .logo b{background:var(--accent)!important;color:var(--ink-deep)!important;border:var(--line);border-radius:4px!important;box-shadow:2px 2px 0 var(--ink)}
.ip-page .btn{border-radius:6px!important;border:var(--line)!important;box-shadow:var(--hard-sm);font-weight:700;transition:transform .12s,box-shadow .12s}
.ip-page .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.ip-page .btn:active{transform:translate(3px,3px);box-shadow:none}
.ip-page .btn-primary{background:var(--accent)!important;color:var(--ink-deep)!important}
.ip-page .btn-secondary{background:var(--white)!important;color:var(--ink)!important}
.ip-page .chip{border-radius:4px!important;border:2px solid currentColor;font-weight:700}
.ip-page .chip-easy{background:#d6f5e6!important;color:#0b5a37!important}
.ip-page .chip-mid{background:var(--sun)!important;color:var(--ink)!important;border-color:var(--ink)}
.ip-page .chip-hard{background:var(--accent)!important;color:var(--ink)!important;border-color:var(--ink)}
.ip-page .chip-dot::before{display:none!important}

/* hub hero: navy slab with grid + code texture */
.ip-page .hero{position:relative;background:var(--ink)!important;color:var(--paper);border:var(--line-3);border-radius:10px;margin-top:var(--s-400);padding:clamp(28px,5vw,64px)!important;box-shadow:var(--hard-accent);overflow:hidden;background-image:var(--grid)!important}
.ip-page .hero::after{content:"@Transactional  @Bean  @Autowired  GET /jobs?q=  p99  @Async  ";position:absolute;right:-20px;bottom:6px;font:600 13px/1 var(--font-mono);color:rgba(255,201,60,.22);white-space:nowrap;letter-spacing:.06em;pointer-events:none}
.ip-page .hero .heading-1{color:var(--paper)}
.ip-page .hero .heading-1 br+*{}
.ip-page .hero .body-lg{color:#d6e2ef!important}
.ip-page .hero .btn-secondary{background:transparent!important;color:var(--paper)!important;border-color:var(--paper)!important;box-shadow:3px 3px 0 var(--accent)}
.ip-page .hero-card{background:var(--paper)!important;color:var(--ink);border:var(--line-3)!important;border-radius:8px!important;box-shadow:6px 6px 0 var(--sun)!important;transform:rotate(1.2deg)}
.ip-page .hero-card .q{font-family:var(--font-display);font-weight:700}

/* track cards: varied blocks */
.ip-page .bento .topic{border:var(--line)!important;border-radius:8px!important;box-shadow:var(--hard)!important;transition:transform .12s,box-shadow .12s}
.ip-page .bento .topic:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)!important}
.ip-page .topic-xl{background:var(--accent)!important;color:var(--ink)!important}
.ip-page .topic-xl *{color:var(--ink)!important}
.ip-page .topic-md{background:var(--blue)!important;color:#fff!important}
.ip-page .topic-md *{color:#fff!important}
.ip-page .topic-sm{background:var(--sun)!important}
.ip-page .topic-soon{background:var(--white)!important;background-image:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(14,58,105,.06) 10px 12px)!important}
.ip-page .ic-box{background:var(--white)!important;border:var(--line);border-radius:6px!important;color:var(--ink)!important}
.ip-page .ic-box *{color:var(--ink)!important}
.ip-page .topic-md .ic-box svg, .ip-page .topic-xl .ic-box svg{stroke:var(--ink)}
.ip-page .section-head .heading-3{font-size:clamp(28px,3.4vw,40px);line-height:1.05}
.ip-page .qlist, .ip-page .qrow{border-color:var(--ink)!important}
.ip-page .qlist{border:var(--line)!important;border-radius:8px!important;box-shadow:var(--hard);overflow:hidden;background:var(--white)}
.ip-page .qrow{border-width:0 0 2px!important;border-radius:0!important}
.ip-page .filter{border:var(--line)!important;border-radius:6px!important}
.ip-page .filter[aria-pressed="true"], .ip-page .filter.on, .ip-page .filter[aria-current]{background:var(--ink)!important;color:var(--paper)!important}
.ip-page .trust{background:var(--sun)!important;border:var(--line-3)!important;border-radius:10px!important;box-shadow:var(--hard)}
.ip-page .rule{background:var(--white)!important;border:var(--line)!important;border-radius:6px!important;box-shadow:var(--hard-sm)!important}
.ip-page .tagline{background:var(--dots)}
.ip-page .cta{background:var(--accent)!important;color:var(--ink)!important;border:var(--line-3)!important;border-radius:10px!important;box-shadow:var(--hard)!important}
.ip-page .cta *{color:var(--ink)!important}
.ip-page .cta .btn-primary{background:var(--ink)!important;color:var(--paper)!important;box-shadow:3px 3px 0 var(--white)}
.ip-page .tracks-m a{border:var(--line)!important;border-radius:6px!important;box-shadow:var(--hard-sm)}

/* topic page */
.ip-page .topic-head{position:relative;background:var(--accent);border:var(--line-3);border-radius:10px;padding:clamp(24px,4vw,48px)!important;margin-top:var(--s-300);box-shadow:var(--hard);overflow:hidden}
.ip-page .topic-head::after{content:"{ }";position:absolute;right:16px;top:-24px;font:700 180px/1 var(--font-display);color:transparent;-webkit-text-stroke:2px rgba(14,58,105,.35);pointer-events:none}
.ip-page .topic-head *{color:var(--ink)!important;position:relative;z-index:1}
.ip-page .chapters{gap:12px!important}
.ip-page .chapter-link{background:var(--white)!important;border:var(--line)!important;border-radius:6px!important;box-shadow:var(--hard-sm)!important}
.ip-page .chapter-link:hover{background:var(--sun)!important}
.ip-page .chapter-link .n{font:800 28px/1 var(--font-display)!important;color:transparent!important;-webkit-text-stroke:1.5px var(--ink);background:none!important;border:0!important}
.ip-page .unit{padding-top:var(--s-600)!important}
.ip-page .unit-head{position:relative;border-top:var(--line-3);padding-top:var(--s-300)!important}
.ip-page .unit-head .n{display:block;font:700 clamp(64px,9vw,112px)/.85 var(--font-display)!important;color:transparent!important;-webkit-text-stroke:2px var(--accent);background:none!important;border:0!important;letter-spacing:-.04em;margin-bottom:4px}
.ip-page .unit:nth-child(even) .unit-head .n{-webkit-text-stroke-color:var(--blue)}
.ip-page .qa{border:var(--line)!important;border-radius:8px!important;box-shadow:var(--hard);background:var(--white);overflow:hidden}
.ip-page .qa>li{border-color:var(--ink)!important}
.ip-page .qa details{border-radius:0!important;border-width:0 0 2px!important;border-color:var(--ink)!important;box-shadow:none!important}
.ip-page .qa li:last-child details{border-bottom:0!important}
.ip-page .qa details[open]{background:var(--sun-tint)!important}
.ip-page .qa details[open] summary{background:var(--sun)!important}
.ip-page .qa .tog{border:var(--line);border-radius:4px!important;background:var(--white)}
.ip-page .qa .more{font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--accent)}
.ip-page .chapbar{background:var(--paper)!important;border-bottom:var(--line)!important;backdrop-filter:none!important}
.ip-page .jump a, .ip-page .chips a{border:var(--line)!important;border-radius:6px!important;background:var(--white)!important;font-weight:700}
.ip-page .jump a:hover, .ip-page .chips a:hover{background:var(--sun)!important}
.ip-page .progress{height:5px!important;background:var(--accent)!important}
.ip-page .jobs, .ip-page .roles-compact{border:var(--line)!important;border-radius:8px!important;box-shadow:var(--hard)!important;background:var(--blue-tint)!important}
.ip-page .next-topic{background:var(--ink)!important;background-image:var(--grid)!important;border:var(--line-3);border-radius:10px!important;box-shadow:var(--hard-accent)!important}

/* question page */
.ip-page .qhead{border-bottom:var(--line-3);padding-bottom:var(--s-300)!important}
.ip-page .qhead .heading-1{font-size:clamp(32px,4.2vw,56px);line-height:1.04}
.ip-page .qcard{background:var(--accent)!important;color:var(--ink)!important;border:var(--line-3)!important;border-radius:8px!important;box-shadow:6px 6px 0 var(--ink)!important}
.ip-page .qcard *{color:var(--ink)!important}
.ip-page .qcard h2{font-weight:800}
.ip-page .rail a[aria-current], .ip-page .rail a.on{border-left:4px solid var(--accent)!important;font-weight:800}
.ip-page .prose h2{font-weight:700;border-left:6px solid var(--blue);padding-left:12px}
.ip-page .diagram{border:var(--line)!important;border-radius:8px!important;box-shadow:var(--hard)!important;background:var(--white) var(--dots)!important}
.ip-page .mistake{border:var(--line)!important;border-left:8px solid var(--accent)!important;border-radius:6px!important;background:var(--white)!important}
.ip-page .followups li{border-color:var(--ink)!important}
.ip-page .sources{border:var(--line)!important;border-radius:6px!important}
.ip-page .pager2 a, .ip-page .prev, .ip-page .next{border:var(--line)!important;border-radius:6px!important;box-shadow:var(--hard-sm)!important;background:var(--sun)!important}
.ip-page pre{border:var(--line);border-radius:6px!important;box-shadow:var(--hard-sm)}
.ip-page .foot{border-top:var(--line)!important}
@media (max-width:640px){
  .ip-page .hero{margin-top:var(--s-200);box-shadow:4px 4px 0 var(--accent)}
  .ip-page .hero::after{display:none}
  .ip-page .hero-card{transform:none}
  .ip-page .topic-head::after{font-size:110px;top:-10px}
  .ip-page .unit-head .n{font-size:64px}
  .ip-page .bento .topic, .ip-page .qa, .ip-page .qlist, .ip-page .qcard, .ip-page .jobs, .ip-page .diagram{box-shadow:3px 3px 0 var(--ink)!important}
}
@media (prefers-reduced-motion:reduce){.ip-page .btn, .ip-page .bento .topic{transition:none}}
/* v3 polish pass 2 */
.ip-page .hero .heading-1{font-size:clamp(40px,5vw,68px);line-height:1}
.ip-page .tagline{color:var(--ink)!important}
.ip-page .tagline *{color:var(--ink)!important;opacity:1!important}
.ip-page .topic-xl *, .ip-page .topic-head *, .ip-page .qcard *, .ip-page .cta *, .ip-page .chip-hard{color:var(--ink-deep)!important}
.ip-page .nav-in{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important}
.ip-page .tracks-m li:nth-child(1) a, .ip-page .tracks-m>a:nth-of-type(1){background:var(--accent)!important}
.ip-page .tracks-m li:nth-child(2) a, .ip-page .tracks-m>a:nth-of-type(2){background:var(--blue-tint)!important}
.ip-page .tracks-m li:nth-child(3) a, .ip-page .tracks-m>a:nth-of-type(3){background:var(--sun)!important}
.ip-page .tracks-m a{margin-bottom:8px}
.ip-page .tracks-m .ic-box{background:var(--white)!important}

/* ===== v3.1: no yellow, brand background motifs, compact topic title, sharper ===== */
.ip-page{
  /* yellow removed: --sun now maps to Kuchup --color-accent-2 (dark theme) #7eb8e8, tint to --color-paper-3 #e4f0f6 */
  --sun:#7eb8e8; --sun-tint:#e4f0f6;
  --r-8:3px; --r-12:4px; --r-16:6px; --r-24:6px;
  --bird:url("/static/brand/kuchup-bird.svg");
  --route:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M-10 170 C120 60 260 190 380 90 S560 30 620 40' fill='none' stroke='%230e3a69' stroke-opacity='.14' stroke-width='2' stroke-dasharray='8 8'/%3E%3Ccircle cx='380' cy='90' r='5' fill='%23ff6b35' fill-opacity='.35'/%3E%3C/svg%3E");
}
.ip-page .heading-1{letter-spacing:-.04em}
.ip-page .hero::after{color:rgba(126,184,232,.28)}
.ip-page .hero::before{content:"";position:absolute;right:-60px;top:-40px;width:520px;height:520px;background:var(--bird) center/contain no-repeat;opacity:.07;filter:invert(1);pointer-events:none}
.ip-page .hero>*{position:relative;z-index:1}
.ip-page .bento .topic, .ip-page .qa, .ip-page .qlist, .ip-page .chapter-link, .ip-page .rule, .ip-page .btn, .ip-page .chip, .ip-page .hero, .ip-page .cta, .ip-page .trust, .ip-page .qcard, .ip-page .next-topic, .ip-page .jobs, .ip-page .roles-compact, .ip-page .diagram, .ip-page .mistake, .ip-page .pager2 a, .ip-page .prev, .ip-page .next, .ip-page .hero-card, .ip-page .filter, .ip-page .jump a, .ip-page .chips a{border-radius:4px!important}
.ip-page .topic-md{background:var(--ink)!important}
.ip-page .trust{position:relative;overflow:hidden}
.ip-page .trust::after{content:"";position:absolute;right:-30px;bottom:-60px;width:300px;height:300px;background:var(--bird) center/contain no-repeat;opacity:.1;pointer-events:none}
.ip-page .trust>*{position:relative;z-index:1}
.ip-page .tagline{background:var(--route) center/100% 100% no-repeat,var(--dots)}
/* topic: header block gone, compact title line */
.ip-page .topic-head{all:unset;display:block;margin:var(--s-100) 0 var(--s-200)}
.ip-page .topic-head::after{display:none!important;content:none}
.ip-page .topic-title{font:700 22px/28px var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;overflow-wrap:anywhere;min-width:0;text-wrap:pretty;max-width:100%}
.ip-page .topic-title span{display:block;font:600 14px/20px var(--font-body);color:var(--muted);letter-spacing:0}
.ip-page .chapters{position:relative}
.ip-page .unit{background:var(--route) right 0 top 8px/min(560px,90%) auto no-repeat}
.ip-page .unit:nth-child(even){background-position:left 0 top 8px}
.ip-page .next-topic{position:relative;overflow:hidden}
.ip-page .next-topic::after{content:"";position:absolute;right:10px;top:-20px;width:180px;height:180px;background:var(--bird) center/contain no-repeat;filter:invert(1);opacity:.1;pointer-events:none}
.ip-page .qcard{position:relative}
.ip-page .qhead{background:var(--route) right bottom/420px auto no-repeat}
@media (max-width:640px){.ip-page .hero::before{width:300px;height:300px;right:-80px;top:auto;bottom:-60px}.ip-page .trust::after{width:200px;height:200px}}
.ip-page .topic-head{padding:0!important;margin:var(--s-75) 0 var(--s-200)!important;border:0!important;box-shadow:none!important;background:none!important}
.ip-page .hero::before{opacity:.13}
.ip-page .tracks-m a, .ip-page .tracks-m a *, .ip-page .topic-sm *{color:var(--ink-deep)!important}

/* ===== v3.1 contrast (WCAG AA): navy on orange/sky fills; no grey on #7eb8e8 ===== */
.ip-page .btn-primary{color:var(--ink-deep)!important}
.ip-page .logo b{color:var(--ink-deep)!important}
.ip-page .qa details[open] summary .caption,
.ip-page .qa details[open] summary .caption.num,
.ip-page .pager2 a .caption,
.ip-page .pager2 .prev .caption,
.ip-page .pager2 .next .caption{color:var(--ink-deep)!important}