css4

button:focus-visible {
    outline: 3px solid #3498db;
    outline-offset: 2px;
}
input:focus-visible {
    box-shadow: 0 0 0 3px rgba(52,152,219,0.3);
}

form:focus-within {
    background: #e8f4fd;
    padding: 15px;
    border-radius: 8px;
    transition: all 0.3s;
}
div:focus-within {
    border-left: 3px solid #3498db;
}

input:user-invalid {
    border-color: #e74c3c;
    background: #fdebd0;
}
textarea:user-invalid {
    box-shadow: 0 0 0 2px #e74c3c;
}

input:user-valid {
    border-color: #2ecc71;
    background: #d5f5e3;
}
input:user-valid::after {
    content: "✓";
    color: #2ecc71;
}

input:indeterminate {
    outline: 2px solid #f39c12;
    accent-color: #f39c12;
}
progress:indeterminate {
    opacity: 0.5;
}

article:has(img) {
    background: #e8f4fd;
    padding: 15px;
    border-radius: 8px;
}
li:has(ul) {
    font-weight: bold;
    color: #2c3e66;
}

:is(header, main, footer) p {
    margin: 1em 0;
    line-height: 1.5;
}
:is(.card, .article) :is(h2, h3) {
    color: #2c3e66;
    border-bottom: 2px solid #3498db;
}

:where(.reset, .base) p {
    margin: 0;
    padding: 0;
}
:where(article, section) h2 {
    font-size: 1.5em;
}

button:not(.primary) {
    background: #95a5a6;
}
input:not([type="submit"]) {
    border: 1px solid #ccc;
}
li:not(:first-child) {
    border-top: 1px solid #ddd;
}

.parent :scope {
    border-left: 3px solid #3498db;
    padding-left: 10px;
}
:scope > p {
    font-weight: bold;
}

input::file-selector-button {
    background: #2c3e66;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}
input::file-selector-button:hover {
    background: #1a2a4a;
}

input::placeholder {
    color: #e74c3c;
    font-style: italic;
    font-size: 0.9em;
}
textarea::placeholder {
    color: #3498db;
    letter-spacing: 1px;
}

video::cue {
    background: rgba(0,0,0,0.7);
    color: #f1c40f;
    font-size: 1.2em;
}
video::cue(.speaker1) {
    color: #3498db;
}

custom-element::part(button) {
    background: #3498db;
    border-radius: 8px;
    padding: 8px 16px;
}
custom-element::part(header) {
    font-size: 1.2em;
}

::slotted(p) {
    color: #3498db;
    font-weight: bold;
}
::slotted(.important) {
    background: #f9e79f;
    padding: 5px;
}

:current(slide) {
    background: #f9e79f;
    border-left: 4px solid #f1c40f;
}
:current(p) {
    font-weight: bold;
}

:past {
    opacity: 0.5;
    filter: grayscale(0.5);
}
:past slide {
    transform: scale(0.95);
}

:future {
    opacity: 0.3;
}
:future slide {
    transform: scale(0.9);
}

video:playing {
    border: 2px solid #2ecc71;
    box-shadow: 0 0 10px rgba(46,204,113,0.5);
}
audio:playing {
    background: #d5f5e3;
}

video:paused {
    opacity: 0.8;
    filter: brightness(0.9);
}
audio:paused {
    background: #fdebd0;
}

toggle-switch:state(checked) {
    background: #2ecc71;
}
accordion-item:state(expanded) {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.popover-content:popover-open {
    animation: fadeIn 0.3s ease;
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

component:has-slotted(img) {
    border: 2px solid #3498db;
}
component:has-slotted(.important) {
    background: #f9e79f;
}

dialog:modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
:modal {
    backdrop-filter: blur(4px);
}

dialog::backdrop {
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.9));
    backdrop-filter: blur(5px);
}
video:fullscreen::backdrop {
    background: black;
}