/* MY CODE — documentation style How to Use */
:root { --htu-orange:#fb5d00; --htu-ink:#171717; --htu-muted:#77716c; --htu-line:#ebe5e0; --htu-soft:#fff8f3; }

.howto-page { background:#fff; color:var(--htu-ink); }

.howto-hero {
  padding:88px 24px 70px;
  border-bottom:1px solid var(--htu-line);
  background:linear-gradient(180deg,#fffaf6 0%,#fff 90%);
  text-align:center;
}
.howto-hero-inner { width:min(820px,100%); margin:0 auto; text-align:center; }
.howto-hero .page-kicker { margin:0 0 15px; color:var(--htu-orange); text-align:center; }
.howto-hero h1 { margin:0 auto; max-width:760px; font-size:clamp(34px,3.8vw,50px); font-weight:510; line-height:1.14; letter-spacing:-.048em; text-align:center; }
.howto-hero p { max-width:680px; margin:22px auto 0; color:var(--htu-muted); font-size:16px; line-height:1.75; text-align:center; }

.howto-layout {
  width:min(calc(100% - 48px),1440px);
  margin:0 auto;
  display:grid;
  grid-template-columns:220px minmax(0,820px) 210px;
  justify-content:center;
  gap:54px;
  padding:64px 0 120px;
}

.howto-left,
.howto-right { align-self:start; position:sticky; top:116px; }

.howto-left-title,
.howto-right-title { margin:0 0 14px; color:#9a938d; font-size:11px; font-weight:700; letter-spacing:.1em; }

.howto-left-nav { display:grid; gap:5px; }
.howto-left-nav a {
  display:flex; align-items:center; min-height:38px; padding:0 12px;
  border-radius:9px; color:#756e68; text-decoration:none; font-size:13px; font-weight:500;
  transition:background .18s ease,color .18s ease;
}
.howto-left-nav a:hover { background:#f7f4f2; color:#2b2724; }
.howto-left-nav a.is-active { background:#fff1e7; color:var(--htu-orange); font-weight:650; }
.howto-left-group { margin:24px 0 8px; color:#aca59f; font-size:10px; font-weight:700; letter-spacing:.08em; }

.howto-main { min-width:0; }
.howto-doc-head { margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--htu-line); text-align:center; }
.howto-doc-head .breadcrumb { margin:0 0 14px; color:#a49d97; font-size:12px; text-align:center; }
.howto-doc-head h2 { margin:0 auto; font-size:clamp(30px,3.2vw,44px); font-weight:520; line-height:1.16; letter-spacing:-.045em; text-align:center; }
.howto-doc-head > p { max-width:720px; margin:16px auto 0; color:var(--htu-muted); font-size:16px; line-height:1.75; text-align:center; }

.howto-status-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:20px; }
.howto-status-row span { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--htu-line); border-radius:999px; color:#625c57; font-size:11px; }
.howto-status-row i { width:7px; height:7px; border-radius:50%; background:var(--htu-orange); }

.howto-section { scroll-margin-top:120px; padding:12px 0 54px; text-align:center; }
.howto-section + .howto-section { border-top:1px solid var(--htu-line); padding-top:48px; }
.howto-section .section-label { margin:0 0 11px; color:var(--htu-orange); font-size:11px; font-weight:700; letter-spacing:.09em; text-align:center; }
.howto-section h3 { margin:0 auto; font-size:clamp(24px,2.2vw,32px); font-weight:540; line-height:1.28; letter-spacing:-.038em; text-align:center; }
.howto-section .lead { max-width:720px; margin:15px auto 0; color:var(--htu-muted); font-size:16px; line-height:1.75; text-align:center; }

.howto-demo {
  margin-top:24px; padding:28px; border:1px solid var(--htu-line); border-radius:18px; background:#fcfbfa;
  text-align:left;
}
.howto-demo.upload-demo { display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:18px; }
.demo-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:15px; background:var(--htu-orange); color:#fff; font-size:24px; }
.demo-copy strong { display:block; margin-bottom:5px; font-size:16px; font-weight:600; }
.demo-copy span { color:#928b85; font-size:13px; }
.demo-limit { padding:8px 11px; border-radius:999px; background:#f1ece8; color:#817a74; font-size:11px; white-space:nowrap; }

.code-example { margin-top:22px; overflow:hidden; border:1px solid var(--htu-line); border-radius:15px; background:#1d1d1d; color:#f8f8f8; text-align:left; }
.code-example-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 14px; border-bottom:1px solid #343434; color:#bdbdbd; font-size:11px; }
.code-example-head button { border:0; background:transparent; color:#ff9354; font:inherit; cursor:pointer; }
.code-example pre { margin:0; padding:18px; overflow:auto; font-size:12px; line-height:1.7; white-space:pre-wrap; word-break:break-all; }

.howto-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:22px; text-align:left; }
.howto-mini-card { padding:22px; border:1px solid var(--htu-line); border-radius:15px; background:#fff; }
.howto-mini-card span { color:var(--htu-orange); font-size:10px; font-weight:700; letter-spacing:.08em; }
.howto-mini-card h4 { margin:18px 0 9px; font-size:18px; font-weight:580; letter-spacing:-.025em; }
.howto-mini-card p { margin:0; color:var(--htu-muted); font-size:13px; line-height:1.7; }

.howto-note { margin-top:22px; padding:18px 20px; border-left:3px solid var(--htu-orange); border-radius:0 12px 12px 0; background:var(--htu-soft); color:#6e5d52; font-size:14px; line-height:1.7; text-align:left; }

.howto-right-nav { display:grid; gap:2px; border-left:1px solid var(--htu-line); }
.howto-right-nav a { position:relative; display:block; padding:7px 0 7px 16px; color:#918a84; text-decoration:none; font-size:12px; line-height:1.45; }
.howto-right-nav a::before { content:''; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:transparent; }
.howto-right-nav a:hover { color:#4f4945; }
.howto-right-nav a.is-active { color:#24211f; font-weight:600; }
.howto-right-nav a.is-active::before { background:var(--htu-orange); }

.howto-end-cta { margin-top:14px; padding:42px 24px; border:1px solid #f0dfd3; border-radius:20px; background:linear-gradient(180deg,#fff8f2,#fff); text-align:center; }
.howto-end-cta h3 { margin:0; font-size:28px; font-weight:540; letter-spacing:-.035em; text-align:center; }
.howto-end-cta p { max-width:560px; margin:12px auto 22px; color:var(--htu-muted); font-size:14px; line-height:1.7; text-align:center; }
.howto-end-cta a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:11px; background:var(--htu-orange); color:#fff; text-decoration:none; font-size:13px; font-weight:650; box-shadow:0 10px 24px rgba(251,93,0,.16); }

@media (max-width:1160px) {
  .howto-layout { grid-template-columns:190px minmax(0,1fr); gap:36px; }
  .howto-right { display:none; }
}

@media (max-width:820px) {
  .howto-hero { padding:68px 18px 52px; }
  .howto-layout { width:min(calc(100% - 32px),760px); grid-template-columns:1fr; padding:34px 0 84px; }
  .howto-left { position:static; overflow:auto; display:flex; gap:8px; padding-bottom:10px; }
  .howto-left-title,.howto-left-group { display:none; }
  .howto-left-nav { display:flex; min-width:max-content; gap:6px; }
  .howto-left-nav a { min-height:34px; border:1px solid var(--htu-line); border-radius:999px; padding:0 12px; background:#fff; }
  .howto-demo.upload-demo { grid-template-columns:50px 1fr; }
  .demo-limit { grid-column:2; justify-self:start; }
  .howto-cards { grid-template-columns:1fr; }
}