@charset "UTF-8";body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#1f2937;background-color:#fff}*,*:before,*:after{box-sizing:border-box}html{font-size:1rem;scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#1f2937;background:linear-gradient(135deg,#fff,#f8fafc);min-height:100vh}*:focus-visible{outline:2px solid #2563eb;outline-offset:2px}*:focus:not(:focus-visible){outline:none}button{border:none;background:none;font-family:inherit;cursor:pointer}ul,ol{list-style:none;margin:0;padding:0}img,svg{max-width:100%;height:auto}input,textarea,select{font-family:inherit;font-size:inherit}.app{min-height:100vh;display:flex;flex-direction:column;max-width:790px;margin:0 auto;padding:1rem}@media (max-width: 640px){.app{padding:.75rem}}.app-header{text-align:center;margin-bottom:2rem;padding:2rem 0}.app-header h2,.app-header h3{font-weight:600;color:#1f2937;margin:0 0 .75rem}.app-header h2{font-size:1.5rem;font-weight:700}.app-header h3{font-size:1.25rem}.app-header p{font-size:1rem;color:#6b7280;max-width:600px;margin:0 auto}.app-header .app-title{font-size:1.875rem;font-weight:800;color:#1f2937;margin:0 0 1rem;letter-spacing:-.025em}@media (max-width: 640px){.app-header .app-title{font-size:1.5rem}}.app-header .app-description{font-size:1.125rem;color:#6b7280;margin:0 auto}@media (max-width: 640px){.app-header .app-description{font-size:1rem}}.app-main{flex:1;display:flex;flex-direction:column;gap:2rem}.input-section{display:flex;flex-direction:column;gap:.75rem}.input-section .input-label{font-size:.875rem;font-weight:500;color:#1f2937;display:block}.input-section .text-input{width:100%;padding:1rem;border:2px solid #e2e8f0;border-radius:.5rem;font-size:1rem;line-height:1.5;color:#1f2937;background-color:#fff;font-family:inherit;transition:all .2s ease-in-out;appearance:none;resize:vertical;min-height:160px}.input-section .text-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.input-section .text-input::placeholder{color:#9ca3af}.input-section .input-hints .hint-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}@media (max-width: 640px){.input-section .input-hints .hint-row{flex-direction:column;align-items:flex-start}}.input-section .input-hints .hint{font-size:.875rem;color:#9ca3af}.input-section .input-hints .hint kbd{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.125rem;padding:2px 6px;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:.8em;color:#6b7280}.input-section .input-hints .char-count{font-size:.875rem;color:#9ca3af;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;background:#f8fafc;padding:.25rem .5rem;border-radius:.125rem;border:1px solid #e2e8f0}.recent-section .recent-title{font-size:1.125rem;font-weight:600;margin-bottom:.75rem;color:#6b7280}.recent-section .recent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.5rem}.recent-section .recent-grid .recent-button{display:inline-flex;align-items:center;border:none;border-radius:.375rem;cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s ease-in-out;box-shadow:0 1px 2px #0000000a;padding:.5rem .75rem;text-align:left;border:1px solid #e2e8f0;color:#9ca3af;font-size:.875rem;background:#f8fafc;box-shadow:none}.recent-section .recent-grid .recent-button:focus{outline:none;box-shadow:0 0 0 3px #2563eb1f}.recent-section .recent-grid .recent-button:disabled{opacity:.5;cursor:not-allowed}.recent-section .recent-grid .recent-button:hover{border-color:#2563eb;color:#1f2937;background:#2563eb0d}.recent-section .recent-grid .recent-button:focus{outline:2px solid #2563eb;outline-offset:2px}.style-section{display:flex;justify-content:center;margin:1rem 0}.style-section .style-options{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;padding:.75rem 1rem;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem}.style-section .style-options .style-label{font-size:.875rem;color:#6b7280;font-weight:500}.style-section .style-options .style-option{display:flex;align-items:center;gap:.5rem;cursor:pointer}.style-section .style-options .style-option .style-radio{margin:0;accent-color:#2563eb;cursor:pointer}.style-section .style-options .style-option .style-radio:focus{outline:2px solid #2563eb;outline-offset:2px}.style-section .style-options .style-option .style-text{font-size:.875rem;font-weight:500;color:#1f2937;cursor:pointer;-webkit-user-select:none;user-select:none}.output-section{display:flex;flex-direction:column;gap:1.5rem}.output-section .output-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}@media (max-width: 640px){.output-section .output-header{flex-direction:column;align-items:stretch}}.output-section .output-header .output-title{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0}.output-section .copy-all-button{display:inline-flex;align-items:center;border:none;border-radius:.375rem;cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s ease-in-out;box-shadow:0 1px 2px #0000000a;background-color:#2563eb;color:#fff;padding:.5rem 1rem;font-size:.875rem;gap:.5rem}.output-section .copy-all-button:focus{outline:none;box-shadow:0 0 0 3px #2563eb1f}.output-section .copy-all-button:disabled{opacity:.5;cursor:not-allowed}.output-section .copy-all-button:hover:not(:disabled){background-color:#1d4ed8}.output-section .copy-all-button.copied,.output-section .copy-all-button.copied:hover{background-color:#059669}@media (max-width: 640px){.output-section .copy-all-button{min-height:44px;min-width:44px}}.output-section .output-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.output-section .output-list .output-item{display:flex;align-items:center;gap:.75rem;padding:1rem;background-color:#f8fafc;border-radius:.5rem;border:1px solid #e2e8f0;transition:all .2s ease-in-out}.output-section .output-list .output-item:hover{box-shadow:0 1px 2px #0000000a;border-color:#dbeafe}@media (max-width: 640px){.output-section .output-list .output-item{gap:.75rem}}.output-section .output-list .output-item .output-text{flex:1;font-size:1rem;color:#1f2937;word-break:break-word;line-height:1.5}.output-section .output-list .output-item .copy-button{display:inline-flex;align-items:center;border:none;border-radius:.375rem;cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s ease-in-out;box-shadow:0 1px 2px #0000000a;background-color:transparent;color:#6b7280;border:1px solid #e2e8f0;width:36px;height:36px;justify-content:center;flex-shrink:0}.output-section .output-list .output-item .copy-button:focus{outline:none;box-shadow:0 0 0 3px #2563eb1f}.output-section .output-list .output-item .copy-button:disabled{opacity:.5;cursor:not-allowed}.output-section .output-list .output-item .copy-button:hover{background-color:#dbeafe;color:#2563eb;border-color:#2563eb}.output-section .output-list .output-item .copy-button.copied{background-color:#d1f7ed;color:#059669;border-color:#059669}@media (max-width: 640px){.output-section .output-list .output-item .copy-button{align-self:flex-end;min-height:44px;min-width:44px}}.icon{width:18px;height:18px;flex-shrink:0}.app-footer{margin-top:4rem;padding:3rem 0 2rem;border-top:1px solid #e2e8f0;background-color:#f8fafc}.app-footer .footer-content{max-width:1200px;margin:0 auto;padding:0 1.5rem}@media (max-width: 640px){.app-footer .footer-content{padding:0 1rem}}.app-footer .footer-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}@media (max-width: 640px){.app-footer .footer-sections{grid-template-columns:1fr;gap:1.5rem}}.app-footer .footer-section h3{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.app-footer .footer-section p{font-size:.875rem;color:#6b7280;line-height:1.6;margin:0}.app-footer .footer-section ul{list-style:none;padding:0;margin:0}.app-footer .footer-section li{font-size:.875rem;color:#6b7280;line-height:1.6;margin-bottom:.5rem;padding-left:1rem;position:relative}.app-footer .footer-section li:before{content:"✓";position:absolute;left:0;color:#059669;font-weight:600}.app-footer .footer-bottom{padding-top:1.5rem;border-top:1px solid #e2e8f0}.app-footer .footer-bottom .footer-links{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.875rem;color:#9ca3af}@media (max-width: 640px){.app-footer .footer-bottom .footer-links{flex-direction:column;gap:.5rem;text-align:center}}.app-footer .footer-bottom .footer-links .footer-divider{opacity:.5}@media (max-width: 640px){.app-footer .footer-bottom .footer-links .footer-divider{display:none}}.educational-content{margin:3rem 0;padding:1rem;background-color:#f8fafc;border-radius:.75rem;border:1px solid #e2e8f0}.educational-content .section-header{text-align:center;margin-bottom:2rem}.educational-content .section-header h2,.educational-content .section-header h3{font-weight:600;color:#1f2937;margin:0 0 .75rem}.educational-content .section-header h2{font-size:1.5rem;font-weight:700}.educational-content .section-header h3{font-size:1.25rem}.educational-content .section-header p{font-size:1rem;color:#6b7280;max-width:600px;margin:0 auto}.educational-content .title-case-basics{margin-bottom:2rem}.educational-content .title-case-basics h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.educational-content .title-case-basics .rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1rem;gap:.75rem}@media (max-width: 640px){.educational-content .title-case-basics .rules-grid{gap:.75rem}}.educational-content .title-case-basics .rule-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out;padding:.75rem}.educational-content .title-case-basics .rule-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}@media (max-width: 640px){.educational-content .title-case-basics .rule-card{padding:.75rem}}.educational-content .title-case-basics .rule-card h4{font-size:1.125rem;font-weight:600;margin:0 0 .75rem;color:#1f2937}.educational-content .title-case-basics .rule-card ul{margin:0;padding-left:1.25rem;color:#6b7280}.educational-content .title-case-basics .rule-card li{margin-bottom:.25rem}.educational-content .interactive-examples{margin-bottom:2rem;margin-top:1rem}.educational-content .interactive-examples h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 .75rem}.educational-content .interactive-examples .style-selector{display:flex;align-items:center;gap:.75rem;margin:1rem 0;padding:.75rem;background-color:#fff;border-radius:.375rem;border:1px solid #e2e8f0}.educational-content .interactive-examples .style-selector label{font-size:.875rem;font-weight:500;color:#1f2937}.educational-content .interactive-examples .style-selector .style-select{width:100%;padding:1rem;border:2px solid #e2e8f0;border-radius:.5rem;font-size:1rem;line-height:1.5;color:#1f2937;background-color:#fff;font-family:inherit;transition:all .2s ease-in-out;appearance:none;padding:.5rem .75rem;font-size:.875rem;cursor:pointer;min-height:auto}.educational-content .interactive-examples .style-selector .style-select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.educational-content .interactive-examples .style-selector .style-select::placeholder{color:#9ca3af}.educational-content .interactive-examples .examples-list{display:flex;flex-direction:column;gap:.75rem}.educational-content .interactive-examples .examples-list .example-item{background-color:#fff;border-radius:.5rem;border:1px solid #e2e8f0;overflow:hidden}.educational-content .interactive-examples .examples-list .example-item .example-trigger{width:100%;text-align:left;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.75rem;transition:background-color .2s ease-in-out;font-family:inherit;padding:1rem;align-items:flex-start}.educational-content .interactive-examples .examples-list .example-item .example-trigger:hover{background-color:#f8fafc}@media (max-width: 640px){.educational-content .interactive-examples .examples-list .example-item .example-trigger{flex-direction:column}}.educational-content .interactive-examples .examples-list .example-item .example-trigger.active{background-color:#dbeafe}.educational-content .interactive-examples .examples-list .example-item .example-trigger .example-text{font-size:1rem;font-weight:500;color:#1f2937;flex:1}.educational-content .interactive-examples .examples-list .example-item .example-trigger .example-text .example-description{font-size:.875rem;color:#6b7280;margin-top:.25rem;display:block}.educational-content .interactive-examples .examples-list .example-item .example-trigger .toggle-icon{font-size:1.125rem;font-weight:700;color:#2563eb;width:24px;text-align:center;flex-shrink:0}.educational-content .interactive-examples .examples-list .example-item .example-result{padding:1rem;background-color:#f8fafc;border-top:1px solid #e2e8f0}.educational-content .interactive-examples .examples-list .example-item .example-result .result-item{margin-bottom:.5rem;font-size:.875rem}.educational-content .interactive-examples .examples-list .example-item .example-result .result-item:last-child{margin-bottom:0}.educational-content .when-to-use h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.educational-content .when-to-use .use-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;gap:.75rem}.educational-content .when-to-use .use-cases .use-case{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out;padding:.75rem}.educational-content .when-to-use .use-cases .use-case:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}.educational-content .when-to-use .use-cases .use-case h4{font-size:1rem;font-weight:600;color:#1f2937;margin:0 0 .75rem}.educational-content .when-to-use .use-cases .use-case ul{margin:0;padding-left:1.25rem;color:#6b7280}.educational-content .when-to-use .use-cases .use-case li{margin-bottom:.25rem}.faq-section{margin:3rem 0;padding:2rem;background-color:#f8fafc;border-radius:.75rem;border:1px solid #e2e8f0}.faq-section .faq-list{display:flex;flex-direction:column;gap:.75rem}.faq-section .faq-list .faq-item{background-color:#fff;border-radius:.5rem;border:1px solid #e2e8f0;overflow:hidden;margin-bottom:.75rem}.faq-section .faq-list .faq-item .faq-question{width:100%;text-align:left;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.75rem;transition:background-color .2s ease-in-out;font-family:inherit;padding:1rem;font-size:1rem;font-weight:500;color:#1f2937}.faq-section .faq-list .faq-item .faq-question:hover{background-color:#f8fafc}.faq-section .faq-list .faq-item .faq-question.active{background-color:#dbeafe}@media (max-width: 640px){.faq-section .faq-list .faq-item .faq-question{padding:.75rem}}.faq-section .faq-list .faq-item .faq-question.active{background-color:#dbeafe;color:#2563eb}.faq-section .faq-list .faq-item .faq-question .question-text{flex:1}.faq-section .faq-list .faq-item .faq-answer{padding:1rem;background-color:#f8fafc;border-top:1px solid #e2e8f0;color:#6b7280}@media (max-width: 640px){.faq-section .faq-list .faq-item .faq-answer{padding:0 .75rem .75rem}}.faq-section .faq-list .faq-item .faq-answer p{margin:0 0 .75rem}.faq-section .faq-list .faq-item .faq-answer p:last-child{margin-bottom:0}.faq-section .faq-list .faq-item .faq-answer ul{margin:0;padding-left:1.25rem}.faq-section .faq-list .faq-item .faq-answer ul li{margin-bottom:.25rem}.style-comparison{margin:3rem 0;padding:1rem;background-color:#f8fafc;border-radius:.75rem;border:1px solid #e2e8f0}.style-comparison .section-header{text-align:center;margin-bottom:2rem}.style-comparison .section-header h2,.style-comparison .section-header h3{font-weight:600;color:#1f2937;margin:0 0 .75rem}.style-comparison .section-header h2{font-size:1.5rem;font-weight:700}.style-comparison .section-header h3{font-size:1.25rem}.style-comparison .section-header p{font-size:1rem;color:#6b7280;max-width:600px;margin:0 auto}.style-comparison .field-usage{margin-bottom:2rem}.style-comparison .field-usage h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.style-comparison .field-usage .usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;gap:.75rem}.style-comparison .field-usage .usage-grid .usage-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out;padding:.75rem}.style-comparison .field-usage .usage-grid .usage-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}.style-comparison .field-usage .usage-grid .usage-card .style-name{font-size:1.125rem;font-weight:600;color:#2563eb;margin:0 0 .5rem}.style-comparison .field-usage .usage-grid .usage-card .field-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.style-comparison .field-usage .usage-grid .usage-card .field-tags .field-tag{display:inline-block;padding:.25rem .5rem;background-color:#2563eb;color:#fff;font-size:.75rem;font-weight:500;border-radius:.375rem;letter-spacing:.05em;line-height:1.2;white-space:nowrap}.style-comparison .field-usage .usage-grid .usage-card .example-title{font-size:1rem;color:#1f2937;font-style:italic;margin:0}.style-comparison .field-usage .usage-grid .usage-card .example-title em{font-style:normal;font-weight:600}.style-comparison .comparison-table-container{margin:1rem 0}.style-comparison .comparison-table-container h3{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.style-comparison .comparison-table-container .table-scroll{overflow-x:auto;border-radius:.375rem;border:1px solid #e2e8f0}.style-comparison .comparison-table-container .comparison-table{width:100%;border-collapse:collapse;background:#fff}.style-comparison .comparison-table-container .comparison-table th,.style-comparison .comparison-table-container .comparison-table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid #e2e8f0;font-size:.875rem}.style-comparison .comparison-table-container .comparison-table th{background:#f8fafc;font-weight:600;color:#1f2937}.style-comparison .comparison-table-container .comparison-table td{color:#6b7280}.style-comparison .comparison-table-container .comparison-table .category-cell{font-weight:600;color:#1f2937;background:#f8fafc}.style-comparison .comparison-notes{margin-top:1.5rem}.style-comparison .comparison-notes h3{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.style-comparison .comparison-notes .notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.style-comparison .comparison-notes .notes-grid .note-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out}.style-comparison .comparison-notes .notes-grid .note-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}.style-comparison .comparison-notes .notes-grid .note-card h4{font-size:1rem;font-weight:600;color:#2563eb;margin:0 0 .5rem}.style-comparison .comparison-notes .notes-grid .note-card p{font-size:.875rem;color:#6b7280;margin:0}.interactive-examples-section{margin:0;padding:2rem;background:#f8fafc;border-radius:.5rem;border:1px solid #e2e8f0}@media (max-width: 640px){.interactive-examples-section{margin:1rem 0;padding:.75rem}}.interactive-examples-section .section-header{text-align:center;margin-bottom:2rem;margin-bottom:.75rem}.interactive-examples-section .section-header h2,.interactive-examples-section .section-header h3{font-weight:600;color:#1f2937;margin:0 0 .75rem}.interactive-examples-section .section-header h2{font-size:1.5rem;font-weight:700}.interactive-examples-section .section-header h3{font-size:1.25rem}.interactive-examples-section .section-header p{font-size:1rem;color:#6b7280;max-width:600px;margin:0 auto}.interactive-examples-section .section-header h2{font-size:1.125rem;margin-bottom:.25rem}.interactive-examples-section .section-header p{font-size:.875rem;color:#6b7280;margin-bottom:0}.interactive-examples-section .examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1.5rem 0}@media (max-width: 640px){.interactive-examples-section .examples-grid{grid-template-columns:1fr;gap:.5rem}}.interactive-examples-section .examples-grid .example-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out;cursor:pointer;text-align:left;position:relative}.interactive-examples-section .examples-grid .example-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}.interactive-examples-section .examples-grid .example-card:hover{border-color:#2563eb;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f;transform:translateY(-1px)}.interactive-examples-section .examples-grid .example-card:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.interactive-examples-section .examples-grid .example-card:active{transform:translateY(0)}.interactive-examples-section .examples-grid .example-card .example-category{font-size:.75rem;font-weight:600;color:#2563eb;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.interactive-examples-section .examples-grid .example-card .example-text{font-size:1rem;color:#1f2937;font-style:italic;margin:.5rem 0;line-height:1.4}.interactive-examples-section .examples-grid .example-card .example-description{font-size:.875rem;color:#6b7280;margin-bottom:.75rem}.interactive-examples-section .examples-grid .example-card .example-action{display:flex;justify-content:flex-end;margin-top:.75rem}.interactive-examples-section .examples-grid .example-card .example-action .click-hint{font-size:.875rem;color:#2563eb;font-weight:500;opacity:.8;transition:opacity .2s ease-in-out}.interactive-examples-section .examples-grid .example-card:hover .click-hint{opacity:1}.interactive-examples-section .quick-compare{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e2e8f0}.interactive-examples-section .quick-compare h3{font-size:1rem;margin-bottom:.25rem}.interactive-examples-section .quick-compare p{font-size:.875rem;color:#6b7280;margin-bottom:.75rem}.interactive-examples-section .quick-compare .comparison-demo{background:#fff;border-radius:.375rem;padding:1.5rem;margin-top:1rem}.interactive-examples-section .quick-compare .comparison-demo .demo-input{font-size:1rem;color:#1f2937;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #e2e8f0}.interactive-examples-section .quick-compare .comparison-demo .demo-outputs{display:grid;gap:.75rem}.interactive-examples-section .quick-compare .comparison-demo .demo-outputs .demo-result{display:flex;align-items:center;gap:.75rem}@media (max-width: 640px){.interactive-examples-section .quick-compare .comparison-demo .demo-outputs .demo-result{flex-direction:column;align-items:flex-start;gap:.5rem}}.interactive-examples-section .quick-compare .comparison-demo .demo-outputs .demo-result .style-label{font-weight:600;color:#6b7280;min-width:80px;font-size:.875rem}@media (max-width: 640px){.interactive-examples-section .quick-compare .comparison-demo .demo-outputs .demo-result .style-label{min-width:auto}}.interactive-examples-section .quick-compare .comparison-demo .demo-outputs .demo-result .result-text{font-style:italic;color:#1f2937}.writing-tips-section{margin:3rem 0}.writing-tips-section .section-header{text-align:center;margin-bottom:2rem}.writing-tips-section .section-header h2,.writing-tips-section .section-header h3{font-weight:600;color:#1f2937;margin:0 0 .75rem}.writing-tips-section .section-header h2{font-size:1.5rem;font-weight:700}.writing-tips-section .section-header h3{font-size:1.25rem}.writing-tips-section .section-header p{font-size:1rem;color:#6b7280;max-width:600px;margin:0 auto}.writing-tips-section .category-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0;justify-content:center}.writing-tips-section .category-filters .category-filter{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out;padding:.5rem 1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#6b7280;box-shadow:none}.writing-tips-section .category-filters .category-filter:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}.writing-tips-section .category-filters .category-filter:hover{border-color:#2563eb;color:#2563eb}.writing-tips-section .category-filters .category-filter.active{background:#2563eb;border-color:#2563eb;color:#fff}.writing-tips-section .category-filters .category-filter .category-icon{font-size:1rem}.writing-tips-section .tips-list{margin:1.5rem 0}.writing-tips-section .tips-list .tip-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out;margin-bottom:1rem;overflow:hidden;box-shadow:none}.writing-tips-section .tips-list .tip-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}.writing-tips-section .tips-list .tip-card .tip-header{width:100%;text-align:left;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.75rem;transition:background-color .2s ease-in-out;font-family:inherit;padding:1.5rem;align-items:flex-start}.writing-tips-section .tips-list .tip-card .tip-header:hover{background-color:#f8fafc}.writing-tips-section .tips-list .tip-card .tip-header.active{background-color:#dbeafe}@media (max-width: 640px){.writing-tips-section .tips-list .tip-card .tip-header{padding:1rem}}.writing-tips-section .tips-list .tip-card .tip-header.expanded{border-bottom:1px solid #e2e8f0}.writing-tips-section .tips-list .tip-card .tip-header .tip-title-section{flex:1}.writing-tips-section .tips-list .tip-card .tip-header .tip-title-section .tip-title{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0 0 .5rem}.writing-tips-section .tips-list .tip-card .tip-header .tip-title-section .tip-description{font-size:1rem;color:#6b7280;margin:0;line-height:1.5}.writing-tips-section .tips-list .tip-card .tip-header .expand-icon{font-size:1.25rem;color:#9ca3af;margin-left:1rem;transition:transform .2s ease-in-out}.expanded .writing-tips-section .tips-list .tip-card .tip-header .expand-icon{transform:rotate(180deg)}.writing-tips-section .tips-list .tip-card .tip-examples{padding:1.5rem;background:#f8fafc}@media (max-width: 640px){.writing-tips-section .tips-list .tip-card .tip-examples{padding:1rem}}.writing-tips-section .tips-list .tip-card .tip-examples h4{font-size:1rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;box-shadow:0 1px 2px #0000000a;transition:all .2s ease-in-out;margin-bottom:1rem;padding:1rem;box-shadow:none}.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -2px #0000000f}.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison:last-child{margin-bottom:0}.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-bad,.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-good{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.75rem}@media (max-width: 640px){.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-bad,.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-good{flex-direction:column;gap:.5rem}}.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-bad .example-label,.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-good .example-label{font-size:.875rem;font-weight:600;min-width:80px;padding:.25rem 0}@media (max-width: 640px){.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-bad .example-label,.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-good .example-label{min-width:auto}}.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-bad .example-text,.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-good .example-text{font-style:italic;font-size:1rem;flex:1;line-height:1.4}.writing-tips-section .tips-list .tip-card .tip-examples .example-comparison .example-explanation{font-size:.875rem;color:#6b7280;line-height:1.5;padding-top:.75rem;border-top:1px solid #e2e8f0}.writing-tips-section .tip-summary{margin-top:2rem;padding:1.5rem;background:#f8fafc;border-radius:.375rem;border:1px solid #e2e8f0}.writing-tips-section .tip-summary h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 1rem}.writing-tips-section .tip-summary .checklist{display:grid;gap:.75rem}.writing-tips-section .tip-summary .checklist .checklist-item{display:flex;align-items:center;gap:.75rem;font-size:1rem;color:#1f2937}.writing-tips-section .tip-summary .checklist .checklist-item .checkbox{color:#059669;font-weight:600;font-size:1.125rem}.accessibility-controls{position:fixed;bottom:1rem;right:1rem;z-index:100}.accessibility-controls .help-button{display:inline-flex;align-items:center;border:none;border-radius:.375rem;cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s ease-in-out;box-shadow:0 1px 2px #0000000a;background-color:#2563eb;color:#fff;padding:.5rem 1rem;font-size:.875rem;gap:.5rem;border-radius:50%;width:48px;height:48px;justify-content:center;box-shadow:0 10px 15px -3px #00000014,0 4px 6px -4px #0000000d;font-size:1rem;font-weight:600}.accessibility-controls .help-button:focus{outline:none;box-shadow:0 0 0 3px #2563eb1f}.accessibility-controls .help-button:disabled{opacity:.5;cursor:not-allowed}.accessibility-controls .help-button:hover:not(:disabled){background-color:#1d4ed8}.accessibility-controls .help-button.copied,.accessibility-controls .help-button.copied:hover{background-color:#059669}.accessibility-controls .help-button:hover{transform:scale(1.05)}.accessibility-controls .help-button .help-icon{font-size:18px;font-weight:700}.accessibility-controls .help-button .help-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.accessibility-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}.accessibility-modal .modal-backdrop{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.accessibility-modal .modal-content{position:relative;background:#fff;border-radius:.75rem;box-shadow:0 10px 15px -3px #00000014,0 4px 6px -4px #0000000d;max-width:600px;max-height:80vh;overflow-y:auto;width:100%;display:flex;flex-direction:column;overflow:hidden}.accessibility-modal .modal-content .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e2e8f0}.accessibility-modal .modal-content .modal-header h2{margin:0;font-size:1.25rem;color:#1f2937}.accessibility-modal .modal-content .modal-header .close-button{display:inline-flex;align-items:center;border:none;border-radius:.375rem;cursor:pointer;font-family:inherit;font-weight:500;transition:all .2s ease-in-out;box-shadow:0 1px 2px #0000000a;background-color:transparent;color:#6b7280;border:1px solid #e2e8f0;width:36px;height:36px;justify-content:center;flex-shrink:0}.accessibility-modal .modal-content .modal-header .close-button:focus{outline:none;box-shadow:0 0 0 3px #2563eb1f}.accessibility-modal .modal-content .modal-header .close-button:disabled{opacity:.5;cursor:not-allowed}.accessibility-modal .modal-content .modal-header .close-button:hover{background-color:#dbeafe;color:#2563eb;border-color:#2563eb}.accessibility-modal .modal-content .modal-header .close-button.copied{background-color:#d1f7ed;color:#059669;border-color:#059669}.accessibility-modal .modal-content .modal-header .close-button:hover{background-color:#f8fafc;color:#1f2937}.accessibility-modal .modal-content .modal-header .close-button svg{width:100%}.accessibility-modal .modal-content .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1rem 1.5rem 1.5rem}.accessibility-modal .modal-content .modal-body section{margin-bottom:1.5rem}.accessibility-modal .modal-content .modal-body section:last-child{margin-bottom:0}.accessibility-modal .modal-content .modal-body section h3{font-size:1.125rem;margin-bottom:.75rem;color:#1f2937}.accessibility-modal .modal-content .modal-body .shortcuts-list{display:grid;gap:.75rem}.accessibility-modal .modal-content .modal-body .shortcuts-list .shortcut-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:#f8fafc;border-radius:.375rem}.accessibility-modal .modal-content .modal-body .shortcuts-list .shortcut-item kbd{background:#1f2937;color:#fff;padding:.25rem .5rem;border-radius:.125rem;font-size:.75rem;font-family:monospace;font-weight:600;white-space:nowrap;box-shadow:0 1px 2px #0000001a}.accessibility-modal .modal-content .modal-body .shortcuts-list .shortcut-item span{color:#6b7280;font-size:.875rem;flex:1}.accessibility-modal .modal-content .modal-body .feature-list,.accessibility-modal .modal-content .modal-body .tips-list{margin:0;color:#6b7280}.accessibility-modal .modal-content .modal-body .feature-list li,.accessibility-modal .modal-content .modal-body .tips-list li{margin-bottom:.5rem;line-height:1.5}.skip-links{position:absolute;top:-100px;left:1rem;z-index:1000}.skip-links .skip-link{position:absolute;top:-100px;background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:.375rem;text-decoration:none;font-size:.875rem;font-weight:500;box-shadow:0 10px 15px -3px #00000014,0 4px 6px -4px #0000000d;transition:all .2s ease-in-out}.skip-links .skip-link:focus{top:1rem}.supporting-content{margin-top:0}@media (max-width: 768px){.supporting-content{margin-top:1.5rem;padding-top:1rem}}.supporting-content>*{margin-bottom:1.5rem}@media (max-width: 768px){.supporting-content>*{margin-bottom:1rem}}.supporting-content>*:last-child{margin-bottom:0}.supporting-content .section-header{margin-bottom:1rem}.supporting-content .section-header h2{font-size:1.25rem;margin-bottom:.5rem}.supporting-content .section-header p{font-size:.875rem;margin-bottom:0}@media (prefers-contrast: high){:root{--color-border: #1f2937;--color-text-primary: #1f2937;--color-text-secondary: #333333;--color-primary: #0066cc;--color-primary-hover: #004499;--color-background: #ffffff}.text-input:focus,.copy-button:focus,.copy-all-button:focus{outline:3px solid #1f2937;outline-offset:2px}.example-card,.tip-card,.category-filter{border-width:2px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.example-card:hover{transform:none}}@media print{.accessibility-controls,.skip-links,.copy-button,.copy-all-button{display:none}.app{padding:0;box-shadow:none}.educational-content,.faq-section,.style-comparison{break-inside:avoid;page-break-inside:avoid}}.app-nav{background:#fff;border-bottom:1px solid #f3f4f6}.nav-container{max-width:1200px;margin:0 auto;padding:0 .5rem;display:flex;align-items:center;justify-content:space-between;height:64px}@media (max-width: 768px){.nav-container{padding:0 .5rem;height:56px}}.nav-brand .brand-link{text-decoration:none;color:#1f2937;font-weight:600;font-size:1.25rem}.nav-brand .brand-link:hover{color:#374151}.nav-brand .brand-text{color:inherit}.nav-links{display:flex;gap:1rem}@media (max-width: 768px){.nav-links{position:absolute;top:60px;left:0;right:0;display:none;flex-direction:column;background:#fff;border-bottom:1px solid #f3f4f6;box-shadow:0 6px 12px #0000000a;padding:.5rem;gap:.25rem;z-index:50}.nav-links.open{display:flex}}.nav-link{text-decoration:none;color:#6b7280;font-weight:500;font-size:.9rem;padding:.5rem;border-radius:0;transition:color .2s ease;white-space:nowrap;position:relative;letter-spacing:.01em}.nav-link:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:#2563eb;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}.nav-link:hover{color:#374151}.nav-link:hover:after{transform:scaleX(1)}.nav-link.active{color:#1f2937;font-weight:600}.nav-link.active:after{transform:scaleX(1)}@media (max-width: 768px){.nav-link{font-size:.95rem;padding:.5rem 1rem;width:100%;border:none;background:transparent;border-radius:0}.nav-link:after{display:none}}@media (max-width: 768px){.nav-link+.nav-link{border-top:1px solid #f3f4f6}}.nav-ad{display:flex;justify-content:center;padding:.5rem 0;background:#f9fafb;border-bottom:1px solid #f3f4f6}.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.375rem;color:#374151;transition:background-color .2s ease-in-out,color .2s ease-in-out}.nav-toggle:hover{background:#f3f4f6;color:#111827}.nav-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px #2563eb1f}@media (max-width: 768px){.nav-toggle{display:inline-flex}}.nav-toggle-icon{width:22px;height:22px}.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}.slug-generator .header-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:.375rem;color:#fff;margin:0 auto 1rem}.slug-generator .header-icon .icon{width:24px;height:24px}.slug-variations{display:flex;flex-direction:column;gap:1rem}.slug-variation{background:#fff;border:1px solid #e2e8f0;border-radius:.375rem;padding:1rem;box-shadow:0 2px 4px #0000000d;transition:all .2s ease}.slug-variation:hover{box-shadow:0 4px 12px #0000001a;border-color:#dbeafe}.slug-variation.slug-invalid{border-color:#dc2626;background:#dc262605}.slug-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.slug-info{flex:1}.slug-label{font-size:1rem;font-weight:600;color:#1f2937;margin:0 0 .25rem}.slug-description{font-size:.875rem;color:#6b7280;margin:0}.slug-output{margin-top:.5rem}.slug-text{display:block;background:#f1f5f9;color:#334155;padding:.5rem 1rem;border-radius:.125rem;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:.9rem;word-break:break-all;border:1px solid rgba(37,99,235,.2)}.slug-issues{margin-top:.5rem;display:flex;flex-direction:column;gap:.25rem}.slug-issue{font-size:.8rem;color:#dc2626;background:#dc26261a;padding:.25rem .5rem;border-radius:.125rem;border-left:3px solid #dc2626}.examples-section{background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:2rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000000d}.examples-title{font-size:1.125rem;font-weight:600;color:#1f2937;margin:0 0 1rem;text-align:center}.examples-grid{display:grid;grid-template-columns:1fr;gap:.5rem}@media (min-width: 768px){.examples-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}.example-button{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;padding:1rem;text-align:left;cursor:pointer;transition:all .2s ease;font-size:.9rem;color:#1f2937}.example-button:hover{background:#2563eb0d;border-color:#dbeafe;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.example-button:active{transform:translateY(0)}.educational-section{margin-top:2rem;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:2rem;box-shadow:0 2px 8px #0000000d}.educational-section h2{color:#1f2937;font-size:1.5rem;margin:0 0 1rem}.educational-section h3{color:#1f2937;font-size:1.25rem;margin:1.5rem 0 1rem}.educational-section p{color:#6b7280;line-height:1.6;margin:0 0 1rem}.educational-section ul{list-style:disc;padding-left:1rem;margin:0 0 1rem}.educational-section ul li{color:#6b7280;margin-bottom:.25rem;line-height:1.6}.educational-section ul li strong{color:#1f2937}.examples-showcase{margin-top:1rem}.example-item{margin-bottom:1rem;padding:1rem;background:#f8fafc;border-radius:.375rem;border-left:4px solid transparent}.example-item:nth-child(odd){border-left-color:#dc2626}.example-item:nth-child(2n){border-left-color:#059669}.example-text{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:.9rem;margin-bottom:.25rem}.example-text code{background:transparent;padding:0;border:none}.example-note{font-size:.8rem;color:#6b7280;font-style:italic}.page-ad{display:flex;justify-content:center;margin:2rem 0;padding:1rem;background:#f8fafccc;border-radius:.375rem}