@font-face{font-family:Instrument Sans;src:url(instrument.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url(plex.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#f7f7ef;--white:#fffef8;--ink:#142b26;--muted:#4e6059;--line:#cdd3c8;--green:#d6f68c;--mint:#93d8c4;--dark:#142b26;--mono:"IBM Plex Mono",monospace;--sans:"Instrument Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #5c7d26;outline-offset:5px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.04;letter-spacing:-.055em}
p + p{margin-top:1em}
.wrap{width:min(1200px,calc(100% - 104px));margin-inline:auto}
.skip{position:absolute;top:-100px;left:12px;z-index:9;background:var(--white);padding:12px}
.skip:focus{top:8px}
.site-header{border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.signature{display:flex;align-items:center;gap:11px;font-weight:700;text-decoration:none;font-size:19px;white-space:nowrap;letter-spacing:-.045em}
.mark{display:grid;place-items:center;width:32px;height:32px;background:var(--green);border:1px solid var(--ink);border-radius:50%;font:400 10px var(--mono);letter-spacing:-.03em}
nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:600}
nav a{text-decoration:none}
nav a:hover{text-decoration:underline}
.hero{display:grid;grid-template-columns:1fr minmax(385px,.82fr);align-items:center;gap:56px;padding-block:80px 83px}
.hero h1{font-size:clamp(62px,7.05vw,113px);line-height:.92;font-weight:700;letter-spacing:-.068em}
.hero .intro{max-width:480px;margin-top:28px;font-size:20px;line-height:1.47;color:var(--muted)}
.hero-actions{margin-top:34px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.button{display:inline-flex;justify-content:center;align-items:center;gap:.7em;min-height:46px;border-radius:4px;border:1px solid var(--ink);padding:10px 16px;text-decoration:none;font-weight:700;font-size:15px;background:var(--green);color:var(--ink)}
.button:hover{background:#ebf9c9}
.text-link{font-size:15px;font-weight:700}
.figure{background:var(--dark);color:#f5f8ee;padding:25px 25px 21px;border-radius:8px;min-width:0}
.figure h2,.figure h3{font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1.15}
.figure-heading{display:flex;justify-content:space-between;align-items:start;gap:12px}
.figure a{color:#f4f7ed}
.figure .source{color:#c0cfc6;font-size:12px;line-height:1.3}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:17px;font:400 11px var(--mono);color:#e1ebe3}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend span::before{content:"";width:15px;height:3px;background:var(--green);border-radius:2px}
.legend span:nth-child(2)::before{background:var(--mint)}
.plot{display:block;width:100%;height:185px;margin:13px 0 8px}
.figure figcaption{padding-top:12px;border-top:1px solid #38524a;display:flex;justify-content:space-between;gap:12px;align-items:center;font:400 11px var(--mono);color:#d8e3db}
.section{padding-block:42px 76px;border-top:1px solid var(--line)}
.section-title{font-size:clamp(40px,5vw,65px);margin-bottom:27px}
.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.project{background:var(--white);border:1px solid var(--line);border-radius:7px;min-height:225px;padding:25px 26px 22px;display:flex;flex-direction:column;text-decoration:none}
.project:hover{border-color:var(--ink);background:#f5f8e9}
.meta{font:400 12px/1.45 var(--mono);color:var(--muted)}
.project h3{font-size:clamp(26px,3vw,39px);margin-top:13px;font-weight:650}
.project p{color:var(--muted);font-size:16px;margin-top:10px;max-width:49ch}
.project-foot{padding-top:21px;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700}
.arrow{font-family:Arial,sans-serif;font-size:22px;line-height:1;font-weight:400}
.about{display:grid;grid-template-columns:.75fr 1.25fr;gap:36px}
.about .section-title{margin-bottom:0}
.about .body{max-width:65ch}
.about .button{margin-top:24px}
.site-footer{padding-block:21px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:12px}
.case-header{padding-block:38px 45px;border-bottom:1px solid var(--line)}
.case-header .back{display:inline-block;font-size:15px;font-weight:650;margin-bottom:36px}
.case-header h1{font-size:clamp(44px,7vw,88px);max-width:920px;margin-block:13px 16px;letter-spacing:-.075em}
.case-header .deck{font-size:21px;color:var(--muted);max-width:65ch}
.case-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;align-items:center}
.case-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.39fr);gap:55px;padding-block:42px 70px;align-items:start}
.case-main{min-width:0}
.case-main > section + section{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.case-main h2{font-size:34px;margin-bottom:14px;letter-spacing:-.05em}
.case-main h3{font-size:23px}
.case-main p,.case-main li,.aside p{max-width:70ch}
.case-main ul,.case-main ol{padding-left:22px}
.case-main li + li{margin-top:8px}
.aside{border:1px solid var(--line);border-radius:7px;padding:21px;background:var(--white)}
.aside h2{font-size:23px;line-height:1.15;margin-bottom:11px}
.aside a{overflow-wrap:anywhere}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-block:0 27px}
.kpi{padding:14px;background:var(--white);border:1px solid var(--line);border-radius:6px;min-width:0}
.kpi strong{display:block;font-size:clamp(21px,3.3vw,34px);letter-spacing:-.06em;line-height:1.06;margin-bottom:6px;overflow-wrap:anywhere}
.kpi span{display:block;font-size:13px;color:var(--muted)}
.case-main .figure{margin-top:17px}
.case-main .plot{height:240px}
.table-wrap{overflow:auto;margin-block:13px}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums;text-align:left}
th,td{padding:8px 9px;border-bottom:1px solid var(--line)}
th{vertical-align:bottom}
caption{text-align:left;color:var(--muted);font-size:13px;padding-bottom:8px}
details{margin-block:10px;background:var(--white);border:1px solid var(--line);border-radius:5px}
summary{padding:11px 13px;cursor:pointer;font-size:15px;font-weight:700}
.details-content{padding:0 13px 13px}
pre{padding:15px;white-space:pre-wrap;overflow-wrap:anywhere;background:#e8eee2;border-radius:4px;font:400 13px/1.55 var(--mono)}
code{font-family:var(--mono);font-size:.86em;overflow-wrap:anywhere}
.case-select{margin:15px 0;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.case-select[hidden],details[hidden]{display:none}
select{font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--muted);border-radius:4px;max-width:100%;padding:7px}
.example-response{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.example-response div{background:#edf1e7;padding:12px;border-radius:4px;overflow-wrap:anywhere;white-space:pre-wrap}
.example-response b{display:block;margin-bottom:5px}
.note{border-left:3px solid #829e49;background:#eef1e5;padding:13px 15px;margin-top:14px;font-size:15px}
@media(max-width:930px){
  .wrap{width:calc(100% - 64px)}
  .hero{gap:25px;grid-template-columns:minmax(0,1fr) minmax(315px,.86fr);padding-block:60px}
  .hero h1{font-size:clamp(48px,7.45vw,79px)}
  .case-grid{gap:28px}
}
@media(max-width:680px){
  .wrap{width:calc(100% - 36px)}
  .header-inner{min-height:63px;gap:10px}
  .signature{font-size:16px;gap:6px}
  .mark{width:26px;height:26px;font-size:9px}
  nav{gap:13px;font-size:13px}
  .hero,.case-grid,.about{grid-template-columns:1fr}
  .hero{padding-block:43px 40px;gap:33px}
  .hero h1{font-size:clamp(48px,11.2vw,72px)}
  .hero .intro{margin-top:19px;font-size:18px}
  .hero-actions{margin-top:23px;gap:14px}
  .figure{padding:18px 15px 14px}
  .figure h2,.figure h3{font-size:22px}
  .figure figcaption{font-size:10px}
  .section{padding-block:31px 46px}
  .project-list{grid-template-columns:1fr}
  .project{min-height:0;padding:20px}
  .project-foot{padding-top:15px}
  .case-header{padding-block:24px 30px}
  .case-header .back{margin-bottom:24px}
  .case-header .deck{font-size:18px}
  .case-grid{padding-block:28px 45px}
  .kpi{padding:10px 8px}
  .kpi span{font-size:12px}
  .example-response{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.about .text-link{display:inline-block;margin-left:14px;margin-top:12px}

:root{--paper:#f4f6fa;--white:#fff;--ink:#152746;--muted:#4e6078;--line:#cfd8e6;--green:#b9e0ff;--mint:#9fcef5;--dark:#102344}
a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid #416dc4;outline-offset:3px}
.button:hover{background:#d8edff}
.project:hover{background:#eaf3fb}
.hero-brand{font:400 12px/1.4 var(--mono);margin-bottom:16px;color:var(--muted)}
.hero-brand span{margin-inline:5px}
.hero h1{font-size:clamp(62px,6.9vw,103px)}
.snapshot{padding:31px 27px 23px;border-radius:11px}
.snapshot h2{font-size:23px}
.snapshot-value{font-size:clamp(27px,3.7vw,49px);line-height:1.08;letter-spacing:-.06em;font-weight:700;color:#d2eaff;margin:20px 0 8px}
.snapshot .source{color:#c4d3e8}
.snapshot-stats{display:grid;grid-template-columns:.85fr 1fr 1.2fr;gap:10px;margin:24px 0 25px}
.snapshot-stats div{border-top:1px solid #466084;padding-top:10px}
.snapshot-stats strong{display:block;font-size:clamp(18px,2.25vw,28px);line-height:1.1;letter-spacing:-.04em;white-space:nowrap}
.snapshot-stats span{display:block;font-size:12px;color:#c4d3e8;margin-top:4px}
.snapshot figcaption,.risk figcaption{border-color:#466084}
.risk{margin-bottom:20px}
.risk-row{display:grid;grid-template-columns:100px minmax(30px,1fr) 67px;align-items:center;gap:12px;margin:16px 0;font-size:13px}
.risk-row strong{text-align:right;font-variant-numeric:tabular-nums}
.risk-track{background:#344f79;height:9px;border-radius:6px;overflow:hidden}
.risk-track span{display:block;height:100%;background:var(--green)}
.note{border-color:#638bb5;background:#e6eef9}
pre{background:#eaf0f8}
.kpi strong{font-size:clamp(20px,2.65vw,31px)}
.tutor-panel{margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:19px}
.demo-actions{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 13px}
.tutor-action{border:1px solid #8297b5;background:#ecf4fc;color:var(--ink);font:600 14px var(--sans);border-radius:4px;padding:7px 10px;cursor:pointer;text-align:left}
.tutor-action:hover{background:#dcecff}
.tutor-action:disabled{opacity:.6;cursor:default}
.tutor-options{display:grid;grid-template-columns:1.3fr .75fr 1fr;gap:10px;margin-bottom:12px}
.tutor-panel label{display:block;font-size:14px;font-weight:650}
.tutor-panel input,.tutor-panel select{display:block;width:100%;border:1px solid #8297b5;background:var(--white);color:var(--ink);border-radius:4px;min-height:39px;padding:7px 9px;font:400 15px var(--sans)}
.tutor-panel label select{margin-top:4px}
.tutor-submit{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:5px}
.tutor-submit .button{min-height:39px;cursor:pointer;font-family:var(--sans);padding-block:5px}
#tutor{scroll-margin-top:20px}
#tutor-output{background:#edf4fb;border-radius:6px;padding:15px;margin-top:16px}
#tutor-output h3{margin:7px 0 10px}
#tutor-output input{margin-top:4px}
#tutor-output .demo-status{margin:9px 0 0;font-size:15px;font-weight:650}
#tutor-output .demo-status:empty{display:none}
.transcript{margin-top:10px}
@media(max-width:930px){.hero h1{font-size:clamp(48px,7vw,79px)}}
@media(max-width:680px){
  .hero h1{font-size:clamp(46px,10.5vw,72px)}
  .snapshot{padding:21px 17px 17px}
  .snapshot-value{font-size:clamp(28px,8.2vw,45px)}
  .snapshot-stats strong{font-size:clamp(16px,5vw,25px)}
  .snapshot-stats span{font-size:11px}
  .tutor-panel{padding:13px}
  .tutor-options{grid-template-columns:1fr 1fr}
  .tutor-options label:first-child{grid-column:1 / -1}
  .risk-row{grid-template-columns:77px minmax(20px,1fr) 54px;gap:8px;font-size:12px}
  .kpi strong{font-size:19px}
}

.prompt-audio{width:min(100%,370px);display:block;margin:0 0 14px}
