:root{--bg: #0f1117;--surface: #1a1d27;--surface-2: #232733;--border: #2e3340;--text: #e8eaf0;--muted: #969db0;--accent: #38e1a4;--accent-2: #6c8cff;--danger: #ff6b6b;--radius: 14px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}#app{max-width:720px;margin:0 auto;padding:24px 18px 64px}.brand{display:flex;align-items:center;gap:10px;margin-bottom:4px}.brand .logo{font-size:30px;line-height:1}.brand h1{font-size:22px;font-weight:700;letter-spacing:-.01em}.tagline{color:var(--muted);font-size:14px;margin-bottom:8px}.usehint{color:var(--muted);font-size:12.5px;line-height:1.55;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:9px 12px;margin-bottom:22px}.prompt-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:26px}.prompt-box label{font-size:13px;color:var(--muted);display:block;margin-bottom:8px}.prompt-row{display:flex;gap:8px}.prompt-row input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:15px}.prompt-row input:focus{outline:none;border-color:var(--accent-2)}button{cursor:pointer;border:none;border-radius:10px;font-size:14px;font-weight:600;padding:11px 16px;color:#0b1015;background:linear-gradient(135deg,var(--accent),var(--accent-2));transition:transform .06s ease,opacity .2s ease}button:active{transform:translateY(1px)}button.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.phase2-note{margin-top:10px;font-size:12.5px;color:var(--accent);background:#38e1a414;border:1px dashed rgba(56,225,164,.35);border-radius:10px;padding:9px 12px;display:none}.phase2-note.show{display:block}.section-title{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.clear-recent{background:transparent;border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;line-height:1;padding:4px 9px;margin-left:10px;border-radius:8px;box-shadow:none;transition:color .15s ease,border-color .15s ease}.clear-recent:hover{color:var(--danger);border-color:var(--danger)}.reset-launcher{display:block;margin:14px auto 0;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;line-height:1.2;padding:6px 12px;border-radius:8px;box-shadow:none;transition:color .15s ease,border-color .15s ease}.reset-launcher:hover{color:var(--danger);border-color:var(--danger)}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:border-color .15s ease,transform .08s ease}.card:hover{border-color:var(--accent-2);transform:translateY(-2px)}.card .icon{font-size:26px}.card .star{position:absolute;top:8px;right:8px;background:transparent;border:none;padding:4px;font-size:18px;line-height:1;color:var(--muted);border-radius:8px;box-shadow:none;transition:transform .08s ease,color .15s ease}.card .star:active{transform:scale(.9)}.card .star.on{color:#ffd45e}.card h3{font-size:15px;margin:8px 0 4px}.card p{font-size:12.5px;color:var(--muted)}.tool-view{animation:fade .2s ease}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.tool-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}.tool-head .back{background:var(--surface-2);color:var(--text);border:1px solid var(--border);padding:8px 12px;font-size:13px}.tool-head h2{font-size:18px}.tool-body{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}.big-num{font-size:52px;font-weight:800;text-align:center;margin:8px 0 18px;font-variant-numeric:tabular-nums}.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.field{margin-bottom:14px}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);font-size:15px}.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent-2)}.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.result{margin-top:14px;padding:14px;background:var(--surface-2);border-radius:10px;font-size:15px}.result strong{color:var(--accent);font-size:20px}.pick-out{font-size:26px;font-weight:700;text-align:center;min-height:40px;color:var(--accent);margin:10px 0}.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:40px}.section-title .hint{text-transform:none;letter-spacing:0;font-size:11px;color:var(--muted);opacity:.7;margin-left:6px}.card.draggable{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.card.dragging{cursor:grabbing;opacity:.92;transform:scale(1.03);border-color:var(--accent);box-shadow:0 10px 28px #00000073;z-index:5}.tool-actions{margin-top:14px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}.copy-btn,.share-btn,.handoff-btn{font-size:13px;padding:9px 14px;min-width:140px}.handoff-btn{color:var(--accent);border-color:#38e1a466;background:#38e1a414}.handoff-btn:hover{border-color:var(--accent)}.related-section{margin-top:22px}.related-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.related-card{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:14px;font-weight:500;border-radius:12px;text-align:left;color:var(--text);background:var(--surface-2);border:1px solid var(--border);transition:border-color .15s ease,transform .08s ease}.related-card:hover{border-color:var(--accent);transform:translateY(-1px)}.related-icon{font-size:20px;line-height:1}.related-name{font-size:13px;font-weight:600}.pw-row{display:flex;gap:8px}.pw-row input{flex:1}.pw-row button{min-width:48px;padding:10px 12px}.pw-meter{height:8px;background:var(--bg);border:1px solid var(--border);border-radius:999px;overflow:hidden;margin:4px 0}.pw-bar{height:100%;width:0;background:var(--border);border-radius:999px;transition:width .2s ease,background .2s ease}.pw-tips{font-size:12.5px;color:var(--muted)}.color-swatch{transition:background .15s ease}