:root{color-scheme:dark;--bg: #08111d;--panel: #0f1f35;--text: #ecf2f9;--muted: #b7c7da;--line: #294666;--focus: #5b9bd5}:root[data-theme=light]{color-scheme:light;--bg: #eaf1f8;--panel: #ffffff;--text: #1a2d42;--muted: #4c647c;--line: #a9bfd6;--focus: #2563eb}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--panel) 60%,var(--bg) 40%) 0%,var(--bg) 55%);color:var(--text);font-family:IBM Plex Sans,Segoe UI,sans-serif;line-height:1.6;-webkit-text-size-adjust:100%}.skip-link{position:absolute;left:-10000px;top:auto;z-index:100}.skip-link:focus-visible{left:1rem;top:1rem;background:var(--panel);color:var(--text);padding:.6rem 1rem;border:2px solid var(--line);border-radius:.5rem;font-weight:600}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.page{max-width:1100px;margin:0 auto;padding:1rem;display:grid;gap:1rem;overflow-x:hidden;word-wrap:break-word}.hero{position:relative;border:1px solid var(--line);border-radius:1rem;padding:1rem;background:var(--panel)}.panel{border:1px solid var(--line);border-radius:1rem;padding:1rem;background:var(--panel);display:grid;gap:.6rem;animation:reveal .42s ease both}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.theme-toggle{position:absolute;top:.5rem;right:.5rem;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;line-height:1;cursor:pointer;z-index:10}.theme-toggle:hover{background:var(--bg)}label{font-weight:600}textarea,input,select,button{border:1px solid var(--line);border-radius:.65rem;background:var(--panel);color:var(--text);font:inherit;min-height:44px;font-size:1rem}textarea,input,select{padding:.55rem;width:100%;max-width:100%}textarea{min-height:5rem;resize:vertical}button{padding:.55rem .8rem;cursor:pointer}button:hover{background:var(--bg)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}a{color:var(--text)}.three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.card{border:1px solid var(--line);border-radius:.8rem;padding:.7rem;background:color-mix(in srgb,var(--panel) 85%,var(--bg) 15%)}.card h3{margin-top:0}.btn-row{display:flex;flex-wrap:wrap;gap:.5rem}h1{margin:0}p{color:var(--muted)}ul{margin:0;padding-left:1.2rem;color:var(--text)}.hex{margin:0;padding:.7rem;border:1px solid var(--line);border-radius:.7rem;background:color-mix(in srgb,var(--panel) 75%,var(--bg) 25%);min-height:4.2rem;overflow:auto;white-space:pre-wrap;word-break:break-word;color:var(--text);font-family:IBM Plex Mono,Consolas,Menlo,monospace;font-size:.875rem}.hex:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}.note{margin:0}@media (max-width: 900px){.three-grid{grid-template-columns:1fr}}@media (max-width: 600px){.page{padding:.5rem}.hero,.panel,.card{padding:.75rem;border-radius:.7rem}h1{font-size:1.35rem}h2{font-size:1.15rem}h3{font-size:1rem}.hex{font-size:.8rem;padding:.5rem;min-height:3rem}.btn-row{flex-direction:column}.btn-row button{width:100%}}@media (prefers-reduced-motion: reduce){.panel{animation:none}}