:root { --bg:#0a0a0a; --ink:#f5f2ea; --dim:#a8a399; --red:#f20000; --line:#262626; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:"Arial Black", Arial, Helvetica, sans-serif; }
body { overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.bar { border-bottom:3px solid var(--red); padding:12px 16px; display:flex; justify-content:center; }
.logo { display:flex; align-items:center; gap:12px; }
.logo img { width:44px; height:auto; aspect-ratio:1; }
.logo b { font-size:26px; letter-spacing:-.02em; }
.logo b i { font-style:normal; color:var(--red); }
.feature { max-width:1100px; margin:0 auto; padding:0 0 30px; }
.hero { margin:0; position:relative; }
.hero img { display:block; width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; object-position:50% 28%; }
.hero::after { content:""; position:absolute; inset:auto 0 0 0; height:45%; background:linear-gradient(transparent, var(--bg)); }
.head { max-width:760px; margin:-90px auto 0; padding:0 16px; position:relative; z-index:1; }
.kick { display:inline-block; background:var(--red); color:#fff; font:900 12px Arial, sans-serif; letter-spacing:.18em; padding:6px 10px; margin:0 0 14px; }
h1 { font-size:clamp(34px, 7vw, 66px); line-height:1.02; letter-spacing:-.025em; margin:0 0 16px; }
.dek { font:400 clamp(18px, 2.6vw, 22px)/1.45 Arial, sans-serif; color:var(--dim); margin:0 0 16px; }
.by { font:700 12px Arial, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#77736b; border-bottom:1px solid var(--line); padding-bottom:20px; margin:0; }
.body { max-width:760px; margin:0 auto; padding:26px 16px 0; }
.body h2 { font-size:clamp(22px, 3.4vw, 28px); letter-spacing:-.01em; margin:38px 0 14px; padding-left:14px; border-left:5px solid var(--red); text-transform:uppercase; }
.body p { font:400 19px/1.72 Georgia, "Times New Roman", serif; margin:0 0 22px; color:#e9e5dc; }
.body p.end { color:var(--red); font-size:14px; }
.clip { margin:8px 0 28px; }
.clip video { display:block; width:100%; height:auto; border-radius:6px; background:#000; }
.clip figcaption { font:400 13px/1.5 Arial, sans-serif; color:#77736b; margin-top:8px; }
.share { margin:6px 0 10px; }
.btn { display:inline-block; background:var(--red); color:#fff; font:900 15px "Arial Black", Arial, sans-serif; padding:13px 22px; border-radius:4px; }
footer { max-width:760px; margin:30px auto 0; padding:22px 16px 40px; font:400 12px/1.6 Arial, sans-serif; color:#6d6961; border-top:1px solid var(--line); }
@media (max-width: 640px) { .hero img { aspect-ratio:4/3; } .head { margin-top:-50px; } .body p { font-size:18px; } }

/* sharing (2026-10-21) */
.kit { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.pill { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:999px; border:1px solid #3a3a3a; background:#141414;
        color:var(--ink); font:700 14px Arial, sans-serif; cursor:pointer; transition:border-color .15s; }
.pill:hover { border-color:var(--red); }
.pill.x { background:#fff; color:#000; border-color:#fff; }
.pill svg { width:16px; height:16px; fill:currentColor; flex:none; }
.pill.copy svg { fill:none; }
.pill .at { font:900 16px Arial, sans-serif; width:16px; text-align:center; color:var(--red); }
.btn { display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; }
.btn svg { width:18px; height:18px; fill:currentColor; }
.btn.ghost { background:#fff; color:#000; }
.btn.ghost svg { fill:none; }
.share { border-top:1px solid var(--line); padding-top:24px; margin-top:8px; }
.body .share p.ask { font:700 16px Arial, sans-serif; color:var(--ink); margin:0 0 14px; }
.dock { position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; gap:10px; justify-content:center;
        padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(10,10,10,.92); border-top:1px solid var(--line);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.dock[hidden] { display:none; }
.dock .btn { flex:1; max-width:220px; justify-content:center; padding:12px 16px; }
.toast { position:fixed; left:50%; bottom:90px; transform:translate(-50%, 20px); background:#fff; color:#000; font:700 14px Arial, sans-serif;
         padding:10px 16px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:6; }
.toast.on { opacity:1; transform:translate(-50%, 0); }
@media (min-width: 900px) { .dock { display:none !important; } }
@media (max-width: 640px) {
  .kit .pill { width:42px; padding:0; justify-content:center; }
  .kit .pill span { display:none; }
  .kit .pill.x, .kit .pill.copy { width:auto; padding:0 14px; }
  .kit .pill.x span, .kit .pill.copy span { display:inline; }
  footer { padding-bottom:110px; }
}