@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#242424; --muted:#858585; --line:#e8e8e5; --surface:#fff; --canvas:#fdfdfc; --accent:#ff6543; --accent-soft:#fff0eb; --shadow:0 18px 45px rgba(29,29,29,.07); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:#f4f4f2; font-family:Manrope,Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.46; background-image:radial-gradient(#d3d3cf 1px,transparent 1.2px); background-size:18px 18px; }
.app-shell { width:min(1220px,calc(100% - 40px)); margin:24px auto; overflow:hidden; border:1px solid #e5e5e1; border-radius:25px; background:var(--surface); box-shadow:var(--shadow); }
.hero { display:flex; align-items:center; gap:10px; min-height:72px; padding:0 30px; border-bottom:1px solid var(--line); }
.brand-mark { display:grid; grid-template-columns:repeat(2,9px); gap:3px; width:21px; }.brand-mark i { height:9px; border-radius:2px; background:var(--ink); }.brand-mark i:nth-child(2),.brand-mark i:nth-child(3) { background:var(--accent); }
.eyebrow,.section-label,footer,.range-scale,.preview-topline span,.preview-footer { font:500 10px "DM Mono",monospace; letter-spacing:.09em; }.eyebrow { margin:0 0 2px; color:var(--accent); font-size:9px; } h1 { margin:0; font-size:23px; letter-spacing:-.07em; } h1 span { color:var(--accent); }.header-actions { display:flex; align-items:center; gap:9px; margin-left:auto; }.header-actions .nejo-credit { padding-right:10px; border-right:1px solid var(--line); }.language-select { border:1px solid #deded9; border-radius:8px; padding:8px 7px; color:#555; background:#fff; font:600 9px "DM Mono",monospace; cursor:pointer; outline:0; }.tagline { margin-left:auto; color:var(--muted); max-width:280px; font-size:12px; line-height:1.5; }
.theme-toggle { margin-left:12px; border:1px solid #deded9; border-radius:8px; padding:9px 11px; color:#555; background:#fff; font:600 9px "DM Mono",monospace; cursor:pointer; white-space:nowrap; }
.workspace { display:grid; grid-template-columns:315px 1fr; min-height:655px; }.controls-panel { padding:25px; background:#fcfcfb; border-right:1px solid var(--line); }.panel-section { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }.section-label { margin:0 0 14px; color:#555; font-size:9px; }
.drop-zone { height:112px; border:1px dashed #c8c8c3; border-radius:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; color:var(--ink); transition:.2s; }.drop-zone:hover,.drop-zone.is-dragging { border-color:var(--accent); background:var(--accent-soft); }.drop-zone input { display:none; }.upload-icon { color:var(--accent); font:400 22px "DM Mono",monospace; line-height:1; }.drop-zone strong { margin-top:6px; font-size:12px; }.drop-zone small,.file-name,.download-note { color:var(--muted); font:10px "DM Mono",monospace; }.file-name { overflow:hidden; margin:8px 0 0; white-space:nowrap; text-overflow:ellipsis; }
.control-row,.switch-row { display:flex; align-items:center; justify-content:space-between; font-size:11px; }.control-row output { color:var(--accent); font:500 11px "DM Mono",monospace; } input[type=range] { appearance:none; width:100%; height:3px; margin:14px 0 5px; border-radius:3px; background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--progress),#deded9 var(--progress),#deded9 100%); } input[type=range]::-webkit-slider-thumb { appearance:none; width:13px; height:13px; border:3px solid #fff; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--accent); cursor:pointer; }.range-scale { display:flex; justify-content:space-between; color:#aaa; font-size:8px; }.switch-row { margin-top:17px; }.toggle { width:33px; height:18px; padding:2px; border:0; border-radius:20px; background:#deded9; cursor:pointer; }.toggle span { display:block; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.18); transition:transform .15s; }.toggle.is-on { background:var(--accent); }.toggle.is-on span { transform:translateX(15px); }
.color-section { margin-bottom:18px; }.color-control { display:flex; gap:8px; margin-top:12px; }.color-control input[type=color] { appearance:none; width:42px; height:34px; padding:3px; border:1px solid #deded9; border-radius:8px; background:#fff; cursor:pointer; }.color-control input[type=color]::-webkit-color-swatch-wrapper { padding:0; }.color-control input[type=color]::-webkit-color-swatch { border:0; border-radius:4px; }.color-control input[type=text] { flex:1; min-width:0; border:1px solid #deded9; border-radius:8px; padding:0 10px; color:var(--ink); background:#fff; font:11px "DM Mono",monospace; text-transform:uppercase; outline:none; }.color-control input[type=text]:focus { border-color:var(--accent); }.color-note { margin:8px 0 0; color:var(--muted); font:9px "DM Mono",monospace; line-height:1.45; }
.download-button,.copy-button { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; font:700 10px "DM Mono",monospace; letter-spacing:.07em; cursor:pointer; }.download-button { border:0; border-radius:9px; background:var(--accent); color:#fff; }.download-button span { font-size:16px; }.download-button:disabled,.copy-button:disabled { opacity:.4; cursor:not-allowed; }.copy-button { margin-top:8px; border:1px solid #dcdcd7; border-radius:9px; color:#555; background:#fff; }.copy-button:not(:disabled):hover { color:var(--accent); border-color:var(--accent); }.copy-status { min-height:13px; margin:7px 0 -3px; color:var(--accent); text-align:center; font:9px "DM Mono",monospace; }.download-note { margin:9px 0 0; text-align:center; }
.transparent-downloads { margin-top:17px; padding-top:16px; border-top:1px solid var(--line); }.transparent-downloads p { margin:0 0 8px; color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.08em; }.transparent-downloads div,.svg-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.transparent-downloads button,.svg-actions button { padding:9px 3px; border:1px solid #deded9; border-radius:7px; color:#555; background:#fff; font:600 8px "DM Mono",monospace; cursor:pointer; }.transparent-downloads button:last-child { color:#fff; background:#242424; border-color:#242424; }.transparent-downloads button:disabled,.svg-actions button:disabled { cursor:not-allowed; opacity:.35; }.svg-actions { margin-top:8px; }.svg-actions button:not(:disabled):hover { color:var(--accent); border-color:var(--accent); }
.preview-panel { min-width:0; padding:25px 27px 18px; display:flex; flex-direction:column; background:#fff; }.preview-topline { display:flex; align-items:center; justify-content:space-between; }.preview-topline span { color:var(--muted); font-size:9px; }.canvas-stage { position:relative; display:grid; place-items:center; flex:1; min-height:500px; overflow:hidden; border:1px solid #ecece8; border-radius:14px; background-color:var(--canvas); background-image:radial-gradient(#c7c7c2 1px,transparent 1.2px); background-size:18px 18px; }.canvas-stage::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px 1px rgba(0,0,0,.02); } canvas { position:relative; z-index:1; display:none; max-width:92%; max-height:440px; width:auto; height:auto; image-rendering:pixelated; box-shadow:0 10px 24px rgba(0,0,0,.08); }.canvas-stage.has-image canvas { display:block; }.canvas-stage.has-image .empty-state { display:none; }.empty-state { text-align:center; color:var(--muted); font-size:12px; }.empty-state strong { display:block; margin:13px 0 4px; color:var(--ink); }.empty-state p { margin:0; }.empty-grid { width:48px; height:48px; margin:auto; border:1px solid #bbb; border-radius:8px; background-image:radial-gradient(#aaa 1px,transparent 1.2px); background-size:10px 10px; }.preview-footer { display:flex; gap:18px; padding:14px 2px 0; color:var(--muted); font-size:8px; }.preview-footer b { display:inline-block; width:8px; height:8px; margin-right:5px; border:1px solid #ddd; background:#090909; vertical-align:-1px; }.preview-footer span:nth-child(2) b { background:#fff; }.preview-footer .grid-key b { border:0; background:#aaa; }
.brand-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; padding:0 29px; border-top:1px solid var(--line); color:var(--muted); font:10px "DM Mono",monospace; }.nejo-credit { display:flex; align-items:center; gap:5px; color:var(--muted); text-decoration:none; }.nejo-credit:hover { color:var(--accent); }.nejo-mark { width:18px; height:12px; flex:0 0 auto; background-color:currentColor; -webkit-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEzIDE1IDM4IDE4IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPjxwYXRoIGQ9Ik0xNyAxNWgzdjFoLTNaTTM5IDE1aDd2MWgtN1pNMTYgMTZoNXYxaC01Wk0zMyAxNmgxdjFoLTFaTTM3IDE2aDExdjFoLTExWk0xNCAxN2g5djFoLTlaTTMzIDE3aDJ2MWgtMlpNMzYgMTdoMTN2MWgtMTNaTTEzIDE4aDEydjFoLTEyWk0zMyAxOGgxdjFoLTFaTTM1IDE4aDV2MWgtNVpNNDQgMThoNXYxaC01Wk0xMyAxOWg0djFoLTRaTTIwIDE5aDZ2MWgtNlpNMzQgMTloNHYxaC00Wk00NiAxOWg0djFoLTRaTTEzIDIwaDN2MWgtM1pNMjIgMjBoNnYxaC02Wk0zNCAyMGgzdjFoLTNaTTQ3IDIwaDR2MWgtNFpNMTMgMjFoM3YxaC0zWk0yNCAyMWg2djFoLTZaTTMzIDIxaDR2MWgtNFpNNDggMjFoM3YxaC0zWk0xMyAyMmgzdjFoLTNaTTE5IDIyaDF2MWgtMVpNMjUgMjJoNXYxaC01Wk0zMyAyMmgzdjFoLTNaTTQ4IDIyaDN2MWgtM1pNMTMgMjNoM3YxaC0zWk0xOSAyM2gydjFoLTJaTTI3IDIzaDN2MWgtM1pNMzMgMjNoM3YxaC0zWk00OCAyM2gzdjFoLTNaTTEzIDI0aDN2MWgtM1pNMTkgMjRoNHYxaC00Wk0yOSAyNGgxdjFoLTFaTTMzIDI0aDN2MWgtM1pNNDggMjRoM3YxaC0zWk0xMyAyNWgzdjFoLTNaTTE5IDI1aDZ2MWgtNlpNMzMgMjVoM3YxaC0zWk00OCAyNWgzdjFoLTNaTTEzIDI2aDN2MWgtM1pNMjAgMjZoN3YxaC03Wk0zMyAyNmgzdjFoLTNaTTQ4IDI2aDN2MWgtM1pNMTMgMjdoM3YxaC0zWk0yMiAyN2g3djFoLTdaTTMyIDI3aDR2MWgtNFpNNDcgMjdoNHYxaC00Wk0xMyAyOGgzdjFoLTNaTTI0IDI4aDEydjFoLTEyWk0zNyAyOGgxdjFoLTFaTTQ2IDI4aDR2MWgtNFpNMTMgMjloM3YxaC0zWk0yNSAyOWgxMHYxaC0xMFpNMzYgMjloNHYxaC00Wk00NCAyOWg1djFoLTVaTTE1IDMwaDF2MWgtMVpNMjcgMzBoNnYxaC02Wk0zNiAzMGgxM3YxaC0xM1pNMjkgMzFoM3YxaC0zWk0zNyAzMWgxMXYxaC0xMVpNMzggMzJoOHYxaC04WiIvPjwvc3ZnPg==') center / contain no-repeat; mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEzIDE1IDM4IDE4IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiPjxwYXRoIGQ9Ik0xNyAxNWgzdjFoLTNaTTM5IDE1aDd2MWgtN1pNMTYgMTZoNXYxaC01Wk0zMyAxNmgxdjFoLTFaTTM3IDE2aDExdjFoLTExWk0xNCAxN2g5djFoLTlaTTMzIDE3aDJ2MWgtMlpNMzYgMTdoMTN2MWgtMTNaTTEzIDE4aDEydjFoLTEyWk0zMyAxOGgxdjFoLTFaTTM1IDE4aDV2MWgtNVpNNDQgMThoNXYxaC01Wk0xMyAxOWg0djFoLTRaTTIwIDE5aDZ2MWgtNlpNMzQgMTloNHYxaC00Wk00NiAxOWg0djFoLTRaTTEzIDIwaDN2MWgtM1pNMjIgMjBoNnYxaC02Wk0zNCAyMGgzdjFoLTNaTTQ3IDIwaDR2MWgtNFpNMTMgMjFoM3YxaC0zWk0yNCAyMWg2djFoLTZaTTMzIDIxaDR2MWgtNFpNNDggMjFoM3YxaC0zWk0xMyAyMmgzdjFoLTNaTTE5IDIyaDF2MWgtMVpNMjUgMjJoNXYxaC01Wk0zMyAyMmgzdjFoLTNaTTQ4IDIyaDN2MWgtM1pNMTMgMjNoM3YxaC0zWk0xOSAyM2gydjFoLTJaTTI3IDIzaDN2MWgtM1pNMzMgMjNoM3YxaC0zWk00OCAyM2gzdjFoLTNaTTEzIDI0aDN2MWgtM1pNMTkgMjRoNHYxaC00Wk0yOSAyNGgxdjFoLTFaTTMzIDI0aDN2MWgtM1pNNDggMjRoM3YxaC0zWk0xMyAyNWgzdjFoLTNaTTE5IDI1aDZ2MWgtNlpNMzMgMjVoM3YxaC0zWk00OCAyNWgzdjFoLTNaTTEzIDI2aDN2MWgtM1pNMjAgMjZoN3YxaC03Wk0zMyAyNmgzdjFoLTNaTTQ4IDI2aDN2MWgtM1pNMTMgMjdoM3YxaC0zWk0yMiAyN2g3djFoLTdaTTMyIDI3aDR2MWgtNFpNNDcgMjdoNHYxaC00Wk0xMyAyOGgzdjFoLTNaTTI0IDI4aDEydjFoLTEyWk0zNyAyOGgxdjFoLTFaTTQ2IDI4aDR2MWgtNFpNMTMgMjloM3YxaC0zWk0yNSAyOWgxMHYxaC0xMFpNMzYgMjloNHYxaC00Wk00NCAyOWg1djFoLTVaTTE1IDMwaDF2MWgtMVpNMjcgMzBoNnYxaC02Wk0zNiAzMGgxM3YxaC0xM1pNMjkgMzFoM3YxaC0zWk0zNyAzMWgxMXYxaC0xMVpNMzggMzJoOHYxaC04WiIvPjwvc3ZnPg==') center / contain no-repeat; }.nejo-credit strong { color:currentColor; }.support-prompt { display:flex; align-items:center; gap:8px; }.support-prompt button { border:1px solid var(--accent); border-radius:7px; padding:7px 9px; color:var(--accent); background:transparent; font:600 9px "DM Mono",monospace; cursor:pointer; }.support-prompt button:hover { color:#fff; background:var(--accent); }.donation-dialog { width:min(390px,calc(100% - 32px)); border:1px solid var(--line); border-radius:15px; padding:26px; color:var(--ink); background:var(--surface); box-shadow:0 18px 60px rgba(0,0,0,.3); }.donation-dialog::backdrop { background:rgba(0,0,0,.52); backdrop-filter:blur(3px); }.donation-dialog h2 { margin:0 0 9px; font-size:19px; letter-spacing:-.04em; }.donation-dialog p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.dialog-close { position:absolute; top:10px; right:11px; border:0; color:var(--muted); background:transparent; font-size:22px; cursor:pointer; }
body.dark { --ink:#f0f0ed; --muted:#a4a49e; --line:#30302d; --surface:#1a1a1a; --canvas:#151515; background:#0e0e0e; } body.dark::before { opacity:.2; background-image:radial-gradient(#4b4b48 1px,transparent 1.2px); } body.dark .app-shell { border-color:#30302d; box-shadow:0 18px 45px rgba(0,0,0,.32); } body.dark .controls-panel,body.dark .preview-panel { background:#1a1a1a; } body.dark .section-label { color:#c1c1bb; } body.dark .drop-zone,body.dark .color-control input[type=color],body.dark .color-control input[type=text],body.dark .copy-button,body.dark .transparent-downloads button,body.dark .svg-actions button,body.dark .theme-toggle { border-color:#464641; color:#deded8; background:#222220; } body.dark .canvas-stage { border-color:#33332f; background-color:#141414; background-image:radial-gradient(#575752 1px,transparent 1.2px); } body.dark .empty-grid { border-color:#666660; background-image:radial-gradient(#777770 1px,transparent 1.2px); } body.dark .toggle { background:#52524d; } body.dark .toggle.is-on { background:var(--accent); } body.dark .preview-footer b { border-color:#555550; } body.dark .preview-footer span:nth-child(2) b { background:#e9e9e5; } body.dark .theme-toggle { color:#f2f2ed; } body.dark .transparent-downloads button:last-child { color:#222; background:#f0f0eb; border-color:#f0f0eb; }
@media (max-width:720px) { .app-shell { width:calc(100% - 20px); margin:10px auto; border-radius:17px; }.hero { min-height:72px; padding:0 18px; }.tagline { display:none; }.workspace { grid-template-columns:1fr; }.controls-panel { border-right:0; border-bottom:1px solid var(--line); }.preview-panel { padding:20px 14px; }.canvas-stage { min-height:370px; }.preview-footer { gap:9px; font-size:7px; } }
.nejo-mark,.nejo-credit strong { color:var(--ink); }.nejo-credit:hover { color:var(--muted); }.nejo-credit:hover .nejo-mark,.nejo-credit:hover strong { color:var(--accent); }.support-prompt a { border:1px solid var(--accent); border-radius:7px; padding:7px 9px; color:var(--accent); background:transparent; font:600 9px "DM Mono",monospace; text-decoration:none; }.support-prompt a:hover { color:#fff; background:var(--accent); }
.brand-footer { justify-content:flex-end; }.language-select { border-color:#464641; color:#deded8; background:#222220; } body:not(.dark) .language-select { border-color:#deded9; color:#555; background:#fff; }
.header-support { display:flex; align-items:center; gap:5px; border:1px solid var(--accent); border-radius:8px; padding:8px 9px; color:var(--accent); font:600 9px "DM Mono",monospace; text-decoration:none; white-space:nowrap; }.header-support span:first-child { font-size:13px; line-height:0; }.header-support:hover { color:#fff; background:var(--accent); }.language-menu-wrap { position:relative; }.language-toggle { width:33px; height:33px; border:1px solid #464641; border-radius:8px; color:#deded8; background:#222220; font-size:15px; cursor:pointer; }.language-menu { position:absolute; z-index:10; top:calc(100% + 7px); right:0; display:none; width:136px; padding:5px; border:1px solid #464641; border-radius:10px; background:#222220; box-shadow:0 12px 28px rgba(0,0,0,.28); }.language-menu.is-open { display:grid; }.language-menu button { border:0; border-radius:6px; padding:8px; color:#deded8; background:transparent; text-align:left; font:500 10px "DM Mono",monospace; cursor:pointer; }.language-menu button:hover { color:#fff; background:#33332f; } body:not(.dark) .language-toggle,body:not(.dark) .language-menu { border-color:#deded9; color:#555; background:#fff; } body:not(.dark) .language-menu button { color:#555; } body:not(.dark) .language-menu button:hover { color:#222; background:#f1f1ee; }
@media (max-width:720px) { .header-actions { gap:6px; }.header-actions .nejo-credit { display:none; }.header-support span:last-child { display:none; }.header-support { padding:8px; }.hero { padding:0 16px; } }
.language-menu button { display:flex; align-items:center; gap:8px; }.flag { position:relative; display:inline-block; width:18px; height:12px; flex:0 0 auto; overflow:hidden; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.12); }.flag-es { background:linear-gradient(#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%); }.flag-fr { background:linear-gradient(90deg,#002654 0 33%,#fff 33% 66%,#ed2939 66%); }.flag-de { background:linear-gradient(#151515 0 33%,#dd0000 33% 66%,#ffce00 66%); }.flag-pt { background:linear-gradient(90deg,#006b54 0 40%,#ff0000 40%); }.flag-it { background:linear-gradient(90deg,#009246 0 33%,#fff 33% 66%,#ce2b37 66%); }.flag-ja { background:#fff; }.flag-ja::after { content:""; position:absolute; inset:3px 6px; border-radius:50%; background:#bc002d; }.flag-zh { background:#de2910; }.flag-zh::after { content:"★"; position:absolute; top:-2px; left:2px; color:#ffde00; font-size:8px; }.flag-en { background:linear-gradient(90deg,transparent 41%,#c8102e 41% 59%,transparent 59%),linear-gradient(transparent 35%,#c8102e 35% 65%,transparent 65%),linear-gradient(90deg,transparent 31%,#fff 31% 69%,transparent 69%),linear-gradient(transparent 22%,#fff 22% 78%,transparent 78%),linear-gradient(32deg,transparent 42%,#fff 42% 48%,#c8102e 48% 52%,#fff 52% 58%,transparent 58%),linear-gradient(-32deg,transparent 42%,#fff 42% 48%,#c8102e 48% 52%,#fff 52% 58%,transparent 58%),#012169; }
.nejo-credit { gap:7px; color:var(--muted); }.nejo-credit .credit-prefix { color:var(--muted); font-size:10px; white-space:nowrap; }.nejo-credit .nejo-brand { display:flex; align-items:center; gap:5px; color:var(--ink); }.nejo-credit strong { font:600 10px "DM Mono",monospace; letter-spacing:.01em; }.nejo-credit:hover { color:var(--muted); }.nejo-credit:hover .nejo-brand { color:var(--accent); }.nejo-credit:hover .credit-prefix { color:var(--muted); }
@media (max-width:720px) { .header-actions .nejo-credit { display:flex; padding-right:0; border-right:0; }.nejo-credit .credit-prefix { display:none; } }
.mosaico-logo { display:block; width:146px; height:auto; color:var(--ink); flex:0 1 146px; isolation:isolate; }
@media (max-width:720px) { .mosaico-logo { width:112px; flex-basis:112px; } }