:root{
  --bg:#e8ede2; --panel:#f5f7f0; --field:#e3eadb; --field-h:#d9e3d0;
  --moss:#4f7a57; --moss-d:#b4c9b0; --gold:#2d5a3d; --text:#1d2b21; --muted:#667a6b;
  --serif:"Libre Caslon Text","Scotch Roman","Big Caslon","Bodoni MT",Georgia,"Times New Roman",serif;
  --display:"Bodoni Moda","Bodoni MT","Didot",Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--serif);font-size:15px;line-height:1.5}
header{text-align:center;max-width:760px;margin:0 auto;padding:44px 24px 18px}
.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);background:var(--field);padding:5px 14px;border-radius:20px;margin-bottom:14px}
h1{font-family:var(--display);font-weight:500;font-size:2.9rem;line-height:1.1;margin:0;letter-spacing:.01em}
h1 em{color:var(--gold);font-style:italic}
header p{color:var(--muted);margin:12px auto 0;font-size:1rem;max-width:560px}
.steps{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;font-size:.8rem}
.steps li{background:var(--panel);color:var(--text);padding:6px 14px;border-radius:20px}
.steps b{color:var(--gold);font-family:var(--display);margin-right:6px}
main{display:grid;grid-template-columns:minmax(300px,330px) minmax(0,1fr) minmax(300px,330px);gap:28px;max-width:1920px;margin:0 auto;padding:16px 32px;align-items:start}
.col{display:flex;flex-direction:column;gap:16px}
.card dl:first-child{margin-top:0}
.card{background:var(--panel);border-radius:16px;padding:18px 18px 16px;box-shadow:0 10px 28px -14px rgba(35,60,42,.28);transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(35,60,42,.34)}
h2{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--gold);margin:0 0 12px;letter-spacing:.04em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);gap:5px}
label.wide b{color:var(--gold);font-weight:400}
input[type=number],select{
  background:var(--field);border:0;border-radius:9px;color:var(--text);
  font-family:var(--serif);font-size:.95rem;padding:9px 11px;outline:none;width:100%;
  transition:background .2s;
}
input[type=number]:hover,select:hover{background:var(--field-h)}
input[type=number]:focus,select:focus{background:var(--field-h);box-shadow:0 0 0 2px rgba(111,143,106,.35)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23869184' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
select option{background:#f5f7f0;color:var(--text)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:2px 0 0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--field)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--field)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--moss-d)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);margin-top:-6px;border:0;box-shadow:0 2px 6px rgba(30,50,35,.35);transition:transform .15s}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);border:0}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus{outline:none}

label.check{flex-direction:row;align-items:center;gap:10px;margin-top:16px;cursor:pointer;font-size:.85rem}
label.check input{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:20px;background:var(--field);position:relative;cursor:pointer;transition:background .2s;margin:0;flex:none}
label.check input::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
label.check input:checked{background:var(--moss-d)}
label.check input:checked::after{transform:translateX(14px);background:var(--gold)}

.hint{font-size:.75rem;color:var(--muted);font-style:italic;margin:12px 0 0}
dl{margin:12px 0 0;display:grid;grid-template-columns:1fr auto;gap:5px 14px}
dt{color:var(--muted);font-size:.85rem}
dd{margin:0;text-align:right;color:var(--text)}
dd.g{color:var(--gold)}
.stub{background:var(--field);border-radius:10px;padding:10px 12px;margin-top:8px}
.stub:first-child{margin-top:0}
.stub h3{margin:0 0 6px;font-size:.85rem;color:var(--moss);font-weight:700;letter-spacing:.06em}
.warn{color:var(--muted);font-style:italic;margin:0}
.chartwrap{display:flex;flex-direction:column;align-items:center;min-width:0}
canvas{width:100%;max-width:1100px;aspect-ratio:1/1.24;background:#f8faf3;border-radius:20px;cursor:crosshair}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0;font-size:.78rem;color:var(--muted);justify-content:center}
.legend li{display:flex;align-items:center;gap:6px}
.legend i{width:14px;height:3px;display:inline-block;border-radius:2px}
.legend i.dash{background:repeating-linear-gradient(90deg,var(--moss) 0 4px,transparent 4px 7px)}
footer{margin-top:34px;padding:26px;text-align:center;color:var(--muted);font-size:.85rem;background:var(--panel)}
@media(max-width:1200px){main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.chartwrap{grid-column:1/-1;grid-row:1;position:static}canvas{width:min(100%,900px)}}
@media(max-width:760px){main{grid-template-columns:1fr;padding:12px}header{padding:28px 16px 4px}h1{font-size:2.2rem}}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
header>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
header>*:nth-child(2){animation-delay:.08s}header>*:nth-child(3){animation-delay:.16s}header>*:nth-child(4){animation-delay:.24s}
.col>.card{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.col>.card:nth-child(2){animation-delay:.12s}.col>.card:nth-child(3){animation-delay:.24s}
.chartwrap{animation:fade 1s .15s ease both}
footer{animation:fade 1s .5s ease both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
label>span{line-height:1.3;min-height:1.3em}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{background:var(--field);color:var(--text);border:0;border-radius:20px;padding:6px 14px;font-family:var(--serif);font-size:.8rem;cursor:pointer;transition:background .2s,transform .15s}
.chip:hover{background:var(--field-h);transform:translateY(-1px)}
.chip:active{transform:scale(.96)}
canvas{touch-action:none}