@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

.csfg-tool-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 42px 18px;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171427;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 241, 118, 0.9), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(255, 92, 156, 0.8), transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(86, 214, 255, 0.78), transparent 32%),
    linear-gradient(135deg, #fff7a8 0%, #ff8fc7 36%, #7ad7ff 68%, #b7ffb0 100%);
}

.csfg-tool-wrapper,
.csfg-tool-wrapper div,
.csfg-tool-wrapper h2,
.csfg-tool-wrapper p,
.csfg-tool-wrapper label,
.csfg-tool-wrapper textarea,
.csfg-tool-wrapper button {
  box-sizing: border-box;
}

.csfg-tool-wrapper .csfg-shell {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.csfg-tool-wrapper .csfg-hero {
  text-align: center;
  margin: 0 auto 24px;
}

.csfg-tool-wrapper .csfg-hero h2 {
  margin: 0;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: 0;
  color: #141225;
  text-shadow: 0 3px 0 rgba(255,255,255,.65), 0 16px 36px rgba(30, 12, 80, .18);
  font-weight: 900;
}

.csfg-tool-wrapper .csfg-hero p {
  margin: 12px auto 0;
  max-width: 660px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(20, 18, 37, .82);
  font-weight: 650;
}

.csfg-tool-wrapper .csfg-input-panel {
  position: relative;
  width: 100%;
  margin: 0 auto 26px;
  padding: 20px 20px 58px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 24px;
  background: rgba(255,255,255,.44);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(42, 24, 94, .2), inset 0 1px 0 rgba(255,255,255,.72);
}

.csfg-tool-wrapper .csfg-input-label {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 850;
  color: #231936;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.csfg-tool-wrapper .csfg-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 142px;
  resize: vertical;
  border: 2px solid rgba(31, 24, 58, .14);
  border-radius: 18px;
  padding: 18px 18px;
  background: rgba(255,255,255,.72);
  color: #171427;
  font-size: 18px;
  line-height: 1.55;
  outline: none;
  box-shadow: inset 0 2px 14px rgba(26, 18, 57, .07);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.csfg-tool-wrapper .csfg-textarea:focus {
  border-color: rgba(255, 75, 154, .82);
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 0 5px rgba(255, 75, 154, .18), inset 0 2px 14px rgba(26, 18, 57, .05);
}

.csfg-tool-wrapper .csfg-clear-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.csfg-tool-wrapper .csfg-clear-btn,
.csfg-tool-wrapper .csfg-load-btn,
.csfg-tool-wrapper .csfg-copy-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 850;
  letter-spacing: 0;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}

.csfg-tool-wrapper .csfg-clear-btn {
  pointer-events: auto;
  padding: 9px 20px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1d1830, #5835ff);
  box-shadow: 0 12px 28px rgba(49, 35, 130, .28);
  font-size: 13px;
}

.csfg-tool-wrapper .csfg-clear-btn:hover,
.csfg-tool-wrapper .csfg-load-btn:hover,
.csfg-tool-wrapper .csfg-copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(49, 35, 130, .34), 0 0 22px rgba(255,255,255,.35);
}

.csfg-tool-wrapper .csfg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 100%;
}

.csfg-tool-wrapper .csfg-card {
  min-width: 0;
  width: 100%;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 22px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 48px rgba(35, 25, 80, .16), inset 0 1px 0 rgba(255,255,255,.72);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  animation: csfgFade .42s ease both;
}

.csfg-tool-wrapper .csfg-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.88);
  box-shadow: 0 28px 64px rgba(35, 25, 80, .24), inset 0 1px 0 rgba(255,255,255,.8);
}

.csfg-tool-wrapper .csfg-card-title {
  margin: 0 0 12px;
  color: #1b1830;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 900;
}

.csfg-tool-wrapper .csfg-preview {
  width: 100%;
  max-width: 100%;
  min-height: 132px;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  border-radius: 17px;
  border: 1px solid rgba(26, 18, 57, .1);
  background: rgba(255,255,255,.68);
  color: #1d1830;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.25;
}

.csfg-tool-wrapper .csfg-preview::-webkit-scrollbar {
  width: 8px;
}

.csfg-tool-wrapper .csfg-preview::-webkit-scrollbar-track {
  background: rgba(255,255,255,.48);
  border-radius: 999px;
}

.csfg-tool-wrapper .csfg-preview::-webkit-scrollbar-thumb {
  background: linear-gradient(#ff5aa8, #5c7cff);
  border-radius: 999px;
}

.csfg-tool-wrapper .csfg-copy-btn {
  width: 100%;
  max-width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #ff4d9d, #6847ff);
  box-shadow: 0 12px 26px rgba(91, 58, 210, .26);
  font-size: 14px;
}

.csfg-tool-wrapper .csfg-load-wrap {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.csfg-tool-wrapper .csfg-load-btn {
  padding: 14px 28px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #171427, #ff4d9d 52%, #15a7e8);
  box-shadow: 0 16px 34px rgba(49, 35, 130, .28);
  font-size: 15px;
}

.csfg-tool-wrapper .csfg-load-btn.csfg-hidden {
  display: none;
}

.csfg-tool-wrapper .csfg-s1 { font-family: "Comic Sans MS", "Comic Sans", cursive; font-size: 28px; font-weight: 800; color: #ff2f92; text-shadow: 2px 2px 0 #fff45c; }
.csfg-tool-wrapper .csfg-s2 { font-family: "Comic Sans MS", cursive; font-size: 30px; font-weight: 900; color: #1b1830; -webkit-text-stroke: 1px #fff; text-shadow: 3px 3px 0 #5fe3ff; }
.csfg-tool-wrapper .csfg-s3 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #fff; background: linear-gradient(135deg,#ff4d9d,#ffd84d,#37d67a,#4ba3ff); text-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.csfg-tool-wrapper .csfg-s4 { font-family: "Comic Sans MS", cursive; font-size: 26px; font-weight: 800; color: #4c2cff; text-shadow: 0 0 8px #fff, 0 0 18px #8c7bff; }
.csfg-tool-wrapper .csfg-s5 { font-family: "Comic Sans MS", cursive; font-size: 29px; font-weight: 900; color: transparent; background: linear-gradient(90deg,#ff2f92,#ffb000,#1fcf75,#208cff); -webkit-background-clip: text; background-clip: text; }
.csfg-tool-wrapper .csfg-s6 { font-family: "Comic Sans MS", cursive; font-size: 25px; color: #24314f; letter-spacing: .08em; text-transform: uppercase; text-shadow: 1px 2px 0 #ffef6e; }
.csfg-tool-wrapper .csfg-s7 { font-family: "Comic Sans MS", cursive; font-size: 28px; color: #fff; background: #ff5aa8; border-radius: 18px; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.csfg-tool-wrapper .csfg-s8 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #151326; transform: rotate(-1deg); text-shadow: 3px 3px 0 #ffc8e4; }
.csfg-tool-wrapper .csfg-s9 { font-family: "Comic Sans MS", cursive; font-size: 28px; font-style: italic; color: #0b7a5d; text-shadow: 2px 2px 0 #b7ffb0; }
.csfg-tool-wrapper .csfg-s10 { font-family: "Comic Sans MS", cursive; font-size: 30px; color: #fff; background: repeating-linear-gradient(45deg,#ff4d9d 0 12px,#5ad7ff 12px 24px); border: 3px solid #fff; }
.csfg-tool-wrapper .csfg-s11 { font-family: "Comic Sans MS", cursive; font-size: 26px; color: #2b2050; text-shadow: 0 2px 0 #fff, 0 5px 0 #ffd64d; }
.csfg-tool-wrapper .csfg-s12 { font-family: "Comic Sans MS", cursive; font-size: 25px; color: #ff4d4d; letter-spacing: .04em; text-shadow: 2px 0 0 #48d7ff; }
.csfg-tool-wrapper .csfg-s13 { font-family: "Comic Sans MS", cursive; font-size: 29px; font-weight: 900; color: #fff; background: #161326; border: 3px dashed #ffe75c; }
.csfg-tool-wrapper .csfg-s14 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #6b2cff; text-shadow: 1px 1px 0 #fff, 3px 3px 0 #ff92c5; }
.csfg-tool-wrapper .csfg-s15 { font-family: "Comic Sans MS", cursive; font-size: 24px; color: #222; letter-spacing: .12em; text-shadow: 0 0 1px #222; }
.csfg-tool-wrapper .csfg-s16 { font-family: "Comic Sans MS", cursive; font-size: 31px; font-weight: 900; color: #ff7a00; -webkit-text-stroke: 1px #421900; text-shadow: 2px 3px 0 #ffd35c; }
.csfg-tool-wrapper .csfg-s17 { font-family: "Comic Sans MS", cursive; font-size: 28px; color: #0f6fff; text-decoration: underline wavy #ff4d9d; text-underline-offset: 5px; }
.csfg-tool-wrapper .csfg-s18 { font-family: "Comic Sans MS", cursive; font-size: 26px; color: #fff; background: radial-gradient(circle,#ff5aa8,#7247ff); border-radius: 999px; }
.csfg-tool-wrapper .csfg-s19 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #202037; text-shadow: -2px 2px 0 #87f7ff, 2px -2px 0 #ffb5da; }
.csfg-tool-wrapper .csfg-s20 { font-family: "Comic Sans MS", cursive; font-size: 29px; color: #fff; background: linear-gradient(90deg,#ff3838,#ffb000); text-shadow: 2px 2px 0 #671515; }
.csfg-tool-wrapper .csfg-s21 { font-family: "Comic Sans MS", cursive; font-size: 25px; color: #194b37; background: #c9ffd0; border: 3px solid #34c46b; }
.csfg-tool-wrapper .csfg-s22 { font-family: "Comic Sans MS", cursive; font-size: 27px; font-weight: 900; color: #111; filter: drop-shadow(3px 3px 0 #ffde59); }
.csfg-tool-wrapper .csfg-s23 { font-family: "Comic Sans MS", cursive; font-size: 26px; color: #fff; background: #263cff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #ff4d9d; }
.csfg-tool-wrapper .csfg-s24 { font-family: "Comic Sans MS", cursive; font-size: 24px; color: #4b2a00; background: #fff0b8; border-radius: 8px; transform: rotate(1deg); }
.csfg-tool-wrapper .csfg-s25 { font-family: "Comic Sans MS", cursive; font-size: 28px; color: #ff2f92; text-shadow: 0 1px 0 #fff, 0 8px 12px rgba(255,47,146,.35); }
.csfg-tool-wrapper .csfg-s26 { font-family: "Comic Sans MS", cursive; font-size: 30px; color: #35d7ff; background: #151326; text-shadow: 0 0 8px #35d7ff, 0 0 18px #ff4d9d; }
.csfg-tool-wrapper .csfg-s27 { font-family: "Comic Sans MS", cursive; font-size: 26px; color: #27213e; border: 3px dotted #ff4d9d; background: #fff; }
.csfg-tool-wrapper .csfg-s28 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: transparent; -webkit-text-stroke: 2px #ff4d9d; text-shadow: 3px 3px 0 #fff45c; }
.csfg-tool-wrapper .csfg-s29 { font-family: "Comic Sans MS", cursive; font-size: 25px; color: #633b00; background: linear-gradient(#fff,#ffe29a); border-bottom: 6px solid #ffc43d; }
.csfg-tool-wrapper .csfg-s30 { font-family: "Comic Sans MS", cursive; font-size: 28px; font-weight: 900; color: #fff; text-shadow: 2px 2px 0 #ff2f92, 4px 4px 0 #4236ff; }
.csfg-tool-wrapper .csfg-s31 { font-family: "Comic Sans MS", cursive; font-size: 24px; color: #28465c; letter-spacing: .16em; background: #e9fbff; }
.csfg-tool-wrapper .csfg-s32 { font-family: "Comic Sans MS", cursive; font-size: 29px; color: #101828; background: linear-gradient(135deg,#fff 0 55%,#ffef6e 55%); border: 2px solid #101828; }
.csfg-tool-wrapper .csfg-s33 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #2b2050; transform: skew(-5deg); text-shadow: 2px 2px 0 #7fffd4; }
.csfg-tool-wrapper .csfg-s34 { font-family: "Comic Sans MS", cursive; font-size: 25px; color: #fff; background: linear-gradient(135deg,#0ccf7a,#14a8ff); border-radius: 26px 8px 26px 8px; }
.csfg-tool-wrapper .csfg-s35 { font-family: "Comic Sans MS", cursive; font-size: 28px; color: #ff4d9d; text-transform: lowercase; text-shadow: 1px 1px 0 #fff, 2px 2px 0 #ffd64d; }
.csfg-tool-wrapper .csfg-s36 { font-family: "Comic Sans MS", cursive; font-size: 30px; color: #fff; background: repeating-radial-gradient(circle,#ff4d9d 0 6px,#6847ff 6px 14px); }
.csfg-tool-wrapper .csfg-s37 { font-family: "Comic Sans MS", cursive; font-size: 26px; color: #111827; border-left: 8px solid #ff4d9d; background: #ffffff; }
.csfg-tool-wrapper .csfg-s38 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #735100; background: #fff8d1; text-shadow: 0 0 10px #ffd84d; }
.csfg-tool-wrapper .csfg-s39 { font-family: "Comic Sans MS", cursive; font-size: 29px; font-weight: 900; color: #fff; background: #ff4d9d; clip-path: polygon(4% 0,100% 8%,96% 100%,0 92%); }
.csfg-tool-wrapper .csfg-s40 { font-family: "Comic Sans MS", cursive; font-size: 25px; color: #1a2438; background: linear-gradient(90deg,rgba(255,255,255,.9),rgba(183,255,176,.9)); }
.csfg-tool-wrapper .csfg-s41 { font-family: "Comic Sans MS", cursive; font-size: 28px; color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px #ff4d9d, 0 0 24px #5c7cff; background: #151326; }
.csfg-tool-wrapper .csfg-s42 { font-family: "Comic Sans MS", cursive; font-size: 24px; color: #2d2650; border: 2px dashed #2d2650; box-shadow: inset 0 0 0 6px #fff3a5; }
.csfg-tool-wrapper .csfg-s43 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #ff006e; background: linear-gradient(180deg,#fff,#ffdff0); text-shadow: 0 3px 0 #ffffff; }
.csfg-tool-wrapper .csfg-s44 { font-family: "Comic Sans MS", cursive; font-size: 30px; color: #09111f; -webkit-text-stroke: 1px #ffd84d; text-shadow: 4px 4px 0 #ff4d9d; }
.csfg-tool-wrapper .csfg-s45 { font-family: "Comic Sans MS", cursive; font-size: 26px; color: #0b7558; background: repeating-linear-gradient(0deg,#fff 0 10px,#dffff4 10px 20px); }
.csfg-tool-wrapper .csfg-s46 { font-family: "Comic Sans MS", cursive; font-size: 28px; color: #ffffff; background: #242038; border-radius: 12px; border: 3px solid #5fe3ff; }
.csfg-tool-wrapper .csfg-s47 { font-family: "Comic Sans MS", cursive; font-size: 25px; color: #392a00; background: #ffd84d; transform: rotate(-.6deg); box-shadow: 5px 5px 0 #ff75b8; }
.csfg-tool-wrapper .csfg-s48 { font-family: "Comic Sans MS", cursive; font-size: 29px; color: #6847ff; text-shadow: 2px 2px 0 #fff, 4px 4px 0 #35d7ff, 6px 6px 0 #ffdf5e; }
.csfg-tool-wrapper .csfg-s49 { font-family: "Comic Sans MS", cursive; font-size: 27px; color: #fff; background: conic-gradient(from 90deg,#ff4d9d,#ffd84d,#37d67a,#35d7ff,#6847ff,#ff4d9d); text-shadow: 2px 2px 0 rgba(0,0,0,.28); }
.csfg-tool-wrapper .csfg-s50 { font-family: "Comic Sans MS", cursive; font-size: 26px; color: #141225; background: #fff; border: 4px solid #141225; box-shadow: 7px 7px 0 #ff4d9d; }

@keyframes csfgFade {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 320px) and (max-width: 374px) {
  .csfg-tool-wrapper { padding: 26px 10px; }
  .csfg-tool-wrapper .csfg-shell { width: 100%; }
  .csfg-tool-wrapper .csfg-hero h2 { font-size: 30px; }
  .csfg-tool-wrapper .csfg-hero p { font-size: 14px; }
  .csfg-tool-wrapper .csfg-input-panel { padding: 14px 12px 54px; border-radius: 18px; }
  .csfg-tool-wrapper .csfg-textarea { min-height: 120px; font-size: 15px; padding: 13px; }
  .csfg-tool-wrapper .csfg-clear-btn, .csfg-tool-wrapper .csfg-load-btn, .csfg-tool-wrapper .csfg-copy-btn { font-size: 13px; padding: 10px 14px; }
  .csfg-tool-wrapper .csfg-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .csfg-tool-wrapper .csfg-card { padding: 13px; border-radius: 18px; }
  .csfg-tool-wrapper .csfg-preview { font-size: 22px; padding: 13px; }
}

@media (min-width: 375px) and (max-width: 429px) {
  .csfg-tool-wrapper { padding: 30px 12px; }
  .csfg-tool-wrapper .csfg-shell { width: 100%; }
  .csfg-tool-wrapper .csfg-hero h2 { font-size: 34px; }
  .csfg-tool-wrapper .csfg-hero p { font-size: 15px; }
  .csfg-tool-wrapper .csfg-input-panel { padding: 16px 14px 56px; }
  .csfg-tool-wrapper .csfg-textarea { min-height: 128px; font-size: 16px; padding: 14px; }
  .csfg-tool-wrapper .csfg-clear-btn, .csfg-tool-wrapper .csfg-load-btn, .csfg-tool-wrapper .csfg-copy-btn { font-size: 13px; padding: 11px 16px; }
  .csfg-tool-wrapper .csfg-grid { grid-template-columns: 1fr !important; gap: 15px; }
  .csfg-tool-wrapper .csfg-card { padding: 15px; }
  .csfg-tool-wrapper .csfg-preview { font-size: 23px; padding: 14px; }
}

@media (min-width: 430px) and (max-width: 767px) {
  .csfg-tool-wrapper { padding: 34px 14px; }
  .csfg-tool-wrapper .csfg-shell { width: 100%; }
  .csfg-tool-wrapper .csfg-hero h2 { font-size: 38px; }
  .csfg-tool-wrapper .csfg-hero p { font-size: 16px; }
  .csfg-tool-wrapper .csfg-input-panel { padding: 18px 16px 58px; }
  .csfg-tool-wrapper .csfg-textarea { min-height: 136px; font-size: 17px; padding: 15px; }
  .csfg-tool-wrapper .csfg-clear-btn, .csfg-tool-wrapper .csfg-load-btn, .csfg-tool-wrapper .csfg-copy-btn { font-size: 14px; padding: 11px 18px; }
  .csfg-tool-wrapper .csfg-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .csfg-tool-wrapper .csfg-card { padding: 16px; }
  .csfg-tool-wrapper .csfg-preview { font-size: 24px; padding: 15px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .csfg-tool-wrapper { padding: 40px 18px; }
  .csfg-tool-wrapper .csfg-shell { width: 100%; }
  .csfg-tool-wrapper .csfg-hero h2 { font-size: 42px; }
  .csfg-tool-wrapper .csfg-hero p { font-size: 16px; }
  .csfg-tool-wrapper .csfg-textarea { min-height: 140px; font-size: 17px; }
  .csfg-tool-wrapper .csfg-clear-btn, .csfg-tool-wrapper .csfg-load-btn, .csfg-tool-wrapper .csfg-copy-btn { font-size: 14px; }
  .csfg-tool-wrapper .csfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .csfg-tool-wrapper .csfg-card { padding: 17px; }
  .csfg-tool-wrapper .csfg-preview { font-size: 24px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .csfg-tool-wrapper { padding: 44px 20px; }
  .csfg-tool-wrapper .csfg-shell { width: 100%; }
  .csfg-tool-wrapper .csfg-hero h2 { font-size: 44px; }
  .csfg-tool-wrapper .csfg-hero p { font-size: 17px; }
  .csfg-tool-wrapper .csfg-textarea { min-height: 142px; font-size: 18px; }
  .csfg-tool-wrapper .csfg-clear-btn, .csfg-tool-wrapper .csfg-load-btn, .csfg-tool-wrapper .csfg-copy-btn { font-size: 14px; }
  .csfg-tool-wrapper .csfg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .csfg-tool-wrapper .csfg-card { padding: 18px; }
  .csfg-tool-wrapper .csfg-preview { font-size: 24px; }
}

@media (min-width: 1200px) {
  .csfg-tool-wrapper { padding: 50px 24px; }
  .csfg-tool-wrapper .csfg-shell { width: 100%; }
  .csfg-tool-wrapper .csfg-hero h2 { font-size: 46px; }
  .csfg-tool-wrapper .csfg-hero p { font-size: 17px; }
  .csfg-tool-wrapper .csfg-textarea { min-height: 144px; font-size: 18px; }
  .csfg-tool-wrapper .csfg-clear-btn, .csfg-tool-wrapper .csfg-load-btn, .csfg-tool-wrapper .csfg-copy-btn { font-size: 14px; }
  .csfg-tool-wrapper .csfg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .csfg-tool-wrapper .csfg-card { padding: 18px; }
  .csfg-tool-wrapper .csfg-preview { font-size: 24px; }
}