*{box-sizing:border-box;margin:0;padding:0}body,html{min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f0f0f0}.bg-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.96;mix-blend-mode:normal}.container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;gap:1.5rem}.card{display:flex;flex-direction:row;width:min(624px,94vw);height:130px;box-shadow:7px 7px 0 0 #000}.card-left{display:flex;align-items:center;justify-content:center;width:130px;flex-shrink:0;height:100%;background:#000;color:#fff;border:2px solid #000;cursor:pointer;transition:opacity .15s}.card-left:hover:not(:disabled){opacity:.78}.card-left:disabled{opacity:.5;cursor:not-allowed}.breathe-out-btn{padding:.6rem 1.4rem;font-size:.95rem;font-family:inherit;background:#fff;color:#111;border:2px solid #000;cursor:pointer;transition:opacity .15s;box-shadow:4px 4px 0 0 #000}.breathe-out-btn:hover:not(:disabled){opacity:.85}.breathe-out-btn:disabled{opacity:.6;cursor:not-allowed}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.card-icon{display:block;transform-box:fill-box;transform-origin:center center;animation:spin 5s linear infinite}@media (prefers-reduced-motion:reduce){.card-icon{animation:none}}.card-right{flex:1 1;min-width:0;height:100%;overflow:hidden;padding:0 1.6rem;background:#fff;border:2px solid #000;border-left:none;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1.55;color:#111}.card-placeholder,.result-text{text-align:center;width:100%}.card-placeholder{color:#c2c2c2;transition:opacity .45s ease}.result-text{color:#111}.result-fade-in{animation:resultFadeIn .6s ease-out forwards}@keyframes resultFadeIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.result-fade-in{animation:none;opacity:1}}@keyframes blink{50%{opacity:0}}.caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:#111;vertical-align:text-bottom;animation:blink .8s step-end infinite}@media (prefers-reduced-motion:reduce){.caret{animation:none}}@media (max-width:520px){.card{flex-direction:column;height:auto}.card-left{width:100%;height:64px}.card-right{border-left:2px solid #000;border-top:none;height:auto;min-height:90px;padding:1rem 1.25rem;align-items:flex-start}}