:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:oklch(22% .025 248);--muted:oklch(46% .03 248);--paper:oklch(97% .012 92);--surface:oklch(93% .018 92);--line:oklch(78% .028 92);--accent:oklch(54% .16 151);--accent-deep:oklch(34% .12 151);--danger:oklch(48% .18 29);--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:linear-gradient(90deg, color-mix(in oklch, var(--line), transparent 76%) 1px, transparent 1px), linear-gradient(color-mix(in oklch, var(--line), transparent 76%) 1px, transparent 1px), var(--paper);background-size:28px 28px;margin:0;font-family:Avenir Next,Avenir,Verdana,sans-serif}button,input,select,textarea{font:inherit}.shell{grid-template-columns:minmax(0,1fr) minmax(320px,440px);align-items:center;gap:clamp(24px,4vw,56px);width:min(1180px,100% - 32px);min-height:100vh;margin:0 auto;padding:40px 0;display:grid}.workspace{gap:var(--space-2xl);display:grid}.intro{gap:var(--space-md);max-width:680px;display:grid}.eyebrow{color:var(--accent-deep);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.78rem;font-weight:700}h1{letter-spacing:0;margin:0;font-family:Optima,Candara,Segoe UI,sans-serif;font-size:clamp(2.5rem,8vw,5.8rem);line-height:.92}.lede{max-width:58ch;color:var(--muted);margin:0;font-size:1rem;line-height:1.8}.controls{gap:var(--space-xl);display:grid}.field{gap:var(--space-sm);display:grid}.field span{color:var(--muted);font-size:.84rem;font-weight:700}textarea,input,select{border:1px solid var(--line);width:100%;color:var(--ink);background:color-mix(in oklch, var(--paper), white 34%);border-radius:8px;outline:none;transition:border-color .16s,box-shadow .16s,background .16s}textarea{resize:vertical;min-height:168px;padding:16px;line-height:1.55}input,select{min-height:46px;padding:0 12px}textarea:focus,input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklch, var(--accent), transparent 78%);background:color-mix(in oklch, var(--paper), white 54%)}.control-grid{gap:var(--space-lg);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.overlay-field{grid-column:1/-1}.overlay-field span{justify-content:space-between;gap:var(--space-md);display:flex}output{color:var(--accent-deep)}input[type=range]{accent-color:var(--accent-deep);padding:0}.actions{gap:var(--space-md);flex-wrap:wrap;display:flex}button{border:1px solid var(--accent-deep);min-height:46px;color:color-mix(in oklch, var(--paper), white 24%);background:var(--accent-deep);cursor:pointer;border-radius:8px;padding:0 20px;font-weight:800;transition:transform .14s,background .14s}button:hover{background:color-mix(in oklch, var(--accent-deep), var(--accent) 24%);transform:translateY(-1px)}.secondary{color:var(--accent-deep);background:0 0}.secondary:hover{background:color-mix(in oklch, var(--accent), transparent 88%)}.preview{gap:var(--space-xl);align-content:center;display:grid}.qr-stage{aspect-ratio:1;border:1px solid var(--line);background:color-mix(in oklch, var(--surface), white 32%);box-shadow:0 18px 54px color-mix(in oklch, var(--ink), transparent 88%);border-radius:8px;place-items:center;padding:clamp(16px,4vw,28px);display:grid}.qr-stack{width:min(100%, var(--canvas-size,384px));aspect-ratio:1;cursor:crosshair;place-items:center;display:grid;position:relative}canvas{width:min(100%, var(--canvas-size,384px));height:auto;image-rendering:pixelated}#character-overlay{pointer-events:none;position:absolute;inset:0}#baseline-overlay{left:var(--overlay-offset,0);top:var(--overlay-offset,0);width:var(--overlay-size,100%);height:var(--overlay-size,100%);object-fit:fill;pointer-events:none;position:absolute}.meta{gap:var(--space-md);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.meta div{gap:var(--space-xs);border:1px solid var(--line);background:color-mix(in oklch, var(--paper), white 18%);border-radius:8px;min-width:0;padding:12px;display:grid}dt{color:var(--muted);font-size:.72rem;font-weight:700}dd{overflow-wrap:anywhere;margin:0;font-size:.92rem;font-weight:800}.is-error{color:var(--danger)}@media (width<=880px){.shell{grid-template-columns:1fr;align-items:start}.preview{order:-1}}@media (width<=620px){.shell{width:min(100% - 24px,1180px);padding:24px 0}.control-grid,.meta{grid-template-columns:1fr 1fr}.field-text,.actions,.meta div:last-child{grid-column:1/-1}}