:root{
  --pine:#1F2A24; --terra:#C8663A; --terra2:#A44E2C; --teal:#3E6B5E;
  --sand:#E9E0D2; --ink:#2A2320; --mute:#9FB0A6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%;width:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(120% 120% at 50% 12%, #ffffff 0%, #f1f3f6 60%, #e6e9ee 100%);
  color:#2A2320;
}
#scene{position:fixed;inset:0;display:block;width:100%;height:100%}

#brand{position:fixed;top:20px;left:24px;user-select:none;pointer-events:none}
#brand .logo{font-weight:800;letter-spacing:.22em;font-size:20px;color:#23201d}
#brand .sub{display:block;margin-top:3px;font-size:12px;color:#6b7280}
#brand .pitchlink{
  display:inline-block;margin-top:8px;pointer-events:auto;
  font-size:12px;font-weight:700;color:var(--terra);text-decoration:none;letter-spacing:.02em
}
#brand .pitchlink:hover{color:var(--terra2)}

#panel{
  position:fixed;top:20px;right:20px;width:270px;
  background:rgba(24,33,28,.82);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.4)
}
.modes{display:flex;gap:7px;margin-bottom:16px}
.modes button{
  flex:1;background:rgba(255,255,255,.06);border:1px solid transparent;color:#dfe6e1;
  border-radius:10px;padding:9px 5px;font-size:12px;font-weight:600;cursor:pointer;
  line-height:1.25;transition:.15s
}
.modes button small{display:block;font-weight:400;font-size:10px;color:var(--mute);margin-top:2px}
.modes button:hover{background:rgba(255,255,255,.12)}
.modes button.active{background:var(--terra);border-color:var(--terra);color:#fff}
.modes button.active small{color:#ffe9dd}

.slider{margin:12px 0}
.slider label{display:flex;justify-content:space-between;font-size:12px;color:#cfd8d2;margin-bottom:6px}
.slider label span{color:var(--terra);font-weight:700}
input[type=range]{width:100%;accent-color:var(--terra);cursor:pointer}

.badge{
  margin:12px 0 4px;padding:8px 10px;border-radius:10px;font-size:12px;font-weight:700;text-align:center;
  background:rgba(200,102,58,.18);color:#f0b79a;border:1px solid rgba(200,102,58,.4)
}
.badge.hidden{display:none}

.toggles{display:flex;flex-direction:column;gap:7px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.toggles label{font-size:12px;color:#cfd8d2;display:flex;align-items:center;gap:8px;cursor:pointer}
.toggles label small{color:var(--mute);font-size:10px;margin-left:auto}
.toggles input{accent-color:var(--teal)}

#hint{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:12px;color:#5b6470;background:rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.06);
  padding:7px 14px;border-radius:20px;user-select:none;pointer-events:none
}
#loading{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#6b7280;font-size:14px;letter-spacing:.05em
}
#loading.done{display:none}

@media (max-width:640px){
  #panel{top:auto;bottom:64px;right:12px;left:12px;width:auto}
  #brand{top:14px;left:16px}
  #hint{display:none}
}