:root {
            --bg-body: #f4f6fa;
            --bg-card: #ffffff;
            --bg-card-alt: #f8f9fc;
            --bg-coord: #f8f9fc;
            --bg-coord-th: #eef1f7;
            --bg-input: #ffffff;
            --bg-canvas: #ffffff;
            --border-color: #e0e4ea;
            --border-light: #ecf0f5;
            --text-primary: #1a2634;
            --text-secondary: #5e6f8d;
            --text-muted: #6c7a94;
            --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
            --pcd-color: #0d6efd;
            --hole-color: #dc3545;
            --center-color: #6c757d;
            --radial-color: #b0c4de;
            --axis-color: #ccccdd;
            --legend-bg: rgba(255,255,255,0.8);
        }
        .tool-card,
        .pcd-result-card {
            background: var(--bg-card);
            border-color: var(--border-light);
            box-shadow: var(--shadow-card);
            transition: background 0.2s, border-color 0.2s;
        }
        .coord-output {
            background: var(--bg-coord);
            border-color: var(--border-color);
            color: var(--text-primary);
        }
        .coord-output th {
            background: var(--bg-coord-th);
            color: var(--text-primary);
        }
        .coord-output td {
            border-bottom-color: var(--border-light);
        }
        .coord-output tr:hover {
            background: rgba(13, 110, 253, 0.04);
        }
        .canvas-wrap {
            background: var(--bg-card-alt);
            border-color: var(--border-color);
        }
        .canvas-wrap canvas {
            background: var(--bg-canvas);
        }
        .pcd-result-card .stat {
            border-bottom-color: var(--border-light);
        }
        .pcd-result-card .label {
            color: var(--text-secondary);
        }
        .pcd-result-card .value {
            color: var(--text-primary);
        }
        .example-pills .pill {
            background: #eef3fa;
            border-color: #d5dce6;
            color: #1f2a3a;
        }
        .example-pills .pill:hover {
            background: #d0dcee;
            border-color: #8aa3c9;
        }
        .badge-eeat {
            background: #e7f0fa;
            color: #1a4b7a;
        }
        .privacy-badge {
            background: #e6f2e6;
            color: #1d6b2e;
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --bg-body: #121212;
                --bg-card: #1e1e1e;
                --bg-card-alt: #252525;
                --bg-coord: #2a2a2a;
                --bg-coord-th: #333333;
                --bg-input: #2a2a2a;
                --bg-canvas: #1a1a1a;
                --border-color: #3a3a3a;
                --border-light: #2e2e2e;
                --text-primary: #e8e8e8;
                --text-secondary: #a0b0c8;
                --text-muted: #8899aa;
                --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.6);
                --pcd-color: #4d8cff;
                --hole-color: #ff6b7a;
                --center-color: #9aa8b9;
                --radial-color: #4a5a6a;
                --axis-color: #555566;
                --legend-bg: rgba(30,30,30,0.85);
            }
            .navbar-brand, .page-header {
                background-color: #1a1a1a;
                border-bottom: 1px solid #333;
            }
            .breadcrumb-item a {
                color: #8ab4f8;
            }
            .breadcrumb-item.active {
                color: #aaa;
            }
            .footer h4, .footer h5 {
                color: #eee;
            }
            .footer a, .footer .text-muted {
                color: #aaa !important;
            }
            .example-pills .pill {
                background: #2c2c2c;
                border-color: #444;
                color: #ddd;
            }
            .example-pills .pill:hover {
                background: #3a3a4a;
                border-color: #6688aa;
            }
            .badge-eeat {
                background: #1a2a3a;
                color: #7ab0e0;
            }
            .privacy-badge {
                background: #1a2a1a;
                color: #6ab06a;
            }
            .btn-outline-secondary:hover {
                background: #333;
                color: #fff;
            }
            .accordion-item {
                background: var(--bg-card);
                border-color: var(--border-color);
            }
            .accordion-button {
                background: var(--bg-card);
                color: var(--text-primary);
            }
            .accordion-button:not(.collapsed) {
                background: #2a2a3a;
                color: #eee;
            }
            .accordion-.property-table td {
                border-color: #333;
            }
            .formula-box {
                background: #1a2a3a;
                border-left-color: #4d8cff;
                color: #ddd;
            }
            .reference-list a {
                color: #8ab4f8;
            }
            .coord-output tr:hover {
                background: rgba(77, 140, 255, 0.08);
            }
            .related-name a {
                color: #8ab4f8;
            }
            .related-desc {
                color: #999;
            }
            .toast {
                background: #1a2a1a !important;
                color: #eee !important;
            }
            }
        @media print {
            .navbar, .page-header, .footer, .related-tools, #rightSidebar, .example-pills,
            .btn, .angle-unit-toggle, .badge-eeat, .privacy-badge, .social-icons,
            #searchToggleBtn, #searchInputWrapper, .coord-copy-btn, #exportBtn {
                display: none !important;
            }
            .tool-card, .pcd-result-card, .canvas-wrap {
                box-shadow: none !important;
                border: 1px solid #ccc !important;
                background: #fff !important;
            }
            .coord-output {
                max-height: 300px !important;
                overflow: visible !important;
            }
            .canvas-wrap canvas {
                max-width: 100% !important;
                height: auto !important;
            }
            .deep-content h4, .deep-content h2 {
                color: #000 !important;
            }
            .formula-box {
                background: #f4f4f4 !important;
                border-left-color: #0066cc !important;
                color: #000 !important;
            }
            .property-table td, }
        .coord-output {
            font-family: 'Courier New', monospace;
            border-radius: 6px;
            padding: 0.75rem 1rem;
            max-height: 220px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            font-size: 0.9rem;
        }
        .coord-output table {
            width: 100%;
            border-collapse: collapse;
        }
        .coord-output th,
        .coord-output td {
            padding: 0.3rem 0.6rem;
            border-bottom: 1px solid var(--border-light);
            text-align: center;
        }
        .coord-output th {
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .hole-marker {
            font-size: 0.75rem;
            color: #2c3e50;
        }
        .pcd-result-card {
            border-radius: 8px;
            padding: 1.25rem;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--border-light);
            margin-bottom: 1rem;
        }
        .pcd-result-card .stat {
            display: flex;
            justify-content: space-between;
            padding: 0.3rem 0;
            border-bottom: 1px solid var(--border-light);
        }
        .pcd-result-card .stat:last-child {
            border-bottom: none;
        }
        .pcd-result-card .label {
            font-weight: 500;
        }
        .pcd-result-card .value {
            font-weight: 600;
        }
        .canvas-wrap {
            border-radius: 10px;
            border: 1px solid var(--border-color);
            padding: 0.5rem;
            margin-top: 1rem;
        }
        .canvas-wrap canvas {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 6px;
        }
        .legend-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.5rem;
            margin: 0.75rem 0 0.25rem;
            font-size: 0.85rem;
        }
        .legend-row .item {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .legend-row .dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .dot.pcd {
            background: var(--pcd-color);
        }
        .dot.hole {
            background: var(--hole-color);
        }
        .dot.center {
            background: var(--center-color);
        }
        .example-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 0.75rem 0 1rem;
        }
        .example-pills .pill {
            background: #eef3fa;
            border: 1px solid #d5dce6;
            border-radius: 20px;
            padding: 0.3rem 1rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
            font-weight: 500;
        }
        .example-pills .pill:hover {
            transform: translateY(-1px);
        }
        .example-pills .pill i {
            margin-right: 4px;
            font-size: 0.7rem;
        }
        .angle-unit-toggle {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            margin-top: 0.3rem;
        }
        .angle-unit-toggle .btn-group .btn {
            font-size: 0.8rem;
            padding: 0.2rem 0.8rem;
        }
        .coord-copy-btn, #exportBtn {
            font-size: 0.8rem;
            padding: 0.2rem 0.8rem;
        }
        .deep-content {
            line-height: 1.7;
        }
        .deep-content h4 {
            margin-top: 2rem;
            margin-bottom: 0.75rem;
            font-weight: 600;
        }
        .deep-content h5 {
            margin-top: 1.5rem;
            font-weight: 600;
        }
        .deep-content .formula-box {
            background: #f2f6fc;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            border-left: 4px solid var(--pcd-color);
            margin: 1.25rem 0;
            font-family: 'Cambria Math', 'Times New Roman', serif;
            font-size: 1.1rem;
            text-align: center;
        }
        .deep-content ul.checklist {
            list-style: none;
            padding-left: 0;
        }
        .deep-content ul.checklist li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--pcd-color);
            margin-right: 0.6rem;
        }
        .badge-eeat {
            border-radius: 30px;
            padding: 0.4rem 1.2rem;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            display: inline-block;
            margin-bottom: 0.5rem;
        }
        .privacy-badge {
            border-radius: 30px;
            padding: 0.3rem 1rem;
            font-size: 0.8rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .reference-list {
            font-size: 0.9rem;
        }
        .reference-list a {
            text-decoration: none;
        }
        .reference-list a:hover {
            text-decoration: underline;
        }
        .property-table th,
        .property-table td {
            padding: 0.5rem 0.75rem;
            border: 1px solid var(--border-light);
            text-align: left;
        }
        @media (max-width: 576px) {
            .coord-output {
                font-size: 0.75rem;
                padding: 0.5rem;
            }
            .coord-output th,
            .coord-output td {
                padding: 0.2rem 0.3rem;
            }
        }
        .related-content {
            flex: 1;
        }
        .related-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        .related-name a {
            color: var(--pcd-color);
            text-decoration: none;
        }
        .related-name a:hover {
            text-decoration: underline;
        }
        .related-desc {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .related-tools-container {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }