*,
		*::before,
		*::after {
			box-sizing: border-box;
		}
        body {
            margin: 0;
            padding: 0;
            background: #ffffff;
            color: #111;
            font-family: system-ui, -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;

            background: #f8fafc;
            /* very light gray-blue */

        }

        .container {
            max-width: 860px;
            margin: 32px auto;
            padding: 48px 40px 64px;
            background: #ffffff;
            border-radius: 6px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .page-header {
            display: flex;
            gap: 16px;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
        }

        .site-logo {
            display: table;
            color: #6b7280;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0;
            text-decoration: none;
        }

        .site-logo span {
            color: #1e3a8a;
            font-weight: 700;
        }

        .site-logo:hover,
        .site-logo:focus {
            color: #374151;
            text-decoration: none;
        }

        .section-nav {
            position: relative;
            display: inline-block;
            margin: 0 0 0 auto;
            font-size: 14px;
        }

        .section-nav-toggle {
            appearance: none;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: transparent;
            color: #374151;
            cursor: pointer;
            font: inherit;
            font-weight: 500;
            line-height: 1.2;
            padding: 6px 10px;
            white-space: nowrap;
        }

        .section-nav-toggle:hover,
        .section-nav-toggle:focus {
            border-color: #93c5fd;
            color: #1e3a8a;
            outline: none;
        }

        .section-nav-toggle:focus-visible {
            box-shadow: 0 0 0 2px #dbeafe;
        }

        .section-nav-menu {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            z-index: 10;
            display: grid;
            width: max-content;
            min-width: 360px;
            max-width: calc(100vw - 80px);
            max-height: min(70vh, 420px);
            overflow-y: auto;
            padding: 6px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: #ffffff;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-2px);
            transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
        }

        .section-nav.is-open .section-nav-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .section-nav-link {
            display: block;
            border-radius: 4px;
            color: #374151;
            font-size: 13px;
            line-height: 1.35;
            padding: 7px 8px;
            text-decoration: none;
            white-space: nowrap;
        }

        .section-nav-link:hover,
        .section-nav-link:focus {
            background: #f8fafc;
            color: #1e3a8a;
            outline: none;
        }

        .section-nav-link:focus-visible {
            box-shadow: inset 0 0 0 2px #dbeafe;
        }

        .section-nav-link[aria-current="page"] {
            background: #f8fafc;
            color: #111827;
            font-weight: 600;
        }

        h1 {
            font-size: 28px;
            font-weight: 600;
            margin-top: 12px;
            margin-bottom: 32px;
            color: #1e3a8a;
        }

        .section-nav + h1 {
            margin-top: 0;
        }

        .page-header + h1 {
            margin-top: 0;
        }

        .scenario-page h1 {
            margin-bottom: 8px;
        }

        .page-description {
            font-size: 16px;
            margin: 0 0 28px;
            color: #4b5563;
        }

        .checker-hero {
            margin: 0;
            padding: 0;
        }

        .checker-action {
            margin: 2rem 0 3rem;
            padding: 1.25rem;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #f9fafb;
        }

        .checker-action-title {
            margin: 0 0 0.4rem;
            font-size: 1rem;
            line-height: 1.4;
            font-weight: 700;
            color: #1f2937;
        }

        .checker-action-description {
            margin: 0 0 1rem;
            font-size: 0.95rem;
            line-height: 1.5;
            color: #4b5563;
        }

        .checker-form {
            display: flex;
            gap: 12px;
            align-items: stretch;
            max-width: 820px;
            margin: 0 auto;
			flex-wrap: wrap;
        }

        .checker-input {
            flex: 1;
            height: 52px;
            padding: 0 16px;
            font-size: 16px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
			min-width: 0;
        }

        .checker-input:focus {
            outline: none;
            border-color: #93c5fd;
            /* blue-300 */
            box-shadow: 0 0 0 2px #dbeafe;
            /* very soft blue halo */
        }

        .checker-button {
            height: 52px;
            padding: 0 24px;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.02em;
            border: 1px solid #2563eb;
            border-radius: 6px;
            background: #2563eb;
            color: #fff;
            cursor: pointer;
			min-width: 0;
        }

        .checker-button:disabled {
            background: #e5e7eb;
            border-color: #e5e7eb;
            color: #9ca3af;
            cursor: not-allowed;
        }

        .checker-hint {
            font-size: 14px;
            color: #6b7280;
            max-width: 820px;
            margin: 12px auto 0;
            min-height: 23px;
            padding-left: 16px;
        }

        h2 {
            font-size: 20px;
            font-weight: 600;
            margin: 0 0 16px 0;
            color: #111;
        }

        strong {
            font-weight: 600;
            color: #374151;
            /* slate-700 */
        }

        .disclaimer {
            margin-top: 64px;
            font-size: 13px;
            color: #9ca3af;
            padding-top: 24px;
        }

        .disclaimer strong {
            color: #6b7280;
        }

        #results-slot {
            max-width: 820px;
            margin: 0 auto 32px;
            min-height: 230px;
        }

        .mini-faq {
            padding-top: 18px;
        }

        .mini-faq h2 {
            margin: 0 0 0px;
            font-size: 16px;
            color: #374151;
        }

        .mini-faq p {
            margin: 0 0 18px;
            color: #6b7280;
            font-size: 14px;
        }

        .mini-faq .related-inline {
            margin-top: 1.25rem;
            margin-bottom: 0;
            font-size: 0.95rem;
            line-height: 1.5;
            color: #4b5563;
        }

        .mini-faq .related-inline strong {
            color: #1f2937;
        }

        .mini-faq .related-inline a {
            color: #1e40af;
            font-weight: 600;
            text-decoration: none;
        }

        .mini-faq .related-inline a:hover,
        .mini-faq .related-inline a:focus {
            text-decoration: underline;
        }

        .mini-faq .related-inline a:focus-visible {
            border-radius: 3px;
            outline: 2px solid #bfdbfe;
            outline-offset: 2px;
        }

        .mini-faq ul {
            display: grid;
            gap: 8px;
            margin: -6px 0 18px;
            padding: 0;
            list-style: none;
            color: #4b5563;
            font-size: 14px;
        }

        .mini-faq h2 + ul {
            margin-top: 12px;
        }

        .mini-faq li {
            position: relative;
            padding-left: 18px;
            line-height: 1.45;
        }

        .mini-faq li::before {
            content: "";
            position: absolute;
            top: 0.65em;
            left: 2px;
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: #2563eb;
            box-shadow: 0 0 0 3px #dbeafe;
            transform: translateY(-50%);
        }

        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 230px;
            font-size: 15px;
            color: #6b7280;
            letter-spacing: 0.02em;
            animation: fadePulse 1.6s ease-in-out infinite;
        }

        .page-footer {
            margin-top: 64px;
            color: #6b7280;
            /* slate-500 */
            font-size: 13px;
        }

        .page-footer .footer-block {
            margin-bottom: 24px;
        }

        .page-footer strong {
            color: #374151;
            /* slate-700 */
            font-weight: 600;
        }

        .page-footer a {
            color: #374151;
            /* slate-700 */
            font-weight: 600;
            text-decoration: none;
        }

        .page-footer a:hover,
        .page-footer a:focus {
            text-decoration: underline;
        }

        .result-error {
            min-height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: left;
            padding: 24px 28px;
            background: #f8fafc;
            border-radius: 6px;
            border: 1px solid #e5e7eb;
            color: #374151;
            font-size: 15px;
            line-height: 1.5;
        }

        @keyframes fadePulse {
            0% {
                opacity: 0.4;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0.4;
            }
        }

        .is-hidden {
            display: none;
        }
		
		.print-actions {
			max-width: 820px;
			margin: 0 auto 6px;
			text-align: right;
		}

		.print-button {
			background: #ffffff;
			border: 1px solid #d1d5db;
			border-radius: 6px;
			font-size: 13px;
    		padding: 5px 10px;
			line-height: 1.2;
			font-weight: 500;
			color: #374151;
			cursor: pointer;
		}

		.print-button:hover {
			background: #f9fafb;
		}

        @media (max-width: 480px) {
            body {
                line-height: 1.5;
            }

			.print-actions {
		        display: none;
		    }

			.checker-result {
			    transform: scale(0.85);
			    transform-origin: top center;
			    width: 118%;
			    margin-left: -9%;
				margin-top: 5px;
				margin-bottom: -14%;
  			}

            .container {
                padding: 32px 20px 48px;
            }

            h1 {
                font-size: 20px;
				line-height: 1.3;
				margin-bottom: 24px;
            }

            h2 {
                font-size: 19px;
            }

            .mini-faq h2 {
                font-size: 14px;
                margin-bottom: 0px;
            }

            .mini-faq p {
                font-size: 13px;
                margin-bottom: 14px;
            }

            .checker-action {
                margin: 1.5rem 0 2.25rem;
                padding: 1rem;
            }

            .checker-action-title {
                font-size: 1rem;
            }

            .checker-action-description,
            .mini-faq .related-inline {
                font-size: 13px;
            }

            .mini-faq ul {
                gap: 7px;
                margin-bottom: 14px;
                font-size: 13px;
            }

            .mini-faq h2 + ul {
                margin-top: 10px;
            }

			.checker-input {
				height: auto;              
				padding: 12px 14px;        
				font-size: 16px;           
				line-height: 1.3;          
			}
			
			.checker-input::placeholder {
				font-size: 15px;
			}
			
			.checker-button {
				height: 48px;
				width: 100%;
			}
			
			.checker-form {
				flex-direction: column;
				gap: 10px;
			}

            .page-description {
                font-size: 15px;
                    margin: 0 0 18px;
            }

            .site-logo {
                font-size: 14px;
            }

            .page-header {
                display: block;
                margin-bottom: 0;
            }

            .section-nav {
                display: block;
                width: 100%;
                margin-top: 12px;
                margin-bottom: 16px;
            }

            .section-nav-toggle {
                width: auto;
                text-align: left;
                padding: 6px 9px;
            }

            .section-nav-menu {
                position: static;
                display: none;
                width: 100%;
                min-width: 0;
                max-width: none;
                max-height: none;
                margin-top: 6px;
                opacity: 1;
                transform: none;
                visibility: visible;
            }

            .section-nav-link {
                white-space: normal;
            }

            .section-nav.is-open .section-nav-menu {
                display: grid;
            }

        }
		
		@media print {

			body {
				background: #ffffff !important;
			}
			
            .page-header {
                display: block !important;
                margin: 0 0 18px !important;
            }

            .site-logo {
                display: inline-block !important;
            }

			/* Hide everything except the logo and report */
            .section-nav,
            h1,
            .page-description,
			.checker-hero,
            .checker-action,
			.checker-form,
			.checker-hint,
            .mini-faq,
			.page-footer,
			.result-error,
			.print-actions {
				display: none !important;
			}

			.container {
				box-shadow: none !important;
				margin: 0 !important;
				padding: 0 !important;
				max-width: none !important;
			}

			#results-slot {
				margin: 0 auto;
				max-width: 820px;
			}

			.checker-result {
				margin: 0 auto;
			}

			.checker-result * {
				page-break-inside: avoid;
				break-inside: avoid;
			}
		}