.arva-snippet__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.arva-snippet__layout > *, .arva-snippet__identity > div { min-width: 0; }
.arva-snippet textarea { resize: vertical; min-height: 8rem; }
.arva-snippet__count { margin: .35rem 0 0; color: var(--muted); font-size: .8125rem; }
.arva-snippet__preview-column { position: sticky; top: 7rem; }
.arva-snippet__panel { padding: clamp(1.2rem, 3vw, 2rem); }
.arva-snippet__preview-header { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.arva-snippet__preview-header h2 { margin: 0; }
.arva-snippet__devices { display: flex; padding: .2rem; margin: 0; border: 1px solid var(--line); border-radius: 999px; gap: .2rem; }
.arva-snippet__devices button { border: 0; border-radius: 999px; background: transparent; color: var(--ink); padding: .5rem .8rem; font: inherit; font-size: .8125rem; cursor: pointer; }
.arva-snippet__devices button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.arva-snippet__devices button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.arva-snippet__canvas { min-height: 16rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; }
.arva-snippet__result { max-width: 36rem; margin-inline: auto; color: #202124; font-family: Arial, sans-serif; }
.arva-snippet__canvas[data-device="mobile"] .arva-snippet__result { max-width: 20rem; }
.arva-snippet__identity { display: flex; gap: .7rem; align-items: center; margin-bottom: .65rem; }
.arva-snippet__favicon { display: grid; place-items: center; flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #f1f3f4; color: #3c4043; font: 600 .85rem Arial, sans-serif; }
.arva-snippet__site { margin: 0 0 .2rem; font-size: .875rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.arva-snippet__address { margin: 0; font-size: .75rem; line-height: 1.4; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arva-snippet__title { margin: 0 0 .45rem; font: 400 1.25rem/1.35 Arial, sans-serif; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arva-snippet__description { margin: 0; font: 400 .875rem/1.6 Arial, sans-serif; color: #4d5156; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.arva-snippet__canvas[data-device="mobile"] .arva-snippet__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.arva-snippet__canvas[data-device="mobile"] .arva-snippet__description { -webkit-line-clamp: 3; }
.arva-snippet__disclaimer { margin-top: 1.25rem; }
.arva-snippet__next { margin-top: 1.5rem; padding: 1.5rem 0 0; border-top: 1px solid var(--line); }
.arva-snippet__next > p:first-child { margin-top: 0; }
.arva-snippet__error { color: var(--ink); border-left: 3px solid var(--ink); padding-left: .65rem; }
.arva-snippet .arva-btn--ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.arva-snippet .arva-btn--ghost:hover { border-color: var(--ink); background: var(--tint); }
.arva-snippet .arva-tool__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 900px) { .arva-snippet__layout { grid-template-columns: 1fr; } .arva-snippet__preview-column { position: static; } }
@media (max-width: 400px) { .arva-snippet__canvas { padding: .8rem; } .arva-snippet__preview-header { align-items: flex-start; flex-direction: column; } }