:root{--g:#ef6c00;--gd:#e65100;--bg:#fff8f2;--t:#1f2a1f;--m:#5b6b5b}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:var(--t);background:var(--bg);letter-spacing:.01em}
.top{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:.65rem;justify-content:space-between;align-items:center;padding:.85rem 1.15rem;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid color-mix(in srgb,var(--g) 22%,#fff);box-shadow:0 1px 0 color-mix(in srgb,var(--g) 18%,transparent)}
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--g),var(--gd),var(--g));opacity:.95}
.logo{font-weight:800;font-size:1.22rem;color:var(--gd);text-decoration:none;letter-spacing:-.02em}
nav a{color:var(--g);font-weight:600;margin-left:.75rem;text-decoration:none;font-size:.95rem}
nav a:hover{color:var(--gd);text-decoration:underline;text-underline-offset:3px}
main{max-width:900px;margin:0 auto;padding:1.15rem 1.1rem 2rem}
a{color:var(--g)}
h1,h2,h3{color:var(--gd);line-height:1.22;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(1.65rem,4vw,2.15rem);margin:.4rem 0 .75rem}
h2{font-size:clamp(1.25rem,3vw,1.5rem);margin:1.6rem 0 .7rem}
h3{font-size:1.08rem;margin:.9rem 0 .4rem}
.hero{position:relative;background:linear-gradient(145deg,color-mix(in srgb,var(--g) 12%,#fff),color-mix(in srgb,var(--gd) 8%,#fff) 55%,#fff);border-radius:20px;padding:1.35rem 1.35rem 1.6rem;margin:.35rem 0 1.4rem;box-shadow:0 10px 28px color-mix(in srgb,var(--gd) 12%,transparent),0 1px 0 #fff inset;overflow:visible}
.hero .hero-img{margin:-.35rem -.15rem 1rem;width:calc(100% + .3rem);max-width:none;border-radius:16px;box-shadow:0 12px 30px #00000018;aspect-ratio:5/2;object-fit:cover}
.btn{display:inline-block;background:linear-gradient(180deg,color-mix(in srgb,var(--g) 92%,#fff),var(--g));color:#fff!important;padding:.7rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:750;box-shadow:0 6px 16px color-mix(in srgb,var(--g) 35%,transparent);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;border:0}
.btn:hover{background:var(--gd);transform:translateY(-2px);box-shadow:0 10px 22px color-mix(in srgb,var(--gd) 40%,transparent);filter:brightness(1.02)}
.btn:active{transform:translateY(0)}
.disc,blockquote{background:#fff8e1;border-left:4px solid #f9a825;margin:1rem 0;padding:.6rem 1rem;border-radius:6px;font-size:.95rem}
.note-soft{margin:0 0 1rem;padding:.55rem .85rem;border-radius:10px;background:color-mix(in srgb,var(--g) 8%,#fff);border:1px solid color-mix(in srgb,var(--g) 18%,#fff);color:var(--m);font-size:.9rem}
.aff-mini{margin:.35rem 0 0;font-size:.78rem;color:var(--m);opacity:.9}
.cards{display:grid;gap:1.15rem}
.card{background:#fff;border-radius:16px;padding:1.15rem 1.15rem 1.25rem;box-shadow:0 8px 22px #0000000f,0 1px 0 #fff inset;border:1px solid color-mix(in srgb,var(--g) 10%,#fff);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px #00000016}
.tag{background:color-mix(in srgb,var(--g) 16%,#fff);color:var(--gd);font-size:.78rem;font-weight:750;padding:.2rem .55rem;border-radius:99px;display:inline-block}
.price{font-weight:750;color:var(--gd)}
.tw{overflow-x:auto;border-radius:12px;box-shadow:0 4px 14px #0000000a}
table{border-collapse:collapse;width:100%;background:#fff;font-size:.92rem}
th,td{border:1px solid color-mix(in srgb,var(--g) 14%,#e8e8e8);padding:.55rem .6rem;text-align:left;vertical-align:top}
th{background:color-mix(in srgb,var(--g) 14%,#fff);color:var(--gd)}
hr{border:0;border-top:1px solid color-mix(in srgb,var(--g) 14%,#e8e8e8);margin:2.2rem 0}
footer{text-align:center;color:var(--m);font-size:.88rem;padding:2.2rem 1.1rem 2.6rem;border-top:1px solid color-mix(in srgb,var(--g) 14%,#e8e8e8);margin-top:2.4rem;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--g) 5%,transparent))}
footer a{color:var(--g);text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}
footer .aff-foot{margin:.35rem 0 0;font-size:.82rem;color:var(--m)}
.related{margin:2.2rem 0 1rem;padding:1.15rem 1.2rem;background:#fff;border-radius:16px;box-shadow:0 8px 22px #0000000c;border:1px solid color-mix(in srgb,var(--g) 10%,#fff)}
.related h2{font-size:1.08rem;margin-top:0}
.hero-img,.lead-img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:5/2;object-fit:cover;border-radius:14px;margin:0 0 1rem}
.lead-img{box-shadow:0 10px 24px #00000012}
.card-img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:12px;margin:.4rem 0 .85rem;background:var(--bg)}
img{max-width:100%;height:auto}
@media(min-width:700px){
  .cards{grid-template-columns:repeat(3,1fr);gap:1.25rem}
  .hero{padding:1.8rem 1.8rem 2rem}
  main{padding:1.4rem 1.25rem 2.5rem}
}
@media(max-width:699px){
  .top{padding:.7rem .9rem}
  nav a{margin-left:.55rem;font-size:.88rem}
  .hero{padding:1rem;border-radius:16px}
  .card{padding:1rem}
  .btn{width:100%;text-align:center}
}