:root{--background:oklch(100% 0 0);--foreground:oklch(14.1% .005 285.823);--primary:oklch(21% .006 285.885);--primary-foreground:oklch(98.5% 0 0);--muted:oklch(96.7% .001 286.375);--muted-foreground:oklch(55.2% .016 285.938);--destructive:oklch(57.7% .245 27.325);--border:oklch(92% .004 286.32);--radius:.625rem;color:var(--foreground);background:var(--background);font-family:system-ui,sans-serif;font-size:14px;line-height:1.5}body{min-height:100svh;margin:0}header{flex-direction:column;align-items:flex-end;padding:1rem 1.5rem;font-size:12px;display:flex}main{flex-direction:column;gap:1rem;max-width:36rem;margin:0 auto;padding:2.5rem 1.5rem;display:flex}h1{margin:0;font-size:1.25rem;font-weight:600}p{margin:0}p:empty{display:none}.muted{color:var(--muted-foreground)}.error{color:var(--destructive)}.warning{border:1px solid var(--destructive);border-radius:var(--radius);color:var(--destructive);padding:1rem;font-weight:500}.notice{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;font-weight:500}.stack{flex-direction:column;gap:1rem;display:flex}.button{border-radius:var(--radius);background:var(--primary);height:2.25rem;color:var(--primary-foreground);font:inherit;cursor:pointer;border:0;align-self:flex-start;align-items:center;padding:0 1rem;font-weight:500;text-decoration:none;display:inline-flex}.button:hover{opacity:.9}.field{flex-direction:column;gap:.25rem;font-weight:500;display:flex}.input{border:1px solid var(--border);border-radius:var(--radius);width:8rem;height:2.25rem;font:inherit;text-transform:uppercase;letter-spacing:.1em;padding:0 .75rem;font-family:ui-monospace,monospace}.code{border:1px solid var(--border);border-radius:var(--radius);color:var(--muted-foreground);grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.5rem 1rem;margin:0;padding:1rem 1rem 1rem 2.5rem;display:grid}.code span{color:var(--foreground);letter-spacing:.1em;font-family:ui-monospace,monospace;font-size:1rem}.hex{border-radius:var(--radius);background:var(--muted);overflow-wrap:anywhere;padding:1rem;font-family:ui-monospace,monospace;font-size:12px}.row{gap:.5rem;display:flex}.button.outline{border:1px solid var(--border);background:var(--background);color:var(--foreground)}.name{overflow-wrap:anywhere;font-size:1rem;font-weight:600}.words{border:1px solid var(--border);border-radius:var(--radius);letter-spacing:.05em;word-spacing:.5em;padding:1rem;font-family:ui-monospace,monospace;font-size:1.25rem}
