:root{--mork-100: #051c17;--mork-300: #19302b;--mork-400: #233a35;--mork-500: #2d443f;--mork-700: #0f2621;--nordlys-100: #c8ff54;--nordlys-200: #e6ff72;--lofoten-100: #fcbaf3;--lofoten-200: #ffd8ff;--neutral-100: #ffffff;--neutral-200: #cee1de;--neutral-300: #a6b9b6;--neutral-400: #7e918e;--bg: var(--mork-100);--bg-raised: var(--mork-700);--bg-elevated: var(--mork-300);--border: var(--mork-500);--border-soft: var(--mork-400);--fg-1: var(--neutral-100);--fg-2: var(--neutral-200);--fg-3: var(--neutral-300);--fg-4: var(--neutral-400);--accent: var(--nordlys-100);--accent-hover: var(--nordlys-200);--accent-warm: var(--lofoten-100);--accent-warm-hover: var(--lofoten-200);--gradient-pink: linear-gradient(180deg, var(--lofoten-100) 0%, var(--mork-100) 100%);--gradient-pink-soft: linear-gradient(180deg, var(--lofoten-100) 0%, var(--lofoten-200) 100%);--gradient-lime: linear-gradient(180deg, var(--nordlys-100) 0%, var(--mork-100) 100%);--glow-pink: 12px 10px 33px 0 rgba(252, 186, 243, .21), 47px 38px 60px 0 rgba(252, 186, 243, .18), 105px 86px 81px 0 rgba(252, 186, 243, .11), 187px 153px 97px 0 rgba(252, 186, 243, .03), 292px 239px 106px 0 rgba(252, 186, 243, 0);--font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--radius-button: 8px;--radius-button-sm: 6px;--radius-card: 16px;--radius-tile: 20px;--ease: cubic-bezier(.2, .6, .2, 1);--dur-fast: .18s;--dur: .22s}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100vh;background:var(--bg);color:var(--fg-2);font-family:var(--font-sans);font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}#root{display:flex;flex-direction:column;flex:1;min-height:inherit}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}.wrap{width:100%;max-width:480px;display:flex;flex-direction:column;gap:32px}.header{text-align:left}.brand{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4);margin-bottom:20px}.brand-mark{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 12px #c8ff5499}h1{font-size:40px;line-height:1;letter-spacing:-.02em;font-weight:500;color:var(--fg-1);margin:0 0 12px}h1 .accent{color:var(--accent)}.tagline{margin:0;font-size:16px;line-height:1.4;color:var(--fg-3);max-width:38ch}.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;gap:20px}.field{display:flex;flex-direction:column;gap:8px}label{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-4)}.input-row{display:flex;align-items:stretch;background:var(--mork-100);border:1px solid var(--border);border-radius:var(--radius-button);transition:border-color var(--dur) var(--ease);overflow:hidden}.input-row:focus-within{border-color:var(--neutral-400)}.input-row.err{border-color:var(--accent-warm)}.at{display:flex;align-items:center;justify-content:center;width:44px;color:var(--fg-4);font-size:20px;border-right:1px solid var(--border);-webkit-user-select:none;user-select:none}input[type=text]{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:14px 16px;color:var(--fg-1);font-family:var(--font-sans);font-size:18px;font-weight:500}input[type=text]::placeholder{color:var(--fg-4)}.err-msg{font-size:13px;color:var(--lofoten-100);min-height:1.2em;transition:opacity var(--dur) var(--ease)}.err-msg:empty{opacity:0}.colors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.swatch-field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--mork-100);border:1px solid var(--border);border-radius:var(--radius-button)}.swatch-field span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-4)}.swatch{position:relative;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);overflow:hidden;cursor:pointer;flex-shrink:0}.swatch input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0}.actions{display:flex;flex-direction:column;gap:10px}.btn-primary{position:relative;border:0;padding:2px;border-radius:var(--radius-button);background:var(--gradient-pink);font-family:var(--font-sans);font-weight:700;font-size:17px;color:var(--mork-100);cursor:pointer;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}.btn-primary__inner{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:var(--radius-button-sm);background:var(--gradient-pink-soft)}.btn-primary:hover{transform:translateY(-1px)}.btn-primary:active{transform:scale(.985)}.btn-primary[disabled]{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-button);color:var(--fg-2);font-family:var(--font-sans);font-weight:500;font-size:15px;cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-secondary[disabled]{opacity:.4;cursor:not-allowed}.btn-secondary[disabled]:hover{border-color:var(--border);color:var(--fg-2)}.preview{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-card);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}.preview.empty{color:var(--fg-4);font-size:14px;text-align:center;padding:56px 24px;border-style:dashed}.qr-frame{width:100%;max-width:280px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:16px;transition:background var(--dur) var(--ease)}.qr-frame canvas{width:100%!important;height:100%!important;image-rendering:pixelated;image-rendering:crisp-edges;display:block}.qr-handle{font-size:14px;color:var(--fg-3);text-align:center;word-break:break-all}.qr-handle a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--border)}.qr-handle a:hover{color:var(--accent);border-color:var(--accent)}footer{padding:24px;text-align:center}footer a{font-size:12px;color:var(--fg-4);text-decoration:none;letter-spacing:.02em;transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease);opacity:.85;display:inline-flex;align-items:center;gap:6px}footer a:hover{color:var(--fg-2);opacity:1}footer a .k-logo{height:14px;width:auto;display:block;transform:translateY(.5px)}@media(max-width:420px){h1{font-size:32px}.card,.preview{padding:20px}}@keyframes pop-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}.preview:not(.empty){animation:pop-in .28s var(--ease)}
