@import "https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap";:root{--color-bg:#f4f1eb;--color-text:#2b2b2b;--color-primary:#8f2e14;--color-secondary:#4a593d;--color-surface:#ffffffb3;--font-waka:"Noto Serif JP", serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-text);background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}.app-container{flex-direction:column;align-items:center;max-width:600px;min-height:100vh;margin:0 auto;padding:2rem 1rem;display:flex}.header{text-align:center;margin-bottom:2rem}.header h1{font-family:var(--font-waka);color:var(--color-primary);letter-spacing:.1em;font-size:2.5rem;font-weight:600}.header p{color:#666;margin-top:.5rem;font-size:.95rem}.card{background:var(--color-surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff80;border-radius:12px;flex-direction:column;align-items:center;gap:1.5rem;width:100%;padding:2rem;display:flex;box-shadow:0 4px 20px #0000000d}.btn{cursor:pointer;z-index:5;background-color:#ffffffd9;border:none;border-radius:50px;justify-content:center;align-items:center;gap:.5rem;width:100%;max-width:300px;padding:.8rem 2rem;font-family:inherit;font-size:1rem;font-weight:700;transition:all .3s;display:flex}.nav-menu{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:1rem;display:flex}.nav-btn{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:20px;padding:8px 16px;font-family:inherit;transition:all .2s}.nav-btn.active{color:#fff;background:#333;border-color:#333}.misu-container{width:100%;min-height:300px;position:relative}.misu-overlay{-webkit-backdrop-filter:blur(10px);z-index:10;color:#333;background:repeating-linear-gradient(0deg,#dec4a1d9 0 6px,#c1a47eb3 7px 8px);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;box-shadow:inset 0 0 20px #0003}.misu-message{text-align:center;background:#ffffffe6;border-radius:8px;padding:20px;font-family:Noto Serif JP,serif;box-shadow:0 4px 12px #0000001a}.modal-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{text-align:center;background:#fff;border-radius:12px;width:90%;max-width:400px;padding:30px;box-shadow:0 10px 30px #0003}.modal-input{border:1px solid #ccc;border-radius:4px;width:100%;margin:20px 0;padding:10px;font-family:inherit;font-size:1rem}.btn-primary{background-color:var(--color-primary);color:#fff;box-shadow:0 4px 12px #8f2e1433}.btn-primary:hover{background-color:#722410;transform:translateY(-2px);box-shadow:0 6px 16px #8f2e144d}.btn-primary:disabled{box-shadow:none;cursor:not-allowed;background-color:#ccc;transform:none}.btn-secondary{color:var(--color-text);background-color:#0000;border:2px solid #ddd}.btn-secondary:hover{background-color:#0000000d}.image-preview-container{aspect-ratio:4/3;background-color:#eaeaea;border-radius:8px;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.image-preview{object-fit:cover;width:100%;height:100%}.hidden-input{display:none}.result-view{background-color:#000;border-radius:8px;width:100%;position:relative;overflow:hidden;box-shadow:0 8px 24px #00000026;container-type:inline-size}.result-image{opacity:.8;width:100%;height:auto;display:block}.result-waka-overlay{box-sizing:border-box;background:linear-gradient(270deg,#ffffffb3 0%,#fff0 70%);justify-content:flex-end;width:100%;height:100%;padding:2rem 2.5rem;display:flex;position:absolute;top:0;right:0}.result-text{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-waka);color:var(--color-text);text-shadow:0 0 10px #ffffffe6,0 0 5px #fffc;letter-spacing:.15em;font-size:clamp(1rem,5cqw,1.5rem);line-height:2.2}.result-text span{white-space:nowrap}.filter-tab{transition:all .3s}.filter-tab:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000000d}.filter-tab.active{box-shadow:inset 0 2px 4px #0000000d}.post-footer button:active span{transform:scale(1.4)}.friends-section button{transition:all .2s}.friends-section button:hover{opacity:.9;transform:translateY(-1px)}.friends-section button:active{transform:translateY(0)}
