.tool-page { --tool-panel: #1c1c19; }
.tool-hero { display:grid;grid-template-columns:1.15fr .65fr;gap:70px;align-items:end;padding-top:62px;padding-bottom:62px }
.tool-hero h1 { margin:15px 0 0;font-size:clamp(3.4rem,7vw,7rem);line-height:.94;letter-spacing:-.06em }
.tool-hero h1 span,.tool-download h2 span,.visibility-guide h2 span { color:var(--accent) }
.tool-hero p { margin:0 0 7px;padding-top:22px;border-top:1px solid var(--border);color:var(--muted);font-size:.9rem;line-height:1.85 }
.generator-shell { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:14px;padding-bottom:105px }
.generator-stage,.generator-controls { border:1px solid var(--border);border-radius:8px;background:var(--tool-panel) }
.generator-stage { padding:18px }
.stage-top,.controls-head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px }
.stage-top h2,.controls-head h2 { margin:7px 0 0;font-size:1.25rem }
.stage-status { color:var(--muted);font-size:.57rem }
.preview-frame { position:relative;overflow:hidden;width:100%;aspect-ratio:16/10;border:1px solid var(--border);border-radius:6px;background:#080807 }
.preview-frame>picture,.preview-frame>picture>img { display:block;width:100%;height:100% }.preview-frame>picture>img { object-fit:cover;filter:saturate(.86) contrast(1.06) }
.preview-shade { position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.16)) }
.tool-crosshair { --cross-color:#00e7f0;--line-length:14px;--line-thickness:2px;--center-gap:6px;--cross-opacity:1;position:absolute;left:50%;top:50%;width:1px;height:1px;color:var(--cross-color);opacity:var(--cross-opacity);filter:drop-shadow(0 0 1px #000);transform:translate(-50%,-50%) }
.tool-crosshair i,.tool-crosshair b { position:absolute;display:block;background:currentColor;box-shadow:var(--cross-shadow,0 0 0 1px rgba(0,0,0,.9)) }
.tool-crosshair i { width:var(--line-length);height:var(--line-thickness);border-radius:1px }
.tool-crosshair i:nth-child(1) { right:var(--center-gap);transform:translateY(-50%) }
.tool-crosshair i:nth-child(2) { left:var(--center-gap);transform:translateY(-50%) }
.tool-crosshair i:nth-child(3) { left:0;bottom:var(--center-gap);transform:translateX(-50%) rotate(90deg) }
.tool-crosshair i:nth-child(4) { left:0;top:var(--center-gap);transform:translateX(-50%) rotate(90deg) }
.tool-crosshair b { left:50%;top:50%;width:var(--line-thickness);height:var(--line-thickness);border-radius:50%;transform:translate(-50%,-50%) }
.tool-crosshair.no-dot b { display:none }.tool-crosshair.no-outline { --cross-shadow:none;filter:none }
.scene-picker { display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px }
.scene-button { overflow:hidden;padding:0;aspect-ratio:16/9;border:1px solid transparent;border-radius:4px;background:#000;cursor:pointer;opacity:.52 }
.scene-button:hover,.scene-button.is-active { border-color:var(--accent);opacity:1 }.scene-button img { display:block;width:100%;height:100%;object-fit:cover }
.generator-controls { padding:21px }.generator-controls fieldset { margin:0;padding:0;border:0 }.generator-controls fieldset+fieldset { margin-top:23px }
.generator-controls legend,.range-grid label>span { display:flex;justify-content:space-between;width:100%;margin-bottom:10px;color:var(--muted);font-size:.67rem;font-weight:750;text-transform:uppercase }
.icon-command { display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--border);border-radius:5px;color:var(--text);background:transparent;cursor:pointer;font-size:1.15rem }.icon-command:hover { border-color:var(--accent);color:var(--accent) }
.preset-row { display:grid;grid-template-columns:repeat(4,1fr);gap:6px }.preset-button { min-height:36px;padding:5px;border:1px solid var(--border);border-radius:4px;color:var(--muted);background:transparent;cursor:pointer;font-size:.64rem;font-weight:750 }.preset-button:hover,.preset-button.is-active { border-color:var(--accent);color:var(--text);background:rgba(255,113,11,.1) }
.tool-colors { display:flex;align-items:center;gap:10px;flex-wrap:wrap }.tool-color,.custom-color { width:28px;height:28px;border:2px solid transparent;border-radius:50%;background:var(--swatch);cursor:pointer }.tool-color.is-active { border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12) }
.custom-color { position:relative;display:grid;place-items:center;border-color:var(--border);color:var(--muted);background:transparent;font-weight:800 }.custom-color input { position:absolute;width:1px;height:1px;opacity:0 }.custom-color:focus-within { border-color:var(--accent) }
.range-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:25px }.range-grid label>span { margin-bottom:6px }.range-grid output { color:var(--text) }.range-grid input { width:100%;accent-color:var(--accent) }
.toggle-row { display:flex;gap:20px;margin-top:24px;padding-top:19px;border-top:1px solid var(--border) }.toggle-row label { display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.7rem;font-weight:700 }.toggle-row input { width:17px;height:17px;accent-color:var(--accent) }
.settings-summary { margin-top:22px;padding:15px;border:1px solid var(--border);border-radius:5px;background:rgba(0,0,0,.18) }.settings-summary span,.settings-summary strong { display:block }.settings-summary span { color:var(--muted);font-size:.55rem }.settings-summary strong { margin-top:7px;font-size:.72rem;line-height:1.5 }
.copy-button { width:100%;margin-top:12px }.copy-status { display:block;min-height:18px;margin-top:6px;color:var(--green);font-size:.62rem;text-align:center }
.tool-download { display:grid;grid-template-columns:1fr 280px;gap:80px;align-items:center;padding-top:90px;padding-bottom:95px;border-top:1px solid var(--border) }.tool-download h2,.visibility-guide h2 { margin:14px 0 0;font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.055em }.tool-download p { max-width:620px;margin:24px 0;color:var(--muted);font-size:.85rem;line-height:1.85 }
.desktop-qr-card { display:flex;align-items:center;gap:17px;padding:17px;border:1px solid var(--border);border-radius:7px;background:#fff;color:#151513 }.desktop-qr-card img { width:116px;height:116px }.desktop-qr-card strong,.desktop-qr-card span { display:block }.desktop-qr-card strong { font-size:.82rem }.desktop-qr-card span { margin-top:5px;color:#666;font-size:.66rem }
.visibility-guide { padding-top:104px;padding-bottom:108px;border-top:1px solid var(--border) }.visibility-guide header { display:grid;grid-template-columns:1.1fr .65fr;gap:70px;align-items:end }.visibility-guide header p { margin:0;color:var(--muted);font-size:.85rem;line-height:1.85 }.guide-points { display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:48px;border:1px solid var(--border);background:var(--border) }.guide-points section { padding:28px;background:var(--bg) }.guide-points .mono { color:var(--accent-soft) }.guide-points h3 { margin:25px 0 10px;font-size:1rem }.guide-points p { margin:0;color:var(--muted);font-size:.78rem;line-height:1.85 }
.tool-faq { padding-top:100px }.mobile-download-bar { display:none }
@media (max-width:900px) { .generator-shell { grid-template-columns:1fr }.generator-controls { order:-1 }.tool-download { grid-template-columns:1fr 245px;gap:35px } }
@media (max-width:760px) { body { padding-bottom:72px }.tool-hero { display:block;padding-top:43px;padding-bottom:46px }.tool-hero h1 { font-size:clamp(3.15rem,15vw,4.7rem) }.tool-hero p { margin-top:35px }.generator-shell { width:100%;padding-bottom:74px }.generator-stage,.generator-controls { border-radius:0;border-right:0;border-left:0 }.generator-stage { padding:13px }.generator-controls { padding:18px 17px }.stage-top { align-items:flex-start }.stage-status { max-width:100px;text-align:right }.preview-frame { aspect-ratio:4/3 }.scene-picker { gap:5px }.preset-row { grid-template-columns:1fr 1fr }.range-grid { gap:20px 12px }.tool-download { display:block;padding-top:72px;padding-bottom:78px }.desktop-qr-card { display:none }.visibility-guide { padding-top:77px;padding-bottom:80px }.visibility-guide header { display:block }.visibility-guide header p { margin-top:26px }.guide-points { grid-template-columns:1fr;margin-top:35px }.guide-points section { padding:23px 20px }.tool-faq { padding-top:76px }.mobile-download-bar { position:fixed;z-index:20;right:0;bottom:0;left:0;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;min-height:64px;padding:8px 17px;color:var(--text);background:rgba(20,20,18,.97);border-top:1px solid var(--border);box-shadow:0 -10px 25px rgba(0,0,0,.22) }.mobile-download-bar img { border-radius:8px }.mobile-download-bar b,.mobile-download-bar small { display:block }.mobile-download-bar b { font-size:.72rem }.mobile-download-bar small { margin-top:1px;color:var(--muted);font-size:.6rem }.mobile-download-bar>strong { padding:8px 13px;border-radius:5px;color:#16130f;background:var(--accent);font-size:.7rem } }