:root{color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-text: #1f2937;--color-text-strong: #111827;--color-text-muted: #4b5563;--color-primary: #2563eb;--color-primary-contrast: #ffffff;--color-primary-glow: rgba(37, 99, 235, .18);--color-border: #d0d7e2;--color-button-bg: #f9fafb;--color-button-text: #1f2937;--color-card-bg: rgba(255, 255, 255, .95);--color-card-shadow: 0 8px 24px rgba(15, 23, 42, .08);--color-overlay-bg: rgba(255, 255, 255, .72);--color-overlay-muted: rgba(243, 244, 246, .5);--color-input-bg: rgba(255, 255, 255, .9);--color-input-border: #d0d7e2;--color-hint-text: #555555;--color-chat-user-bg: rgba(37, 99, 235, .6);--color-chat-user-text: #ffffff;--color-chat-bubble-bg: rgba(255, 255, 255, .65);--color-chat-bubble-shadow: 0 2px 8px rgba(0, 0, 0, .1);--color-chat-icon-border: rgba(255, 255, 255, .8);--color-chat-icon-shadow: 0 2px 8px rgba(0, 0, 0, .15);--color-speech-bg: rgba(255, 255, 255, .85);--color-speech-border: #2563eb;--color-speech-pointer-inner: rgba(255, 255, 255, .85);--color-speech-shadow: 0 4px 12px rgba(0, 0, 0, .15);--color-tooltip-bg: rgba(255, 255, 255, .95);--color-tooltip-text: #1f2937;--color-subtitle-text: #555555;--color-app-title: #111827;--app-bg-image: url(/img/material/BG1.png);--shadow-strong: 0 12px 40px rgba(15, 23, 42, .2)}:root[data-theme=dark]{color-scheme:dark;--color-text: #f3f4f6;--color-text-strong: #f9fafb;--color-text-muted: #cbd5f5;--color-primary: #93c5fd;--color-primary-contrast: #0f172a;--color-primary-glow: rgba(147, 197, 253, .35);--color-border: rgba(148, 163, 184, .6);--color-button-bg: rgba(30, 41, 59, .85);--color-button-text: #e2e8f0;--color-card-bg: rgba(15, 23, 42, .9);--color-card-shadow: 0 16px 40px rgba(2, 6, 23, .75);--color-overlay-bg: rgba(15, 23, 42, .78);--color-overlay-muted: rgba(30, 41, 59, .78);--color-input-bg: rgba(15, 23, 42, .85);--color-input-border: rgba(148, 163, 184, .6);--color-hint-text: #a5b4fc;--color-chat-user-bg: rgba(96, 165, 250, .7);--color-chat-user-text: #0f172a;--color-chat-bubble-bg: rgba(30, 41, 59, .9);--color-chat-bubble-shadow: 0 6px 18px rgba(2, 6, 23, .7);--color-chat-icon-border: rgba(15, 23, 42, .95);--color-chat-icon-shadow: 0 8px 18px rgba(2, 6, 23, .75);--color-speech-bg: rgba(15, 23, 42, .92);--color-speech-border: rgba(147, 197, 253, .85);--color-speech-pointer-inner: rgba(15, 23, 42, .92);--color-speech-shadow: 0 8px 24px rgba(2, 6, 23, .65);--color-tooltip-bg: rgba(30, 41, 59, .95);--color-tooltip-text: #e2e8f0;--color-subtitle-text: #cbd5f5;--color-app-title: #f8fafc;--shadow-strong: 0 18px 48px rgba(2, 6, 23, .85)}*,*:before,*:after{box-sizing:border-box}html{overflow-x:hidden;overflow-y:auto;width:100%;max-width:100%}body{margin:0;min-width:320px;min-height:100vh;color:var(--color-text);background:var(--app-bg-image) center / cover no-repeat,#0f172a;background-attachment:scroll;overflow-x:hidden;overflow-y:hidden;width:100%;max-width:100%}img{max-width:100%;height:auto}button{font:inherit}footer{text-align:center;padding:20px;margin-top:auto;background-color:#b8e6b8;color:#2d5016;font-size:14px;width:100%}footer p{margin:0}button{cursor:pointer;border-radius:999px;border:1px solid var(--color-border);padding:.5rem 1rem;background:var(--color-button-bg);color:var(--color-button-text);font-size:1.15rem;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .15s ease}button.primary{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 16px #0f172a26}button:disabled{opacity:.6;cursor:not-allowed}.card{background:var(--color-card-bg);border-radius:16px;padding:1.5rem;box-shadow:var(--color-card-shadow);display:flex;flex-direction:column;gap:1rem;width:100%;max-width:720px;margin:0 auto;border:1px solid rgba(255,255,255,.1)}.card h2{font-size:1.4rem;margin:0}.hint{font-size:1rem;color:var(--color-hint-text)}.confirm-text{white-space:pre-wrap}.name-input-row{display:flex;gap:.75rem}.name-input-row input{flex:1;padding:.6rem .75rem;border-radius:999px;border:1px solid var(--color-input-border);font-size:1.25rem;background:var(--color-input-bg);color:var(--color-text)}.button-row{display:flex;gap:.75rem}@media(max-width:640px){.name-input-row{flex-direction:column}}.app-root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem 3rem;font-family:inherit;color:var(--color-text);font-size:1.25rem;line-height:1.8;background-image:var(--app-bg-image);background-size:cover;background-position:center;background-repeat:no-repeat;transition:color .3s ease,background-image .3s ease;overflow:visible}.app-inner{width:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.app-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:1.5rem;color:var(--color-app-title);text-shadow:0 2px 8px rgba(0,0,0,.15)}@media(max-width:640px){.app-root{padding:1rem .75rem 2rem}}.persona-step-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1rem}.persona-step-title{font-size:1.8rem;font-weight:700;text-align:center;color:var(--color-app-title);text-shadow:0 2px 4px rgba(15,23,42,.2);margin:0}.persona-next-button{margin-top:1rem;padding:.75rem 2rem;font-size:1.2rem}.persona-images-row-desktop{display:flex;justify-content:center;align-items:flex-end;gap:3.5rem;margin:2rem 0 2.5rem;flex-wrap:wrap}.persona-character-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s;flex:1;min-width:150px;max-width:220px}.persona-character-wrapper:hover{transform:scale(1.05)}.persona-character-wrapper--selected{transform:scale(1.1)}.persona-character-wrapper--selected:after{content:"";position:absolute;bottom:-45px;left:50%;transform:translate(-50%);width:80%;height:4px;background-color:var(--color-primary);border-radius:2px}.persona-name-label{position:absolute;bottom:-35px;left:50%;transform:translate(-50%);background-color:var(--color-card-bg);padding:.25rem .75rem;border-radius:12px;font-weight:600;font-size:1.1rem;white-space:nowrap;box-shadow:var(--color-chat-bubble-shadow);z-index:2}.persona-character-wrapper--selected .persona-name-label{background-color:var(--color-primary);color:var(--color-primary-contrast)}.persona-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-10px);background-color:var(--color-tooltip-bg);color:var(--color-tooltip-text);padding:.5rem .75rem;border-radius:8px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10;max-width:none;min-width:0;text-align:center;margin-bottom:.5rem;white-space:nowrap;line-height:1.4}.persona-character-wrapper:hover .persona-tooltip{opacity:1;transform:translate(-50%) translateY(-5px)}.persona-character-wrapper--haruto .persona-tooltip{bottom:auto;top:-120px;transform:translate(-50%) translateY(0);margin-bottom:0}.persona-character-wrapper--haruto:hover .persona-tooltip{transform:translate(-50%) translateY(-5px)}.persona-character-image{width:100%;height:auto;object-fit:contain;max-height:400px}.persona-character-image--haruto{max-height:550px;transform:scale(1.25);transform-origin:bottom center}.persona-character-image--ren{max-height:320px;transform:scale(.85);transform-origin:bottom center}.persona-character-image--hina{max-height:340px;transform:scale(.9);transform-origin:bottom center}.persona-images-row-mobile{display:none;align-items:center;gap:1rem;margin:2rem 0 2.5rem;position:relative}.persona-nav-button{background-color:var(--color-card-bg);border:2px solid var(--color-primary);color:var(--color-primary);font-size:2rem;font-weight:700;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;z-index:1}.persona-nav-button:hover{background-color:var(--color-primary);color:var(--color-primary-contrast)}.persona-nav-button:active{transform:scale(.95)}.persona-slider-container{flex:1;overflow:hidden;position:relative;min-height:400px}.persona-slider-track{display:flex;transition:transform .3s ease-in-out;width:100%}.persona-character-wrapper--mobile{min-width:100%;flex-shrink:0;max-width:100%}.persona-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:.5rem 0 1rem}.persona-card{text-align:left;background:var(--color-overlay-bg);border:1px solid var(--color-border)}.persona-card--selected{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.persona-label{font-weight:600;margin-bottom:.25rem}.persona-desc{font-size:1rem;color:var(--color-text-muted)}@media(max-width:640px){.persona-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.persona-images-row-desktop{display:none}.persona-images-row-mobile{display:flex;width:100%;max-width:100%;overflow-x:hidden}.persona-character-wrapper--mobile{min-width:100%;padding-bottom:60px;overflow:visible}.persona-slider-container{overflow-x:hidden;overflow-y:visible;min-height:380px;width:100%;max-width:100%}.persona-character-image{max-height:300px}.persona-name-label{font-size:1rem;padding:.2rem .6rem;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.persona-tooltip{font-size:.85rem;max-width:none;min-width:0;white-space:nowrap;line-height:1.4}.persona-character-image--haruto{max-height:350px;transform:scale(1)}.persona-character-image--ren{max-height:250px;transform:scale(.8)}.persona-character-image--hina{max-height:270px;transform:scale(.85)}.persona-step-container{padding:1rem .5rem;width:100%;max-width:100%;overflow-x:hidden}.persona-slider-track{width:100%;max-width:100%}}.name-step-container{width:100%;max-width:1200px;margin:0 auto;padding:2rem 1rem}.name-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.name-step-character{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.name-step-speech-bubble{position:relative;background-color:var(--color-speech-bg);border:3px solid var(--color-speech-border);border-radius:20px;padding:1rem 1.5rem;font-size:1.3rem;font-weight:600;color:var(--color-text);line-height:1.6;margin-bottom:1.5rem;box-shadow:var(--color-speech-shadow);max-width:400px;text-align:center;z-index:2;white-space:pre-wrap}.name-step-speech-bubble:after{content:"";position:absolute;bottom:-15px;left:50%;transform:translate(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:15px solid var(--color-speech-border);z-index:1}.name-step-speech-bubble:before{content:"";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:13px solid var(--color-speech-pointer-inner);z-index:2}.name-step-character-image{max-height:450px;width:auto;height:auto;object-fit:contain}.name-step-content{display:flex;flex-direction:column;gap:1.5rem;width:100%}.name-step-hint{font-size:1rem;color:var(--color-hint-text);text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.1);margin:0}@media(max-width:640px){.name-step-container{padding:1rem .75rem}.name-step-grid{grid-template-columns:1fr;gap:2rem}.name-step-character-image{max-height:300px}.name-step-speech-bubble{font-size:1.1rem;padding:.75rem 1rem;max-width:100%;margin-bottom:1rem}.name-step-hint{font-size:.9rem;text-align:center}}.confirm-step-container{width:100%;max-width:1200px;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:2rem}.confirm-step-speech-wrapper{display:flex;justify-content:center;width:100%}.confirm-step-speech-bubble{position:relative;background-color:var(--color-speech-bg);border:3px solid var(--color-speech-border);border-radius:20px;padding:1rem 1.5rem;font-size:1.2rem;font-weight:600;color:var(--color-text);line-height:1.6;box-shadow:var(--color-speech-shadow);max-width:800px;width:100%;text-align:center;z-index:2;white-space:pre-wrap}.confirm-step-speech-bubble:after{content:"";position:absolute;bottom:-15px;left:20%;transform:translate(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:15px solid var(--color-speech-border);z-index:1}.confirm-step-speech-bubble:before{content:"";position:absolute;bottom:-12px;left:20%;transform:translate(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:13px solid var(--color-speech-pointer-inner);z-index:2}.confirm-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.confirm-step-character{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.confirm-step-character-image{max-height:450px;width:auto;height:auto;object-fit:contain}.confirm-step-content{display:flex;flex-direction:column;gap:1.5rem;width:100%;align-items:flex-start}@media(max-width:640px){.confirm-step-container{padding:1rem .75rem;gap:1.5rem}.confirm-step-speech-bubble{font-size:1rem;padding:.75rem 1rem}.confirm-step-speech-bubble:after,.confirm-step-speech-bubble:before{left:50%}.confirm-step-grid{grid-template-columns:1fr;gap:2rem}.confirm-step-character-image{max-height:300px}.confirm-step-content{align-items:center}}.chat-layout{position:relative;display:flex;flex-direction:column;gap:.75rem;height:auto;min-height:calc(100vh - 120px);width:100%;max-width:1400px;margin:0 auto;padding-top:1rem;padding-bottom:1rem;overflow:visible}.chat-overlay{position:relative;z-index:3;display:flex;flex-direction:column;gap:.75rem;background-color:var(--color-overlay-bg);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);min-height:500px;overflow:visible}.chat-messages{background:var(--color-overlay-muted);border-radius:16px;padding:1rem .75rem .75rem;display:flex;flex-direction:column;gap:.5rem;min-height:400px;overflow:visible}.chat-input-section{position:relative;z-index:2;display:flex;flex-direction:column;gap:0;background-color:var(--color-overlay-bg);border-radius:16px;padding:.5rem 1rem .75rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);flex-shrink:0;margin-top:1rem}.chat-character-upperbody-wrapper{display:flex;justify-content:center;align-items:flex-end;pointer-events:none;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:2;width:100%;max-width:1400px;height:50vh;padding-bottom:0}.chat-character-upperbody{max-height:50vh;width:auto;height:auto;object-fit:contain;object-position:center center;clip-path:polygon(0 0,100% 0,100% 50%,0 50%);transform:scale(2);transform-origin:center center}.chat-header{display:flex;justify-content:flex-start;align-items:center;gap:.75rem}.chat-title{font-size:1.4rem;font-weight:600;color:var(--color-text-strong)}.chat-subtitle{font-size:1.05rem;color:var(--color-subtitle-text)}.chat-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.1)}.chat-message{display:flex;gap:.75rem;max-width:88%;align-items:flex-start}.chat-message--user{align-self:flex-end;flex-direction:row-reverse}.chat-message--assistant{align-self:flex-start;flex-direction:row}.chat-message-icon{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--color-chat-icon-border);box-shadow:var(--color-chat-icon-shadow)}.chat-message-content-wrapper{padding:.5rem .75rem;border-radius:12px;background:var(--color-chat-bubble-bg);box-shadow:var(--color-chat-bubble-shadow)}.chat-message--user .chat-message-content-wrapper{background:var(--color-chat-user-bg);color:var(--color-chat-user-text)}.chat-message-meta{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.25rem;opacity:.9}.chat-message-speaker{font-weight:500}.chat-message-content{white-space:pre-wrap;font-size:1.25rem}.chat-input-row{display:flex;gap:.75rem}.chat-input-row textarea{flex:1;resize:none;min-height:80px;padding:.6rem .75rem;border-radius:12px;border:1px solid var(--color-input-border);font-size:1.25rem;background:var(--color-input-bg);color:var(--color-text)}.chat-input-actions{display:flex;flex-direction:column;gap:.5rem}.scroll-to-top-button{position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;border-radius:50%;background-color:var(--color-overlay-bg);border:2px solid var(--color-text-strong);color:var(--color-text-strong);font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10000;box-shadow:0 4px 12px #00000026;transition:opacity .3s,transform .3s,visibility .3s;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}.scroll-to-top-button.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.scroll-to-top-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0003}.scroll-to-top-button:active{transform:translateY(0)}@media(max-width:640px){.scroll-to-top-button{bottom:1.5rem;right:1.5rem;width:44px;height:44px;font-size:1.3rem}.chat-overlay{padding:1rem}.chat-input-section{padding:1rem .75rem .5rem}.chat-character-upperbody-wrapper{bottom:auto;top:0;height:auto;align-items:flex-start;padding-top:1rem}.chat-character-upperbody{max-height:none;width:90%;max-width:90%;transform:scale(1);object-fit:contain;clip-path:none}.chat-header{flex-direction:column;align-items:flex-start}.chat-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}.chat-message-icon{width:40px;height:40px}}