/* WEB PANEL PROXY public CSS */
:root{
  --bg:#f3f5ee; --card:#fbfcf7; --ink:#1f2a1c; --muted:#566351;
  --line:#d6dccb; --leaf:#3f6b3a; --fruit:#c8321f; --fruit-dark:#8f1f12;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#161c14; --card:#1d251a; --ink:#eaf0e2; --muted:#a3b09a; --line:#2f3a2b; --leaf:#7fb06f}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.wrap{max-width:960px; margin:0 auto; padding:56px 24px 40px}
h1,h2{font-family:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif; font-weight:700; line-height:1.15; margin:0}
h1{font-size:clamp(2.2rem,6vw,3.6rem); letter-spacing:-.01em}
h2{font-size:1.5rem; margin-bottom:16px}
.lead{max-width:34em; color:var(--muted); margin:16px 0 0}

.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.picker{margin-top:32px}
.picker h2{font-size:1.1rem; margin-bottom:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; list-style:none}
.chips button{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.chips button:hover{border-color:var(--leaf)}
.chips button[aria-pressed="true"]{background:var(--fruit); border-color:var(--fruit); color:#fff}
.chips button:focus-visible{outline:3px solid var(--leaf); outline-offset:2px}
#desc{min-height:5.2em; margin:0; max-width:32em}

.stage{display:flex; justify-content:center}
.stage svg{width:100%; max-width:340px; height:auto; overflow:visible}
#fruit{transform-origin:100px 190px; transform:scale(var(--s,1)); transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
#body{fill:var(--fruit); transition:fill .45s}
#shade{fill:var(--fruit-dark); opacity:.35; transition:fill .45s}
#shadow{fill:#000; opacity:.12}

.tips{margin-top:72px}
.tips ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.tips li{border-left:3px solid var(--leaf); padding-left:16px}
.tips strong{display:block; font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:1.1rem; margin-bottom:4px}
.tips span{color:var(--muted); font-size:.97rem}

footer{margin-top:72px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem}

@media (max-width:760px){
  .wrap{padding:36px 20px 32px}
  .hero{grid-template-columns:1fr; gap:24px}
  .stage{order:-1}
  .stage svg{max-width:220px}
  .tips ul{grid-template-columns:1fr}
  .tips{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}