:root{--bg:#fbf9ff;--text:#1f1b3a;--muted:#5b5677;--line:#1f1b3a1a;--glass:#fff9;--pink:#ff5fa2;--violet:#7c5cff;--violet-ink:#5b3df0;--radius:22px;--shadow:0 1px 2px #1f1b3a0a, 0 18px 40px -18px #4c34a047;--font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg)}body{min-height:100vh;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6;overflow-x:hidden}a{color:inherit}button,input,select{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--violet);outline-offset:3px}.mesh{z-index:-1;pointer-events:none;background:radial-gradient(42vmax 42vmax at 6% 2%, #ffd6e8 0%, #ffd6e800 70%), radial-gradient(46vmax 46vmax at 100% 30%, #d8ccff 0%, #d8ccff00 70%), radial-gradient(40vmax 40vmax at 22% 100%, #c8f3ff 0%, #c8f3ff00 70%), var(--bg);position:fixed;inset:0}.page{max-width:880px;margin:0 auto;padding:72px 32px 40px}.hero{margin-bottom:36px}.chip{background:var(--glass);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);color:var(--muted);border:1px solid #fffc;border-radius:999px;align-items:center;gap:8px;padding:6px 14px 6px 10px;font-size:13px;font-weight:600;display:inline-flex}.chip:before{content:"";background:linear-gradient(135deg, var(--pink), var(--violet));border-radius:50%;width:10px;height:10px}.hero h1{letter-spacing:-.04em;margin-top:18px;font-size:clamp(44px,9vw,80px);font-weight:800;line-height:1}.lede{max-width:30em;color:var(--muted);margin-top:16px;font-size:clamp(16px,2.2vw,19px)}.card{border-radius:var(--radius);background:var(--glass);-webkit-backdrop-filter:blur(20px)saturate(140%);box-shadow:var(--shadow);border:1px solid #ffffffbf;margin-bottom:20px;padding:28px;display:block}.card-title{letter-spacing:-.01em;margin-bottom:20px;font-size:18px;font-weight:700}.hint{color:var(--muted);font-size:13px;line-height:1.5}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.checker{background-color:#fff;background-image:conic-gradient(#eee 25%, transparent 0 50%, #eee 0 75%, transparent 0);background-size:12px 12px}.footer{color:var(--muted);text-align:center;margin-top:56px;font-size:14px}.footer a{color:var(--text);text-underline-offset:3px;font-weight:600;text-decoration-color:#7c5cff66;transition:color .2s,text-decoration-color .2s}.footer a:hover{color:var(--violet-ink);text-decoration-color:currentColor}@media (width<=640px){.page{padding:48px 16px 32px}.card{padding:20px 18px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.drop{text-align:center;cursor:pointer;border:2px dashed #7c5cff59;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:240px;transition:border-color .2s,background-color .2s,box-shadow .25s,transform .25s;display:flex;position:relative}.drop:hover{background-color:#ffffffb8;border-color:#7c5cffb3}.drop.over{border-color:var(--pink);box-shadow:0 0 0 8px #ff5fa229, var(--shadow);background-color:#ffffffd9;transform:scale(1.01)}.drop:has(input:focus-visible){outline:3px solid var(--violet);outline-offset:3px}.drop-icon{background:linear-gradient(135deg, var(--pink), var(--violet));color:#fff;border-radius:20px;place-items:center;width:60px;height:60px;margin-bottom:6px;transition:transform .25s;display:grid;box-shadow:0 10px 24px -8px #7c5cff99}.drop:hover .drop-icon,.drop.over .drop-icon{transform:translateY(-4px)rotate(-4deg)}.drop-title{overflow-wrap:anywhere;max-width:100%;font-size:18px;font-weight:700}.source{object-fit:contain;border-radius:28px;width:120px;height:120px;margin-bottom:6px;box-shadow:0 12px 28px -12px #1f1b3a59}.notice{color:#6b4b00;background:#fff4d6;border-radius:14px;margin:-8px 0 20px;padding:10px 16px;font-size:14px}.notice+.notice{margin-top:-12px}.notice.error{color:#a1123f;background:#ffe3ec}.options{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 32px;display:grid}.field{flex-direction:column;gap:10px;display:flex}.field>label:first-child{font-size:14px;font-weight:600}.value{color:var(--violet-ink);background:#7c5cff1f;border-radius:999px;margin-left:6px;padding:1px 8px;font-size:13px}.hint strong{font-family:var(--mono);color:var(--text);font-weight:500}input[type=color]{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;width:48px;height:36px;padding:3px;transition:box-shadow .2s}input[type=color]:hover{box-shadow:0 0 0 4px #7c5cff26}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:8px}.check{cursor:pointer;align-items:center;gap:10px;font-size:14px;display:inline-flex}.check input,input[type=range]{accent-color:var(--violet)}.check input{width:18px;height:18px}input[type=range]{cursor:pointer;width:100%}.previews{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:20px 16px;display:grid}.previews figure{flex-direction:column;align-items:center;gap:10px;display:flex}.tile{aspect-ratio:1;background:linear-gradient(160deg,#fffffff2,#ffffff8c);border:1px solid #ffffffe6;border-radius:34%;place-items:center;width:100%;max-width:132px;transition:transform .25s,box-shadow .25s;display:grid;box-shadow:0 10px 24px -14px #4c34a059}.previews figure:hover .tile{transform:translateY(-6px);box-shadow:0 18px 32px -14px #7c5cff73}.tile img{border-radius:22%}.previews figcaption{font-size:13px;font-weight:700}.previews figcaption span{color:var(--muted);font-weight:500}.actions{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:28px;padding-top:24px;display:flex}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#d3367f,#6a45f5);border:0;border-radius:16px;padding:14px 28px;font-size:16px;font-weight:700;transition:transform .2s,box-shadow .2s,filter .2s;box-shadow:0 12px 24px -10px #7c5cffb3,inset 0 1px #ffffff40}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 30px -10px #ff5fa2a6,inset 0 1px #ffffff40}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.tip{color:var(--muted);background:#ffffff73;border:1px dashed #7c5cff59;border-radius:18px;padding:16px 20px;font-size:14px}.tip strong{color:var(--text)}.tip code{font-family:var(--mono);color:var(--violet-ink);overflow-wrap:anywhere;background:#7c5cff1a;border-radius:6px;padding:2px 6px;font-size:12.5px}@media (width<=640px){.drop{min-height:200px}.previews{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.btn-primary{width:100%}}