*{box-sizing:border-box;margin:0;padding:0}.tutorial-image{object-fit:contain;object-position:center;max-height:30dvh}.hourglass-wrap{flex-direction:column;align-items:center;gap:8px;padding:16px 0;display:flex}.hourglass-rotator{transform-origin:50%;transition:transform .9s ease-in-out;display:inline-block}.hourglass-seconds{color:#3a3a2a;font-size:1.25rem;font-weight:700}@keyframes sand-drip{0%{opacity:1;transform:translateY(0)}60%{opacity:.6}to{opacity:0;transform:translateY(14px)}}@keyframes sand-drip-up{0%{opacity:1;transform:translateY(0)}60%{opacity:.6}to{opacity:0;transform:translateY(-14px)}}.hourglass-drop{animation:.6s ease-in infinite sand-drip}.hourglass-drop-up{animation:.6s ease-in infinite sand-drip-up}.chat-page{background:#f7f7f8;flex-direction:column;height:100dvh;font-family:inherit;display:flex}.chat-messages{flex-direction:column;flex:1;gap:.75rem;padding:1rem;display:flex;overflow-y:auto}.chat-empty{color:#aaa;margin:auto;font-size:.95rem}.message-row{align-items:flex-end;gap:.5rem;max-width:80%;display:flex}.message-row.assistant{align-self:flex-start}.message-row.user{flex-direction:row-reverse;align-self:flex-end}.message-row.system{align-self:flex-start;max-width:100%}.message-icon{flex-shrink:0;margin-bottom:2px;font-size:1.4rem}.bubble{white-space:pre-wrap;word-break:break-word;border-radius:16px;max-width:100%;padding:.6rem .9rem;font-size:.95rem;line-height:1.5}.message-row.assistant .bubble{color:#1a1a1a;background:#fff;border:1px solid #e5e5e5;border-bottom-left-radius:4px}.message-row.user .bubble{color:#1a1a1a;background:#8ecf3a;border-bottom-right-radius:4px}.bubble.streaming:after{content:"▋";opacity:.7;margin-left:2px;animation:.8s step-start infinite blink;display:inline-block}.bubble-thinking{color:#888;white-space:pre-wrap;word-break:break-word;background:#f0f0f0;border-left:3px solid #ccc;border-radius:8px;margin-bottom:.5rem;padding:.4rem .6rem;font-size:.8rem}@keyframes blink{50%{opacity:0}}.chat-input-area{background:#fff;border-top:1px solid #e5e5e5;flex-shrink:0;gap:.5rem;padding:.75rem 1rem;display:flex}.chat-textarea{resize:none;background:#f7f7f8;border:1px solid #d0d0d0;border-radius:10px;outline:none;flex:1;max-height:160px;padding:.6rem .8rem;font-family:inherit;font-size:.95rem;line-height:1.4;transition:border-color .15s;overflow-y:auto}.chat-textarea:focus{background:#fff;border-color:#8ecf3a}.chat-textarea:disabled{opacity:.6;cursor:not-allowed}.msg-action-btn{color:#bbb;cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;flex-shrink:0;align-self:flex-end;padding:.2rem .35rem;font-size:.85rem;line-height:1;transition:opacity .15s,color .15s}.message-row:hover .msg-action-btn{opacity:1}.msg-action-btn:hover{color:#555}.msg-delete-btn:hover{color:#e05}.bubble-edit-textarea{width:100%;min-width:70dvw;min-height:50dvh;font:inherit;resize:vertical;color:inherit;background:0 0;border:none;outline:none;padding:0;font-size:.95rem;line-height:1.5}.chat-send-btn{cursor:pointer;color:#1a1a1a;background:#8ecf3a;border:2px solid #3a3a2a;border-radius:10px;align-self:flex-end;padding:.5rem 1rem;font-size:1rem;font-weight:600;transition:background .15s}.chat-send-btn:hover:not(:disabled){background:#7dbb2e}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}.layout{flex-direction:column;width:100dvw;height:100dvh;display:flex;overflow:hidden}.layout-header{border-bottom:1px solid #e2e8f0;flex-shrink:0;justify-content:center;align-items:center;height:64px;padding:0 1rem;font-size:1.5rem;display:flex}.layout-content{flex-direction:column;flex:1;gap:1rem;height:100%;padding:1rem;display:flex;overflow-y:auto}.layout-footer{color:#64748b;border-top:1px solid #e2e8f0;flex-shrink:0;justify-content:center;align-items:center;min-height:64px;padding:1rem;font-size:.875rem;display:flex}.card{text-align:center;border-radius:2px;flex-direction:column;gap:1rem;width:100%;margin:0 auto;padding:1.25rem 1rem;font-size:1.45rem;display:flex}.hint-card{background:#d7edf8}.action-card{color:#000;background:#8c195f33}.normal-card{border:1px solid #00000080;border-radius:5px}.primary-button{color:#1f2010;cursor:pointer;background:#8ecf3a;border:2px solid #3a3a2a;border-radius:6px;justify-content:center;align-items:center;width:100%;padding:.5rem 2rem;font-size:1.25rem;font-weight:700;display:inline-flex;box-shadow:inset 0 0 0 2px #b8e06a}.primary-button:hover{background:#9fdb4e}.primary-button:active{background:#7bbf28;box-shadow:inset 0 0 0 2px #a0cc55}.danger-button{color:#fff0f0;cursor:pointer;background:#cf3a3a;border:2px solid #3a1a1a;border-radius:6px;justify-content:center;align-items:center;width:100%;padding:.5rem 2rem;font-size:1.25rem;font-weight:700;display:inline-flex;box-shadow:inset 0 0 0 2px #e06a6a}.danger-button:hover{background:#db4e4e}.danger-button:active{background:#bf2828;box-shadow:inset 0 0 0 2px #c55}.image-grid{gap:.75rem;display:grid}.image-grid-item{cursor:pointer;text-align:center;color:var(--text-h);background:#f5f5f5;border:2px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem .4rem;font-size:.8rem;display:flex}.image-grid-item img{object-fit:contain;width:64px;height:64px}.image-grid-item.selected{background:#8c195f1a;border-color:#8c195f}.joker-inputs{flex-direction:column;gap:.6rem;width:100%;display:flex}.joker-input{box-sizing:border-box;background:#f5f5f5;border:2px solid #0000;border-radius:8px;outline:none;width:100%;padding:.75rem 1rem;font-size:1.3rem}.joker-input:not(:placeholder-shown){background:#8c195f1a;border-color:#8c195f}.option-image{flex-direction:row;justify-content:center;align-items:center;gap:1rem;display:flex}.option-image img{object-fit:contain;border-radius:8px;width:120px;height:120px}.option-image-label{border:1px solid #ececec;border-radius:10px;padding:.8rem 1rem;font-size:1rem;font-weight:700;box-shadow:0 2px 6px #0000000d}.flip-card{perspective:1000px;cursor:pointer;width:100%;transition:min-height .5s;overflow:hidden}.flip-card-inner{width:100%;transform-style:preserve-3d;grid-template-areas:"face";transition:transform .5s;display:grid}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-face{backface-visibility:hidden;border-radius:5px;grid-area:face;align-self:start}.flip-card-back{transform:rotateY(180deg)}.flip-card.flipped .flip-card-face{background:#8c195f1a;border:2px solid #8c195f}