:root { --bg:#0d0d0d; --bg2:#141414; --card:#181818; --line:#262626; --ink:#f2f2f2; --mute:#9a9a9a; --red:#FF1E3C; --red2:#ff5c74;
        --ae-bg:#232323; --ae-row:#2a2a2a; --ae-ink:#d9d9d9; --ae-hot:#8fb8ff; --ae-line:#1a1a1a; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Inter","Noto Sans JP",system-ui,sans-serif; font-size:15px; line-height:1.75; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img, video { display:block; max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px)); }
h1,h2,h3,h4 { font-family:"Inter","Noto Sans JP",sans-serif; margin:0; letter-spacing:-0.01em; }
code { font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:#1f1f1f; padding:.1em .4em; border-radius:4px; }
/* top bar */
.top { position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; display:flex; align-items:center; justify-content:space-between; padding-block:14px; padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px)); background:rgba(13,13,13,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .brand img { height:30px; }
.top nav a { margin-left:22px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.top nav a:hover { color:var(--ink); }
/* home */
.hero-home { padding:84px 0 56px; border-bottom:1px solid var(--line); background:radial-gradient(900px 400px at 20% 0%, rgba(255,30,60,.14), transparent 60%); }
.hero-logo { height:72px; margin-bottom:28px; }
.hero-home h1 { font-size:clamp(28px,4.2vw,46px); font-weight:700; line-height:1.25; }
.hero-home .sub { color:var(--mute); max-width:640px; margin:16px 0 28px; font-size:16px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; padding:11px 20px; border-radius:6px; background:var(--red); color:#fff; font-weight:600; font-size:14px; }
.btn.ghost { background:transparent; border:1px solid #3a3a3a; color:var(--ink); }
.btn:hover { filter:brightness(1.1); }
.sec-h { display:flex; align-items:baseline; gap:18px; margin:56px 0 22px; padding-bottom:12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.sec-h h2 { font-size:24px; font-weight:700; }
.sec-h p { margin:0; color:var(--mute); font-size:14px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:transform .18s, border-color .18s; }
.card:hover { transform:translateY(-3px); border-color:#3a3a3a; }
.card-media { aspect-ratio:16/9; background:#000; overflow:hidden; }
.card-media img, .card-media video { width:100%; height:100%; object-fit:cover; }
.card-body { padding:14px 16px 16px; }
.card .cn { font-size:11px; color:var(--red); letter-spacing:.14em; }
.card h3 { font-size:16px; margin:2px 0 4px; }
.card p { margin:0; color:var(--mute); font-size:13px; line-height:1.6; }
.install .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; }
.install h4 { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
.install ol { padding-left:20px; margin:0; color:#d6d6d6; } .install li { margin-bottom:6px; }
.install p { color:#d6d6d6; margin:0 0 10px; }
/* effect page */
.fx .hero { padding:56px 0 34px; border-bottom:1px solid var(--line); background:radial-gradient(700px 300px at 10% 0%, rgba(255,30,60,.12), transparent 60%); }
.fx .pre { margin:0 0 6px; font-size:12px; letter-spacing:.2em; color:var(--mute); text-transform:uppercase; }
.fx .pre .num { color:var(--red); }
.fx h1 { font-size:clamp(34px,5vw,56px); font-weight:700; line-height:1.1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tag-gpu { font-size:11px; letter-spacing:.1em; border:1px solid #444; color:#ccc; padding:4px 9px; border-radius:4px; font-weight:500; }
.fx .tagline { margin:14px 0 0; font-size:18px; color:#e6e6e6; font-weight:500; }
.media-wrap { padding-top:30px; }
.media { margin:0 0 22px; }
.media .frame { background:#000; border:1px solid var(--line); border-radius:10px; overflow:hidden; aspect-ratio:16/9; position:relative; }
.media .frame img, .media .frame video { width:100%; height:100%; object-fit:contain; }
.media figcaption { margin-top:8px; font-size:13px; color:var(--mute); }
.media figcaption .hint { color:#666; }
.rainmap { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:start; }
.rainmap .media.map .frame { background:#fff; }
.note { background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--red); padding:14px 18px; border-radius:6px; color:#d9d9d9; font-size:14px; margin:4px 0 22px; }
.callout { display:flex; gap:16px; align-items:flex-start; background:linear-gradient(90deg, rgba(255,30,60,.12), transparent); border:1px solid #3a1d22; padding:16px 18px; border-radius:8px; margin:4px 0 22px; }
.callout .badge { flex:none; background:var(--red); color:#fff; font-weight:700; font-size:12px; letter-spacing:.14em; padding:5px 10px; border-radius:4px; margin-top:3px; }
.callout p { margin:0; color:#e6e6e6; }
/* before / after */
.ba { cursor:ew-resize; user-select:none; }
.ba .before-wrap { position:absolute; inset:0; clip-path:inset(0 50% 0 0); }
.ba .before, .ba .after { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ba .handle { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; pointer-events:none; }
.ba .knob { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.5); }
.ba .knob::before, .ba .knob::after { content:""; position:absolute; top:50%; width:0; height:0; border:6px solid transparent; margin-top:-6px; }
.ba .knob::before { left:6px; border-right-color:#111; border-left:0; }
.ba .knob::after { right:6px; border-left-color:#111; border-right:0; }
.ba .tag { position:absolute; top:12px; font-size:11px; letter-spacing:.16em; background:rgba(0,0,0,.55); color:#fff; padding:4px 8px; border-radius:3px; pointer-events:none; }
.ba .tag-b { left:12px; } .ba .tag-a { right:12px; }
.ba input[type=range] { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize; }
/* lead */
.lead { display:grid; grid-template-columns:1fr 300px; gap:40px; padding-top:16px; }
.lead .over p { margin:0; font-size:16.5px; line-height:1.95; color:#e9e9e9; }
.side { border-left:2px solid var(--red); padding-left:22px; }
.side h4 { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin:0 0 6px; }
.side p { margin:0 0 18px; font-size:14px; color:#d6d6d6; }
.side ul { margin:0; padding:0; list-style:none; }
.side li { position:relative; padding-left:16px; font-size:14px; color:#d6d6d6; margin-bottom:6px; }
.side li::before { content:""; position:absolute; left:0; top:.7em; width:6px; height:6px; background:var(--red); }
/* parameter panel */
.panel-grid { display:grid; grid-template-columns:minmax(0,560px) 1fr; gap:28px; align-items:start; }
.aepanel { background:var(--ae-bg); border:1px solid #333; border-radius:6px; overflow:hidden; font-family:"Inter","Noto Sans JP",sans-serif; font-size:12.5px; color:var(--ae-ink); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.aehead { display:flex; align-items:center; gap:12px; background:#1b1b1b; border-bottom:1px solid #111; padding:8px 12px; font-size:12px; }
.aehead .fx-name { font-weight:600; color:#fff; }
.aehead .aereset, .aehead .aeabout { color:#8c8c8c; font-size:11px; }
.aehead .aeabout { margin-left:auto; }
.grp { border-bottom:1px solid var(--ae-line); }
.row { display:flex; align-items:center; min-height:26px; padding:2px 12px 2px 6px; gap:8px; position:relative; }
.row-grp { cursor:pointer; background:#262626; font-weight:600; color:#eaeaea; }
.row-grp:hover { background:#2c2c2c; }
.tri { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #b0b0b0; margin:0 4px 0 6px; transition:transform .15s; }
.grp.closed .tri { transform:rotate(-90deg); }
.grp.closed .grp-body { display:none; }
.gn { flex:1; }
.ind { width:16px; flex:none; }
.pn { width:150px; flex:none; color:#cfcfcf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pn.small { font-size:11px; color:#9a9a9a; }
.pv { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.hot { color:var(--ae-hot); font-variant-numeric:tabular-nums; cursor:ew-resize; }
.row-slider, .row-angle { flex-wrap:wrap; }
.row-slider .rng, .row-angle .rng { flex-basis:100%; width:100%; margin:0 0 4px 174px; max-width:calc(100% - 190px); }
input.rng { -webkit-appearance:none; appearance:none; height:14px; background:transparent; }
input.rng::-webkit-slider-runnable-track { height:3px; background:#4a4a4a; border-radius:2px; }
input.rng::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:12px; margin-top:-4.5px; background:#d0d0d0; border-radius:2px; cursor:pointer; }
input.rng::-moz-range-track { height:3px; background:#4a4a4a; border-radius:2px; }
input.rng::-moz-range-thumb { width:10px; height:12px; background:#d0d0d0; border:0; border-radius:2px; cursor:pointer; }
.dial { position:relative; width:16px; height:16px; border-radius:50%; border:1px solid #8a8a8a; background:#1c1c1c; display:inline-block; }
.dial i { position:absolute; left:50%; top:50%; width:1.5px; height:7px; background:var(--ae-hot); transform-origin:50% 0; transform:translate(-50%,0) rotate(calc(var(--a) + 180deg)); }
.chk { display:flex; align-items:center; gap:8px; cursor:pointer; }
.chk input { position:absolute; opacity:0; }
.chk .box { width:12px; height:12px; border:1px solid #8a8a8a; background:#1c1c1c; border-radius:2px; position:relative; flex:none; }
.chk input:checked + .box::after { content:""; position:absolute; left:3px; top:0px; width:4px; height:8px; border:solid #e6e6e6; border-width:0 2px 2px 0; transform:rotate(45deg); }
.chk .lbl { color:#cfcfcf; }
.sel select { -webkit-appearance:none; appearance:none; background:#1c1c1c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%23b0b0b0'/></svg>") no-repeat right 8px center; border:1px solid #4a4a4a; color:#e6e6e6; font:inherit; padding:2px 26px 2px 8px; border-radius:3px; min-width:150px; max-width:260px; }
.swatch { width:34px; height:16px; border:1px solid #777; display:inline-block; position:relative; cursor:pointer; }
.swatch input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.xh { color:var(--ae-hot); font-size:14px; }
.sep { color:#777; }
.gbar { display:inline-block; width:200px; height:14px; border:1px solid #666; background:linear-gradient(90deg,#333,#fff); position:relative; }
.gbar i { position:absolute; top:100%; width:8px; height:8px; margin-left:-4px; background:#ddd; clip-path:polygon(50% 0,100% 100%,0 100%); }
.custom { color:#9a9a9a; font-style:italic; }
.aebtn { display:inline-block; background:#3a3a3a; border:1px solid #555; color:#e6e6e6; font:inherit; font-size:11.5px; padding:2px 12px; border-radius:3px; cursor:pointer; }
.aebtn:hover { background:#454545; }
.row-btn .pn + .aebtn { margin-left:0; }
.row-logo img { height:26px; margin:4px 0 4px 4px; }
.row[data-help]:hover, .row.hl { background:#30343c; }
.row[data-help]:hover .pn, .row.hl .pn { color:#fff; }
.help { position:sticky; top:84px; }
.help-in { background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:6px; padding:18px 20px; min-height:120px; }
.help-name { margin:0 0 6px; font-weight:600; font-size:15px; }
.help-text { margin:0; color:#d6d6d6; font-size:14px; line-height:1.8; }
/* tips, pager, footer */
.tips { margin-top:48px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:22px 26px; max-width:1072px; }
.tips h3 { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.tips ul { margin:0; padding:0; list-style:none; }
.tips li { position:relative; padding-left:20px; margin-bottom:8px; color:#e3e3e3; font-size:14.5px; }
.tips li::before { content:"—"; position:absolute; left:0; color:var(--red); }
.pager { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; margin:48px auto 0; padding-top:24px; border-top:1px solid var(--line); }
.pg { display:flex; flex-direction:column; padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.pg span { font-size:11px; color:var(--mute); letter-spacing:.1em; } .pg b { font-size:15px; }
.pg.next { text-align:right; } .pg.all { justify-content:center; color:var(--mute); }
.pg:hover { border-color:#3a3a3a; }
.foot { margin-top:72px; padding-block:34px 44px; padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px)); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; color:var(--mute); font-size:13px; }
.fl-logo { height:22px; margin-bottom:10px; }
.foot p { margin:0; }
.fr { display:flex; flex-direction:column; gap:6px; text-align:right; }
.fr a:hover { color:var(--ink); }
@media (max-width: 900px) {
  .lead { grid-template-columns:1fr; gap:24px; }
  .panel-grid { grid-template-columns:1fr; }
  .help { position:sticky; top:62px; order:-1; z-index:5; }
  .help-in { min-height:0; }
  .rainmap { grid-template-columns:1fr; }
  .pager { grid-template-columns:1fr 1fr; } .pg.all { grid-column:1 / -1; }
  .top nav a { margin-left:14px; }
}
@media (max-width: 560px) {
  .pn { width:110px; }
  .row-slider .rng, .row-angle .rng { margin-left:134px; max-width:calc(100% - 150px); }
  .top nav a:nth-child(4) { display:none; }
}