.page{min-height:100vh;padding:28px 18px 40px;transition:background-color .14s ease,color .14s ease}.shell{max-width:1200px;margin:0 auto}.header{display:grid;gap:10px;margin-bottom:24px}.dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-2));box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-accent) 15%,transparent)}h1{margin:0;font-size:28px;letter-spacing:.2px}.subtitle{margin:0;color:var(--ui-muted);line-height:1.5;max-width:72ch}.grid{display:grid;gap:20px;grid-template-columns:1fr 400px;align-items:start}.grid-left{display:grid;gap:16px}.grid-right{position:sticky;top:20px;display:grid;gap:16px;max-height:calc(100vh - 40px)}.card{border:1px solid var(--ui-border);background:var(--ui-panel);border-radius:var(--ui-radius-2);box-shadow:var(--ui-shadow);padding:16px}.card h2{margin:0 0 10px;font-size:16px;letter-spacing:.2px}@media(max-width:940px){.grid{grid-template-columns:1fr}.grid-right{position:relative;top:auto;max-height:none}}.controls{display:grid;gap:12px}.field{display:grid;gap:8px}.labelRow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.labelRow label{font-weight:600;letter-spacing:.15px}.labelRow span{color:var(--ui-muted);font-size:12px;white-space:nowrap}.row{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}.color{width:44px;height:38px;border-radius:12px;border:1px solid var(--ui-border);background:transparent;padding:4px;cursor:pointer}.textInput,.numberInput{height:38px;border-radius:12px;border:1px solid var(--ui-border);background:#00000040;color:var(--ui-text);padding:0 12px;font:inherit}.color:focus-visible,.textInput:focus-visible,.numberInput:focus-visible{outline:2px solid color-mix(in srgb,var(--ui-accent) 60%,white);outline-offset:2px}.hint{margin-top:6px;font-size:12px;color:var(--ui-muted);line-height:1.45}.divider{border:0;height:1px;background:var(--ui-border);margin:14px 0;opacity:.9}.cardSubTitle{margin:12px 0 8px;font-size:14px;letter-spacing:.2px;color:var(--ui-muted)}.cardHeaderRow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.stack{display:grid;gap:12px}.header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.header-content{flex:1}@media(max-width:640px){.header-top{flex-direction:column;align-items:stretch}.lang-switcher{align-self:flex-end}}.previewAside{border:1px dashed color-mix(in srgb,var(--ui-border) 70%,transparent);border-radius:var(--ui-radius-2);background:#0000001f;padding:14px;min-height:260px;margin-top:16px}.footer{margin-top:60px;padding:40px 20px;border-top:1px solid var(--ui-border);background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--ui-accent) 3%,transparent))}.footer-content{max-width:600px;margin:0 auto;text-align:center}.footer-title{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--ui-text)}.footer-subtitle{margin:0 0 20px;font-size:14px;color:var(--ui-muted);line-height:1.5}.footer-button{display:inline-block;padding:12px 24px;background:var(--ui-accent);color:var(--color-onAccent, #000);text-decoration:none;border-radius:8px;font-weight:500;font-size:15px;transition:all .2s ease;box-shadow:0 2px 8px color-mix(in srgb,var(--ui-accent) 25%,transparent)}.footer-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--ui-accent) 35%,transparent)}.footer-button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:4px}.footer-credits{margin:24px 0 0;font-size:13px;color:var(--ui-muted)}.footer-link{color:var(--ui-accent);text-decoration:none;transition:opacity .2s ease}.footer-link:hover{opacity:.8;text-decoration:underline}.footer-link:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px;border-radius:2px}.lang-switcher{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--ui-panel);border:1px solid var(--ui-border);border-radius:8px;color:var(--ui-text);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.lang-switcher:hover{background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-panel));border-color:var(--ui-accent)}.lang-switcher:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}.lang-code{font-family:monospace;font-size:13px}.swatch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--ui-border);background:color-mix(in srgb,var(--ui-panel) 70%,transparent)}.swatchLeft{display:flex;align-items:center;gap:10px;min-width:0}.swatchChip{width:18px;height:18px;border-radius:6px;background:var(--swatch-bg);border:1px solid color-mix(in srgb,var(--ui-border) 65%,transparent);flex:0 0 auto}.swatchMeta{display:grid;gap:2px;min-width:0}.swatchTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.swatchLabel{font-weight:600;font-size:13px}.swatchValue{color:var(--ui-muted);font-size:12px}.swatchDesc{margin:0;color:var(--ui-muted);font-size:12px;line-height:1.35}.swatchTextPreview{color:var(--swatch-text);font-weight:700;opacity:.85}.presetRow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 16px}@media(max-width:940px){.presetRow{grid-template-columns:1fr}}.previewButton{background:var(--color-accent);color:var(--color-onAccent);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.62rem 1rem;font-size:var(--font-size-base);line-height:var(--line-height-base);cursor:pointer}.previewButton:focus-visible{outline:2px solid color-mix(in srgb,var(--color-accent) 60%,white);outline-offset:2px}.previewCard{max-width:560px;width:100%;background:var(--color-bgCard);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:14px;display:grid;gap:10px}.previewCardHeader{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.previewCardTitle{margin:0;font-size:calc(var(--font-size-base) * 1.05);line-height:var(--line-height-base)}.previewCardMeta{color:var(--color-textSecondary);font-size:12px}.previewCardDesc{margin:0;color:var(--color-textSecondary);line-height:var(--line-height-base);font-size:var(--font-size-base)}.previewCardActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.previewCardBtn{background:transparent;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.5rem .8rem;cursor:pointer}.previewCardBtn:hover{border-color:var(--color-accentHover)}.previewCardBtn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.previewCardSecondary{color:var(--color-accent);text-decoration:none;font-size:14px;background:none;border:none;cursor:pointer;padding:.5rem .8rem;border-radius:var(--radius-md)}.previewCardSecondary:hover{text-decoration:underline}.previewCardSecondary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.previewInput{background:var(--color-bgCard);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.58rem .78rem;font-size:var(--font-size-base);line-height:var(--line-height-base);min-width:240px}.previewInput::placeholder{color:color-mix(in srgb,var(--color-text) 55%,transparent)}.previewInput:focus-visible{outline:2px solid color-mix(in srgb,var(--color-accent) 60%,white);outline-offset:2px}.previewGrid{display:grid;grid-template-columns:minmax(340px,560px) 1fr;gap:16px;align-items:start}.previewSide{display:grid;gap:12px}.previewInputField{display:flex;flex-direction:column;gap:4px}.previewCard{margin-top:10px}.codeSide{border:1px solid var(--ui-border);border-radius:var(--ui-radius-2);background:#0000002e;overflow:auto;max-height:320px}.codePre{margin:0;padding:14px;font-size:12px;line-height:1.45;white-space:pre}.exportStatus{color:var(--ui-muted);font-size:12px}@media(max-width:940px){.previewGrid{grid-template-columns:1fr}.previewAside{min-height:auto}.codeSide{max-height:260px}}.hintInline{margin:4px 0 8px;color:var(--ui-muted);font-size:12px;line-height:1.35}.typography-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inputWithLabel{display:flex;flex-direction:column;gap:4px}.inputWithLabel label{font-size:12px;color:var(--ui-muted)}.statusBadge{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--ui-border) 85%,transparent);background:#0000002e}.statusBadge.isOk{border-color:color-mix(in srgb,var(--ui-ok) 50%,transparent)}.statusBadge.isFail{border-color:color-mix(in srgb,var(--ui-danger) 50%,transparent)}.statusLabel{color:var(--ui-muted);font-size:12px}.statusValue{letter-spacing:.2px}:root{--color-bg: #0a0a12;--color-bgCard: #14151b;--color-text: rgba(255, 255, 255, .92);--color-textSecondary: rgba(255, 255, 255, .7);--color-accent: #7c5cff;--color-onAccent: #000000;--color-border: rgba(255, 255, 255, .12);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 18px;--font-size-base: 1rem;--line-height-base: 1.55;--ui-bg: var(--color-bg);--ui-surface: var(--color-bgCard);--ui-panel: color-mix(in srgb, var(--color-bgCard) 70%, rgba(255, 255, 255, .05));--ui-panel-2: color-mix(in srgb, var(--color-bgCard) 70%, rgba(255, 255, 255, .03));--ui-border: var(--color-border);--ui-text: var(--color-text);--ui-muted: var(--color-textSecondary);--ui-accent: var(--color-accent);--ui-accent-2: #5dd6ff;--ui-danger: #ff5a7a;--ui-ok: #00f59b;--ui-radius-1: 14px;--ui-radius-2: 18px;--ui-shadow: 0 12px 40px rgba(0, 0, 0, .35);--ui-focus: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 55%, transparent)}*{box-sizing:border-box}html,body{min-height:100%;overflow-x:clip}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";background:radial-gradient(1200px 700px at 12% -10%,color-mix(in srgb,var(--ui-accent) 20%,transparent),transparent),radial-gradient(1000px 600px at 90% 0%,color-mix(in srgb,var(--ui-accent-2) 14%,transparent),transparent),var(--ui-bg);color:var(--ui-text)}a{color:inherit}button,input{font:inherit}:focus-visible{outline:2px solid transparent;box-shadow:var(--ui-focus);border-radius:10px}.skip-link{position:absolute;top:-100%;left:16px;z-index:1000;padding:8px 16px;background:var(--ui-accent);color:var(--color-onAccent);border-radius:var(--ui-radius-1);text-decoration:none;font-weight:600}.skip-link:focus{top:16px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.previewRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.downloadRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{height:40px;padding:0 14px;border-radius:var(--ui-radius-1);border:1px solid var(--ui-border);background:#ffffff0f;color:var(--ui-text);cursor:pointer;transition:transform .12s ease,background .12s ease,border-color .12s ease}.btn:hover{background:#ffffff14}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid color-mix(in srgb,var(--ui-accent) 60%,white);outline-offset:2px}.btnPrimary{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 70%,black),var(--ui-accent));border-color:color-mix(in srgb,var(--ui-accent) 40%,var(--ui-border))}.btnPrimary:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 78%,black),color-mix(in srgb,var(--ui-accent) 92%,white))}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}