:root{--page: #f0f0f4;--ink: #1d1d1f;--muted: #6e6e73;--faint: #8e8e93;--card: rgba(255, 255, 255, .72);--glass-ctl: rgba(120, 120, 128, .12);--glass-ctl-strong: rgba(120, 120, 128, .18);--glass-knob: rgba(255, 255, 255, .85);--hover: rgba(120, 120, 128, .08);--line: rgba(0, 0, 0, .06);--hairline: rgba(255, 255, 255, .6);--edge: .5px solid rgba(0, 0, 0, .1);--focus: #007aff;--press: cubic-bezier(.32, .72, 0, 1);--blur: saturate(180%) blur(30px);--accent: #0a0a0a;--radius-card: 22px;--radius-ctl: 14px;--radius-pill: 999px;--shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 18px 40px -22px rgba(0, 0, 0, .28);color-scheme:light}*{box-sizing:border-box}:focus{outline:none}:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:2px}button{-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Inter,Segoe UI,system-ui,sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(60vw 50vh at 12% 8%,rgba(120,160,255,.16),transparent 70%),radial-gradient(52vw 46vh at 88% 22%,rgba(255,170,190,.14),transparent 70%),radial-gradient(58vw 52vh at 70% 92%,rgba(150,220,210,.14),transparent 70%)}.app{min-height:100vh;display:flex;flex-direction:column;padding:0 clamp(16px,3vw,32px) 48px}.topbar,.layout,.footer{width:100%;max-width:1200px;margin-inline:auto}.topbar{display:flex;align-items:center;padding:clamp(20px,4vh,34px) 4px clamp(18px,3vh,26px)}.brand{font-size:16px;font-weight:600;letter-spacing:-.01em}.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-content:center;align-items:center}.panel{background:var(--card);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:.5px solid var(--hairline);border-radius:var(--radius-card);box-shadow:0 0 0 .5px #0000000d,var(--shadow),inset 0 1px #ffffffb3;overflow:hidden}.panel-body{display:flex;flex-direction:column;gap:18px;padding:clamp(20px,2.4vw,30px)}.panel-title{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px}.section-tools{display:inline-flex;align-items:center;gap:12px}.reset{display:grid;place-items:center;width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background .18s ease,color .18s ease,opacity .18s ease}.reset:not(:disabled):hover{background:var(--glass-ctl);color:var(--ink)}.reset:disabled{opacity:.3;cursor:default}.contrast{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;padding:6px 13px 6px 9px;border-radius:999px;color:color-mix(in srgb,var(--dot, #34c759) 58%,#16161a);background:color-mix(in srgb,var(--dot, #34c759) 15%,rgba(255,255,255,.45));border:.5px solid color-mix(in srgb,var(--dot, #34c759) 30%,transparent);box-shadow:inset 0 .5px #ffffff8c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:help;transition:background .3s ease,color .3s ease,border-color .3s ease}.contrast svg{width:15px;height:15px}.contrast-hint{margin:-4px 0 0;font-size:13px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}.contrast-hint.medium{color:#a35c00}.contrast-hint.poor{color:#c81e10}.tabs{display:flex;flex-wrap:wrap;gap:2px;margin:-4px 0 2px -6px}.tab{font:inherit;font-size:17px;font-weight:400;letter-spacing:-.01em;color:var(--ink);padding:9px 17px;border:.5px solid transparent;border-radius:999px;background:transparent;cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s var(--press)}.tab:active{transform:scale(.96)}.tab:hover{background:var(--hover)}.tab.active{background:var(--glass-knob);border-color:#ffffffd9;font-weight:500;box-shadow:0 1px 3px #0000001f,0 0 0 .5px #0000000d;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.fields-wrap{overflow:hidden;transition:height .46s cubic-bezier(.32,.9,.28,1)}.fields{display:flex;flex-direction:column;gap:10px}.fields>*{animation:fieldIn .44s cubic-bezier(.22,1,.32,1) backwards}.fields>*:nth-child(2){animation-delay:.06s}.fields>*:nth-child(3){animation-delay:.12s}.fields>*:nth-child(n+4){animation-delay:.18s}.field-row{display:flex;flex-direction:column;gap:5px}.field.invalid{background:#ff3b301a;border-color:#ff3b3073}.field-meta{display:flex;align-items:baseline;gap:12px;padding:0 6px;min-height:15px}.field-error{flex:1;font-size:12.5px;line-height:1.35;color:#c81e10}.field-error.standalone{margin:0;padding:0 6px}.field-count{margin-left:auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}.field-count.full{color:#c81e10;font-weight:600}@keyframes fieldIn{0%{opacity:0;transform:translateY(-8px) scale(.985);filter:blur(3px)}}.field{display:flex;flex-direction:column;gap:4px;background:var(--glass-ctl);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:.5px solid rgba(255,255,255,.5);border-radius:var(--radius-ctl);padding:11px 16px 12px;box-shadow:inset 0 1px 1px #ffffff80;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.field:focus-within{background:var(--glass-ctl-strong);border-color:#fffc;box-shadow:inset 0 1px 1px #fff9,0 0 0 4px #0a0a0a0f}.field-label{font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}.field input,.field textarea,.field select{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:none;outline:none;width:100%;padding:0;resize:none}.field textarea{line-height:1.4}.field select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.field input::placeholder,.field textarea::placeholder{color:#b0b0b6}.colors{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:12px;align-items:center}.hex input{font-variant-numeric:tabular-nums;letter-spacing:.01em}.chip{position:relative;width:54px;height:54px;border-radius:50%;border:.5px solid rgba(255,255,255,.75);box-shadow:0 1px 3px #0000001f,inset 0 0 0 .5px #0000001a;cursor:pointer;overflow:hidden;transition:transform .15s ease}.chip:hover{transform:scale(1.03)}.chip:active{transform:scale(.97)}.chip input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;border:none;cursor:pointer}.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(20px,2.4vw,30px);border-top:.5px solid rgba(0,0,0,.09)}.save{position:relative;display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:16px;font-weight:500;color:var(--ink);padding:12px 22px;border-radius:var(--radius-pill);background:var(--glass-ctl);border:.5px solid rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 .5px #0000000f,inset 0 1px 1px #ffffff80;cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s var(--press)}.save:not(:disabled):hover{background:var(--glass-ctl-strong)}.save:not(:disabled):active{transform:scale(.97)}.save:disabled{cursor:not-allowed;color:var(--faint);opacity:.6}.save-slot{position:relative}.primary{font:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;color:#fff;padding:13px 28px;border:none;border-radius:var(--radius-pill);background:linear-gradient(180deg,#33333a 0%,var(--accent) 100%);box-shadow:0 1px 2px #00000047,0 6px 16px -8px #0006,inset 0 .5px #ffffff38;cursor:pointer;transition:filter .18s ease,transform .12s var(--press),opacity .2s ease}.primary:not(:disabled):hover{filter:brightness(1.12)}.primary:not(:disabled):active{transform:scale(.97);filter:brightness(.92)}.primary:disabled{opacity:.35;cursor:not-allowed}.preview{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vh,30px);padding-top:clamp(8px,3vh,26px)}.qr-stage{width:100%;min-height:clamp(280px,34vw,400px);display:grid;place-items:center}.placeholder{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}.ph-brackets{animation:phPulse 3.4s ease-in-out infinite;transform-origin:center}@keyframes phPulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}.placeholder-art{width:clamp(190px,22vw,250px);height:auto;display:block}.placeholder p{margin:0;max-width:300px;font-size:16px;line-height:1.45;color:var(--ink)}.qr-svg{width:clamp(230px,28vw,330px);aspect-ratio:1;display:grid;place-items:center}.qr-svg svg{width:100%;height:100%;display:block}.style-bar{display:inline-flex;gap:6px;padding:7px;background:#ffffffe6;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:.5px solid var(--hairline);border-radius:var(--radius-pill);box-shadow:0 0 0 .5px #0000000d,var(--shadow),inset 0 1px #ffffffb3}.style-slot{position:relative}.style-trigger{width:48px;height:48px;display:grid;place-items:center;border:none;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s var(--press)}.style-trigger:hover{background:var(--hover)}.style-trigger:active{transform:scale(.94)}.style-trigger.open{background:linear-gradient(180deg,#33333a 0%,var(--accent) 100%);color:#fff;box-shadow:0 1px 2px #00000040,inset 0 .5px #ffffff38}.popover{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%);min-width:250px;display:flex;flex-direction:column;gap:2px;padding:9px;background:#fff;border:.5px solid rgba(0,0,0,.08);border-radius:26px;box-shadow:0 0 0 .5px #0000000f,0 20px 52px -16px #00000057,inset 0 1px #ffffffb3;z-index:30;animation:popIn .34s cubic-bezier(.22,1.4,.36,1);transform-origin:bottom center}.popover.up-left{left:0;transform:none;min-width:200px;transform-origin:bottom left}@keyframes popIn{0%{opacity:0;transform:translate(var(--pop-x, 0)) translateY(10px) scale(.9)}}.popover-item{animation:itemIn .3s cubic-bezier(.22,1,.32,1) backwards}.popover-item:nth-child(2){animation-delay:.03s}.popover-item:nth-child(3){animation-delay:.06s}.popover-item:nth-child(4){animation-delay:.09s}.popover-item:nth-child(5){animation-delay:.12s}.popover-item:nth-child(6){animation-delay:.15s}@keyframes itemIn{0%{opacity:0;transform:translateY(6px)}}.popover:not(.up-left){--pop-x: -50%}.popover-item{display:flex;align-items:center;gap:14px;width:100%;font:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink);text-align:left;padding:11px 18px;border:none;border-radius:var(--radius-pill);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease,transform .12s var(--press)}.popover-item:active{transform:scale(.98)}.popover-item small{margin-left:auto;font-size:12px;font-weight:400;color:var(--faint)}.popover-item:hover{background:var(--hover)}.popover-item.active{background:linear-gradient(180deg,#33333a 0%,var(--accent) 100%);color:#fff;box-shadow:inset 0 .5px #fff3}.popover-icon{display:grid;place-items:center;width:22px;height:22px;flex:none}.footer{margin-top:clamp(28px,5vh,44px);text-align:center;font-size:13px;color:#b8b8bd;letter-spacing:-.01em}.footer a{color:var(--ink);font-weight:500;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s ease}.footer a:hover{background-size:100% 1.5px}@media (max-width: 900px){.layout{grid-template-columns:minmax(0,1fr);align-content:start}.preview{order:-1;justify-content:center;min-height:min(72vh,560px);padding:0 0 clamp(16px,4vh,32px)}.qr-stage{min-height:0}.ph-brackets{animation:phPulse 3.4s ease-in-out infinite;transform-origin:center}@keyframes phPulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.015)}}.placeholder-art{width:min(58vw,240px)}.qr-svg{width:min(66vw,300px)}}@media (max-width: 640px){.app{padding-bottom:32px}.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.tabs::-webkit-scrollbar{display:none}.tab{flex:none;font-size:15px;padding:8px 14px}.field input,.field textarea,.field select{font-size:16px}.colors{grid-template-columns:minmax(0,1fr) auto}.panel-foot{flex-direction:column-reverse;align-items:stretch}.panel-foot .save,.panel-foot .primary{width:100%;justify-content:center;text-align:center}.popover{min-width:220px}.popover.up-left{left:50%;transform:translate(-50%);--pop-x: -50%}}.toasts{position:fixed;top:max(40px,calc(env(safe-area-inset-top) + 28px));right:16px;z-index:40;width:min(340px,calc(100% - 32px));height:0;pointer-events:none}.toast{position:absolute;top:0;right:0;width:100%;transform-origin:top center;display:flex;align-items:flex-start;gap:12px;padding:13px 16px 13px 14px;border-radius:var(--radius-ctl);background:#fffc;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:.5px solid var(--hairline);box-shadow:0 0 0 .5px #0000000d,0 14px 34px -12px #00000047,inset 0 1px #ffffffb3;animation:toastIn .4s cubic-bezier(.32,1.4,.5,1);transition:transform .35s cubic-bezier(.32,.72,0,1),opacity .35s ease}@keyframes toastIn{0%{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}.toast-icon{flex:none;display:grid;place-items:center;margin-top:1px}.toast-body{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:1px}.toast-msg{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--ink)}.toast-timer{font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}@media (max-width: 640px){.toasts{right:12px;left:12px;width:auto}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}