body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; line-height: 1.6; }
        h1 { color: #333; }
        .artifact { margin-bottom: 40px; }
        figure { margin: 0; margin-top: 10px; }
        figcaption { font-style: italic; color: #555; margin-top: 8px; font-size: 0.9em; }
        img { max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; }
        code { background: #f4f4f4; padding: 2px 5px; border-radius: 3px; }
        a { color: #0056b3; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.2s ease, text-decoration-thickness 0.2s ease; }
        a:hover { text-decoration-thickness: 2px; color: #003d82; }
        a:focus-visible { outline: 3px solid #0056b3; outline-offset: 3px; border-radius: 2px; text-decoration-thickness: 2px; }
        a:active { color: #00224f; text-decoration-thickness: 2px; }
        abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
        abbr[title]:focus-visible { outline: 3px solid #0056b3; outline-offset: 3px; border-radius: 2px; }
        a abbr[title] { cursor: inherit; }
        .copyable-text {
            user-select: all;
            -webkit-user-select: all;
            cursor: copy;
            padding: 2px 4px;
            padding-right: 24px;
            border-radius: 3px;
            transition: background-color 0.2s ease;
            position: relative;
            display: inline-block;
        }
        .copyable-text::after {
            content: "";
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            width: 14px;
            height: 14px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>');
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.5;
            transition: opacity 0.2s ease;
        }
        .copyable-text:hover {
            background-color: #e0e0e0;
        }
        .copyable-text:active {
            background-color: #d0d0d0;
            transform: scale(0.98);
        }
        .copyable-text:focus-visible {
            outline: 2px solid #0056b3;
            outline-offset: 1px;
        }
        .copyable-text:hover::after, .copyable-text:focus-visible::after {
            opacity: 1;
        }
        @media (prefers-reduced-motion: no-preference) {
            html { scroll-behavior: smooth; }
            :target:not(body):not(main) {
                animation: target-highlight 2s ease-out;
                border-radius: 4px;
            }
        }
        [id] { scroll-margin-top: 2rem; }
        [tabindex="-1"]:focus { outline: none; }
        a[href="#main-content"] { position: absolute; left: -9999px; z-index: 999; }
        a[href="#main-content"]:focus-visible {
            position: absolute;
            top: 10px;
            left: 10px;
            background: white;
            padding: 10px;
            border: 2px solid #0056b3;
            border-radius: 4px;
        }

        kbd {
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-shadow: 0 1px 0 rgba(0,0,0,0.2);
            color: #333;
            display: inline-block;
            font-size: 0.85em;
            font-family: monospace;
            padding: 2px 5px;
            margin: 0 2px;
        }

        .toast {
            visibility: hidden;
            min-width: 250px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            padding: 12px;
            position: fixed;
            z-index: 1000;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            font-size: 0.9em;
            opacity: 0;
            transition: opacity 0.3s, bottom 0.3s, visibility 0.3s;
            pointer-events: none;
        }

        .toast.show {
            visibility: visible;
            opacity: 1;
            bottom: 50px;
        }

        .copy-success {
            background-color: #d4edda !important;
            color: #155724;
        }

        .copy-success::after {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23155724" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
            opacity: 1;
        }

        .copy-error {
            background-color: #f8d7da !important;
            color: #721c24;
        }

        .copy-error::after {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23721c24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
            opacity: 1;
        }

        /* Target Highlight Animation */
        @keyframes target-highlight {
            0% { background-color: transparent; }
            30% { background-color: rgba(255, 215, 0, 0.4); }
            100% { background-color: transparent; }
        }

        .tip {
            font-size: 0.9em;
            color: #555;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }