:root{--bg:#faf6f0;--surface:#fff;--surface-2:#f3ece2;--ink:#33291f;--ink-soft:#7a6c5d;--main:#b4533a;--main-strong:#96422c;--accent:#3a6b5b;--line:#e2d8c9;--radius:14px;--shadow:0 2px 10px #33291f12;color:var(--ink);background-color:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Noto Sans JP,sans-serif}*{box-sizing:border-box}body{background-color:var(--bg);min-height:100vh;margin:0}h1,h2,h3{margin:0;font-family:Zen Maru Gothic,sans-serif}button{cursor:pointer;border:none;font-family:inherit}.container{max-width:960px;margin:0 auto;padding:0 20px 80px}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;display:flex}.brand{align-items:baseline;gap:10px;display:flex}.brand h1{color:var(--main);letter-spacing:.04em;font-size:1.5rem;font-weight:900}.brand span{color:var(--ink-soft);font-size:.78rem}.key-button{background:var(--surface);border:1.5px solid var(--line);color:var(--ink);border-radius:999px;padding:8px 16px;font-size:.85rem;transition:border-color .15s}.key-button:hover{border-color:var(--main)}.key-button.unset{border-color:var(--main);color:var(--main);font-weight:700}.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px;padding:24px}.card h2{align-items:center;gap:10px;margin-bottom:16px;font-size:1.05rem;font-weight:700;display:flex}.step-badge{background:var(--main);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:.85rem;font-weight:700;display:inline-flex}.key-panel{border-top:2px dashed var(--line);margin-top:4px;padding-top:16px}.key-panel label{margin-bottom:8px;font-size:.85rem;font-weight:700;display:block}.key-row{flex-wrap:wrap;gap:8px;display:flex}.key-row input{border:1.5px solid var(--line);background:var(--surface);min-width:220px;color:var(--ink);border-radius:10px;flex:1;padding:10px 14px;font-family:inherit;font-size:.9rem}.key-row input:focus{outline:2px solid var(--main);outline-offset:1px;border-color:#0000}.key-note{color:var(--ink-soft);margin:10px 0 0;font-size:.78rem;line-height:1.7}.key-note a{color:var(--accent)}.mode-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}@media (width<=600px){.mode-grid{grid-template-columns:1fr}}.mode-card{text-align:left;background:var(--surface-2);border-radius:var(--radius);border:2px solid #0000;padding:18px;transition:border-color .15s,background-color .15s}.mode-card:hover{border-color:var(--line)}.mode-card.selected{border-color:var(--main);background:#fdf1ec}.mode-card .mode-title{color:var(--ink);margin-bottom:6px;font-family:Zen Maru Gothic,sans-serif;font-size:1rem;font-weight:700}.mode-card .mode-desc{color:var(--ink-soft);font-size:.8rem;line-height:1.7}.field{margin-bottom:18px}.field:last-child{margin-bottom:0}.field-label{margin-bottom:8px;font-size:.85rem;font-weight:700;display:block}.field-hint{color:var(--ink-soft);margin-left:8px;font-size:.78rem;font-weight:400}.subject-input{border:1.5px solid var(--line);background:var(--surface);width:100%;color:var(--ink);border-radius:10px;padding:12px 16px;font-family:inherit;font-size:1rem}.subject-input:focus{outline:2px solid var(--main);outline-offset:1px;border-color:#0000}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip{background:var(--surface-2);color:var(--ink);border:2px solid #0000;border-radius:999px;padding:8px 18px;font-size:.88rem;transition:border-color .15s,background-color .15s}.chip:hover{border-color:var(--line)}.chip.selected{border-color:var(--main);color:var(--main-strong);background:#fdf1ec;font-weight:700}.chip:disabled{opacity:.4;cursor:not-allowed}.slider-row{align-items:center;gap:14px;max-width:380px;display:flex}.slider-row input[type=range]{accent-color:var(--main);flex:1}.slider-value{color:var(--main);text-align:center;min-width:3.2em;font-family:Zen Maru Gothic,sans-serif;font-size:1.05rem;font-weight:700}.generate-button{background:var(--main);color:#fff;letter-spacing:.06em;border-radius:12px;width:100%;padding:15px;font-family:Zen Maru Gothic,sans-serif;font-size:1.05rem;font-weight:700;transition:background-color .15s}.generate-button:hover:not(:disabled){background:var(--main-strong)}.generate-button:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed}.error-box{color:var(--main-strong);background:#fbeae5;border:1.5px solid #e5b8aa;border-radius:10px;margin-top:14px;padding:12px 16px;font-size:.88rem;line-height:1.7}.result-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=600px){.result-grid{grid-template-columns:1fr}}.result-pane{text-align:center}.result-pane .pane-label{color:var(--ink-soft);margin-bottom:8px;font-size:.8rem;font-weight:700}.result-pane img{aspect-ratio:1;object-fit:contain;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;width:100%}.palette-row{flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;display:flex}.palette-label{color:var(--ink-soft);font-size:.8rem;font-weight:700}.palette-swatch{border:1.5px solid var(--line);border-radius:50%;width:26px;height:26px}.action-row{flex-wrap:wrap;gap:10px;margin-top:18px;display:flex}.action-button{background:var(--surface-2);color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:11px 20px;font-size:.9rem;font-weight:700;transition:border-color .15s}.action-button:hover:not(:disabled){border-color:var(--main)}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.action-button.primary:hover:not(:disabled){background:#2e5648}.loading{color:var(--ink-soft);justify-content:center;align-items:center;gap:12px;padding:36px 0;font-size:.9rem;display:flex}.spinner{border:3px solid var(--line);border-top-color:var(--main);border-radius:50%;width:22px;height:22px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.footer-note{color:var(--ink-soft);text-align:center;margin-top:8px;font-size:.78rem;line-height:1.8}