:root{--ink:#1c1c1c;--mist:#d6e2ff;--paper:#f4f4f4;--mute:#9ca3af;--earth:#584c47;--void:#000;--snow:#fff;--stage:#ffffff0a;--focus:#d6e2ff59;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--paper);background-color:var(--ink);font-family:Outfit,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100dvh}button,input{font:inherit}a{color:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app{flex-direction:column;min-height:100dvh;padding:clamp(1.5rem,4vw,3.5rem);display:flex;position:relative;overflow-x:hidden}.topbar{z-index:2;justify-content:flex-end;width:min(1120px,100%);margin:0 auto 1rem;display:flex;position:relative}.lang{border:1px solid #f4f4f429;display:inline-flex}.lang__btn{appearance:none;color:var(--mute);letter-spacing:.06em;cursor:pointer;background:0 0;border:0;padding:.45rem .75rem;font-size:.8rem;font-weight:600;transition:color .16s,background .16s}.lang__btn[aria-pressed=true]{color:var(--paper);background:#d6e2ff1f}.lang__btn:hover{color:var(--paper)}.preview-col{flex-direction:column;align-items:center;gap:1rem;display:flex}.download{flex-direction:column;gap:.65rem;width:min(100%,420px);display:flex}.mist{pointer-events:none;background:radial-gradient(circle,#d6e2ff29 0%,#d6e2ff0a 42%,#0000 70%);border-radius:50%;width:min(70vw,640px);height:min(70vw,640px);animation:28s ease-in-out infinite alternate mist-drift;position:absolute;inset:-20% -10% auto auto}.mist--secondary{background:radial-gradient(circle,#584c4747 0%,#584c470f 45%,#0000 72%);width:min(55vw,480px);height:min(55vw,480px);animation-duration:36s;animation-direction:alternate-reverse;inset:auto auto -25% -15%}@keyframes mist-drift{0%{transform:translate(0,0)scale(1)}to{transform:translate(-4%,6%)scale(1.08)}}.shell{z-index:1;flex-direction:column;flex:1;justify-content:center;gap:clamp(2rem,5vw,3.25rem);width:min(1120px,100%);margin:0 auto;display:flex;position:relative}.brand{flex-direction:column;gap:.85rem;max-width:36rem;display:flex}.brand__mark{letter-spacing:.22em;text-transform:uppercase;color:var(--mist);margin:0;font-family:Syne,sans-serif;font-size:clamp(.78rem,1.4vw,.9rem);font-weight:700}.brand__title{letter-spacing:-.03em;color:var(--paper);margin:0;font-family:Syne,sans-serif;font-size:clamp(2.35rem,6vw,4.25rem);font-weight:800;line-height:.98}.brand__support{max-width:28rem;color:var(--mute);margin:0;font-size:clamp(1rem,2vw,1.125rem);line-height:1.55}.workspace{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(1.5rem,4vw,3rem);display:grid}.controls{flex-direction:column;gap:1.25rem;padding:1.35rem 0;display:flex}.field{flex-direction:column;gap:.55rem;display:flex}.field__label{letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-size:.8rem;font-weight:500}.field__input{width:100%;color:var(--paper);background:#ffffff08;border:1px solid #f4f4f424;border-radius:0;outline:none;padding:.95rem 1rem;transition:border-color .16s,box-shadow .16s,background .16s}.field__input::placeholder{color:#9ca3afb3}.field__input:focus{border-color:var(--earth);box-shadow:0 0 0 3px var(--focus);background:#ffffff0d}.field__error{color:#e8b4a8;min-height:1.25rem;margin:0;font-size:.875rem}.swatches{flex-wrap:wrap;gap:.65rem;display:flex}.swatch{color:var(--paper);cursor:pointer;background:0 0;border:1px solid #f4f4f424;align-items:center;gap:.55rem;padding:.55rem .85rem;transition:border-color .16s,background .16s;display:inline-flex}.swatch:hover{border-color:#f4f4f459}.swatch[aria-pressed=true]{border-color:var(--earth);background:#584c4747}.swatch__dot{border:1px solid #f4f4f459;width:.85rem;height:.85rem}.swatch__dot--black{background:var(--void)}.swatch__dot--white{background:var(--snow)}.actions{flex-wrap:wrap;gap:.75rem;display:flex}.btn{appearance:none;background:var(--paper);color:var(--ink);letter-spacing:.02em;cursor:pointer;border:1px solid #f4f4f447;padding:.85rem 1.25rem;font-weight:600;transition:transform .16s,background .16s,border-color .16s,opacity .16s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--ghost{color:var(--paper);background:0 0}.btn--ghost:hover:not(:disabled){background:#ffffff0a;border-color:#f4f4f48c}.btn.is-saved{animation:.42s btn-pulse}@keyframes btn-pulse{0%{transform:scale(1)}40%{transform:scale(1.03)}to{transform:scale(1)}}.tip{color:var(--mute);margin:.25rem 0 0;font-size:.9rem}.stage{aspect-ratio:1;background-color:var(--stage);background-image:linear-gradient(45deg,#ffffff0f 25%,#0000 25%),linear-gradient(-45deg,#ffffff0f 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ffffff0f 75%),linear-gradient(-45deg,#0000 75%,#ffffff0f 75%);background-position:0 0,0 11px,11px -11px,-11px 0;background-size:22px 22px;place-items:center;width:min(100%,420px);margin-inline:auto;display:grid;position:relative;box-shadow:0 0 0 1px #d6e2ff14,0 0 80px #d6e2ff14}.stage__qr{opacity:0;width:min(78%,300px);height:auto;transition:opacity .28s,transform .28s;transform:scale(.96)}.stage__qr.is-ready{opacity:1;transform:scale(1)}.stage__empty{text-align:center;color:var(--mute);pointer-events:none;place-items:center;padding:2rem;font-size:.95rem;line-height:1.45;transition:opacity .22s;display:grid;position:absolute;inset:0}.stage__empty.is-hidden{opacity:0;visibility:hidden}.footer{z-index:1;width:min(1120px,100%);color:var(--mute);border-top:1px solid #f4f4f414;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin:1.5rem auto 0;padding-top:1rem;font-size:.85rem;display:flex;position:relative}.footer a{border-bottom:1px solid #0000;text-decoration:none;transition:border-color .16s,color .16s}.footer a:hover{color:var(--paper);border-bottom-color:#f4f4f473}@media (width<=860px){.workspace{grid-template-columns:1fr}.preview-col{order:-1}.stage,.download{width:min(100%,340px)}.controls{padding-top:0}}
