:root{--bg-primary:#fffaf5;--bg-secondary:#faf6f0;--wood-light:tan;--wood-dark:#8b5a2b;--sakura:#ffb7b2;--sakura-light:#ffdede;--mint:#a8d5ba;--mint-light:#c8ebd2;--cream:#fff8dc;--gold:#daa520;--text-dark:#3c322d;--text-soft:#786e64;--text-muted:#adaeb3;--shadow:#8b5a2b26;--code-bg:#2d2a35}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-dark);font-family:Hiragino Sans,Noto Sans JP,Yu Gothic,sans-serif;line-height:1.6}.app{min-height:100vh;padding:20px}.wa-box{border:3px solid var(--wood-dark);box-shadow:4px 4px 0 var(--wood-light), 8px 8px 20px var(--shadow);background:linear-gradient(145deg,#fffef8 0%,#faf6f0 100%);border-radius:12px;padding:32px;position:relative}.wa-box:before{content:"";border:1px solid var(--wood-light);pointer-events:none;border-radius:8px;position:absolute;inset:8px}.wa-title{background:var(--wood-light);color:var(--text-dark);border:2px solid var(--wood-dark);border-radius:16px;padding:6px 24px;font-size:1rem;font-weight:700;position:absolute;top:-18px;left:50%;transform:translate(-50%)}.btn-rpg{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;padding:14px 32px;font-size:1rem;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex;position:relative}.btn-rpg:before{content:"";background:#ffffff4d;border-radius:6px 6px 0 0;height:40%;position:absolute;top:0;left:4px;right:4px}.btn-rpg-primary{background:var(--sakura);color:var(--text-dark);border:2px solid var(--wood-dark);box-shadow:0 4px 0 var(--wood-light), 0 6px 12px var(--shadow)}.btn-rpg-primary:hover{box-shadow:0 2px 0 var(--wood-light), 0 4px 8px var(--shadow);transform:translateY(2px)}.btn-rpg-secondary{background:var(--cream);color:var(--text-dark);border:2px solid var(--wood-light);box-shadow:0 3px 0 var(--wood-light), 0 4px 8px var(--shadow)}.btn-rpg-secondary:hover{box-shadow:0 1px 0 var(--wood-light), 0 2px 6px var(--shadow);transform:translateY(2px)}.form-group{margin-bottom:24px}.form-label{color:var(--text-dark);margin-bottom:8px;font-weight:700;display:block}.form-input,.form-select,.form-textarea{border:2px solid var(--wood-light);background:var(--cream);width:100%;color:var(--text-dark);border-radius:8px;padding:12px 16px;font-size:1rem;transition:border-color .2s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--sakura);outline:none}.form-textarea{resize:vertical;min-height:100px}.choice-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.choice-item{border:2px solid var(--wood-light);background:var(--cream);cursor:pointer;border-radius:10px;padding:12px 16px;font-size:.9rem;transition:all .2s}.choice-item:hover{border-color:var(--sakura);background:var(--sakura-light)}.choice-item.selected{border-color:var(--sakura);background:var(--sakura-light);box-shadow:inset 0 0 0 2px var(--sakura)}.progress-bar{background:#e0e0e0;border-radius:5px;width:100%;height:10px;margin-bottom:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--mint) 0%, var(--sakura) 100%);border-radius:5px;height:100%;transition:width .3s}.chat-bubble{border-radius:16px;margin-bottom:16px;padding:16px 20px;position:relative}.chat-bubble-ai{background:var(--mint-light);border:2px solid var(--mint);margin-right:20%}.chat-bubble-ai:after{content:"";border-left:10px solid #0000;border-right:10px solid #0000;border-top:10px solid var(--mint);width:0;height:0;position:absolute;bottom:-10px;left:30px}.chat-bubble-user{border:2px solid var(--wood-light);background:#f5f0eb;margin-left:20%}.chat-bubble-user:after{content:"";border-left:10px solid #0000;border-right:10px solid #0000;border-top:10px solid var(--wood-light);width:0;height:0;position:absolute;bottom:-10px;right:30px}.code-editor{background:var(--code-bg);border:3px solid var(--wood-dark);border-radius:12px;overflow:hidden}.code-header{background:#3d3a45;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.code-title{color:#c4b8a8;font-size:.85rem}.code-dots{gap:6px;display:flex}.code-dot{border-radius:50%;width:10px;height:10px}.code-dot:first-child{background:#ff5f56}.code-dot:nth-child(2){background:#ffbd2e}.code-dot:nth-child(3){background:#27c93f}.code-content{color:#d4c8b8;padding:20px;font-family:Monaco,Menlo,monospace;font-size:.85rem;line-height:1.8;overflow-x:auto}.code-keyword{color:#c4a8d8}.code-string{color:#a8d8a8}.code-comment{color:#888}.header{text-align:center;margin-bottom:40px}.header h1{color:var(--wood-dark);margin-bottom:8px;font-size:2rem}.header p{color:var(--text-soft)}.page-container{max-width:1200px;margin:0 auto}.two-column{grid-template-columns:1fr 1fr;gap:32px;display:grid}@media (width<=768px){.two-column,.choice-grid{grid-template-columns:1fr}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.4s ease-out fadeIn}.emoji-grid{flex-wrap:wrap;gap:12px;display:flex}.emoji-option{border:2px solid var(--wood-light);background:var(--cream);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;transition:all .2s;display:flex}.emoji-option:hover,.emoji-option.selected{border-color:var(--sakura);background:var(--sakura-light);transform:scale(1.1)}