@charset "UTF-8";
:root { color-scheme: dark; --bg:#101315; --panel:#191d20; --text:#f5f6f4; --muted:#acb5b8; --line:#343b3e; --accent:#c2f970; --max:1160px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--bg); color:var(--text); font-size:1rem; line-height:1.65; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:5px; }
a:hover { color:var(--accent); }
a:focus-visible { outline:3px solid var(--accent); outline-offset:6px; border-radius:3px; }
img { max-width:100%; display:block; }
.wrap { width:min(var(--max),calc(100% - 64px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:20px; z-index:10; padding:10px 20px; background:var(--accent); color:var(--bg); }
.skip:focus { top:10px; }
.header { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:750; font-size:1.35rem; letter-spacing:-.035em; text-decoration:none; }
.brand img { width:42px; height:42px; }
.nav { display:flex; align-items:center; gap:30px; font-size:.9rem; }
.nav a { text-decoration:none; }
.language { display:flex; align-items:center; gap:12px; border-left:1px solid var(--line); padding-left:24px; }
.language a { color:var(--muted); }
.language a[aria-current="page"] { color:var(--accent); }
.hero { padding-block:88px 60px; display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center; }
.eyebrow { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.82rem; text-transform:uppercase; letter-spacing:.11em; margin:0 0 24px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3.4rem,6.5vw,5.6rem); line-height:1.04; font-weight:650; letter-spacing:-.065em; margin-bottom:26px; }
h1 span { display:block; color:var(--accent); }
.lead { font-size:1.14rem; color:var(--muted); max-width:440px; line-height:1.7; margin-bottom:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; border:1px solid var(--accent); background:var(--accent); color:#182015; border-radius:8px; padding:12px 20px; font-weight:650; text-decoration:none; }
.button:hover { color:#182015; background:#d4ff98; }
.requirement { font-size:.85rem; color:var(--muted); margin-top:17px; }
figure { margin:0; min-width:0; }
.desktop { aspect-ratio:1.08; position:relative; background:#262f32; border:1px solid #526063; border-radius:14px; overflow:hidden; box-shadow:0 26px 70px #0005; }
.menubar { height:35px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; background:#313b3e; border-bottom:1px solid #536064; font-size:.78rem; }
.menubar strong { font-weight:650; }
.menubar-right { display:flex; align-items:center; gap:14px; }
.cross { width:17px; height:17px; border:1.5px dashed currentColor; display:inline-block; position:relative; }
.cross::after { content:"+"; position:absolute; inset:-6px 0 0; text-align:center; font-size:18px; }
.work-area { position:absolute; inset:35px 0 0; background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size:26px 26px; }
.sample-menu { position:absolute; top:10px; right:14px; width:74%; max-width:340px; padding:9px 13px; background:#1a2023f5; border:1px solid #626d7080; border-radius:9px; box-shadow:0 9px 30px #0005; font-size:clamp(.75rem,1vw,.9rem); line-height:1.5; }
.sample-menu p { padding:5px 7px; margin:0; display:flex; justify-content:space-between; gap:6px; }
.sample-menu .menu-title { color:#b9c2c4; font-weight:650; }
.sample-menu .rule { border-top:1px solid #4b5558; margin:6px 0; }
.sample-menu .selected { background:var(--accent); color:#17200e; border-radius:4px; }
.capture-frame { position:absolute; border:2px solid var(--accent); left:8%; bottom:9%; width:77%; aspect-ratio:16/9; box-shadow:0 0 0 1000px #0001; }
.capture-frame::before,.capture-frame::after { content:""; position:absolute; width:8px; height:8px; border:1px solid #17200e; background:var(--accent); }
.capture-frame::before { top:-5px; left:-5px; }
.capture-frame::after { bottom:-5px; right:-5px; }
.frame-label { position:absolute; bottom:calc(100% + 9px); left:-2px; color:#e8ffca; font-family:ui-monospace,monospace; font-size:.8rem; background:#192218; padding:2px 8px; white-space:nowrap; }
.frame-center { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(2rem,5vw,4rem); color:#d6e5df55; font-weight:600; letter-spacing:-.06em; }
.cursor { position:absolute; right:-11px; bottom:-16px; color:var(--text); font:32px/1 ui-monospace,monospace; }
figcaption { color:var(--muted); font-size:.78rem; margin-top:12px; text-align:right; }
.summary { display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px; padding:24px 0 35px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.summary strong { color:var(--text); font-weight:500; }
.section { padding-block:78px; border-bottom:1px solid var(--line); }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:40px; align-items:end; }
h2 { font-size:clamp(2rem,3.8vw,3rem); line-height:1.15; font-weight:600; letter-spacing:-.045em; margin-bottom:0; }
.section-heading p { color:var(--muted); max-width:440px; margin:0; }
.formats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.format-card { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:26px; }
.format-drawing { height:165px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.ratio { display:grid; place-items:center; border:1.5px solid #83938c; position:relative; color:var(--accent); font-family:ui-monospace,monospace; font-size:.9rem; background:#c2f97007; }
.ratio::before,.ratio::after { content:""; position:absolute; width:5px; height:5px; background:var(--accent); }
.ratio::before { left:-3px; top:-3px; }
.ratio::after { right:-3px; bottom:-3px; }
.ratio.free { width:70%; height:86px; border-style:dashed; }
.ratio.portrait { height:132px; aspect-ratio:9/16; }
.ratio.landscape { width:85%; max-width:220px; aspect-ratio:16/9; }
h3 { font-size:1.15rem; line-height:1.35; font-weight:600; letter-spacing:-.025em; margin-bottom:12px; }
.format-card p { font-size:.97rem; color:var(--muted); margin-bottom:0; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; margin:0; padding:0; list-style:none; }
.step-number { display:block; font:1rem ui-monospace,monospace; color:var(--accent); margin-bottom:20px; }
.steps p { color:var(--muted); margin-bottom:0; }
.note { margin:32px 0 0; color:var(--muted); font-size:.9rem; }
kbd { font:inherit; padding:2px 6px; border:1px solid #596267; border-radius:4px; color:var(--text); }
.details { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.details p { color:var(--muted); margin-bottom:0; }
.contact { padding:64px 0; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.contact h2 { font-size:2rem; margin-bottom:10px; }
.contact p { color:var(--muted); margin:0; }
.contact a { font-size:1.12rem; }
footer { border-top:1px solid var(--line); padding:26px 0 35px; }
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; color:var(--muted); font-size:.88rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:24px; }
.footer-links a { text-decoration:none; }
.legal { max-width:800px; padding-block:68px 80px; }
.legal h1 { font-size:clamp(2.7rem,5vw,4rem); overflow-wrap:anywhere; }
.legal .intro { font-size:1.15rem; color:var(--muted); margin-bottom:38px; }
.legal h2 { font-size:1.3rem; letter-spacing:-.02em; margin:35px 0 12px; }
.legal p,.legal li { color:#c3cbce; }
.legal address { font-style:normal; color:#c3cbce; }
.legal a { overflow-wrap:anywhere; }
.legal .updated { margin-top:48px; font-size:.9rem; color:var(--muted); }
@media (min-width:1500px) { .hero { padding-top:108px; } }
@media (max-width:960px) { .hero { gap:28px; } h1 { font-size:3.5rem; } .nav { gap:20px; } .format-card { padding:20px; } .sample-menu { font-size:.75rem; } }
@media (max-width:760px) { .wrap { width:calc(100% - 40px); } .header { min-height:88px; flex-wrap:wrap; padding-block:18px; gap:16px; } .nav { gap:18px; } .nav .desktop-link { display:none; } .language { padding-left:0; border:0; } .hero { grid-template-columns:1fr; padding-top:52px; gap:38px; } h1 { font-size:clamp(3rem,10vw,4.5rem); } .lead { max-width:540px; } .desktop { max-width:540px; margin-inline:auto; } .sample-menu { font-size:.85rem; } .section { padding-block:52px; } .section-heading { grid-template-columns:1fr; gap:20px; margin-bottom:30px; } .formats { grid-template-columns:1fr; } .format-card { display:grid; grid-template-columns:110px 1fr; gap:20px; align-items:center; } .format-drawing { height:136px; border:0; margin:0; padding:0; } .ratio.free { width:100%; height:72px; } .ratio.landscape { width:100%; } .steps { grid-template-columns:1fr; gap:30px; } .step-number { margin-bottom:10px; } .details { grid-template-columns:1fr; gap:32px; } .contact { flex-direction:column; align-items:flex-start; } .legal { padding-block:45px; } }
@media (max-width:380px) { .format-card { grid-template-columns:1fr; } .sample-menu { font-size:.75rem; } .frame-label { font-size:.75rem; } .menubar { font-size:.75rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }