:root{--bg:#f5f5f7;--surface:#fff;--fill:#7676801f;--fill-strong:#76768033;--text:#1d1d1f;--text-2:#6e6e73;--text-3:#86868b;--separator:#00000014;--accent:#0071e3;--accent-hover:#0077ed;--accent-tint:#0071e31a;--on-accent:#fff;--material:#ffffffb8;--shadow-card:0 1px 1px #00000005, 0 4px 24px #0000000d;--shadow-lift:0 2px 4px #0000000a, 0 12px 40px #0000001a;--shadow-float:0 8px 40px #00000029, 0 0 0 .5px #0000000f;--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:48px;--space-2xl:96px;--radius-card:18px;--radius-control:10px;--ease:cubic-bezier(.25, .1, .25, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#000;--surface:#1c1c1e;--fill:#7676803d;--fill-strong:#7676805c;--text:#f5f5f7;--text-2:#a1a1a6;--text-3:#8e8e93;--separator:#ffffff1a;--accent:#2997ff;--accent-hover:#47a6ff;--accent-tint:#2997ff29;--on-accent:#fff;--material:#1d1d1fb8;--shadow-card:0 0 0 .5px #ffffff0f;--shadow-lift:0 0 0 .5px #ffffff1f, 0 12px 40px #00000080;--shadow-float:0 0 0 .5px #ffffff1f, 0 8px 40px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--text);font:400 17px/1.47 var(--font);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit;letter-spacing:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--text-2)}.wrap{max-width:1200px;padding:0 var(--space-md);margin:0 auto}@media (min-width:734px){.wrap{padding:0 var(--space-lg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}}.navbar{z-index:30;background:var(--material);-webkit-backdrop-filter:saturate(180%)blur(20px);border-bottom:.5px solid var(--separator);position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;gap:var(--space-md);height:52px;display:flex}.brand{color:var(--text);letter-spacing:-.02em;align-items:center;gap:10px;font-size:19px;font-weight:600;display:inline-flex}.brand:hover{text-decoration:none}.logo{width:26px;height:26px;color:var(--text)}.search{align-items:center;gap:var(--space-sm);border-radius:var(--radius-control);background:var(--fill);width:min(320px,55vw);height:36px;color:var(--text-3);transition:background .2s var(--ease), box-shadow .2s var(--ease);padding:0 12px;display:flex}.search:focus-within{background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)}.search input{min-width:0;height:100%;color:var(--text);background:0 0;border:0;outline:0;flex:1;font-size:15px}.search input::placeholder{color:var(--text-3)}.hero{padding-top:72px;padding-bottom:var(--space-xl);text-align:center;animation:fadeUp .7s var(--ease) both}.hero h1{letter-spacing:-.025em;margin:0;font-size:clamp(34px,6vw,56px);font-weight:600;line-height:1.07}.hero-soft{color:var(--text-3)}.hero-sub{max-width:600px;margin:var(--space-lg) auto 0;color:var(--text-2);font-size:19px;line-height:1.42}.hero-sub strong{color:var(--text);font-weight:600}.controls{align-items:center;gap:var(--space-md);animation:fadeUp .7s 80ms var(--ease) both;flex-direction:column;display:flex}.segmented{background:var(--fill);scrollbar-width:none;border-radius:9px;max-width:100%;padding:2px;display:inline-flex;overflow-x:auto}.segmented button{min-height:32px;color:var(--text);white-space:nowrap;transition:background .2s var(--ease), box-shadow .2s var(--ease);background:0 0;border:0;border-radius:7px;flex:none;padding:0 16px;font-size:14px;font-weight:500}.segmented button[aria-checked=true],.segmented button[aria-selected=true]{background:var(--surface);box-shadow:0 3px 8px #0000001f,0 3px 1px #0000000a}@media (prefers-color-scheme:dark){.segmented button[aria-checked=true],.segmented button[aria-selected=true]{background:#636366}}.segmented.small button{min-height:28px;padding:0 14px;font-size:13px}.controls-row{gap:var(--space-sm);grid-template-columns:1fr 1fr;width:100%;max-width:880px;display:grid}.controls-row .preview-input{grid-column:1/-1}@media (min-width:734px){.controls-row{grid-template-columns:1fr 180px auto auto;gap:12px}.controls-row .preview-input{grid-column:auto}}.field{background:var(--surface);width:100%;min-width:0;height:44px;box-shadow:var(--shadow-card);transition:box-shadow .2s var(--ease);border:0;border-radius:12px;outline:none;padding:0 16px;font-size:15px}.field::placeholder{color:var(--text-3)}.field:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)}select.field{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:12px;padding-right:36px}.size{background:var(--surface);height:44px;box-shadow:var(--shadow-card);color:var(--text-3);border-radius:12px;align-items:center;gap:10px;padding:0 16px;display:none}@media (min-width:734px){.size{display:flex}}.size-a{font-size:17px;font-weight:500;line-height:1}.size-a.small{font-size:11px}.size input{min-width:0;accent-color:var(--accent);flex:1}.count{margin:var(--space-xl) 0 var(--space-md);color:var(--text-3);letter-spacing:-.01em;font-size:13px}.grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));display:grid}@media (min-width:734px){.grid{gap:20px}}.card{min-height:200px;padding:var(--space-lg);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);text-align:left;animation:fadeUp .5s var(--ease) both;transition:transform .3s var(--ease), box-shadow .3s var(--ease);border:0;flex-direction:column;display:flex;position:relative;overflow:hidden}.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}.card:active{transform:scale(.99)}.card[data-selected=true]{box-shadow:0 0 0 2px var(--accent), var(--shadow-card)}.card-head{justify-content:space-between;align-items:flex-start;gap:var(--space-sm);padding-right:36px;display:flex}.card-name{letter-spacing:-.01em;font-size:15px;font-weight:600}.card-meta{color:var(--text-3);letter-spacing:-.01em;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;font-size:13px;display:flex}.card-check{background:var(--fill);width:28px;height:28px;color:var(--text-2);opacity:0;transition:opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);border-radius:50%;place-items:center;font-size:16px;font-weight:500;display:grid;position:absolute;top:20px;right:20px;transform:scale(.85)}.card:hover .card-check,.card:focus-visible .card-check{opacity:1;transform:none}.card[data-selected=true] .card-check{opacity:1;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:600;transform:none}.card-preview{padding-top:var(--space-lg);letter-spacing:normal;overflow-wrap:anywhere;opacity:0;transition:opacity .4s var(--ease);margin-top:auto;line-height:1.12;display:block}.card-preview[data-ready=true]{opacity:1}.badge{background:var(--fill);height:20px;color:var(--text-2);letter-spacing:0;border-radius:980px;align-items:center;padding:0 8px;font-size:11px;font-weight:500;display:inline-flex}.empty{padding:var(--space-2xl) 0;text-align:center;color:var(--text-3)}.footer{margin-top:var(--space-2xl);padding:var(--space-lg) 0 140px;border-top:.5px solid var(--separator);color:var(--text-3);letter-spacing:-.01em;font-size:12px}.footer p{margin:0}.button{background:var(--fill);min-height:44px;color:var(--text);white-space:nowrap;transition:transform .2s var(--ease), filter .2s var(--ease), background .2s var(--ease);border:0;border-radius:980px;justify-content:center;align-items:center;padding:0 22px;font-size:15px;font-weight:500;display:inline-flex}.button:hover{background:var(--fill-strong)}.button:active{transform:scale(.97)}.button.primary{background:var(--accent);color:var(--on-accent)}.button.primary:hover{background:var(--accent-hover);transform:scale(1.02)}.button.plain{color:var(--accent);background:0 0;padding:0 14px}.button.plain:hover{background:var(--accent-tint)}.button.small{min-height:32px;padding:0 14px;font-size:13px}.tray{left:50%;bottom:calc(var(--space-lg) + env(safe-area-inset-bottom));z-index:20;align-items:center;gap:var(--space-xs);background:var(--material);-webkit-backdrop-filter:saturate(180%)blur(20px);max-width:calc(100vw - 32px);box-shadow:var(--shadow-float);animation:trayIn .4s var(--ease) both;border-radius:980px;padding:6px 6px 6px 22px;display:flex;position:fixed;transform:translate(-50%)}@keyframes trayIn{0%{opacity:0;transform:translate(-50%,24px)}}.tray-count{margin-right:var(--space-sm);white-space:nowrap;font-size:15px}@media (max-width:520px){.tray-styles,.tray .button.plain{display:none}}.sheet{background:var(--surface);width:min(600px,100vw - 32px);max-width:none;max-height:min(820px,100dvh - 64px);color:var(--text);box-shadow:var(--shadow-float);animation:sheetIn .35s var(--ease);border:0;border-radius:22px;margin:auto;padding:0}.sheet::backdrop{-webkit-backdrop-filter:blur(4px);animation:fadeIn .3s var(--ease);background:#0000004d}@keyframes sheetIn{0%{opacity:0;transform:translateY(24px)scale(.98)}}@keyframes fadeIn{0%{opacity:0}}@media (max-width:733px){.sheet{border-radius:22px 22px 0 0;width:100vw;max-height:92dvh;margin:auto 0 0}}.sheet-body{padding:var(--space-lg) var(--space-lg) var(--space-xl)}@media (min-width:734px){.sheet-body{padding:32px 40px 40px}}.sheet-head{justify-content:space-between;align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-lg);display:flex}.sheet h2{letter-spacing:-.03em;margin:0;font-size:28px;font-weight:600;line-height:1.14}.sheet h3{margin:32px 0 var(--space-sm);color:var(--text-3);letter-spacing:0;text-transform:uppercase;font-size:13px;font-weight:500}.sheet-head p{margin:6px 0 0;font-size:15px}.done{margin:-6px -14px 0 0;font-weight:600}.sheet-actions{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);flex-wrap:wrap;display:flex}.check{align-items:center;gap:var(--space-sm);cursor:pointer;min-height:44px;margin-left:auto;font-size:15px;display:inline-flex}.check input{width:18px;height:18px;accent-color:var(--accent)}.styles{background:var(--bg);opacity:0;transition:opacity .4s var(--ease);border-radius:14px;margin:0;padding:0;list-style:none;overflow:hidden}.styles[data-ready=true]{opacity:1}.styles li+li .style-row{border-top:.5px solid var(--separator)}.style-row{gap:2px var(--space-md);text-align:left;width:100%;min-height:44px;transition:background .15s var(--ease);background:0 0;border:0;grid-template-columns:1fr auto;padding:14px 16px;display:grid}.style-row:hover{background:var(--fill)}.style-label{color:var(--text-3);font-size:13px}.style-sample{letter-spacing:normal;overflow-wrap:anywhere;grid-column:1;font-size:26px;line-height:1.2}.style-toggle{background:var(--fill);width:30px;height:30px;color:var(--text-2);transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);border-radius:50%;grid-area:1/2/3;align-self:center;place-items:center;font-size:18px;line-height:1;display:grid}.style-row[aria-pressed=true] .style-toggle{background:var(--accent);color:var(--on-accent)}.style-row:active .style-toggle{transform:scale(.9)}.code{background:var(--bg);border-radius:14px;margin-top:12px;position:relative}.code pre{font:13px/1.6 var(--mono);letter-spacing:0;white-space:pre-wrap;word-break:break-all;margin:0;padding:16px 84px 16px 18px;overflow-x:auto}.code .button{background:var(--surface);box-shadow:var(--shadow-card);position:absolute;top:10px;right:10px}.selected-list{background:var(--bg);border-radius:14px;margin:0;padding:0;list-style:none;overflow:hidden}.selected-list li{justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.selected-list li+li{border-top:.5px solid var(--separator)}.selected-list li>div:first-child{flex-direction:column;min-width:0;display:flex}.selected-list strong{font-size:15px;font-weight:600}.selected-list .muted{font-size:13px}.selected-actions{flex:none;display:flex}.selected-actions .button{color:var(--accent);background:0 0}.selected-actions .button:hover{background:var(--accent-tint)}.small-print{margin-top:var(--space-lg);font-size:13px}.small-print code{background:var(--fill);color:var(--text);font-family:var(--mono);letter-spacing:0;border-radius:6px;padding:2px 6px;font-size:12px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}