*{box-sizing:border-box;margin:0;padding:0}:root{--foreground:#171717;--background:linear-gradient(180deg,#f3efe7,#e7dfd1);--muted:#737373;--border:#e5e5e5;--radius:12px}@media (prefers-color-scheme:dark){:root{--foreground:#ededed;--background:#0a0a0a;--muted:#a3a3a3;--border:#262626}}body,html{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#f5efe6,#dcc9ad);color:var(--foreground);line-height:1.5;-webkit-font-smoothing:antialiased}.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 24px 64px;gap:48px}@media (max-width:600px){.page{gap:32px;justify-content:flex-start;padding:48px 16px 16px}}.header{text-align:center;max-width:600px}.logo{height:24px}.logo,.title{margin-bottom:16px}.title{font-size:clamp(32px,6vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1.1}.description{font-size:16px;color:var(--muted);max-width:480px;margin:0 auto}@media (max-width:600px){.description{font-size:15px}}.presets{display:flex;justify-content:center;gap:24px;width:100%}.preset{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:360px;aspect-ratio:3/4;background:#ffffff;border-radius:18px;cursor:pointer;overflow:hidden;border:1px solid rgba(90,64,33,.12);box-shadow:0 20px 50px rgba(58,38,18,.18);transition:transform .25s ease,box-shadow .25s ease}.preset:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 32px 80px rgba(58,38,18,.28)}.preset:focus-visible{outline:2px solid var(--foreground);outline-offset:2px}.preset-avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s ease-out,filter .25s ease-out}.preset:hover .preset-avatar{transform:scale(1.03);filter:brightness(1.05)}.preset-info{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}.status{display:flex;align-items:center;gap:6px;margin-bottom:6px}.status-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;box-shadow:0 0 8px rgba(34,197,94,.8)}.status-text{font-size:12px;color:rgba(255,255,255,.85)}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}to{box-shadow:0 0 0 0 rgba(34,197,94,0)}}.preview-text{font-size:13px;line-height:1.4;color:rgba(255,255,255,.9);background:rgba(0,0,0,.55);padding:10px 12px;border-radius:10px;max-width:90%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeInMessage .6s ease;margin-bottom:10px}@media (max-width:480px){.preview-text{margin-bottom:12px}}@keyframes fadeInMessage{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.status-dot{animation:pulse 2s infinite}@media (max-width:480px){.preset-info{padding:12px;gap:2px}}.preset-name{font-size:15px;font-weight:600;color:#ffffff;align-self:center;background:rgba(255,255,255,.14);padding:8px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 2px 8px rgba(0,0,0,.35);transition:all .2s ease}.preset-name:hover{background:rgba(255,255,255,.22);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}.preset-subtitle{font-size:13px;color:rgba(255,255,255,.7)}@media (max-width:480px){.preset-name{font-size:14px}.preset-subtitle{font-size:12px}}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;animation:fadeIn .2s ease}@media (max-width:600px){.modal-overlay{padding:16px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:800px;animation:slideUp .25s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-title{font-size:16px;font-weight:500;color:#ffffff}.modal-close{background:transparent;border:none;color:#a3a3a3;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:color .15s ease,background .15s ease}.modal-close:hover{color:#ffffff;background:rgba(255,255,255,.1)}.modal-loading{display:flex;align-items:center;justify-content:center;min-height:400px;color:#a3a3a3;font-size:1rem}@media (prefers-reduced-motion:reduce){.modal,.modal-overlay,.preset-avatar{animation:none;transition:none}}.typing{display:flex;gap:4px;margin-top:-6px;margin-left:6px}.typing span{width:5px;height:5px;background:rgba(255,255,255,.6);border-radius:50%;animation:typing 1.2s ease-in-out infinite}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}