:root { color-scheme: light dark; --bg:#f5f4ee; --surface:#fffefa; --ink:#1b1d1c; --muted:#6b6e68; --line:#dcdcd4; --accent:#467a55; --accent-soft:#d9ebdc; --warm:#f0a255; --shadow:0 18px 50px rgba(35,42,36,.08); }
@media (prefers-color-scheme: dark) { :root { --bg:#151917; --surface:#1d221f; --ink:#f1f1e8; --muted:#a8aaa2; --line:#363c37; --accent:#9fd4a9; --accent-soft:#263e2d; --warm:#f4b96d; --shadow:0 18px 50px rgba(0,0,0,.2); } }
:root[data-theme="light"] { color-scheme:light; --bg:#f5f4ee; --surface:#fffefa; --ink:#1b1d1c; --muted:#6b6e68; --line:#dcdcd4; --accent:#467a55; --accent-soft:#d9ebdc; --warm:#f0a255; --shadow:0 18px 50px rgba(35,42,36,.08); }
:root[data-theme="dark"] { color-scheme:dark; --bg:#151917; --surface:#1d221f; --ink:#f1f1e8; --muted:#a8aaa2; --line:#363c37; --accent:#9fd4a9; --accent-soft:#263e2d; --warm:#f4b96d; --shadow:0 18px 50px rgba(0,0,0,.2); }
* { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; } button,input,select { font:inherit } button { cursor:pointer } .page-shell { width:min(1120px, calc(100% - 40px)); margin:0 auto; }
.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.9px; font-size:20px; }.brand>span:last-child span { color:var(--accent) }.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:var(--accent); color:#fff; font-size:20px; line-height:1; }.header-actions { display:flex; gap:10px; align-items:center; }.local-pill { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:6px; font-weight:700; }.local-pill span { width:7px; height:7px; display:block; background:var(--accent); border-radius:99px; box-shadow:0 0 0 3px var(--accent-soft); }.theme-toggle { width:36px; height:36px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; }.theme-toggle svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; }.theme-toggle .moon { display:none } :root[data-theme="dark"] .theme-toggle .moon { display:block } :root[data-theme="dark"] .theme-toggle .sun { display:none } @media(prefers-color-scheme:dark){ :root:not([data-theme]) .theme-toggle .moon{display:block}:root:not([data-theme]) .theme-toggle .sun{display:none} }
.hero { padding:80px 0 55px; max-width:760px; }.eyebrow,.section-kicker { color:var(--accent); font-size:11px; letter-spacing:1.6px; font-weight:800; text-transform:uppercase; margin:0 0 13px; }.hero h1 { font-size:clamp(43px,7vw,76px); line-height:1.02; letter-spacing:-4.5px; margin:0; font-weight:800; }.hero h1 em { font-family:Georgia,serif; color:var(--accent); font-weight:400; letter-spacing:-4px; }.lede { max-width:620px; font-size:17px; line-height:1.7; color:var(--muted); margin:27px 0 0; }
.generator-card { background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--line); border-radius:20px; padding:32px; }.generator-topline { display:flex; justify-content:space-between; align-items:end; gap:20px; }.generator-card h2,.guide h2 { letter-spacing:-1.4px; font-size:25px; margin:0; }.quantity-control { color:var(--muted); font-weight:700; font-size:12px; display:flex; align-items:center; gap:8px; }.quantity-control input { width:45px; text-align:center; padding:5px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--ink); }
.version-grid { margin:26px 0 17px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.version-option { text-align:left; min-height:70px; background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:12px; transition:transform .16s,background .16s,border .16s; }.version-option:hover { transform:translateY(-2px); border-color:var(--accent); }.version-option.active { background:var(--accent-soft); border-color:var(--accent); }.version-option strong { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; display:block; font-size:14px; }.version-option span { margin-top:4px; display:block; color:var(--muted); font-size:11px; font-weight:600; }
.advanced-fields { border-radius:10px; background:color-mix(in srgb,var(--accent-soft) 48%, transparent); padding:14px; margin:0 0 15px; }.name-fields,.dce-fields { display:flex; gap:12px; }.advanced-fields label { flex:1; font-size:12px; font-weight:800; color:var(--muted); }.advanced-fields input,.advanced-fields select { margin-top:6px; display:block; width:100%; padding:9px 10px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }.field-note { font-size:12px; color:var(--muted); margin:0; line-height:1.5; }.name-fields + .field-note,.dce-fields + .field-note { margin-top:10px; }
.generate-button { background:var(--ink); color:var(--bg); width:100%; border:0; border-radius:10px; font-weight:800; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; font-size:14px; transition:transform .15s,opacity .15s; }.generate-button:hover { transform:translateY(-2px); }.generate-button kbd { background:rgba(255,255,255,.14); border-radius:5px; font-family:inherit; padding:2px 6px; }.result-area { border-top:1px solid var(--line); margin-top:25px; padding-top:20px; }.result-label { font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }.results { display:grid; gap:8px; }.uuid-result { display:flex; align-items:center; gap:8px; padding:11px 11px 11px 14px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }.uuid-result code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; font-weight:500; overflow:auto; white-space:nowrap; flex:1; }.copy-button { padding:6px 8px; background:transparent; color:var(--accent); border:1px solid var(--line); border-radius:6px; font-size:11px; font-weight:800; }.placeholder { color:var(--muted); margin:3px 0; font-size:14px; }
.guide { padding:120px 0 100px; display:grid; grid-template-columns:270px 1fr; gap:70px; }.guide-intro p:last-child { color:var(--muted); line-height:1.7; font-size:14px; }.table-wrap { overflow:auto; border-top:1px solid var(--line); }.table-wrap table { width:100%; border-collapse:collapse; min-width:680px; text-align:left; }.table-wrap th { font-size:10px; color:var(--muted); padding:14px 10px; text-transform:uppercase; letter-spacing:1px; }.table-wrap td { border-top:1px solid var(--line); padding:15px 10px; vertical-align:middle; color:var(--muted); font-size:12px; line-height:1.5; }.table-wrap td:first-child { color:var(--ink); width:86px; }.table-wrap td b { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; }.tag,.legacy { display:inline-block; margin:0 0 0 6px; border-radius:99px; padding:2px 6px; background:var(--accent-soft); color:var(--accent); font-size:9px; font-weight:800; vertical-align:1px; }.legacy { background:transparent; border:1px solid var(--line); color:var(--muted); }.recommended td:first-child { border-left:2px solid var(--accent); padding-left:8px; }
footer { border-top:1px solid var(--line); padding:27px 0 42px; font-size:11px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; } footer span:first-child { color:var(--ink); font-weight:800; }.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%, 20px); background:var(--ink); color:var(--bg); padding:9px 14px; border-radius:7px; font-size:12px; font-weight:700; opacity:0; pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:720px) { .page-shell{width:min(100% - 28px,1120px)}.site-header{height:66px}.local-pill{display:none}.hero{padding:58px 0 38px}.hero h1{letter-spacing:-3px}.hero h1 em{letter-spacing:-3px}.generator-card{padding:20px 16px;border-radius:15px}.version-grid{grid-template-columns:repeat(2,1fr)}.guide{padding:78px 0 65px;display:block}.guide-intro{max-width:430px;margin-bottom:30px}.guide h2{font-size:25px}.name-fields,.dce-fields{display:block}.advanced-fields label + label{margin-top:10px;display:block}footer{display:block;line-height:1.8}.uuid-result code{font-size:12px} }