:root{
  --paper:#f4efe6; --paper-2:#ece5d7; --ink:#221d16; --ink-soft:#5d5546;
  --accent:#b4632a; --accent-soft:#e8c9a8; --line:#d8cfbc;
  --card:#fbf8f1; --ok:#3d6b4f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper); color:var(--ink);
  min-height:100vh; display:flex; flex-direction:column;
}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 24px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(244,239,230,.92); backdrop-filter:blur(8px); z-index:10;
}
.brand{font-family:'Fraunces',serif; font-weight:600; font-size:22px; letter-spacing:.01em; display:flex; align-items:center; gap:10px}
.brand-mark{width:14px; height:14px; border-radius:4px; background:var(--accent); display:inline-block; transform:rotate(45deg)}
.top-note{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft)}
.dot{margin:0 6px; opacity:.5}
.layout{
  flex:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:24px; padding:24px; max-width:1280px; width:100%; margin:0 auto; align-items:start;
}
.stage{display:flex; flex-direction:column; gap:16px; position:sticky; top:86px}
.stage-card{
  background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:0 20px 50px -30px rgba(60,45,25,.35);
}
.room-host{aspect-ratio:16/10; width:100%}
.room-host svg{display:block; width:100%; height:100%}
.stage-caption{
  display:flex; align-items:center; padding:12px 18px; font-size:13px; color:var(--ink-soft);
  border-top:1px solid var(--line);
}
.estimate-card{
  background:var(--ink); color:#f3ecdd; border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 24px 50px -28px rgba(30,22,12,.55);
}
.est-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.est-label{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#cdbd9d}
.est-badge{font-size:11px; letter-spacing:.08em; color:#0e0c08; background:var(--accent-soft); padding:4px 10px; border-radius:999px; font-weight:600}
.est-range{font-family:'Fraunces',serif; font-size:clamp(26px,3.4vw,38px); font-weight:600; line-height:1.1; margin:2px 0}
.est-sub{font-size:13px; color:#cdbd9d; margin-bottom:12px}
.est-lines{list-style:none; border-top:1px solid rgba(243,236,221,.14); margin-bottom:12px}
.est-lines li{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:8px 0; border-bottom:1px dashed rgba(243,236,221,.12)}
.est-lines li span:last-child{font-variant-numeric:tabular-nums; color:#e8dcc2; white-space:nowrap}
.est-fine{font-size:11.5px; color:#a99a7d; margin-bottom:14px}
.cta{
  width:100%; border:0; cursor:pointer; border-radius:12px; padding:14px 16px;
  background:var(--accent); color:#fff8ee; font:600 14px 'Inter',sans-serif; letter-spacing:.02em;
  transition:transform .15s ease, background .15s ease;
}
.cta:hover{background:#c5732f; transform:translateY(-1px)}
.cta:active{transform:translateY(0)}
.cta-note{font-size:11.5px; color:#a99a7d; text-align:center; margin-top:10px}
.cta-note.ok{color:#9fd4ae}
.panel{display:flex; flex-direction:column; gap:14px}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px;
}
.step h2{font-family:'Fraunces',serif; font-size:18px; font-weight:600; display:flex; align-items:center; gap:10px; margin-bottom:14px}
.step-n{
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#f3ecdd;
  font:600 13px 'Inter',sans-serif; display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px}
.chips.wrap{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.chip{
  border:1px solid var(--line); background:var(--paper); border-radius:12px; padding:11px 12px;
  font:500 13.5px 'Inter',sans-serif; color:var(--ink); cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:2px; transition:all .15s ease;
}
.chip small{font-size:11px; color:var(--ink-soft); font-weight:400}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--ink); color:#f3ecdd; border-color:var(--ink)}
.chip[aria-pressed="true"] small{color:#cdbd9d}
.size-row{display:flex; align-items:center; gap:14px}
.size-row output{font:600 14px 'Inter',sans-serif; min-width:86px; text-align:right; font-variant-numeric:tabular-nums}
input[type=range]{flex:1; accent-color:var(--accent); height:28px}
.foot{border-top:1px solid var(--line); padding:18px 24px; font-size:12.5px; color:var(--ink-soft); text-align:center}
.foot a{color:var(--accent); text-decoration:none; font-weight:500}
.foot a:hover{text-decoration:underline}
@media (max-width:940px){
  .layout{grid-template-columns:1fr; padding:16px}
  .stage{position:static}
  .top{padding:14px 16px}
  .top-note{display:none}
}