:root { --ink:#434343; --sub:#434343; --line:#dbe4ed; --paper:#fff; --white:#fff; --blue:#ed271c; --indigo:#233f77; --teal:#ed271c; --light:#eaf4fa; --warn:#9e4d20; --warnbg:#fff4e9; --shadow:0 18px 48px rgba(25,56,93,.085); }
    * { box-sizing: border-box; }
    body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
    .shell { max-width:1180px; padding:40px 22px 50px; margin:auto; }
    .mast { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:25px; }
    .wordmark { font-size:22px; letter-spacing:-.8px; font-weight:900; color:var(--indigo); }
    .wordmark span { font-size:11px; color:var(--sub); font-weight:650; letter-spacing:1.9px; display:block; margin-top:-5px; }
    .pill { font-size:11px; font-weight:700; letter-spacing:.7px; border:1px solid var(--line); background:white; color:var(--sub); padding:7px 12px; border-radius:999px; }
    .hero { color:#fff; background: linear-gradient(120deg,#e0463e 0%,#b8413b 54%,#cd1005 100%); border-radius:24px; padding:34px 38px 36px; box-shadow:var(--shadow); overflow:hidden; position:relative; }
    .hero:after { content:''; width:330px; height:330px; position:absolute; right:-95px; top:-180px; border:55px solid rgba(255,255,255,.045); border-radius:50%; pointer-events:none; }
    .eyebrow { font-size:11px; letter-spacing:2.3px; text-transform:uppercase; font-weight:800; opacity:.75; }
    h1 { font-size:clamp(29px,4.2vw,48px); letter-spacing:-1.9px; line-height:1.12; max-width:710px; margin:12px 0 14px; }
    .hero p { max-width:750px; margin:0; color:#d6e8f1; font-size:16px; }
    .main { display:grid; grid-template-columns: 370px minmax(0,1fr); align-items:start; gap:24px; margin-top:25px; }
    .panel { background:white; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:20px; padding:24px; }
    .panel h2 { font-size:19px; line-height:1.25; margin:0; letter-spacing:-.5px; }
    .panelhead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; }
    .sectionnum { font-size:12px; color:var(--teal); font-weight:800; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:5px; }
    button, select, input { font:inherit; }
    button { cursor:pointer; }
    .reset { color:var(--blue); border:0; padding:4px 0; background:transparent; font-weight:750; font-size:13px; white-space:nowrap; }
    .control { padding:15px 0; border-top:1px solid #e8edf3; }
    .control:first-of-type { border-top:0; padding-top:0; }
    label, .label { display:block; font-size:12px; font-weight:800; color:#434343; letter-spacing:.25px; margin-bottom:10px; }
    select { width:100%; padding:12px 38px 12px 14px; border:1px solid #c9d7e3; border-radius:10px; background:white; color:var(--ink); outline-offset:3px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 6 5 5 5-5' stroke='%235b6f85' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center; }
    select:focus-visible, input:focus-visible, button:focus-visible { outline:3px solid #8dc9f7; outline-offset:2px; }
    .stepper { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:9px; margin:2px 0 12px; }
    .stepper button { background:#f4f8fc; height:38px; border:1px solid #d9e4ef; color:var(--indigo); border-radius:10px; font-size:23px; line-height:1; }
    .stepper output { text-align:center; font-size:28px; font-weight:800; letter-spacing:-.8px; }
    input[type=range] { width:100%; accent-color:var(--teal); cursor:pointer; }
    .rangeticks { display:flex; justify-content:space-between; font-size:11px; color:var(--sub); }
    .hint { font-size:12px; line-height:1.55; color:var(--sub); margin:9px 0 0; }
    .solution { display:flex; flex-direction:column; gap:20px; min-width:0; }
    .topline { display:flex; gap:12px; justify-content:space-between; align-items:start; }
    .status { color:var(--teal); background:#e9f7f5; border:1px solid #d2eeea; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; white-space:nowrap; }
    .roomtitle { margin:8px 0 5px; font-size:26px; line-height:1.15; letter-spacing:-.9px; }
    .subtitle { color:var(--sub); margin:0; }
    .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
    .stat { padding:13px 15px; background:#f3f8fb; border-radius:12px; }
    .stat strong { font-size:21px; font-weight:800; line-height:1.2; display:block; color: #ed271c; }
    .stat span { display:block; font-size:11px; color:var(--sub); margin-top:3px; }
    .warning { background:var(--warnbg); border:1px solid #f4d6b5; color:var(--warn); padding:12px 14px; border-radius:12px; font-size:13px; margin-top:17px; }
    .divider { height:1px; background:var(--line); margin:23px 0; }
     h3 { font-size:16px; margin:0 0 13px; }
    .components { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .component { background:#fff; border:1px solid #e0e7ef; border-radius:14px; padding:17px 16px 16px; min-width:0; }
    .iconbox { height:33px; width:33px; background:#e9f4f8; color:var(--blue); display:grid; place-items:center; border-radius:9px; font-size:18px; margin-bottom:13px; }
    .component h4 { font-size:13px; margin:0 0 4px; font-weight: 700; }
    .component p { font-size:13px; margin:0; color:var(--sub); line-height:1.47; }
    .considerations { display:grid; gap:0; }
    .consideration { display:grid; grid-template-columns:34px 1fr; gap:11px; padding:14px 0; border-top:1px solid #e8edf3; }
    .consideration:first-child { border-top:0; padding-top:0; }
    .num { color:var(--teal); font-size:12px; font-weight:850; }
    .consideration strong { display:block; font-size:13px; }
    .consideration p { margin:2px 0 0; font-size:13px; color:var(--sub); line-height: 24px; }
    .priority { padding:17px; border-radius:13px; background:#f6e5e4; border:1px solid #d5eaea; }
    .priority strong { display:block; font-size:12px; color:var(--teal); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
    .priority p { margin:0; font-weight:650; }
    .buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
    .btn { border-radius:11px; border:1px solid var(--blue); padding:12px 15px; font-weight:750; font-size:13px; transition:background .15s; }
    .primary { background:var(--blue); color:#fff; }
    .primary:hover { background:#fff; color: var(--blue); }
    .secondary { background:white; color:var(--blue); }
    .secondary:hover { background: #ed271c; color: #fff; }
    .footer { text-align:center; font-size:12px; color:var(--sub); max-width:850px; margin:25px auto 0; }
    .toast { min-height:20px; font-size:12px; color:var(--teal); font-weight:700; margin:7px 0 -9px; }
    @media(max-width:880px) { .main { grid-template-columns:1fr; } .hero { padding:30px 25px; } .panel { padding:20px; } }
    @media(max-width:520px) { .shell { padding:14px 12px 36px; } .hero { padding:27px 21px; border-radius:18px; } .main { gap:14px; margin-top:14px; } .stats { gap:7px; } .stat { padding:11px; } .stat strong { font-size:18px; } .components { grid-template-columns:1fr; } .roomtitle { font-size:22px; } .panel { border-radius:16px; } }
    @media print { body { background:#fff; } .shell { max-width:100%; padding:0; } .hero { background:#102b51 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .main { display:block; } .controls-panel, .buttons, .mast .pill { display:none; } .solution .panel { box-shadow:none; break-inside:avoid; margin:12px 0; } .footer { margin:15px 0; } }