:root { --bg-light: #f4f4f4; --text-light: #333; --primary-light: #3498db; --bg-dark: #2c3e50; --text-dark: #ecf0f1; --primary-dark: #2ecc71; --radius: 8px; --transition: 0.3s; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; transition: background-color var(--transition), color var(--transition); } body.light { background: var(--bg-light); color: var(--text-light); } body.dark { background: var(--bg-dark); color: var(--text-dark); } .container { max-width: 800px; width: 95%; margin: 0 auto; padding: 20px; } .controls-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .theme-selector label, .file-type-selector label { margin-right: 5px; } .file-type-selector { display: flex; flex-wrap: wrap; gap: 10px; } .file-type-selector input[type="radio"] { /* カスタムラジオボタン */ appearance: none; width: 18px; height: 18px; border: 2px solid var(--primary-light); border-radius: 50%; position: relative; margin-right: 5px; cursor: pointer; } .file-type-selector input[type="radio"]:checked::before { content: ""; position: absolute; inset: 4px; background: var(--primary-light); border-radius: 50%; } textarea, pre { width: 100%; min-height: 300px; padding: 15px; margin: 15px 0; border: 1px solid #ccc; border-radius: var(--radius); font-family: "Courier New", monospace; resize: vertical; } .button-group { display: flex; gap: 10px; margin-bottom: 20px; } button { padding: 10px 15px; border: none; border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } button:active { transform: scale(0.98); } .stats-container { background: rgba(0, 0, 0, 0.05); border-radius: var(--radius); padding: 15px; margin-bottom: 20px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .stats div { display: flex; justify-content: space-between; } .hidden { display: none; } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 20px; border-radius: var(--radius); opacity: 0; transition: opacity var(--transition); } .toast.show { opacity: 1; } @media (max-width: 600px) { .controls-container { flex-direction: column; align-items: flex-direction: column;  align-items: flex-start; }} header{align-items: center;  background-color:white;font-weight:500;transition:color 0.2s;padding:15px 20px}footer{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2rem;padding:2rem;background-color:#f8f8f8;color:#666666;font-size:0.875rem}

a{font-size: 25px;}