:root{
  --bg:#f3efe4;--paper:#fff;--ink:#161616;
  --accent:#ffd400;--accent-soft:#fff2ad;
  --long:#0a8f3c;--short:#e5232b;--muted:#48463c;--muted2:#8a8273;
  --bd:2px;--sh:5px 5px 0 var(--ink);--sh-sm:3px 3px 0 var(--ink);--sh-xs:2px 2px 0 var(--ink);
  --sans:"PingFang SC","Helvetica Neue",Helvetica,Arial,"Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-width:320px;padding:0 18px 72px;color:var(--ink);font-family:var(--sans);line-height:1.5;
  background:
    linear-gradient(90deg,rgba(20,20,20,.028) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(rgba(20,20,20,.028) 1px,transparent 1px) 0 0/32px 32px,
    var(--bg);
}
button,input,select{font:inherit}
.wrap{max-width:1180px;margin:0 auto}

/* navigation */
.tabs{display:flex;margin:24px 0 0;border-bottom:var(--bd) solid var(--ink)}
.tab{
  padding:9px 16px;border:var(--bd) solid transparent;border-bottom:0;color:var(--muted);
  font-size:13px;font-weight:800;letter-spacing:.01em;text-decoration:none;transition:color .1s,background .1s,transform .1s;
}
.tab:hover{color:var(--ink);background:var(--accent-soft)}
.tab.on{position:relative;top:1px;background:var(--ink);color:var(--accent)}

/* header */
.page-hero{padding:36px 0 8px}
.title-row{display:flex;align-items:center;gap:16px}
.brand-shard{flex:0 0 auto;filter:drop-shadow(3px 3px 0 rgba(22,22,22,.22));animation:shard-in .42s cubic-bezier(.2,.8,.2,1) both}
.eyebrow{margin-bottom:8px;font:800 11px/1 var(--mono);letter-spacing:.1em;color:var(--short)}
h1{font-size:clamp(34px,6vw,58px);font-weight:950;letter-spacing:-.045em;line-height:.92}
h1 .hl{box-shadow:inset 0 -.27em 0 var(--accent)}
.lede{max-width:760px;margin-top:16px;color:var(--muted);font-size:14px;font-weight:650;line-height:1.75}
.lede b{color:var(--ink);font-weight:900}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.hero-tags span{padding:5px 9px;border:var(--bd) solid var(--ink);background:var(--paper);box-shadow:var(--sh-xs);font:800 10px/1 var(--mono);letter-spacing:.03em}

/* shared cards */
main{display:flex;flex-direction:column;gap:28px;margin-top:18px}
.card,.chart-card{border:var(--bd) solid var(--ink);background:var(--paper);box-shadow:var(--sh)}
.card-h,.ch-h{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:var(--paper)}
.card-h{padding:12px 16px}
.card-h h2{font-size:15px;font-weight:900;letter-spacing:.01em}
.card-h .tag{color:var(--accent);font:800 10px/1 var(--mono);letter-spacing:.05em}
.card-b{padding:20px}

/* controls */
.panel-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:20px;border-bottom:var(--bd) solid var(--ink)}
.preset-group{display:flex;align-items:stretch;border:var(--bd) solid var(--ink);box-shadow:var(--sh-xs)}
.pg-label{display:flex;align-items:center;padding:0 12px;background:var(--ink);color:var(--accent);font:900 10px/1 var(--mono);letter-spacing:.08em}
.preset{
  padding:10px 13px;border:0;border-right:var(--bd) solid var(--ink);background:var(--paper);color:var(--ink);
  font-size:12px;font-weight:900;cursor:pointer;transition:transform .08s,box-shadow .08s,background .1s;
}
.preset:last-child{border-right:0}
.preset small{display:block;margin-top:2px;color:var(--muted2);font:700 9px/1.2 var(--mono)}
.preset:hover{position:relative;z-index:1;transform:translate(-2px,-2px);background:var(--accent-soft);box-shadow:var(--sh-xs)}
.preset:active{transform:translate(0,0);box-shadow:none}
.preset.on{background:var(--accent)}
.preset.on small{color:var(--ink)}
.field-sim{flex:0 0 208px}

.parameter-groups{display:grid;gap:17px;margin-top:20px}
.parameter-block{border:var(--bd) solid var(--ink);background:var(--paper);box-shadow:var(--sh-xs)}
.parameter-h{display:flex;align-items:center;background:var(--ink);color:var(--paper)}
.parameter-h span{align-self:stretch;display:grid;place-items:center;min-width:42px;background:var(--accent);color:var(--ink);font:950 13px/1 var(--mono)}
.parameter-h h3{padding:9px 12px;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.group-grid{display:grid;gap:17px;padding:16px}
.group-grid.g1{grid-template-columns:1fr}
.group-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.group-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.scenario-groups{grid-template-columns:.65fr 1.35fr 1.35fr}
.scenario-groups .group-grid{grid-template-columns:1fr}

.field{display:flex;min-width:0;flex-direction:column;gap:7px}
.field label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink);font-size:11px;font-weight:850;letter-spacing:.015em}
.field label .hint{color:var(--muted2);font-weight:600}
.field label .v{padding:1px 5px;border:var(--bd) solid var(--ink);background:var(--accent-soft);font:850 11px/1.3 var(--mono);white-space:nowrap}
.field-note{color:var(--muted2);font-size:9.5px;font-weight:650;line-height:1.45}
.inp{position:relative;display:flex;align-items:center}
.inp .pre,.inp .suf{position:absolute;z-index:1;color:var(--muted2);font:800 12px/1 var(--mono);pointer-events:none}
.inp .pre{left:12px}.inp .suf{right:12px}
input[type=number],select{
  width:100%;min-height:44px;border:var(--bd) solid var(--ink);border-radius:0;outline:0;background:var(--paper);color:var(--ink);
  font:750 14px/1 var(--mono);transition:transform .1s,box-shadow .1s,background .1s;
}
input[type=number]{padding:11px 12px;-moz-appearance:textfield}
input.haspre{padding-left:27px}input.hassuf{padding-right:30px}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
select{
  padding:11px 32px 11px 12px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23161616' stroke-width='2.5' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
input:focus,select:focus{transform:translate(-2px,-2px);box-shadow:var(--sh-xs);background:#fffdf2}
.account-scenario-wrap{display:none}
.account-scenario-wrap.show{display:block}

.model-check{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bd);margin-top:20px;border:var(--bd) solid var(--ink);background:var(--ink);box-shadow:var(--sh-xs)}
.model-check.error{display:block;padding:13px 15px;background:#fff0ef;color:var(--short);font-weight:900}
.model-fact{min-width:0;padding:12px 13px;background:var(--paper)}
.model-fact:first-child{background:var(--accent)}
.model-fact .k{color:var(--muted2);font-size:9.5px;font-weight:850;text-transform:uppercase}
.model-fact:first-child .k{color:var(--ink)}
.model-fact .v{margin-top:4px;font:900 17px/1.1 var(--mono);overflow-wrap:anywhere}
.model-fact .d{margin-top:5px;color:var(--muted);font-size:10px;font-weight:650;line-height:1.45}

/* result board */
.result-grid{display:grid;grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);background:var(--ink);gap:var(--bd)}
.result-hero{padding:22px 20px;background:var(--accent)}
.result-hero .lead{font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.result-hero .big{margin-top:8px;font:950 clamp(36px,5vw,64px)/.95 var(--mono);letter-spacing:-.055em;overflow-wrap:anywhere}
.result-hero .detail{margin-top:10px;color:#5c4d00;font:750 12px/1.55 var(--mono)}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:var(--bd);background:var(--ink)}
.kpi-cell{padding:16px;background:var(--paper);transition:opacity .15s,background .15s}
.kpi-cell .k{color:var(--muted2);font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.03em}
.kpi-cell .v{margin-top:6px;font:950 27px/1 var(--mono);letter-spacing:-.04em}
.kpi-cell .d{margin-top:6px;color:var(--muted);font-size:10.5px;font-weight:650;line-height:1.45}
.kpi-cell .v.good{color:var(--long)}.kpi-cell .v.bad{color:var(--short)}.kpi-cell .v.warn{color:#a88700}
.result-board.result-kick{animation:result-kick .28s ease-out}

/* charts */
.visual-section{margin-top:4px}
.section-intro{display:flex;align-items:center;gap:12px;margin:0 0 13px}
.section-index{padding:4px 8px;border:var(--bd) solid var(--ink);background:var(--accent);box-shadow:var(--sh-xs);font:950 12px/1 var(--mono)}
.section-intro h2{font-size:19px;font-weight:950;letter-spacing:-.02em}
.section-intro p{margin-top:2px;color:var(--muted);font-size:11px;font-weight:650}
.chart-grid{display:grid;gap:18px}
.chart-grid-two{grid-template-columns:1fr 1fr}
.chart-card{min-width:0;transition:transform .12s,box-shadow .12s}
.chart-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.ch-h{padding:10px 13px}
.ch-h h3{font-size:13px;font-weight:900}
.ch-h span{color:var(--accent);font:800 9.5px/1 var(--mono);letter-spacing:.06em}
.legend-bar{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:var(--bd) solid var(--ink);color:var(--muted);font:750 9.5px/1 var(--mono)}
.swatch{display:inline-block;width:13px;height:4px;border:1px solid var(--ink)}
.swatch.cloud{background:#c8c3b8}.swatch.p5{background:var(--short)}.swatch.p50{background:var(--ink)}.swatch.p95{background:var(--long)}.swatch.band{background:var(--accent)}
.chart-shell{
  min-height:320px;padding:10px 7px 2px;
  background:
    linear-gradient(90deg,rgba(22,22,22,.035) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(rgba(22,22,22,.035) 1px,transparent 1px) 0 0/24px 24px,
    #fff;
}
.chart-shell.compact{min-height:250px}.chart-shell.sensitivity{min-height:290px}
.chart-card svg{display:block;width:100%;height:auto;overflow:visible}
.chart-card svg text{font-family:var(--mono)}
.chart-card svg .domain{stroke:var(--ink);stroke-width:1.5}
.chart-card svg .tick line{stroke:var(--ink)}
.chart-card svg .tick text{fill:var(--muted);font-size:9px;font-weight:700}
.chart-card svg .grid line{stroke:#d6d0c2;stroke-dasharray:2 4}
.chart-card svg .grid .domain{display:none}
.ch-note{min-height:66px;padding:11px 13px;border-top:var(--bd) dashed var(--ink);color:var(--muted);font-size:11px;font-weight:650;line-height:1.65}
.ch-note b{padding:0 3px;background:var(--accent-soft);color:var(--ink);font-family:var(--mono);font-weight:900}

/* actions */
.action-card{margin-top:4px}
.action-card .status{color:var(--paper);font:800 10px/1 var(--mono)}
.action-card .status.run{color:var(--accent)}.action-card .status.done{color:#7dffad}
.action-body{display:flex;flex-wrap:wrap;gap:10px;padding:16px}
.btn{padding:10px 14px;border:var(--bd) solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font-size:12px;font-weight:900;cursor:pointer;transition:transform .08s,box-shadow .08s,background .1s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-xs)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn.primary{margin-left:auto;background:var(--accent)}
.btn.primary:hover{background:var(--ink);color:var(--accent)}

footer{margin-top:50px;padding-top:20px;border-top:var(--bd) solid var(--ink);color:var(--muted2);font-size:10.5px;font-weight:700;text-align:center}

/* motion */
.entrance{animation:card-in .38s cubic-bezier(.2,.75,.25,1) both}
.result-board{animation-delay:.05s}.visual-section:nth-of-type(3){animation-delay:.1s}.visual-section:nth-of-type(4){animation-delay:.15s}.visual-section:nth-of-type(5){animation-delay:.2s}
.kpi-cell.loading .v,.kpi-cell.loading .d{opacity:.28}
.chart-card.loading .chart-shell{position:relative;overflow:hidden}
.chart-card.loading .chart-shell::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,212,0,.35) 48%,transparent 66%);animation:scan 1s linear infinite}
.chart-card.loading svg{opacity:.2}
@keyframes shard-in{from{opacity:0;transform:translate(-8px,7px) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes result-kick{50%{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@media(max-width:960px){
  .group-grid.g4{grid-template-columns:1fr 1fr}
  .scenario-groups{grid-template-columns:1fr}
  .scenario-groups .group-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .result-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .panel-top{align-items:stretch;flex-direction:column}
  .preset-group{width:100%}
  .preset{flex:1}
  .field-sim{flex-basis:auto;width:100%}
  .chart-grid-two{grid-template-columns:1fr}
  .model-check{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{padding:0 12px 54px}
  .tabs{margin-top:15px}.tab{flex:1;padding:8px 7px;text-align:center;font-size:11.5px}
  .page-hero{padding-top:28px}.brand-shard{width:42px;height:42px}.title-row{gap:11px}
  .eyebrow{font-size:9px}h1{font-size:33px}.lede{font-size:12.5px}
  main{gap:23px}.card-b{padding:13px}
  .preset-group{display:grid;grid-template-columns:1fr 1fr}
  .pg-label{grid-column:1/-1;padding:8px 10px}
  .preset{border-right:var(--bd) solid var(--ink);border-bottom:var(--bd) solid var(--ink)}
  .preset:nth-child(3),.preset:nth-child(5){border-right:0}
  .preset:nth-last-child(-n+2){border-bottom:0}
  .group-grid.g3,.group-grid.g4,.scenario-groups .group-grid.g3{grid-template-columns:1fr}
  .model-check{grid-template-columns:1fr}
  .result-hero{padding:18px 15px}.result-hero .big{font-size:40px}
  .kpi{grid-template-columns:1fr 1fr}.kpi-cell{padding:13px}.kpi-cell .v{font-size:22px}
  .chart-card:hover{transform:none;box-shadow:var(--sh)}
  .chart-shell{min-height:300px;padding-left:0;padding-right:0}.chart-shell.compact{min-height:240px}
  .ch-note{min-height:0}
  .action-body{display:grid;grid-template-columns:1fr 1fr;padding:13px}.btn{padding:10px 8px}.btn.primary{margin-left:0}
}
@media(max-width:390px){
  .kpi{grid-template-columns:1fr}
  .hero-tags span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}