:root{--sun:#fed030;--berry:#fc3040;--sky:#157efa;--leaf:#53d769;--amber:#ec9737;--ink:#0f172a;--slate:#475569;--paper:#f6f7fb;--edge:#0f172a;--ease:cubic-bezier(.34, 1.4, .5, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Lato,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.6}.app{flex-direction:column;min-height:100%;display:flex}.bar{z-index:3;background:var(--paper);border-bottom:2px solid var(--edge);justify-content:space-between;align-items:center;gap:14px;padding:14px 20px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;display:flex}.brand img{width:30px;height:30px;display:block}.brand b{letter-spacing:-.02em;font-family:Montserrat,sans-serif;font-size:17px;font-weight:800}.again{letter-spacing:.02em;color:var(--ink);border:2px solid var(--edge);cursor:pointer;box-shadow:3px 3px 0 var(--edge);transition:transform .12s var(--ease), box-shadow .12s var(--ease);background:#fff;border-radius:999px;padding:7px 14px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:700}.again:active{box-shadow:0 0 0 var(--edge);transform:translate(3px,3px)}.open{flex-direction:column;flex:1 0 auto;justify-content:center;width:100%;max-width:calc(46rem + 40px);margin:0 auto;padding:20px;display:flex}.open h1{letter-spacing:-.035em;max-width:14ch;margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:clamp(30px,7vw,48px);font-weight:800;line-height:1.05}.open p{color:var(--slate);max-width:46ch;margin:0 0 32px;font-size:17px}.tiles{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.tile{text-align:left;cursor:pointer;color:var(--ink);border:2px solid var(--edge);box-shadow:5px 5px 0 var(--edge);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);min-height:128px;transition:transform .14s var(--ease), box-shadow .14s var(--ease);animation:pop .42s var(--ease) both;border-radius:20px;padding:20px 18px 46px;font-family:Montserrat,sans-serif;font-size:16.5px;font-weight:700;line-height:1.25;position:relative}.tile:first-child{background:var(--sun);animation-delay:40ms}.tile:nth-child(2){background:var(--berry);color:#fff;animation-delay:.1s}.tile:nth-child(3){background:var(--sky);color:#fff;animation-delay:.16s}.tile:nth-child(4){background:var(--leaf);animation-delay:.22s}.tile:hover{box-shadow:8px 8px 0 var(--edge);transform:translate(-2px,-2px)}.tile:active{box-shadow:0 0 0 var(--edge);transform:translate(5px,5px)}.tile small{letter-spacing:.1em;text-transform:uppercase;opacity:.62;font-family:Lato,sans-serif;font-size:12px;font-weight:700;position:absolute;bottom:16px;left:18px}@keyframes pop{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:none}}.thread{flex:1 0 auto;width:100%;max-width:calc(46rem + 40px);margin:0 auto;padding:26px 20px 30px}.you{border:2px solid var(--edge);max-width:85%;box-shadow:4px 4px 0 var(--edge);border-radius:18px 18px 18px 5px;margin:26px 0 0;padding:11px 17px;font-family:Montserrat,sans-serif;font-size:15.5px;font-weight:700;line-height:1.35;display:inline-block}.thread>.you:first-child{margin-top:4px}.c0{background:var(--sun)}.c1{background:var(--berry);color:#fff}.c2{background:var(--sky);color:#fff}.c3{background:var(--leaf)}.bot{border-left:5px solid var(--edge);min-height:34px;margin:16px 0 0;padding-left:18px;font-size:16.5px}.bot p{margin:0 0 .85em}.bot p:last-child{margin-bottom:0}.bot ul{margin:0 0 .85em;padding-left:1.15em}.bot li{margin:.3em 0}.bot strong{font-weight:700}.oops{color:var(--berry);margin-top:10px;font-size:14.5px;font-weight:700}.loading{gap:4px;padding:7px 0;display:flex}.loading i{border:2px solid var(--edge);width:26px;height:9px;animation:fill 1.1s var(--ease) infinite;background:#fff;border-radius:3px}.loading i:first-child{animation-delay:0s}.loading i:nth-child(2){animation-delay:.13s}.loading i:nth-child(3){animation-delay:.26s}.loading i:nth-child(4){animation-delay:.39s}@keyframes fill{0%,to{background:#fff}45%{background:var(--sun)}}.rate{align-items:center;gap:8px;margin-top:14px;display:flex}.rate button{color:var(--ink);border:2px solid var(--edge);cursor:pointer;background:#fff;border-radius:999px;padding:5px 13px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:700}.rate button:hover{background:var(--sun)}.rate span{color:var(--slate);font-size:13px;font-weight:700}.foot{z-index:3;background:var(--paper);border-top:2px solid var(--edge);padding:14px 20px calc(14px + env(safe-area-inset-bottom));position:sticky;bottom:0}.foot form{align-items:flex-end;gap:10px;width:100%;max-width:46rem;margin:0 auto;display:flex}.foot textarea{resize:none;font:inherit;color:var(--ink);border:2px solid var(--edge);min-height:46px;max-height:32vh;box-shadow:4px 4px 0 var(--edge);background:#fff;border-radius:16px;flex:auto;padding:11px 15px;font-size:16px;line-height:1.45}.foot textarea:focus{border-color:var(--sky);outline:none}.foot textarea::placeholder{color:#94a3b8}.go{letter-spacing:.02em;background:var(--sun);color:var(--ink);border:2px solid var(--edge);cursor:pointer;box-shadow:4px 4px 0 var(--edge);transition:transform .12s var(--ease), box-shadow .12s var(--ease);border-radius:16px;flex:none;padding:13px 22px;font-family:Montserrat,sans-serif;font-size:14px;font-weight:800}.go:active:not(:disabled){box-shadow:0 0 0 var(--edge);transform:translate(4px,4px)}.go:disabled{color:#94a3b8;cursor:default;background:#e2e8f0;border-color:#cbd5e1;box-shadow:4px 4px #cbd5e1}.fine{width:100%;max-width:46rem;color:var(--slate);margin:9px auto 0;font-size:12px}:where(button,textarea):focus-visible{outline:3px solid var(--sky);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width<=560px){.tiles{grid-template-columns:1fr}.tile{min-height:0;padding:17px 16px 40px}.open{padding-top:4vh}}.tail{scroll-margin-bottom:104px}.bot h3{margin:1.1em 0 .4em;font-size:1em;font-weight:700}.bot ol{margin:0 0 .9em;padding-left:1.3em}.bot ol li{margin:.3em 0}.ts:not(:empty){width:100%;max-width:46rem;margin:10px auto 0}.pj-again{font:inherit;cursor:pointer;color:inherit;text-underline-offset:3px;background:0 0;border:0;padding:0 2px;font-size:.92em;font-weight:700;text-decoration:underline}
