:root{--bg: #fbf7ff;--ink: #1f2a2e;--muted: #5b6b73;--pastel-1: #f6e7ff;--pastel-2: #d6f5ff;--pastel-3: #ffe9ec;--accent: #a78bfa;font-family:Kalam,cursive;line-height:1.5;font-weight:300;color:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#root{height:100%}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(1400px 900px at 50% 120%,rgba(31,42,46,.06),transparent 60%),radial-gradient(1100px 700px at 80% -10%,rgba(246,231,255,.75),transparent 60%),radial-gradient(1000px 650px at -10% 25%,rgba(214,245,255,.68),transparent 60%),radial-gradient(900px 600px at 110% 110%,rgba(255,233,236,.62),transparent 50%),linear-gradient(180deg,#f2ecff,#eee8ff 35%,#f8f2ff)}.app-shell{min-height:100dvh;display:grid;grid-template-rows:1fr auto;align-items:stretch}.container{display:grid;place-items:center;align-content:center;height:100%;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}.content{width:min(700px,88vw);display:grid;gap:.9rem;margin:0 auto;justify-items:center}.header{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem 1rem}.brand{font-size:clamp(1.15rem,1rem + .6vw,1.35rem);color:var(--muted);letter-spacing:.3px}.controls{margin-top:.9rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn{border:1px solid rgba(0,0,0,.08);background:#fff;color:var(--ink);padding:.8rem 1rem;border-radius:12px;font-family:Kalam,cursive;font-weight:300;letter-spacing:.1px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;box-shadow:0 2px 8px #0000000f;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px #a78bfa24}.btn:active{transform:translateY(0)}.btn.primary{background:linear-gradient(180deg,#fff,#f7f2ff);border-color:#a78bfa59}.btn.ghost{background:#ffffffa6}.btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:480px){.content{width:min(480px,84vw)}.content>.card{width:90%;margin-inline:auto}.app-shell{grid-template-rows:auto auto}.controls{width:100%;display:grid;grid-template-columns:1fr;gap:.75rem;justify-items:center}.controls .btn{width:50%;margin-inline:0;font-weight:400;font-size:1rem}}.footer{color:var(--muted);font-size:1rem;padding:1rem;text-align:center}.status{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted)}.spinner{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.08);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.intro{color:var(--muted);text-align:center;max-width:min(70ch,92vw);margin:0 auto .75rem;font-size:clamp(1.05rem,.6rem + 1.2vw,1.35rem);line-height:1.5}:root{--bg: #fbf7ff;--ink: #1f2a2e;--muted: #5b6b73;--pastel-1: #f6e7ff;--pastel-2: #d6f5ff;--pastel-3: #ffe9ec;--accent: #a78bfa;--card-accent: var(--accent);--card-shadow: rgba(167, 139, 250, .28);--card-bg1: rgba(255, 255, 255, .96);--card-bg2: rgba(255, 255, 255, .94)}.card{width:100%;margin:0 auto;padding:clamp(1.25rem,2vw + .5rem,2rem);background:linear-gradient(180deg,var(--card-bg1),var(--card-bg2));border-radius:22px;border:1px solid color-mix(in srgb,var(--card-accent) 30%,white 70%);box-shadow:0 10px 24px #0000000f,0 2px 6px #0000000d,0 0 0 1px #ffffffd9 inset;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);transform:translateY(0) scale(1);transition:transform .22s ease,box-shadow .22s ease}.card:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 16px 36px #00000014,0 6px 16px #0000000f,0 0 0 1px #ffffffd9 inset}.card-enter{animation:cardIn .42s cubic-bezier(.2,.8,.2,1) both}@keyframes cardIn{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.card .text{font-family:Kalam,cursive;font-weight:300;font-size:clamp(1.6rem,1.1rem + 2.1vw,2.6rem);line-height:1.2;margin:0;letter-spacing:0}.card .meta{margin-top:1rem;display:flex;gap:.75rem;color:var(--muted);font-size:.95rem;flex-wrap:wrap}.author{opacity:.9}.tags{opacity:.85;font-style:italic;font-family:Kalam,cursive;font-weight:300;letter-spacing:0}.tags .tag-label{font-style:normal;font-family:inherit;opacity:.7;margin-right:.35rem}@media(max-width:480px){.card{width:100%;padding:1rem;border-radius:18px}.card .text{font-size:clamp(1.4rem,1.02rem + 1.9vw,2.2rem)}.card .meta{font-size:.9rem}}
