:root { color-scheme: light dark; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink:#202126; --muted:#656873; --surface:#fff; --canvas:#f4f5f8; --line:#e3e5ea; --blue:#0874e7; }
    [hidden] { display:none !important; }
    * { box-sizing:border-box; }
    body { margin:0; color:var(--ink); background:var(--canvas); }
    button, input { font:inherit; }
    button { cursor:pointer; }
    .shell { max-width:1220px; margin:auto; padding:clamp(16px,3vw,36px); }
    header { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:24px; }
    .eyebrow { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
    .studio-back { display:inline-flex; align-items:center; min-height:32px; color:var(--blue); text-decoration:none; }
    .studio-back:focus-visible { outline:3px solid #7bb9ff; outline-offset:2px; border-radius:6px; }
    h1 { margin:7px 0 5px; font-size:clamp(27px,3vw,39px); line-height:1.1; letter-spacing:-.04em; }
    header p { max-width:62ch; margin:0; color:var(--muted); }
    .pill { flex:none; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font-size:12px; }
    main { display:grid; grid-template-columns:minmax(300px,390px) minmax(0,1fr); gap:20px; align-items:start; }
    .panel { padding:20px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 12px 35px #2029360b; }
    .controls { display:grid; gap:21px; }
    .group { display:grid; gap:10px; }
    .group + .group { padding-top:20px; border-top:1px solid var(--line); }
    .group-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
    h2 { margin:0; font-size:16px; letter-spacing:-.02em; }
    .hint, .group p { margin:0; color:var(--muted); font-size:13px; }
    .choice { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--canvas); }
    .choice input { accent-color:var(--blue); width:18px; height:18px; margin:0; flex:none; }
    .choice span { font-size:13px; }
    .actions, .palette { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .button { min-height:40px; padding:8px 13px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); color:var(--ink); font-weight:600; transition:background .18s ease, transform .18s ease, border-color .18s ease; }
    .button:not(:disabled):hover { border-color:var(--blue); transform:translateY(-1px); }
    .button.primary { background:var(--blue); border-color:var(--blue); color:white; }
    .button.subtle { background:transparent; }
    .button.danger { background:transparent; color:#ba3037; }
    .button:disabled { opacity:.48; cursor:not-allowed; }
    .text-action { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:4px 7px; border:0; border-radius:9px; background:transparent; color:var(--blue); font-size:13px; font-weight:650; }
    .text-action:not(:disabled):hover { background:color-mix(in srgb,var(--blue) 10%,var(--surface)); }
    .text-action:disabled { color:var(--muted); cursor:default; }
    .text-action:focus-visible, .count-picker button:focus-visible { outline:3px solid #7bb9ff; outline-offset:2px; }
    .count-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:3px; color:var(--ink); font-size:13px; font-weight:600; }
    .count-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; padding:4px; border-radius:14px; background:var(--canvas); }
    .count-picker button { position:relative; min-width:0; min-height:40px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:14px; font-weight:650; }
    .count-picker button[aria-pressed=true] { border-color:var(--line); background:var(--surface); color:var(--ink); box-shadow:0 2px 8px #20293612; }
    .count-picker button.is-ready::after { content:""; position:absolute; bottom:5px; left:50%; width:4px; height:4px; border-radius:50%; background:var(--blue); transform:translateX(-50%); }
    .asset-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
    .asset-actions .button { background:color-mix(in srgb,var(--blue) 8%,var(--surface)); border-color:color-mix(in srgb,var(--blue) 20%,var(--line)); color:var(--blue); }
    .remove-action { color:#aa343a; }
    .button:focus-visible, .sticker:focus-visible, .tile:focus-visible, .tile-remove:focus-visible, .swatch:focus-visible, input:focus-visible { outline:3px solid #7bb9ff; outline-offset:2px; }
    .swatches { display:flex; flex-wrap:wrap; gap:7px; }
    .segmented { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:13px; background:var(--canvas); }
    .segmented button { min-height:34px; padding:0 8px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:13px; line-height:1.2; letter-spacing:-.01em; font-weight:600; }
    .segmented button[aria-pressed=true] { background:var(--surface); color:var(--ink); box-shadow:0 2px 8px #20293616; }
    .select-row { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink); font-size:13px; font-weight:600; }
    .rounded-select { display:block; position:relative; width:min(60%,230px); min-width:140px; }
    .rounded-select select { display:none !important; }
    .rounded-select-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:9px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px; font-weight:600; text-align:left; box-shadow:0 1px 3px #1827410b; }
    .rounded-select-button::after { content:""; flex:none; width:8px; height:8px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.65; }
    .rounded-select-button:hover { border-color:var(--blue); }
    .rounded-select-button:focus-visible { outline:3px solid #7bb9ff; outline-offset:2px; }
    .rounded-select-menu { position:fixed; z-index:100; display:grid; gap:5px; max-height:min(300px,calc(100dvh - 16px)); overflow:auto; padding:6px; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); box-shadow:0 18px 42px #18274128,0 3px 10px #18274110; }
    .rounded-select-option { display:block; width:100%; min-height:38px; padding:8px 12px; border:0; border-radius:12px; background:transparent; color:inherit; font:inherit; font-size:13px; text-align:left; }
    .rounded-select-option:hover,.rounded-select-option:focus-visible { background:color-mix(in srgb,var(--blue) 13%,var(--surface)); outline:none; }
    .rounded-select-option[aria-selected=true] { background:color-mix(in srgb,var(--blue) 19%,var(--surface)); color:var(--blue); font-weight:700; }
    .drop-zone { display:grid; justify-items:center; align-content:center; gap:3px; min-height:116px; padding:16px; border:1px dashed color-mix(in srgb,var(--muted) 35%,var(--line)); border-radius:16px; background:color-mix(in srgb,var(--canvas) 70%,var(--surface)); color:var(--muted); font-size:12px; text-align:center; }
    .drop-icon { display:grid; place-items:center; width:31px; height:31px; margin-bottom:2px; border-radius:9px; background:color-mix(in srgb,var(--blue) 9%,var(--surface)); color:var(--blue); }
    .drop-icon svg { width:18px; height:18px; }
    .drop-zone.is-dragging, .checker.is-dragging { outline:3px solid var(--blue); outline-offset:-4px; background-color:color-mix(in srgb,var(--blue) 10%,var(--surface)); }
    .preview-color-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .preview-color-pair label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink); font-size:12px; }
    .preview-file { display:inline-flex; align-items:center; width:max-content; }
    .swatch { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:5px 9px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:600; }
    .swatch.active { border-color:var(--blue); background:color-mix(in srgb,var(--blue) 8%,var(--surface)); box-shadow:inset 0 0 0 1px var(--blue); }
    .swatch-dot { width:21px; height:21px; flex:none; border:1px solid #888b94; border-radius:7px; box-shadow:inset 0 0 0 1px #ffffff20; }
    #frame-swatches [data-color="#ffffff"] .swatch-dot { background:#fff !important; }
    #frame-swatches [data-color="#f8dfeb"] .swatch-dot { background:#f8dfeb !important; }
    #frame-swatches [data-color="#dce9db"] .swatch-dot { background:#dce9db !important; }
    #frame-swatches [data-color="#1b2845"] .swatch-dot { background:#1b2845 !important; }
    .swatch-dot.transparent { background-color:#fff; background-image:linear-gradient(45deg,#d5d7dc 25%,transparent 25%),linear-gradient(-45deg,#d5d7dc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d7dc 75%),linear-gradient(-45deg,transparent 75%,#d5d7dc 75%); background-size:10px 10px; }
    .color-field { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:7px 11px; border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:13px; font-weight:600; }
    .color-field input { width:42px; height:30px; padding:2px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; }
    .color-field input.active { border-color:var(--blue); box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 20%,transparent); }
    .tile-holder { position:relative; width:58px; height:58px; }
    .tile { display:grid; place-items:center; width:58px; height:58px; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--canvas); }
    .tile img { width:100%; height:100%; object-fit:contain; }
    .tile-remove { position:absolute; top:-6px; right:-6px; display:grid; place-items:center; width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); font-size:18px; line-height:1; box-shadow:0 2px 8px #20293624; }
    .range-row { display:grid; grid-template-columns:62px minmax(0,1fr) 48px; align-items:center; gap:9px; font-size:13px; }
    input[type=range] { width:100%; accent-color:var(--blue); touch-action:none; }
    .preview { min-height:700px; display:grid; align-content:start; gap:14px; }
    .preview-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
    #preview-toggle { flex:none; min-height:34px; padding:5px 9px; border-color:transparent; color:var(--blue); font-size:12px; }
    #preview-toggle:hover { background:color-mix(in srgb,var(--blue) 9%,var(--surface)); }
    .checker { display:grid; place-items:center; min-height:610px; padding:84px; border-radius:19px; background-color:#fff; background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%); background-position:0 0,0 12px,12px -12px,-12px 0; background-size:24px 24px; overflow:hidden; }
    .frame { position:relative; isolation:isolate; display:grid; width:min(100%,310px); padding:15px 15px 34px; border:1px dashed #818793; border-radius:2px; background:transparent; box-shadow:0 22px 45px #2029362c; overflow:visible; }
    .frame[data-shape=wide] { width:min(100%,480px); }
    .frame[data-shape=wide] .slots { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .frame[data-shape=wide] .slot { aspect-ratio:1; }
    .frame[data-shape=wide] .slots[data-count="1"] { grid-template-columns:1fr; }
    .frame[data-shape=wide] .slots:is([data-count="3"],[data-count="5"]) .slot:last-child { grid-column:span 2; aspect-ratio:2/1; }
    .frame[data-watermark-position=top] { padding-top:34px; padding-bottom:15px; }
    .frame-background { position:absolute; z-index:0; inset:0; background-position:center; background-size:cover; pointer-events:none; }
    .slots { position:relative; z-index:1; display:grid; gap:5px; }
    .slot { display:grid; place-items:center; aspect-ratio:16/9; background:#dce4f0; overflow:hidden; color:#566273; font-size:12px; }
    .slot:nth-child(2n) { background:#f2dce7; }
    .slot img { display:block; width:100%; height:100%; object-fit:cover; }
    .caption { position:absolute; z-index:9; bottom:0; left:0; right:0; display:grid; place-items:center; height:34px; padding:0 10px; background:transparent; text-align:center; font:600 9px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:.03em; color:var(--caption-color,#202126); pointer-events:none; }
    .frame[data-watermark-position=top] .caption { top:0; bottom:auto; }
    .frame[data-watermark-align=left] .caption { justify-items:start; }
    .frame[data-watermark-align=right] .caption { justify-items:end; }
    .frame[data-watermark-style=serif] .caption { font-family:Georgia,serif; font-style:italic; }
    .frame[data-watermark-style=pill] .caption { background:transparent; border-radius:0; width:max-content; height:20px; left:50%; right:auto; bottom:7px; transform:translateX(-50%); }
    .frame[data-watermark-style=pill][data-watermark-position=top] .caption { top:7px; bottom:auto; }
    .frame[data-watermark-style=pill][data-watermark-align=left] .caption { left:8px; transform:none; }
    .frame[data-watermark-style=pill][data-watermark-align=right] .caption { left:auto; right:8px; transform:none; }
    .frame[data-watermark-position=top] .caption { left:50%; right:auto; width:max-content; max-width:calc(100% - 16px); height:18px; padding:0; transform:translateX(-50%); background:transparent; }
    .frame[data-watermark-position=top][data-watermark-align=left] .caption { left:8px; right:auto; transform:none; }
    .frame[data-watermark-position=top][data-watermark-align=right] .caption { left:auto; right:8px; transform:none; }
    .frame[data-watermark-position=top][data-watermark-style=pill] .caption { height:18px; padding:0; border-radius:0; background:transparent; }
    .sticker { position:absolute; z-index:3; display:grid; place-items:center; width:var(--size); height:var(--size); left:var(--x); top:var(--y); border:1px solid transparent; border-radius:8px; transform:translate(-50%,-50%); touch-action:none; cursor:grab; user-select:none; }
    .sticker img { display:block; width:100%; height:100%; object-fit:contain; transform:rotate(var(--rotation)) scaleX(var(--mirror,1)); pointer-events:none; filter:drop-shadow(0 3px 3px #21192355); }
    .sticker.selected { outline:1.5px solid var(--blue); outline-offset:3px; background:color-mix(in srgb,var(--blue) 5%,transparent); }
    .sticker-tools { position:absolute; z-index:10; top:calc(100% + 7px); display:none; gap:4px; padding:5px; border:1px solid color-mix(in srgb,var(--line) 82%,transparent); border-radius:16px; background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 10px 28px #20293626,0 2px 7px #20293616; white-space:nowrap; touch-action:manipulation; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
    .sticker.selected .sticker-tools { display:flex; }
    .sticker-tool { display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:11px; background:transparent; color:var(--ink); cursor:pointer; touch-action:manipulation; }
    .sticker-tool svg { display:block; width:17px; height:17px; }
    .sticker-tool.remove { margin-left:2px; color:#ba3037; }
    .sticker-tool:hover { background:color-mix(in srgb,var(--blue) 15%,var(--canvas)); }
    .sticker-resize { position:absolute; z-index:11; right:-13px; bottom:-13px; display:none; place-items:center; width:26px; height:26px; border:2px solid var(--surface); border-radius:50%; background:var(--blue); color:#fff; box-shadow:0 2px 8px #20293635; cursor:nwse-resize; touch-action:none; }
    .sticker.selected .sticker-resize { display:grid; }
    .sticker-resize svg { width:14px; height:14px; }
    .sticker-tool:focus-visible,.sticker-resize:focus-visible { outline:3px solid #7bb9ff; outline-offset:2px; }
    .sticker:active { cursor:grabbing; }
    .preview-only .sticker.selected { outline:0; background:transparent; }
    .preview-only .sticker-tools { display:none !important; }
    .preview-only .sticker-resize { display:none !important; }
    .preview-only .frame { border-color:transparent; }
    .notice { min-height:20px; color:var(--muted); font-size:12px; }
    .warn { color:#9d5b00; }
    .community { margin-top:20px; display:grid; gap:12px; }
    .community .panel { display:grid; gap:12px; }
    .community-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .community-form label { display:grid; grid-template-columns:1fr auto; gap:5px; color:var(--ink); font-size:12px; font-weight:600; }
    .community-form .required { color:var(--muted); font-weight:400; }
    .community-form input { width:100%; min-width:0; min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); color:var(--ink); }
    .community-form input { grid-column:1 / -1; }
    .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
    .gallery-card { min-width:0; padding:13px; border:1px solid var(--line); border-radius:18px; background:var(--canvas); }
    .gallery-art { position:relative; width:92px; height:138px; margin:0 auto 10px; padding:5px 5px 17px; border:1px solid var(--line); background-position:center; background-size:cover; }
    .gallery-art[data-watermark-position=top] { padding-top:17px; padding-bottom:5px; }
    .gallery-art::after { content:'sendtheletter'; position:absolute; bottom:0; left:0; right:0; height:13px; display:grid; place-items:center; background:#ffffffd9; color:#202126; font-size:6px; font-weight:600; }
    .gallery-art[data-watermark-position=top]::after { top:2px; bottom:auto; left:50%; right:auto; width:max-content; max-width:calc(100% - 8px); height:auto; padding:0; transform:translateX(-50%); background:transparent; }
    .gallery-art i { display:block; height:33%; border:1px solid #fff; background:#dce4f0; }
    .gallery-art.wide { width:138px; height:92px; display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
    .gallery-art.wide i { height:100%; }
    .gallery-art img { position:absolute; max-width:45px; max-height:45px; object-fit:contain; transform:translate(-50%,-50%) rotate(var(--rotation)) scaleX(var(--mirror,1)); left:var(--x); top:var(--y); }
    .gallery-card strong,.gallery-card small { display:block; overflow-wrap:anywhere; }
    .gallery-card small { color:var(--muted); margin:3px 0 10px; }
    .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
    @media (max-width:800px) { main { grid-template-columns:1fr; } .preview { grid-row:1; min-height:0; } .checker { min-height:0; } }
    @media (max-width:470px) { .shell { padding:12px; } .panel { padding:16px; border-radius:19px; } .checker { padding:64px; } header { display:block; } .pill { display:inline-block; margin-top:12px; } .community-form { grid-template-columns:1fr; } .rounded-select { min-width:135px; } .preview-head { align-items:flex-start; } #preview-toggle { max-width:110px; white-space:normal; line-height:1.2; } }
    @media (prefers-color-scheme:dark) { :root { --ink:#f3f4f7; --muted:#adb2be; --surface:#1b1e25; --canvas:#11141a; --line:#373d48; } .checker { background-color:#d9dce2; } .slot { color:#3a4250; } .button.danger { color:#ff9ba0; } }