:root {
  --ink: #181817;
  --paper: #f6f1e8;
  --paper-deep: #ece3d5;
  --violet: #4c43d9;
  --coral: #ff694e;
  --lime: #cbff56;
  --rule: rgba(24, 24, 23, .18);
  --muted: #625f59;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header { border-bottom: 1px solid var(--rule); }
.site-header__inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -.05em; text-decoration: none; }
.brand i { color: var(--coral); font-style: normal; }
.site-nav { display: flex; gap: 16px; overflow-x: auto; font-size: .86rem; white-space: nowrap; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--violet); }

.hero { padding: 76px 0 48px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 50px; align-items: end; }
.eyebrow { margin: 0 0 14px; color: var(--violet); font-size: .73rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.055em; line-height: .98; }
h1 { max-width: 720px; margin: 0; font-size: clamp(3.5rem, 8vw, 7.3rem); font-weight: 500; }
h1 em { color: var(--violet); font-style: italic; }
.hero__lead { max-width: 420px; margin: 0 0 8px; font-size: 1.07rem; color: var(--muted); }
.hero__stamp { border: 1px solid var(--ink); background: var(--lime); padding: 18px; transform: rotate(2deg); box-shadow: 8px 8px 0 var(--ink); }
.hero__stamp strong { display: block; font-size: 1.45rem; letter-spacing: -.06em; }
.hero__stamp span { display: block; margin-top: 4px; font-size: .83rem; }

.studio { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); box-shadow: 12px 12px 0 var(--coral); }
.studio__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(246, 241, 232, .22); padding: 15px 18px; }
.studio__label { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.studio__counter { color: #c7c1b6; font-size: .8rem; }
.studio__editor { min-height: 165px; width: 100%; resize: vertical; padding: 24px 18px; border: 0; outline: 0; background: transparent; color: var(--paper); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.15; }
.studio__editor::placeholder { color: #aaa59e; }
.studio__actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 18px; border-top: 1px solid rgba(246, 241, 232, .22); }
.button { border: 1px solid transparent; padding: 10px 14px; font-weight: 750; font-size: .88rem; }
.button--lime { background: var(--lime); color: var(--ink); }
.button--ghost { background: transparent; border-color: rgba(246, 241, 232, .35); color: var(--paper); }
.button.is-copied { background: #b6f4c1; color: var(--ink); }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 52px 0 22px; }
.filter { border: 1px solid var(--rule); border-radius: 999px; padding: 8px 13px; background: transparent; color: var(--muted); font-size: .82rem; }
.filter.is-active, .filter:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.type-card { min-height: 182px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border: 1px solid var(--rule); background: #fbf8f2; transition: transform .16s ease, border-color .16s ease; }
.type-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.type-card__meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .72rem; }
.type-card__meta strong { color: var(--ink); font-size: .78rem; }
.type-card p { margin: 22px 0; overflow-wrap: anywhere; font-size: clamp(1.05rem, 2.1vw, 1.45rem); line-height: 1.25; }
.type-card button { align-self: flex-start; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 2px; background: transparent; color: var(--ink); font-size: .8rem; font-weight: 750; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; padding: 104px 0; }
.article__content { max-width: 710px; }
h2 { margin: 0 0 18px; font-size: clamp(2.1rem, 4vw, 3.5rem); font-weight: 500; }
h3 { margin: 36px 0 10px; font-size: 1.5rem; }
.article p, .article li { color: var(--muted); }
.article ul { padding-left: 20px; }
.article li + li { margin-top: 8px; }
.article__note { align-self: start; position: sticky; top: 18px; padding: 22px; border-top: 6px solid var(--violet); background: var(--paper-deep); }
.article__note p { margin: 0; }

.tool-hero { padding: 66px 0 34px; }
.tool-hero h1 { font-size: clamp(3.2rem, 7vw, 6rem); }
.tool-hero p { max-width: 670px; color: var(--muted); font-size: 1.08rem; }
.single-tool { display: grid; grid-template-columns: .78fr 1.22fr; border: 1px solid var(--ink); margin-bottom: 76px; }
.single-tool__input, .single-tool__result { padding: 24px; }
.single-tool__input { background: var(--paper-deep); border-right: 1px solid var(--ink); }
.single-tool label { display: block; margin-bottom: 11px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.single-tool textarea { width: 100%; min-height: 190px; padding: 0; border: 0; outline: 0; resize: none; color: var(--ink); background: transparent; font-size: 1.25rem; line-height: 1.4; }
.single-tool__result { display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: var(--paper); }
.single-tool__result p { overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.25; }
.single-tool__result .button { align-self: flex-start; }
.range { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .87rem; }
.range input { accent-color: var(--violet); }

.tool-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.tool-links a { padding: 15px; border: 1px solid var(--rule); text-decoration: none; font-weight: 700; }
.tool-links a:hover { color: var(--violet); border-color: var(--violet); }
.site-footer { padding: 30px 0 45px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .82rem; }

@media (max-width: 820px) {
  .hero, .article, .single-tool { grid-template-columns: 1fr; }
  .hero { gap: 30px; padding-top: 55px; }
  .hero__stamp { max-width: 380px; }
  .type-grid, .tool-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article { gap: 35px; padding: 70px 0; }
  .article__note { position: static; }
  .single-tool__input { border-right: 0; border-bottom: 1px solid var(--ink); }
}

@media (max-width: 520px) {
  .shell { width: min(100% - 26px, 1180px); }
  .site-nav { display: none; }
  h1, .tool-hero h1 { font-size: clamp(2.7rem, 13vw, 3.3rem); }
  .type-grid, .tool-links { grid-template-columns: 1fr; }
  .studio { box-shadow: 7px 7px 0 var(--coral); }
  .hero { padding-bottom: 34px; }
}