:root {
  --bg: #0a1c15;
  --card: #122a1f;
  --card-2: #0f231a;
  --line: rgba(233, 240, 230, .12);
  --amber: #f5b841;
  --amber-2: #ffd57e;
  --mint: #7fd7ae;
  --paper: #f8f4e8;
  --paper-2: #efe8d6;
  --ink: #22302a;
  --ink-muted: #607168;
  --text: #e9efe6;
  --muted: #9cb6a7;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --reading: "Lora", Georgia, "Times New Roman", serif;
  --shadow: 0 32px 72px -38px rgba(0, 0, 0, .72);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 480px at 88% -8%, rgba(245, 184, 65, .13), transparent 62%),
    radial-gradient(820px 560px at -8% 34%, rgba(127, 215, 174, .09), transparent 60%),
    radial-gradient(rgba(233, 240, 230, .055) 1px, transparent 1.5px);
  background-size: auto, auto, 22px 22px;
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
::selection { color: #132c22; background: rgba(245, 184, 65, .48); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 5px; }
.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; }
[hidden] { display: none !important; }

.ghost { position: fixed; z-index: 0; pointer-events: none; user-select: none; font: 600 clamp(140px, 22vw, 310px)/.8 var(--display); }
.ghost-a { top: -32px; right: 2%; color: rgba(245, 184, 65, .045); transform: rotate(9deg); }
.ghost-b { bottom: 4%; left: 1%; color: rgba(127, 215, 174, .035); transform: rotate(-8deg); }
.site-shell { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: clamp(20px, 3.5vw, 44px) clamp(16px, 3.2vw, 38px) 38px; font-family: var(--body); }
.site-shell * { font-family: inherit; }

.site-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; color: #3a2a05; background: linear-gradient(155deg, var(--amber-2), var(--amber)); border-radius: 14px; box-shadow: 0 10px 26px -10px rgba(245, 184, 65, .55), inset 0 1px 0 rgba(255, 255, 255, .5); transform: rotate(-5deg); font: 700 17px/1 var(--display); }
.brand small { display: block; margin: 0 0 3px; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; }
.brand strong { display: block; color: #f6f2e4; font: 600 clamp(25px, 3vw, 36px)/1 var(--display); letter-spacing: -.02em; }
.brand em { color: var(--amber-2); font-weight: inherit; }
.site-logo-link { flex: 0 1 350px; min-width: 220px; }
.site-logo { display: block; width: min(100%, 350px); height: auto; border-radius: 8px; }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.main-nav a { padding: 8px 14px; color: var(--muted); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 800; transition: .2s ease; }
.main-nav a:hover { color: var(--amber-2); background: rgba(245, 184, 65, .08); border-color: rgba(245, 184, 65, .5); transform: translateY(-1px); }
.ruler { height: 18px; margin: 21px 0 25px; opacity: .55; background-image: repeating-linear-gradient(90deg, rgba(245, 184, 65, .5) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(245, 184, 65, .85) 0 1.5px, transparent 1.5px 60px); background-position: left bottom; background-repeat: no-repeat; background-size: 100% 8px, 100% 16px; }

.home-hero { position: relative; max-width: 780px; margin: 0 auto; padding: clamp(34px, 7vw, 82px) 0 58px; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 21px; padding: 7px 15px; color: var(--mint); background: rgba(127, 215, 174, .09); border: 1px solid rgba(127, 215, 174, .28); border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 800; }
.hero-badge span { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 6px rgba(127, 215, 174, .08); }
.home-hero h1 { margin: 0; color: #f7f2e4; font: 600 clamp(47px, 8.2vw, 88px)/.98 var(--display); letter-spacing: -.045em; }
.home-hero h1 em { color: transparent; background: linear-gradient(120deg, var(--amber-2), var(--mint)); background-clip: text; -webkit-background-clip: text; font-weight: 500; }
.hero-lede { max-width: 610px; margin: 23px auto 31px; color: var(--muted); font-size: clamp(15px, 2vw, 17px); line-height: 1.8; }
.hero-search { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; max-width: 620px; margin: 0 auto; padding: 7px 8px 7px 16px; background: var(--card); border: 1px solid rgba(245, 184, 65, .3); border-radius: 15px; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); transition: .2s ease; }
.hero-search:focus-within { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 184, 65, .13), 0 24px 50px -30px rgba(0, 0, 0, .8); }
.hero-search > span { color: var(--amber); font: 24px/1 var(--display); }
.hero-search input { min-width: 0; padding: 9px 7px; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 15px; }
.hero-search input::placeholder { color: #759082; }
.hero-search button, .button-primary { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; color: #3a2a05; background: linear-gradient(150deg, var(--amber-2), var(--amber)); border: 0; border-radius: 10px; box-shadow: 0 10px 24px -13px rgba(245, 184, 65, .8); cursor: pointer; text-decoration: none; font-size: 12px; font-weight: 800; }
.live-search-results { position: absolute; z-index: 20; left: 50%; width: min(620px, 100%); max-height: 390px; margin-top: 8px; padding: 8px; overflow: auto; color: var(--text); background: #10251b; border: 1px solid rgba(245, 184, 65, .25); border-radius: 14px; box-shadow: 0 25px 55px rgba(0, 0, 0, .45); transform: translateX(-50%); text-align: left; }
.live-search-results a { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 9px; border-radius: 10px; text-decoration: none; }
.live-search-results a:hover, .live-search-results a:focus { background: rgba(255, 255, 255, .06); }
.live-search-results img { width: 42px; height: 42px; object-fit: cover; background: var(--paper); border-radius: 8px; }
.live-search-results strong { display: block; font-size: 13px; }
.live-search-results small { display: block; color: var(--muted); font-size: 10px; }
.live-search-results em { color: var(--amber); font-style: normal; }
.empty-live { padding: 14px; color: var(--muted); font-size: 12px; text-align: center; }
.hero-stats { display: flex; justify-content: center; gap: clamp(30px, 8vw, 68px); margin-top: 40px; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { color: var(--amber-2); font: 600 34px/1.1 var(--display); }
.hero-stats span { margin-top: 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; font-weight: 800; }

.featured-section, .tools-section, .related-section { margin-top: clamp(38px, 7vw, 82px); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.section-kicker { margin: 0 0 5px; color: var(--mint); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 800; }
.section-heading h2, .privacy-note h2 { margin: 0; color: #f6f2e4; font: 600 clamp(27px, 4vw, 38px)/1.15 var(--display); letter-spacing: -.02em; }
.section-heading > a { color: var(--amber-2); text-decoration: none; font-size: 12px; font-weight: 800; }
.featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.featured-card { position: relative; min-height: 300px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); text-decoration: none; isolation: isolate; }
.featured-card img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.featured-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 28, 21, .02) 20%, rgba(10, 28, 21, .95) 92%); }
.featured-copy { position: absolute; z-index: 2; inset: auto 18px 18px; display: flex; flex-direction: column; align-items: flex-start; }
.featured-copy small { margin-bottom: 7px; color: var(--mint); text-transform: uppercase; letter-spacing: .18em; font-size: 9px; font-weight: 800; }
.featured-copy strong { color: #fff9e8; font: 600 20px/1.2 var(--display); }
.featured-copy em { margin-top: 12px; color: var(--amber-2); font-size: 10px; font-style: normal; font-weight: 800; }
.featured-card:hover img { transform: scale(1.045); }
.featured-card:hover { border-color: rgba(245, 184, 65, .5); }

.tools-title { margin-bottom: 17px; }
.result-count { margin: 0; color: var(--muted); font-size: 11px; }
.result-count strong { color: var(--amber-2); font: 600 22px/1 var(--display); }
.filter-bar { display: flex; gap: 7px; margin: 0 0 22px; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; }
.filter-button { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; min-height: 39px; padding: 8px 13px; color: var(--muted); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; white-space: nowrap; font-size: 10px; font-weight: 800; transition: .2s ease; }
.filter-button span { color: var(--mint); font-family: var(--display); }
.filter-button:hover, .filter-button.active { color: #3a2a05; background: linear-gradient(145deg, var(--amber-2), var(--amber)); border-color: transparent; }
.filter-button.active span { color: #3a2a05; }
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-card { min-width: 0; overflow: hidden; background: linear-gradient(180deg, rgba(18, 42, 31, .96), rgba(15, 35, 26, .96)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 45px -35px rgba(0, 0, 0, .8); transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease; }
.tool-card:hover { border-color: rgba(245, 184, 65, .52); box-shadow: 0 25px 55px -35px rgba(0, 0, 0, .9); transform: translateY(-4px); }
.card-link { display: grid; grid-template-columns: 130px minmax(0, 1fr); min-height: 190px; color: inherit; text-decoration: none; }
.card-media { position: relative; min-height: 100%; overflow: hidden; background: #173126; }
.card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, rgba(15, 35, 26, .82)); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tool-card:hover .card-media img { transform: scale(1.05); }
.card-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--amber-2); font: 600 35px/1 var(--display); }
.card-arrow { position: absolute; z-index: 2; top: 10px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; color: #3a2a05; background: var(--amber-2); border-radius: 50%; font-size: 12px; opacity: 0; transform: translate(-5px, 5px); transition: .2s ease; }
.tool-card:hover .card-arrow { opacity: 1; transform: none; }
.card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 17px 16px 15px; }
.card-category { margin: 0 0 6px !important; color: var(--mint) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 8px !important; font-weight: 800; }
.card-copy h3 { margin: 0; color: #f7f1e2; font: 600 18px/1.22 var(--display); letter-spacing: -.01em; }
.card-copy > p:not(.card-category) { display: -webkit-box; margin: 8px 0 11px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-action { margin-top: auto; color: var(--amber-2); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.filter-empty { padding: 24px; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 14px; text-align: center; }

.privacy-note { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 25px; margin: clamp(55px, 8vw, 96px) 0; padding: clamp(24px, 5vw, 48px); color: var(--ink); background: var(--paper); border: 1px solid rgba(245, 184, 65, .24); border-radius: 18px; box-shadow: var(--shadow); }
.privacy-mark { display: grid; place-items: center; width: 70px; height: 70px; color: #163527; background: var(--amber); border-radius: 19px; transform: rotate(-4deg); font: 700 30px/1 var(--display); }
.privacy-note .section-kicker { color: #9a6810; }
.privacy-note h2 { color: #163527; }
.privacy-note p:last-child { max-width: 780px; margin: 9px 0 0; color: var(--ink-muted); font-size: 14px; }

.breadcrumbs { display: flex; align-items: center; gap: 8px; margin: 5px 0 22px; overflow: hidden; color: var(--muted); white-space: nowrap; font-size: 10px; }
.breadcrumbs a { color: var(--mint); text-decoration: none; }
.breadcrumbs span:last-child { overflow: hidden; text-overflow: ellipsis; }
.archive-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; max-width: 900px; padding: clamp(28px, 5vw, 52px) 0 34px; }
.archive-icon { display: grid; place-items: center; width: 95px; height: 95px; color: #3a2a05; background: linear-gradient(150deg, var(--amber-2), var(--amber)); border-radius: 25px; box-shadow: 0 18px 38px -20px rgba(245, 184, 65, .7); transform: rotate(-4deg); font: 600 30px/1 var(--display); }
.archive-hero h1, .search-page h1 { margin: 0; color: #f7f2e4; font: 600 clamp(38px, 6vw, 62px)/1 var(--display); letter-spacing: -.035em; }
.archive-hero p:not(.section-kicker) { max-width: 720px; margin: 12px 0 13px; color: var(--muted); }
.archive-count { color: var(--amber-2); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.archive-section { padding: 20px 0 50px; }

.single-tool { padding-bottom: 8px; }

.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .tool-paper,
.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .tool-content.has-native-app,
.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .tool-guide--silk-weave {
  overflow: visible !important;
}

.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .tool-paper {
  overflow: hidden !important;
}

.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .tool-app-stage {
  overflow: visible !important;
}

.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .tool-content.has-native-app {
  min-height: 0;
}

.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .native-app-shell.native-app--silk-weave,
.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .native-app-shell.native-app--silk-weave .native-package-body {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 20px 20px 0 0 !important;
}

.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .native-app--silk-weave,
.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .native-app--silk-weave .topbar {
  border-radius: 0 !important;
}

.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .native-app-shell.native-app--silk-weave,
.single-tool[data-tool-slug="silk-weave-drawing-with-video-recording"] .native-app-shell.native-app--silk-weave .native-package-body {
  border-radius: 0 0 0 0 !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app--lava-lamp,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app--lava-lamp .topbar {
  border-radius: 0 !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp .native-package-body {
  border-radius: 0 !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .tool-content.has-native-app,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .tool-guide--lava-lamp,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .tool-app-stage {
  overflow: visible !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .tool-paper,
.single-tool[data-tool-slug="online-animated-spirograph-creator"] .tool-content.has-native-app,
.single-tool[data-tool-slug="online-animated-spirograph-creator"] .tool-guide--spirograph,
.single-tool[data-tool-slug="online-animated-spirograph-creator"] .tool-app-stage {
  overflow: hidden !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .tool-content.has-native-app {
  min-height: 0;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp .native-package-body {
  position: relative !important;
  width: 100% !important;
  height: clamp(960px, calc(100dvh - 10px), 1480px) !important;
  min-height: clamp(960px, calc(100dvh - 10px), 1480px) !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 20px 20px 0 0 !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp .app,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp .workspace {
  min-height: calc(clamp(960px, calc(100dvh - 10px), 1480px) - var(--top-h)) !important;
  height: calc(clamp(960px, calc(100dvh - 10px), 1480px) - var(--top-h)) !important;
  max-height: none !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp .app {
  min-height: 100% !important;
  max-height: none !important;
  height: 100% !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp #workspace {
  margin-bottom: 0 !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph,
.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph .native-package-body {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph .app-shell {
  --panel-w: min(310px, 46vw) !important;
  --right-w: min(290px, 42vw) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(620px, 78dvh, 980px);
  height: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph:fullscreen,
.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  background: #020613 !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph:fullscreen .native-package-body,
.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph:-webkit-full-screen .native-package-body {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph:fullscreen .app-shell,
.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app-shell.native-app--spirograph:-webkit-full-screen .app-shell {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app--spirograph .panel-left {
  left: 28px !important;
  width: var(--panel-w) !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app--spirograph .panel-right {
  right: 28px !important;
  width: var(--right-w) !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app--spirograph .panel-left.is-collapsed {
  transform: translateX(calc(-100% - 30px)) !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app--spirograph .panel-right.is-collapsed {
  transform: translateX(calc(100% + 30px)) !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app--spirograph .panel-edge-toggle-left.is-open {
  left: calc(28px + var(--panel-w) - 1px) !important;
}

.single-tool[data-tool-slug="online-animated-spirograph-creator"] .native-app--spirograph .panel-edge-toggle-right.is-open {
  right: calc(28px + var(--right-w) - 1px) !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:fullscreen,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  background: #05070a !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:fullscreen .native-package-body,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:-webkit-full-screen .native-package-body {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:fullscreen .app,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:-webkit-full-screen .app {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:fullscreen #workspace,
.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .native-app-shell.native-app--lava-lamp:-webkit-full-screen #workspace {
  height: calc(100dvh - var(--top-h)) !important;
  max-height: calc(100dvh - var(--top-h)) !important;
}

.single-tool[data-tool-slug="custom-lava-lamp-online-simulator"] .tool-app-stage {
  min-height: 0;
}

.tool-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .7fr); align-items: center; gap: clamp(26px, 5vw, 65px); padding: clamp(27px, 5vw, 58px) 0 clamp(36px, 6vw, 70px); }
.tool-hero:not(.has-featured-image) { display: block; max-width: 1120px; }
.tool-hero:not(.has-featured-image) .tool-hero-copy { max-width: 1020px; }
.tool-hero h1 { max-width: 800px; margin: 5px 0 17px; color: #f7f2e4; font: 600 clamp(38px, 6vw, 67px)/1.03 var(--display); letter-spacing: -.04em; }
.tool-summary { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(14px, 1.7vw, 17px); line-height: 1.75; }
.tool-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 21px; color: #c1d3c7; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.tool-meta b { margin-right: 4px; color: var(--mint); }
.tool-hero-image { position: relative; display: grid; place-items: center; aspect-ratio: var(--featured-ratio, 4 / 3); max-height: 480px; margin: 0; padding: clamp(9px, 1.3vw, 15px); overflow: hidden; background: radial-gradient(500px 230px at 90% 0, rgba(127, 215, 174, .13), transparent 70%), linear-gradient(145deg, #17372a, #10291e); border: 1px solid rgba(245, 184, 65, .32); border-radius: 21px; box-shadow: var(--shadow); }
.tool-hero-image::after { content: ""; position: absolute; inset: clamp(9px, 1.3vw, 15px); z-index: 2; border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; box-shadow: inset 0 0 35px rgba(8, 24, 17, .12); pointer-events: none; }
.tool-hero-image img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 14px; }
.tool-paper { overflow: hidden; color: var(--ink); background: var(--paper); border: 1px solid rgba(245, 184, 65, .25); border-radius: 20px; box-shadow: 0 42px 88px -45px rgba(0, 0, 0, .78); }
.paper-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px clamp(17px, 3vw, 30px); color: var(--text); background: linear-gradient(180deg, #163527, #112a1e); border-bottom: 1px solid rgba(245, 184, 65, .28); }
.paper-ribbon > strong { min-width: 0; overflow: hidden; color: var(--amber-2); text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
.paper-ribbon small { color: var(--muted); font-size: 10px; }
.fullscreen-button { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 8px; min-height: 38px; padding: 7px 10px; color: #dcebe1; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; cursor: pointer; text-transform: uppercase; letter-spacing: .09em; font-size: 9px; font-weight: 800; transition: .2s ease; }
.fullscreen-button:hover { color: var(--amber-2); background: rgba(245, 184, 65, .09); border-color: rgba(245, 184, 65, .5); }
.fullscreen-icon { position: relative; display: block; width: 20px; height: 20px; }
.fullscreen-icon i { position: absolute; width: 7px; height: 7px; border-color: currentColor; border-style: solid; }
.fullscreen-icon i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.fullscreen-icon i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.fullscreen-icon i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.fullscreen-icon i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.tool-content { min-height: 220px; padding: clamp(18px, 4vw, 46px); overflow-wrap: anywhere; }
.tool-content > :first-child { margin-top: 0; }
.tool-content > :last-child { margin-bottom: 0; }
.tool-content h1, .tool-content h2, .tool-content h3, .tool-content h4, .tool-content h5, .tool-content h6 { color: #163226; font-family: var(--display); font-optical-sizing: auto; font-weight: 600; line-height: 1.18; letter-spacing: -.025em; }
.tool-content h1 { font-size: clamp(30px, 4vw, 42px); }
.tool-content h2 { margin: 1.65em 0 .65em; font-size: clamp(26px, 3.4vw, 38px); }
.tool-content h3 { margin: 1.5em 0 .6em; font-size: clamp(20px, 2.5vw, 27px); }
.tool-content h4 { font-size: 19px; }
.tool-content p, .tool-content li { color: #33443b; font-size: 16px; line-height: 1.82; }
.tool-content p { margin: 0 0 1.2em; }
.tool-content a { color: #0c7552; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.tool-content ul, .tool-content ol { padding-left: 1.5em; }
.tool-content blockquote { margin: 1.6em 0; padding: 8px 0 8px 21px; color: var(--ink-muted); border-left: 3px solid var(--amber); font-family: var(--reading); font-style: italic; }
.tool-content table { display: table; width: 100%; max-width: 100%; border-collapse: collapse; }
.tool-content th, .tool-content td { padding: 10px 12px; border: 1px solid #d8d1be; text-align: left; }
.tool-content th { color: #173126; background: var(--paper-2); }
.tool-content figure { max-width: 100%; margin-right: 0; margin-left: 0; overflow-x: auto; }
.tool-content iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.tool-content center { max-width: 100%; }
.content-center { max-width: 100%; text-align: center; }
.content-center > iframe, .content-center > object, .content-center > embed { margin-right: auto; margin-left: auto; }
.tool-content input, .tool-content textarea, .tool-content select, .tool-content button { max-width: 100%; }
.tool-content pre { max-width: 100%; padding: 14px; overflow: auto; background: #eee7d7; border-radius: 9px; }
.tool-content .tgtfs { overflow: hidden; border-radius: 10px 10px 0 0; }
.tool-content .tgtfs span { max-width: calc(100% - 55px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(13px, 2vw, 20px) !important; }
.tool-content.has-native-app { padding: 0; }
.tool-app-stage { position: relative; min-height: 260px; background: #edf1eb; }
.tool-guide {
  --article-width: 830px;
  position: relative;
  padding: clamp(34px, 6vw, 76px) clamp(22px, 7vw, 88px) clamp(45px, 7vw, 86px);
}
.tool-guide > :first-child { margin-top: 0; }
.tool-guide > :last-child { margin-bottom: 0; }
.tool-guide > div { width: min(100%, var(--article-width, 830px)); margin-right: auto; margin-left: auto; }
.related-tool-callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: min(100%, var(--article-width, 830px)); margin: 0 auto clamp(36px, 6vw, 64px); padding: clamp(17px, 3vw, 24px); color: #e9efe6; background: radial-gradient(360px 130px at 100% 0, rgba(127, 215, 174, .15), transparent 72%), linear-gradient(145deg, #173a2b, #10291e); border: 1px solid rgba(245, 184, 65, .5); border-radius: 15px; box-shadow: 0 22px 48px -34px rgba(5, 25, 17, .85); }
.related-tool-callout > span { padding: 6px 9px; color: #3a2a05; background: linear-gradient(145deg, var(--amber-2), var(--amber)); border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; font-size: 8px; font-weight: 900; }
.related-tool-callout div { min-width: 0; }
.related-tool-callout small { display: block; margin-bottom: 2px; color: #9cb6a7; text-transform: uppercase; letter-spacing: .1em; font-size: 8px; font-weight: 800; }
.related-tool-callout a { display: inline; color: #fff8e7; text-decoration-color: var(--mint); text-decoration-thickness: 1px; text-underline-offset: 4px; font: 600 clamp(16px, 2.2vw, 21px)/1.35 var(--display); }
.related-tool-callout a:hover { color: var(--mint); }
.related-tool-callout > b { color: var(--amber-2); font-size: 24px; font-weight: 400; }
.tool-guide > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote),
.tool-content:not(.has-native-app) > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) { width: min(100%, var(--article-width, 830px)); margin-right: auto; margin-left: auto; }
.tool-guide > h2:first-of-type,
.tool-content:not(.has-native-app) > h2:first-of-type {
  position: relative;
  width: min(100%, 940px);
  margin-bottom: clamp(32px, 5vw, 55px);
  padding-bottom: clamp(22px, 3vw, 31px);
  border-bottom: 1px solid rgba(22, 50, 38, .24);
  font-size: clamp(31px, 4.6vw, 49px);
  line-height: 1.08;
  text-wrap: balance;
}
.tool-guide > h2:first-of-type::after,
.tool-content:not(.has-native-app) > h2:first-of-type::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 88px; height: 3px; background: linear-gradient(90deg, #c88a1c, var(--amber)); border-radius: 99px; }
.tool-guide > p,
.tool-guide > ul,
.tool-guide > ol,
.tool-content:not(.has-native-app) > p,
.tool-content:not(.has-native-app) > ul,
.tool-content:not(.has-native-app) > ol { font-family: var(--reading); font-optical-sizing: auto; font-size: clamp(16.5px, 1.55vw, 18px); line-height: 1.92; letter-spacing: -.012em; }
.tool-guide > p:has(> strong:only-child),
.tool-content:not(.has-native-app) > p:has(> strong:only-child) {
  margin-top: clamp(30px, 4.5vw, 48px);
  margin-bottom: 10px;
  color: #17372a;
  font-family: var(--reading);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.55;
  text-transform: none;
}
.tool-guide > p:has(> strong:only-child) strong,
.tool-content:not(.has-native-app) > p:has(> strong:only-child) strong { font: inherit; }
.tool-guide li + li,
.tool-content:not(.has-native-app) li + li { margin-top: .55em; }
.tool-guide li::marker,
.tool-content:not(.has-native-app) li::marker { color: #b97b12; font-family: var(--body); font-weight: 800; }
.tool-guide strong:not(h2 strong),
.tool-content:not(.has-native-app) strong:not(h2 strong) { color: #203b2f; font-weight: 700; }
.tool-guide ul { list-style: disc; }
.tool-guide ol { list-style: decimal; }
.tool-guide li { padding-left: .2em; }

/* Native app framework */
.native-app-shell { position: relative; min-height: 620px; overflow: hidden; color: #26372f; background-color: #edf1eb; background-image: radial-gradient(rgba(18, 42, 31, .08) 1px, transparent 1.5px), radial-gradient(700px 320px at 90% 0, rgba(245, 184, 65, .12), transparent 60%); background-size: 20px 20px, auto; overflow-wrap: normal; }
.native-app-shell:fullscreen { width: 100vw; height: 100vh; overflow: auto; background-color: #edf1eb; }
.native-app-shell:-webkit-full-screen { width: 100vw; height: 100vh; overflow: auto; background-color: #edf1eb; }
html.silk-weave-overflow-lock,
body.silk-weave-overflow-lock {
  overflow: hidden !important;
}
.native-app--lighhouse-iframe { width: 100%; height: 650px; min-height: 650px; overflow: hidden; background: #f3cece; }
.native-app--lighhouse-iframe iframe { display: block; width: 100%; height: 100%; border: 0; }
.native-app--lighhouse-iframe:fullscreen,
.native-app--lighhouse-iframe:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 100vh; overflow: hidden; background: #f3cece; }
.native-app--typing-trainer-iframe { width: 100%; height: 650px; min-height: 650px; overflow: hidden; background: #333; }
.native-app--typing-trainer-iframe iframe { display: block; width: 100%; height: 100%; border: 0; background: #333; }
.native-app--typing-trainer-iframe:fullscreen,
.native-app--typing-trainer-iframe:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 100vh; overflow: auto; background: #333; }
@media (max-width: 560px) {
  .native-app--typing-trainer-iframe { height: 700px; min-height: 700px; }
}
.native-app--gravity-text-iframe { width: 100%; height: 650px; min-height: 650px; overflow: hidden; background: #fff; }
.native-app--gravity-text-iframe iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.native-app--gravity-text-iframe:fullscreen,
.native-app--gravity-text-iframe:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 100vh; overflow: hidden; background: #fff; }
.native-app--periodic-table {
  width: 100%;
  min-height: 0;
  overflow: visible;
  background: #fefefe;
}
.native-app--periodic-table .native-package-body {
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.periodic-chart-download {
  width: min(100%, 1100px);
  margin: 24px auto !important;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #d8d1be;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px -34px rgba(7, 37, 25, .65);
}
.periodic-chart-download img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}
.tool-guide .periodic-chart-action,
.periodic-chart-action {
  display: flex !important;
  width: 100% !important;
  margin: 26px auto !important;
  justify-content: center !important;
  text-align: center !important;
}
.periodic-chart-button,
.periodic-chart-button:link,
.periodic-chart-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  background: #0d6b4d;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px -16px rgba(7, 55, 39, .9);
}
.periodic-chart-button:hover,
.periodic-chart-button:focus-visible { background: #084d38; color: #fff; }
.native-app--random-recipe {
  width: 100%;
  min-height: 0;
  overflow: visible;
  background: #f6f2e8;
}
.native-app--random-recipe .native-package-body {
  width: 100%;
  min-height: 0;
  padding: 0;
}
.native-app--random-recipe .recipe-app {
  min-height: 0;
}
.native-app--password-generator {
  width: 100%;
  min-height: 0;
  overflow: visible;
  background: #f3efe5;
}
.native-app--password-generator .native-package-body {
  width: 100%;
  min-height: 0;
  padding: 0;
}
.native-app--temperature-converter { min-height: 0; overflow: visible; background: #09291d; }
.native-app--temperature-converter .native-package-body { width: 100%; min-height: 0; padding: 0; overflow: visible; }
.native-app--photo-editor { width: 100%; height: clamp(680px, 72vw, 820px); min-height: 680px; overflow: hidden; background: #1e1e1e; }
.native-app--photo-editor .native-package-body,
.native-app--photo-editor #tui-image-editor-container { width: 100%; height: 100%; min-height: 680px; padding: 0; overflow: hidden; }
.native-app--photo-editor .tui-image-editor-container .tui-image-editor-header { min-width: 0; }
.native-app--photo-editor .tui-image-editor-container .tui-image-editor-wrap { overflow: hidden; }
.native-app--simple-note { min-height: 0; overflow: visible; background: #e9e1cf; }
.native-app--simple-note .native-package-body { width: 100%; min-height: 0; padding: 0; overflow: visible; }
.native-app--ms-paint { width: 100%; height: clamp(680px, 74vw, 840px) !important; min-height: 680px; overflow: hidden; background: #c0c0c0; isolation: isolate; }
.native-app--ms-paint .native-package-body { position: relative; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
.native-app--ms-paint .jspaint { display: flex !important; width: 100%; height: 100%; min-height: 0; flex-direction: column; }
.native-app--ms-paint .jspaint > .vertical { display: flex !important; width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.native-app--ms-paint .jspaint > .vertical > .horizontal { display: flex !important; width: 100%; min-width: 0; min-height: 0; flex: 1 1 0; flex-direction: row; }
.native-app--ms-paint .canvas-area { min-width: 0; min-height: 0; flex: 1 1 auto; }
.native-app--ms-paint .vertical > .component-area,
.native-app--ms-paint .vertical > .status-area { flex: 0 0 auto; }
.native-app--ms-paint,
.native-app--ms-paint * { font-family: Arial, Helvetica, sans-serif !important; }
.native-app--ms-paint ul,
.native-app--ms-paint ol { padding-left: 0; }
.native-app--ms-paint li { color: inherit !important; font-size: inherit !important; line-height: normal !important; }
.native-app--ms-paint .horizontal > .component-area:first-child { display: flex !important; flex: 0 0 53px; width: 53px; min-width: 53px; visibility: visible !important; z-index: 4; }
.native-app--ms-paint .Tools-component,
.native-app--ms-paint .Tools-component .tools,
.native-app--ms-paint .Tools-component .tool-options { display: flex !important; visibility: visible !important; }
.native-app--ms-paint .Tools-component { width: 49px; min-width: 49px; height: 273px; flex: 0 0 auto; }
.native-app--ms-paint:fullscreen,
.native-app--ms-paint:-webkit-full-screen { width: 100vw; height: 100vh !important; min-height: 0; overflow: hidden; background: #c0c0c0; }
@media (max-width: 600px) {
  .native-app--ms-paint { height: 700px !important; min-height: 700px; }
  .native-app--ms-paint .horizontal > .component-area:first-child { flex-basis: 49px; width: 49px; min-width: 49px; }
}
.native-app--photo-editor:fullscreen,
.native-app--photo-editor:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 0; overflow: hidden; background: #1e1e1e; }
.native-app--photo-editor:fullscreen .native-package-body,
.native-app--photo-editor:fullscreen #tui-image-editor-container,
.native-app--photo-editor:-webkit-full-screen .native-package-body,
.native-app--photo-editor:-webkit-full-screen #tui-image-editor-container { height: 100%; min-height: 0; }
@media (max-width: 700px) {
  .native-app--photo-editor { height: 720px; min-height: 720px; }
  .native-app--photo-editor .native-package-body,
  .native-app--photo-editor #tui-image-editor-container { min-height: 720px; }
  .native-app--photo-editor .tui-image-editor-header-logo { display: none; }
  .native-app--photo-editor .tui-image-editor-header-buttons { display: flex; float: none; gap: 8px; margin: 8px; justify-content: center; }
  .native-app--photo-editor .tui-image-editor-container .tui-image-editor-header-buttons button,
  .native-app--photo-editor .tui-image-editor-container .tui-image-editor-header-buttons div { width: min(42vw, 150px); }
  .native-app--photo-editor .tui-image-editor-container.bottom .tui-image-editor-main { top: 58px; }
  .native-app--photo-editor .tui-image-editor-container.bottom .tui-image-editor-main-container { bottom: 112px; }
  .native-app--photo-editor .tui-image-editor-container.bottom .tui-image-editor-controls { height: 112px; }
  .native-app--photo-editor .tui-image-editor-container .tui-image-editor-menu { display: flex; width: 100%; height: 112px; flex-wrap: wrap; align-content: center; justify-content: center; white-space: normal; }
  .native-app--photo-editor .tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item { width: 20%; margin: 0; padding: 5px 2px 2px; }
  .native-app--photo-editor .tui-image-editor-container .tui-image-editor-icpartition { display: none; }
  .native-app--photo-editor .tui-image-editor-container.bottom .tui-image-editor-submenu { bottom: 112px; height: auto; min-height: 126px; overflow: hidden; }
}
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) *,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) *::before,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) *::after { font-family: Inter, var(--body); }
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) h1,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) h2,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) h3,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) h4,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) h5,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) h6 { color: inherit; font-family: Inter, var(--body); letter-spacing: normal; }
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) p,
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) li { color: inherit; font-size: inherit; line-height: 1.55; }
.native-app-shell:not(.native-app--calligraphy-maker):not(.native-app--ai-humanizer):not(.native-app--instrument):not(.native-app--times-table):not(.native-app--voice-recorder):not(.native-app--text-to-voice):not(.native-app--tombstone-generator):not(.native-app--wheel-spinner):not(.native-app--ai-mail-generator):not(.native-app--moral-alignment-quiz) a { color: #176b50; }
.native-app-shell.native-app--moral-alignment-quiz { min-height: 0; color: #ecf5ef; background-color: #092a1d; background-image: radial-gradient(760px 420px at 100% 0, rgba(127, 215, 174, .15), transparent 64%), radial-gradient(540px 340px at 0 26%, rgba(245, 184, 65, .09), transparent 68%), radial-gradient(rgba(238, 246, 240, .055) 1px, transparent 1.5px); background-size: auto, auto, 20px 20px; }
.native-app-shell.native-app--duplicate-sentence-finder { min-height: 0; color: #eaf4ed; background-color: #09291c; background-image: radial-gradient(720px 380px at 100% 0, rgba(127, 215, 174, .14), transparent 66%), radial-gradient(520px 340px at 0 36%, rgba(245, 184, 65, .08), transparent 70%), radial-gradient(rgba(238, 246, 240, .05) 1px, transparent 1.5px); background-size: auto, auto, 20px 20px; }
.pre-app-tool-callout { padding: clamp(25px, 4vw, 42px) clamp(22px, 5vw, 58px); background: #f7f1e5; border-bottom: 1px solid #d8d2c5; }
.tool-content .pre-app-tool-callout strong { display: block; margin: 0; color: #17372a !important; -webkit-text-fill-color: #17372a !important; font: 600 clamp(28px, 4.2vw, 48px)/1.12 var(--display); letter-spacing: -.025em; }
.tool-content .pre-app-tool-callout a { color: #167255 !important; -webkit-text-fill-color: #167255 !important; text-decoration: underline; text-decoration-color: rgba(22, 114, 85, .35); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tool-content .pre-app-tool-callout a:hover { color: #0f5d44 !important; -webkit-text-fill-color: #0f5d44 !important; text-decoration-color: #f0b33c; }
.tool-content .pre-app-tool-callout a:focus-visible { outline: 3px solid rgba(22, 114, 85, .28); outline-offset: 5px; border-radius: 3px; }
.games-directory-callout { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; width: min(100%, var(--article-width, 830px)); margin: 0 auto clamp(34px, 6vw, 58px); padding: clamp(17px, 3vw, 23px); color: #eef6f0; background: radial-gradient(360px 150px at 100% 0, rgba(127, 215, 174, .15), transparent 70%), linear-gradient(140deg, #173b2b, #0d291d); border: 1px solid rgba(245, 184, 65, .5); border-radius: 16px; box-shadow: 0 22px 48px -34px rgba(5, 25, 17, .95); }
.games-directory-callout > span { display: grid; width: 45px; height: 45px; place-items: center; color: #173326; background: linear-gradient(135deg, #f5c969, #7fd7ae); border-radius: 12px; font-size: 23px; font-weight: 500; }
.tool-content .tool-guide .games-directory-callout p { margin: 0 !important; color: #dce9e1 !important; -webkit-text-fill-color: #dce9e1 !important; font-size: clamp(12px, 1.8vw, 15px) !important; line-height: 1.5 !important; }
.tool-content .tool-guide .games-directory-callout strong { color: #fff8e8 !important; -webkit-text-fill-color: #fff8e8 !important; }
.tool-content .tool-guide .games-directory-callout a { color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(245, 201, 105, .48); text-underline-offset: 3px; }
.games-directory-callout > b { color: #f5c969; font-size: 21px; font-weight: 500; }
@media (max-width: 520px) {
  .games-directory-callout { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .games-directory-callout > b { display: none; }
}
.native-app-shell .overlay { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; }
.native-app-shell .navbar { color: #e9efe6; background: #153326 !important; border-bottom: 1px solid rgba(245, 184, 65, .23); }
.native-app-shell .navbar-brand, .native-app-shell .navbar .nav-link { color: #e9efe6; }
.native-app-shell .navbar .nav-link:hover, .native-app-shell .navbar-brand:hover { color: var(--amber-2); }
.native-app-shell .navbar-toggler { border-color: rgba(255, 255, 255, .25); }
.native-app-shell .btn-primary { color: #10281d; background: var(--mint); border-color: #64c799; }
.native-app-shell .btn-primary:hover { color: #10281d; background: #9ae7c4; border-color: #82d9b2; }
.native-app-shell .btn-warning { color: #3a2a05; background: var(--amber); border-color: #dea431; }
.native-package-body { min-height: 620px; padding-bottom: 28px; }
.native-app--neural-drum-machine,
.native-app--neural-drum-machine .native-package-body { width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding-bottom: 0; overflow: visible; }
.native-app--screen-recorder,
.native-app--screen-recorder .native-package-body { width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding-bottom: 0; overflow: visible; }
.native-app--screen-webcam-recorder,
.native-app--screen-webcam-recorder .native-package-body { width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding-bottom: 0; overflow: visible; }
.native-app--browser-info,
.native-app--browser-info .native-package-body { width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding-bottom: 0; overflow: visible; }
.native-app--number-to-words,
.native-app--number-to-words .native-package-body { width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding-bottom: 0; overflow: visible; }
.native-app--chord-arpeggiator,
.native-app--chord-arpeggiator .native-package-body { width: 100%; max-width: 100%; min-width: 0; min-height: 0; padding-bottom: 0; overflow: visible; }
.native-app--music-paint { width: 100%; max-width: 100%; height: clamp(580px, 70vw, 780px); min-height: 580px; overflow-x: visible; overflow-y: hidden; background: #222; }
.native-app--music-paint .native-package-body { position: relative; width: 100%; max-width: 100%; height: 100%; min-height: 580px; padding: 0; overflow: visible; background: #222; }
.native-app--music-paint .app-shell { width: 100%; max-width: 100%; }
.native-app--music-paint #symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.native-app--music-paint nav a { display: block; width: 64px; height: 64px; color: #fff; }
.native-app--music-paint nav a:focus-visible { outline: 3px solid #f5b841; outline-offset: -3px; }
.native-app--music-paint main:focus { outline: 0; }
.native-app--music-paint:fullscreen,
.native-app--music-paint:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 0; overflow: hidden; background: #222; }
@media (max-width: 699px) {
  .native-app--music-paint { height: 680px; }
  .native-app--music-paint .native-package-body { min-height: 680px; }
}
.native-app--colorful-bubbles { min-height: 0; overflow: hidden; background: #000; }
.native-app--colorful-bubbles .native-package-body { padding: 0; }
.native-app--moving-skull { min-height: 0; overflow: hidden; background: #000f1d; }
.native-app--moving-skull .native-package-body { padding: 0; }
.native-app--space-globe { min-height: 0; overflow: hidden; background: #02020a; }
.native-app--space-globe .native-package-body { padding: 0; }
.native-app--age-calculator { min-height: 0; overflow: hidden; }
.native-app--age-calculator .native-package-body { padding: 0; }
.native-app--silk-weave { position: relative; display: block; width: 100%; min-height: 0; height: auto; overflow: hidden; border-radius: 20px 20px 0 0; background: #05070a; }
.native-app--silk-weave .native-package-body { position: relative; width: 100%; min-height: 0; padding: 0; overflow: hidden; }
.native-app-shell.native-app--silk-weave,
.native-app-shell.native-app--silk-weave .native-package-body {
  overflow: visible !important;
}
.native-app--silk-weave:fullscreen,
.native-app--silk-weave:-webkit-full-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #05070a;
}
.native-app--silk-weave:fullscreen .native-package-body,
.native-app--silk-weave:-webkit-full-screen .native-package-body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.native-app--lava-lamp { 
  position: relative; 
  display: block; 
  width: 100%; 
  min-height: 0;
  height: auto; 
  overflow: hidden; 
  border-radius: 20px 20px 0 0; 
  background: #05070a; 
}
.native-app--lava-lamp .native-package-body { 
  position: relative; 
  width: 100%; 
  min-height: 0; 
  height: auto; 
  padding: 0; 
  overflow: hidden; 
}

.native-app--lava-lamp #workspace {
  height: calc(100% - var(--top-h)) !important;
  min-height: 0 !important;
  background: #080914 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.native-app--lava-lamp:fullscreen,
.native-app--lava-lamp:-webkit-full-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #05070a;
}

.native-app--lava-lamp:fullscreen .native-package-body,
.native-app--lava-lamp:-webkit-full-screen .native-package-body {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.native-app--lava-lamp:fullscreen .app,
.native-app--lava-lamp:-webkit-full-screen .app {
  height: 100dvh;
  min-height: 100dvh;
}

.native-app--lava-lamp:fullscreen #workspace,
.native-app--lava-lamp:-webkit-full-screen #workspace {
  height: calc(100dvh - var(--top-h)) !important;
}

.native-app--stopwatch-pro { position: relative; display: block; width: 100%; min-height: 780px; overflow: hidden; background: #0a0a14; isolation: isolate; }
.native-app--stopwatch-pro .native-package-body { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 780px; padding: 0; overflow-x: hidden; perspective: 1200px; user-select: none; -webkit-tap-highlight-color: transparent; }
.native-app--stopwatch-pro #particlesCanvas,
.native-app--stopwatch-pro .alarm-overlay,
.native-app--stopwatch-pro .toast { position: absolute; }
.native-app--stopwatch-pro .main-container:focus { outline: none; }
.native-app--stopwatch-pro .main-container:focus-visible { outline: 2px solid rgba(0, 229, 255, .75); outline-offset: -4px; }
.native-app--stopwatch-pro:fullscreen,
.native-app--stopwatch-pro:-webkit-full-screen { min-height: 100%; overflow: auto; }
.native-app--stopwatch-pro:fullscreen .native-package-body,
.native-app--stopwatch-pro:-webkit-full-screen .native-package-body { min-height: 100vh; }
@media (max-width: 480px) {
  .native-app--stopwatch-pro,
  .native-app--stopwatch-pro .native-package-body { min-height: 700px; }
}
.native-app--coin-toss-3d { position: relative; display: block !important; width: 100%; min-height: 760px; overflow: hidden; background: #0a1811; isolation: isolate; container: coin-flipper / inline-size; }
.native-app--coin-toss-3d .native-package-body { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 760px; padding: 0; overflow: hidden; }
.native-app--coin-toss-3d .grain,
.native-app--coin-toss-3d .dust { position: absolute !important; }
.native-app--coin-toss-3d::after { position: absolute !important; }
.native-app--coin-toss-3d main:focus { outline: none; }
.native-app--coin-toss-3d main:focus-visible { outline: 2px solid rgba(233, 184, 60, .82); outline-offset: -3px; }
.native-app--coin-toss-3d:fullscreen,
.native-app--coin-toss-3d:-webkit-full-screen { min-height: 100%; overflow: auto; }
.native-app--coin-toss-3d:fullscreen .native-package-body,
.native-app--coin-toss-3d:-webkit-full-screen .native-package-body { min-height: 100vh; }
@container coin-flipper (max-width: 820px) {
  .native-app--coin-toss-3d,
  .native-app--coin-toss-3d .native-package-body { min-height: 900px; }
  .native-app--coin-toss-3d header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px;
    padding: 22px 18px 4px;
    text-align: center !important;
  }
  .native-app--coin-toss-3d .brand {
    width: 100%;
    align-items: center !important;
    text-align: center !important;
  }
  .native-app--coin-toss-3d .brand h1,
  .native-app--coin-toss-3d .brand .tag,
  .native-app--coin-toss-3d .brand .crest {
    width: 100%;
    text-align: center !important;
  }
  .native-app--coin-toss-3d .hud {
    width: 100%;
    justify-content: center;
    gap: clamp(10px, 2.5vw, 18px);
  }
  .native-app--coin-toss-3d .stage { min-height: 410px; }
  .native-app--coin-toss-3d .announce {
    top: 8px;
    transform: translateX(-50%);
  }
  .native-app--coin-toss-3d .resWord { font-size: clamp(1.8rem, 9vw, 3rem); }
  .native-app--coin-toss-3d .deck { padding-bottom: 30px; }
  .native-app--coin-toss-3d .hint {
    max-width: calc(100% - 24px);
    text-align: center;
    line-height: 1.7;
  }
}
@container coin-flipper (max-width: 540px) {
  .native-app--coin-toss-3d,
  .native-app--coin-toss-3d .native-package-body { min-height: 850px; }
  .native-app--coin-toss-3d .hud { flex-wrap: wrap; }
  .native-app--coin-toss-3d #mute { flex-basis: auto; }
  .native-app--coin-toss-3d .stage { min-height: 370px; }
  .native-app--coin-toss-3d .call-row { flex-wrap: wrap; justify-content: center; }
  .native-app--coin-toss-3d .lbl { flex-basis: 100%; margin: 0; text-align: center; }
  .native-app--coin-toss-3d #flip {
    width: min(100%, 350px);
    padding-right: 22px;
    padding-left: 22px;
  }
}
.native-app--typing-suite { min-height: 0; padding: clamp(13px, 2.5vw, 22px); color: #edf7f0; background: #0d241a; }
.typing-suite-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 2px; }
.tool-content .native-app--typing-suite .typing-suite-eyebrow { margin: 0 0 4px; color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.tool-content .native-app--typing-suite h2 { margin: 0; color: #fff8e7 !important; -webkit-text-fill-color: #fff8e7 !important; font: 600 clamp(23px, 3.2vw, 32px)/1.12 var(--display); letter-spacing: -.025em; }
.tool-content .native-app--typing-suite [data-typing-suite-status] { max-width: 340px; margin: 0; color: #a9beb1 !important; -webkit-text-fill-color: #a9beb1 !important; font-size: 10px; line-height: 1.45; text-align: right; }
.typing-suite-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.typing-suite-tabs button { min-height: 44px; padding: 9px 12px; color: #bad0c2; background: rgba(255, 255, 255, .055); border: 1px solid rgba(127, 215, 174, .2); border-radius: 10px; cursor: pointer; font-size: 11px; font-weight: 800; transition: background .18s, border-color .18s, color .18s; }
.typing-suite-tabs button:hover { color: #fff; background: rgba(127, 215, 174, .1); border-color: rgba(245, 201, 105, .5); }
.typing-suite-tabs button[aria-selected="true"] { color: #2d2a17; background: linear-gradient(145deg, #ffd57e, #f5b841); border-color: #dda62e; }
.typing-suite-tabs button:focus-visible { outline: 3px solid rgba(127, 215, 174, .3); outline-offset: 2px; }
.typing-suite-frame { position: relative; height: clamp(620px, 78vh, 820px); overflow: hidden; background: #080f0c; border: 1px solid rgba(245, 201, 105, .28); border-radius: 13px; }
.typing-suite-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.native-app--typing-suite:fullscreen,
.native-app--typing-suite:-webkit-full-screen { width: 100%; height: 100%; padding: 12px; overflow: hidden; }
.native-app--typing-suite:fullscreen .typing-suite-frame,
.native-app--typing-suite:-webkit-full-screen .typing-suite-frame { height: calc(100vh - 132px); }
@media (max-width: 620px) {
  .typing-suite-header { align-items: flex-start; }
  .tool-content .native-app--typing-suite [data-typing-suite-status] { display: none; }
  .typing-suite-tabs { grid-template-columns: 1fr; }
  .typing-suite-tabs button { min-height: 40px; }
  .typing-suite-frame { height: 680px; }
  .native-app--typing-suite:fullscreen .typing-suite-frame,
  .native-app--typing-suite:-webkit-full-screen .typing-suite-frame { height: calc(100vh - 190px); }
}
.native-app--instrument { width: 100%; max-width: 100%; min-height: 0; overflow: hidden; color: inherit; background: #0b2117; }
.native-app--instrument .native-package-body { width: 100%; max-width: 100%; min-height: 0; overflow: hidden; padding: 0; }
.native-app--instrument:fullscreen,
.native-app--instrument:-webkit-full-screen { overflow: hidden; background: #0b2117; }
.native-package-body > .main_wrapper, .native-package-body > .responsive_row { padding-top: 18px; }
.native-mode-switch { display: flex; justify-content: center; gap: 5px; padding: 10px; background: #0f281d; border-bottom: 1px solid rgba(245, 184, 65, .2); }
.native-mode-switch a { padding: 8px 14px; color: #a9c0b2; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-size: 11px; font-weight: 800; }
.native-mode-switch a:hover { color: var(--amber-2); }
.native-mode-switch a.active { color: #3a2a05; background: linear-gradient(145deg, var(--amber-2), var(--amber)); }
.native-app--iwriter .first_page, .native-app--ispeaker .home_page > * { border-radius: 16px; }
.native-app--iwriter .card, .native-app--ispeaker .card { border-color: rgba(18, 42, 31, .14); border-radius: 13px; }
.native-app-error { padding: 60px 25px; color: #8a3124; text-align: center; }

/* Native audio editor */
.native-app--audio-editor { min-height: 0; color: #e9efe6; background: #10291e; }
.native-app--audio-editor .native-package-body { min-height: 0; padding: 0; }
.native-app--audio-editor #ae-pro-wrapper { width: 100% !important; height: min(80vh, 850px) !important; min-height: 620px !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; }
.native-app--audio-editor:fullscreen,
.native-app--audio-editor:-webkit-full-screen { overflow: hidden; background: #10291e; }
.native-app--audio-editor:fullscreen .native-package-body,
.native-app--audio-editor:-webkit-full-screen .native-package-body { height: 100%; }
.native-app--audio-editor:fullscreen #ae-pro-wrapper,
.native-app--audio-editor:-webkit-full-screen #ae-pro-wrapper { height: 100vh !important; min-height: 0 !important; }

/* Native voice recorder */
.native-app--voice-recorder { min-height: 0; color: #e9efe6; background: #0b2117; }
.native-app--voice-recorder .native-package-body { min-height: 0; padding: 0; }
.native-app--voice-recorder:fullscreen,
.native-app--voice-recorder:-webkit-full-screen { overflow: auto; background: #0b2117; }

/* Native text-to-speech tool */
.native-app--text-to-voice { min-height: 0; color: #f5f0e4; background: #061b13; }
.native-app--text-to-voice .native-package-body { min-height: 0; padding: 0; }
.native-app--text-to-voice:fullscreen,
.native-app--text-to-voice:-webkit-full-screen { overflow: auto; background: #061b13; }
.tool-content .native-app--text-to-voice .tts-eyebrow { margin: 0 0 18px; color: #f3bd55; font-size: .75rem; line-height: 1.4; }
.tool-content .native-app--text-to-voice .tts-intro h1 { margin: 0; color: #f5f0e4; font: 500 clamp(2.5rem, 5.2vw, 5.6rem)/.98 var(--display); letter-spacing: -.045em; }
.tool-content .native-app--text-to-voice .tts-section-heading h2 { margin: 0; color: #f5f0e4; font: 600 clamp(1.35rem, 2vw, 1.75rem)/1.18 var(--display); letter-spacing: -.02em; }
.tool-content .native-app--text-to-voice .tts-section-heading > p { margin: 15px 0 0; color: #a9b9ae; font-size: .87rem; line-height: 1.55; }
.tool-content .native-app--text-to-voice .tts-editor-heading > p { margin: 0; color: #a9b9ae; }
.tool-content .native-app--text-to-voice .tts-facts li { color: #f5f0e4; font-size: inherit; line-height: 1.55; }
.tool-content .native-app--text-to-voice .pauseRow p { margin: 4px 0 0; color: #a9b9ae; font-size: .76rem; line-height: 1.5; }
.tool-content .native-app--text-to-voice .tts-privacy-note p { margin: 0; color: #a9b9ae; font-size: .8rem; line-height: 1.5; }

/* Native tombstone generator */
.native-app--tombstone-generator { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--tombstone-generator .native-package-body { min-height: 0; padding: 0; }
.native-app--tombstone-generator:fullscreen,
.native-app--tombstone-generator:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--tombstone-generator .tombstone-eyebrow { margin: 0 0 16px; color: #f4bd55; font-size: .74rem; line-height: 1.4; }
.tool-content .native-app--tombstone-generator .tombstone-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.8rem, 5.7vw, 5.8rem)/.98 var(--display); letter-spacing: -.045em; }
.tool-content .native-app--tombstone-generator .tombstone-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.25rem, 2.1vw, 1.68rem)/1.15 var(--display); letter-spacing: -.02em; }
.tool-content .native-app--tombstone-generator .tombstone-section-heading p { margin: 4px 0 0; color: #9fb2a6; font-size: .78rem; line-height: 1.45; }
.tool-content .native-app--tombstone-generator .tombstone-intro li { color: #f7f1e4; font-size: inherit; line-height: 1.45; }
.tool-content .native-app--tombstone-generator .canvas-hint { margin: 17px 0 0; color: #9fb2a6; font-size: .76rem; line-height: 1.45; }
.tool-content .native-app--tombstone-generator .photo-actions p { margin: 0; color: #9fb2a6; font-size: inherit; line-height: 1.4; }

/* Native wheel spinner */
.native-app--wheel-spinner { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--wheel-spinner .native-package-body { min-height: 0; padding: 0; }
.native-app--wheel-spinner:fullscreen,
.native-app--wheel-spinner:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--wheel-spinner .wheel-eyebrow { margin: 0 0 14px; color: #f4bd55; font-size: .75rem; line-height: 1.4; }
.tool-content .native-app--wheel-spinner .wheel-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.65rem, 5.7vw, 6rem)/.96 var(--display); letter-spacing: -.05em; }
.tool-content .native-app--wheel-spinner .wheel-lede { margin: 0; color: #c0cec5; font-size: clamp(.98rem, 1.45vw, 1.18rem); line-height: 1.7; }
.tool-content .native-app--wheel-spinner .wheel-facts li { color: #f7f1e4; font-size: inherit; line-height: 1.45; }
.tool-content .native-app--wheel-spinner .wheel-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.3rem, 2vw, 1.75rem)/1.12 var(--display); letter-spacing: -.02em; }
.tool-content .native-app--wheel-spinner .wheel-section-heading p { margin: 5px 0 0; color: #9fb4a7; font-size: .78rem; line-height: 1.45; }

/* Native AI email generator */
.native-app--ai-mail-generator { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--ai-mail-generator .native-package-body { min-height: 0; padding: 0; }
.native-app--ai-mail-generator:fullscreen,
.native-app--ai-mail-generator:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--ai-mail-generator .mail-eyebrow { margin: 0 0 16px; color: #f4bd55; font-size: .74rem; line-height: 1.4; }
.tool-content .native-app--ai-mail-generator .mail-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.8rem, 5.8vw, 6.2rem)/.96 var(--display); letter-spacing: -.055em; }
.tool-content .native-app--ai-mail-generator .mail-lede { margin: clamp(20px, 3vw, 32px) 0 0; color: #c1cec6; font-size: clamp(.98rem, 1.35vw, 1.16rem); line-height: 1.72; }
.tool-content .native-app--ai-mail-generator .mail-facts li { color: #f7f1e4; font-size: inherit; line-height: 1.45; }
.tool-content .native-app--ai-mail-generator .mail-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.35rem, 2vw, 1.8rem)/1.15 var(--display); letter-spacing: -.02em; }
.tool-content .native-app--ai-mail-generator .mail-section-heading p { margin: 5px 0 0; color: #a7b9ae; font-size: .76rem; line-height: 1.5; }
.tool-content .native-app--ai-mail-generator .human-check p { margin: 3px 0 0; color: #a7b9ae; font-size: .68rem; line-height: 1.45; }
.tool-content .native-app--ai-mail-generator .result-note { margin: 13px 0 0; color: #756d60; font-size: .66rem; line-height: 1.5; }

/* Native image pixelator */
.native-app--image-pixelator { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--image-pixelator .native-package-body { min-height: 0; padding: 0; }
.native-app--image-pixelator:fullscreen,
.native-app--image-pixelator:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--image-pixelator .pixelator-eyebrow { margin: 0 0 15px; color: #f4bd55; font-size: .74rem; line-height: 1.4; }
.tool-content .native-app--image-pixelator .pixelator-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.8rem, 5.8vw, 6.1rem)/.96 var(--display) !important; letter-spacing: -.055em; }
.tool-content .native-app--image-pixelator .pixelator-intro h1 em { color: #f4bd55; font-family: var(--display) !important; font-weight: 500; }
.tool-content .native-app--image-pixelator .pixelator-intro-side > p { margin: 0 0 24px; color: #c1cec6; font-size: clamp(.96rem, 1.35vw, 1.13rem); line-height: 1.7; }
.tool-content .native-app--image-pixelator .pixelator-intro-side li { color: #f7f1e4; font-size: inherit; line-height: 1.35; }
.tool-content .native-app--image-pixelator .pixelator-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.3rem, 2vw, 1.72rem)/1.15 var(--display) !important; letter-spacing: -.02em; }
.tool-content .native-app--image-pixelator .pixelator-section-heading p { margin: 5px 0 0; color: #a5b8ac; font-size: .74rem; line-height: 1.48; }
.tool-content .native-app--image-pixelator .pixelator-tip p { margin: 0; color: #a5b8ac; font-size: .64rem; line-height: 1.5; }
.tool-content .native-app--image-pixelator .canvas-empty p { margin: 8px 0 0; color: #a5b8ac; font-size: .7rem; line-height: 1.55; }

/* Native text-on-image editor */
.native-app--text-on-image { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--text-on-image .native-package-body { min-height: 0; padding: 0; }
.native-app--text-on-image:fullscreen,
.native-app--text-on-image:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--text-on-image .text-image-eyebrow { margin: 0 0 15px; color: #f4bd55; font-size: .74rem; line-height: 1.4; }
.tool-content .native-app--text-on-image .text-image-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.8rem, 5.8vw, 6.1rem)/.96 var(--display) !important; letter-spacing: -.055em; }
.tool-content .native-app--text-on-image .text-image-intro h1 em { color: #f4bd55; font-family: var(--display) !important; font-weight: 500; }
.tool-content .native-app--text-on-image .text-image-intro-side > p { margin: 0 0 24px; color: #c1cec6; font-size: clamp(.96rem, 1.35vw, 1.13rem); line-height: 1.7; }
.tool-content .native-app--text-on-image .text-image-intro-side li { color: #f7f1e4; font-size: inherit; line-height: 1.35; }
.tool-content .native-app--text-on-image .text-image-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.3rem, 2vw, 1.72rem)/1.15 var(--display) !important; letter-spacing: -.02em; }
.tool-content .native-app--text-on-image .text-image-section-heading p { margin: 5px 0 0; color: #a5b8ac; font-size: .74rem; line-height: 1.48; }
.tool-content .native-app--text-on-image .file-name { margin: 0; color: #789184; font-size: .56rem; line-height: 1.35; }
.tool-content .native-app--text-on-image .canvas-placeholder p { margin: 8px 0 0; color: #a5b8ac; font-size: .69rem; line-height: 1.55; }
.tool-content .native-app--text-on-image .canvas-note { margin: 13px 2px 0; color: #a5b8ac; font-size: .62rem; line-height: 1.5; }
.tool-guide--text-on-image > :where(p, ul, ol) { font-family: var(--body); font-weight: 400; letter-spacing: -.006em; line-height: 1.82; }
.tool-guide--text-on-image > :where(p, ul, ol) strong { font-weight: 650; }

/* Native image watermark editor */
.native-app--watermark-app { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--watermark-app .native-package-body { min-height: 0; padding: 0; }
.native-app--watermark-app:fullscreen,
.native-app--watermark-app:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--watermark-app .watermark-eyebrow { margin: 0 0 15px; color: #f4bd55; font-size: .74rem; line-height: 1.4; }
.tool-content .native-app--watermark-app .watermark-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.8rem, 5.8vw, 6.1rem)/.96 var(--display) !important; letter-spacing: -.055em; }
.tool-content .native-app--watermark-app .watermark-intro h1 em { color: #f4bd55; font-family: var(--display) !important; font-weight: 500; }
.tool-content .native-app--watermark-app .watermark-intro-side > p { margin: 0 0 24px; color: #c1cec6; font-size: clamp(.96rem, 1.35vw, 1.13rem); line-height: 1.7; }
.tool-content .native-app--watermark-app .watermark-intro-side li { color: #f7f1e4; font-size: inherit; line-height: 1.35; }
.tool-content .native-app--watermark-app .watermark-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.3rem, 2vw, 1.72rem)/1.15 var(--display) !important; letter-spacing: -.02em; }
.tool-content .native-app--watermark-app .watermark-section-heading p { margin: 5px 0 0; color: #a5b8ac; font-size: .74rem; line-height: 1.48; }
.tool-content .native-app--watermark-app .watermark-section-heading p.is-error { color: #ffaaa0; }
.tool-content .native-app--watermark-app .watermark-option-panel h3 { margin: 0; color: #f7f1e4; font-family: var(--body) !important; font-size: .78rem; line-height: 1.2; }
.tool-content .native-app--watermark-app .file-name { margin: 0; color: #789184; font-size: .56rem; line-height: 1.4; }
.tool-content .native-app--watermark-app .watermark-help,
.tool-content .native-app--watermark-app .preview-note { color: #a5b8ac; font-size: .62rem; line-height: 1.5; }
.tool-content .native-app--watermark-app .preview-placeholder p { margin: 8px 0 0; color: #a5b8ac; font-size: .69rem; line-height: 1.55; }

/* Native Spanish days listening game */
.native-app--days-week-game { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--days-week-game .native-package-body { min-height: 0; padding: 0; }
.native-app--days-week-game:fullscreen,
.native-app--days-week-game:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--days-week-game .days-eyebrow { margin: 0 0 15px; color: #f4bd55; font-size: .74rem; line-height: 1.4; }
.tool-content .native-app--days-week-game .days-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.8rem, 5.8vw, 6.1rem)/.96 var(--display) !important; letter-spacing: -.055em; }
.tool-content .native-app--days-week-game .days-intro h1 em { color: #f4bd55; font-family: var(--display) !important; font-weight: 500; }
.tool-content .native-app--days-week-game .days-intro-side > p { margin: 0 0 24px; color: #c1cec6; font-size: clamp(.96rem, 1.35vw, 1.13rem); line-height: 1.7; }
.tool-content .native-app--days-week-game .days-intro-side li { color: #f7f1e4; font-size: inherit; line-height: 1.35; }
.tool-content .native-app--days-week-game .days-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.3rem, 2vw, 1.72rem)/1.15 var(--display) !important; letter-spacing: -.02em; }
.tool-content .native-app--days-week-game .days-section-heading p { margin: 5px 0 0; color: #a5b8ac; font-size: .74rem; line-height: 1.48; }
.tool-content .native-app--days-week-game .day-card p { margin: 0; color: #a5b8ac; font-size: .61rem; line-height: 1.35; }
.tool-content .native-app--days-week-game .day-card h3 { margin: 2px 0 1px; color: #f7f1e4; font: 600 clamp(1.22rem, 2vw, 1.65rem)/1.1 var(--display) !important; }
.tool-content .native-app--days-week-game .learn-footer > p { margin: 0; color: #a5b8ac; font-size: .66rem; line-height: 1.5; }
.tool-content .native-app--days-week-game .question-text { margin: 0 0 20px; color: #17382b; font: 600 clamp(1.5rem, 3.2vw, 2.7rem)/1.12 var(--display) !important; }
.tool-content .native-app--days-week-game .quiz-feedback { min-height: 23px; margin: 13px 2px 0; color: #a5b8ac; font-size: .66rem; line-height: 1.5; }
.tool-content .native-app--days-week-game .result-panel h2 { margin: 0; color: #f7f1e4; font: 600 clamp(2.7rem, 6vw, 5.8rem)/1 var(--display) !important; }
.tool-guide--days-week-game > :where(p, ul, ol) { font-family: var(--body); font-weight: 400; line-height: 1.82; }

/* Native image-to-text OCR converter */
.native-app--image-to-text { min-height: 0; color: #f7f1e4; background: #071c14; }
.native-app--image-to-text .native-package-body { min-height: 0; padding: 0; }
.native-app--image-to-text:fullscreen,
.native-app--image-to-text:-webkit-full-screen { overflow: auto; background: #071c14; }
.tool-content .native-app--image-to-text .ocr-eyebrow { margin: 0 0 15px; color: #f4bd55; font-size: .74rem; line-height: 1.4; }
.tool-content .native-app--image-to-text .ocr-intro h1 { margin: 0; color: #f7f1e4; font: 600 clamp(2.8rem, 5.8vw, 6.1rem)/.96 var(--display) !important; letter-spacing: -.055em; }
.tool-content .native-app--image-to-text .ocr-intro h1 em { color: #f4bd55; font-family: var(--display) !important; font-weight: 500; }
.tool-content .native-app--image-to-text .ocr-intro-side > p { margin: 0 0 24px; color: #c1cec6; font-size: clamp(.96rem, 1.35vw, 1.13rem); line-height: 1.7; }
.tool-content .native-app--image-to-text .ocr-intro-side li { color: #f7f1e4; font-size: inherit; line-height: 1.35; }
.tool-content .native-app--image-to-text .ocr-section-heading h2 { margin: 0; color: #f7f1e4; font: 600 clamp(1.3rem, 2vw, 1.72rem)/1.15 var(--display) !important; letter-spacing: -.02em; }
.tool-content .native-app--image-to-text .ocr-section-heading p { margin: 5px 0 0; color: #a5b8ac; font-size: .74rem; line-height: 1.48; }
.tool-content .native-app--image-to-text .ocr-dropzone > p { margin: 3px 0 0; color: #789184; font-size: .55rem; line-height: 1.4; }
.tool-content .native-app--image-to-text .ocr-empty-list { margin: 0; color: #71887b; font-size: .61rem; line-height: 1.5; }
.tool-content .native-app--image-to-text .ocr-status { min-height: 20px; margin: 10px 2px 0; color: #a5b8ac; font-size: .6rem; line-height: 1.5; }
.tool-content .native-app--image-to-text .ocr-output-empty p { margin: 8px 0 0; color: #a5b8ac; font-size: .69rem; line-height: 1.55; }
.tool-content .native-app--image-to-text .ocr-result-message { margin: 8px 0 0; color: #a5b8ac; font-size: .59rem; line-height: 1.45; }
.tool-content .native-app--image-to-text .ocr-privacy { margin: 13px 2px 0; color: #a5b8ac; font-size: .62rem; line-height: 1.5; }
.tool-content .native-app--image-to-text .ocr-result-actions a { color: #d9ebe1 !important; }
.tool-content .native-app--image-to-text .ocr-result-actions a:hover { color: #102d21 !important; background: #78d6aa; }
.tool-content .native-app--image-to-text .ocr-zip { color: #332504 !important; }
.tool-guide--image-to-text > :where(p, ul, ol) { font-family: var(--body); font-weight: 400; line-height: 1.82; }

/* Native calligraphy maker */
.native-app--calligraphy-maker { min-height: 0; background: #0a1c15; }
.native-app--calligraphy-maker .native-package-body { min-height: 0; padding: 0; }
.native-app--calligraphy-maker .clap { width: 100%; }
.native-app--calligraphy-maker:fullscreen,
.native-app--calligraphy-maker:-webkit-full-screen { overflow: auto; background: #0a1c15; }
.native-app--calligraphy-maker:fullscreen .clap,
.native-app--calligraphy-maker:-webkit-full-screen .clap { min-height: 100vh; }
.feedback-callout { display: flex; align-items: center; gap: 16px; margin: clamp(26px, 4vw, 42px) 0 4px; padding: clamp(18px, 3vw, 25px); color: #fff8e7; background: linear-gradient(135deg, #10291e, #173c2c); border: 1px solid rgba(245, 184, 65, .48); border-radius: 15px; box-shadow: 0 18px 38px -28px rgba(7, 25, 18, .9); }
.feedback-callout > span { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; color: #213328; background: linear-gradient(145deg, #ffd57e, #f5b841); border-radius: 50%; font-size: 19px; }
.feedback-callout div { display: grid; gap: 5px; }
.feedback-callout strong { color: #fff8e7 !important; font-size: clamp(15px, 2vw, 18px); line-height: 1.4; }
.feedback-callout a { width: fit-content; color: #8be0b9; text-decoration-color: rgba(139, 224, 185, .5); text-underline-offset: 4px; font-size: clamp(18px, 2.5vw, 23px); font-weight: 800; }
.feedback-callout a:hover { color: #ffd57e; text-decoration-color: currentColor; }

/* Native AI content humanizer */
.native-app--ai-humanizer { min-height: 0; color: #e9efe6; background-color: #0b2117; background-image: radial-gradient(700px 360px at 100% 0, rgba(127, 215, 174, .12), transparent 60%), radial-gradient(rgba(245, 184, 65, .07) 1px, transparent 1.5px); background-size: auto, 20px 20px; }
.native-app--ai-humanizer .native-package-body { min-height: 0; padding: 0; }
.native-app--ai-humanizer:fullscreen,
.native-app--ai-humanizer:-webkit-full-screen { overflow: auto; background-color: #0b2117; }

/* Native invoice maker */
.native-app--invoice-maker { min-height: 0; color: #1e2924; background: #fff; color-scheme: light; }
.native-app--invoice-maker .native-package-body { min-height: 0; padding: 0; }
.native-app--invoice-maker:fullscreen,
.native-app--invoice-maker:-webkit-full-screen { overflow: auto; background: #fff; }
.native-app--invoice-maker :is(#invoice-app-container, .app-container, #invoice-form) { color-scheme: light; }

/* Native AI image upscaler */
.native-app--image-upscaler { min-height: 0; color: #e9efe6; background: #0b2117; }
.native-app--image-upscaler .native-package-body { min-height: 0; padding: 0; }
.native-app--image-upscaler:fullscreen,
.native-app--image-upscaler:-webkit-full-screen { overflow: auto; background: #0b2117; }
.image-tools-callout { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 2.5vw, 22px); margin: clamp(24px, 4vw, 42px) 0; padding: clamp(18px, 3vw, 27px); color: #fff8e7; background: linear-gradient(135deg, #10291e, #173c2c); border: 1px solid rgba(245, 184, 65, .48); border-radius: 16px; box-shadow: 0 20px 45px -32px rgba(7, 25, 18, .95); }
.image-tools-callout-mark { display: grid; place-items: center; width: 46px; height: 46px; color: #26351d; background: linear-gradient(145deg, #ffd57e, #f5b841); border-radius: 14px; font-size: 20px; }
.image-tools-callout > div { min-width: 0; }
.image-tools-callout strong { display: block; color: #fff8e7 !important; font-size: clamp(17px, 2vw, 21px); line-height: 1.3; }
.image-tools-callout p { margin: 5px 0 15px !important; color: #afc4b7 !important; font-size: 13px !important; line-height: 1.5 !important; }
.image-tools-callout nav { display: flex; flex-wrap: wrap; gap: 9px; }
.image-tools-callout a { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: min(100%, 230px); padding: 11px 13px; color: #18372a !important; background: #f8f3e7; border: 1px solid rgba(245, 184, 65, .42); border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 800; }
.image-tools-callout a:hover { color: #17372a !important; background: #ffd57e; border-color: #f5b841; }
.image-tools-callout a b { color: #a56d0e; font-size: 16px; }
@media (max-width: 520px) { .image-tools-callout { grid-template-columns: 1fr; } .image-tools-callout nav { display: grid; } .image-tools-callout a { width: 100%; } }

/* Native Flux image generator */
.native-app--image-generator { min-height: 0; color: #e9efe6; background: #0b2117; }
.native-app--image-generator .native-package-body { min-height: 0; padding: 0; }
.native-app--image-generator:fullscreen,
.native-app--image-generator:-webkit-full-screen { overflow: auto; background: #0b2117; }

/* Native image-to-drawing tool */
.native-app--image-drawing { min-height: 0; color: #e9efe6; background: #0b2117; }
.native-app--image-drawing .native-package-body { min-height: 0; padding: 0; }
.native-app--image-drawing:fullscreen,
.native-app--image-drawing:-webkit-full-screen { overflow: auto; background: #0b2117; }

/* Native AI background remover */
.native-app--background-remover { min-height: 0; color: #e9efe6; background: #0b2117; }
.native-app--background-remover .native-package-body { min-height: 0; padding: 0; }
.native-app--background-remover:fullscreen,
.native-app--background-remover:-webkit-full-screen { overflow: auto; background: #0b2117; }

/* Native multiplication table generator */
.native-app--times-table { min-height: 0; color: #e9efe6; background: #0b2117; }
.native-app--times-table .native-package-body { min-height: 0; padding: 0; }
.native-app--times-table:fullscreen,
.native-app--times-table:-webkit-full-screen { overflow: auto; background: #0b2117; }

/* Legacy multiplication-chart action bar */
.tool-content .download-buttons {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 20px auto !important;
}
.tool-content .download-buttons button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  color: #fff8e7 !important;
  -webkit-text-fill-color: #fff8e7 !important;
  background: linear-gradient(145deg, #194633, #0f3022) !important;
  border: 1px solid rgba(23, 55, 42, .32) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 24px -18px rgba(12, 39, 27, .8) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.tool-content .download-buttons #imgBtn {
  color: #2d2a17 !important;
  -webkit-text-fill-color: #2d2a17 !important;
  background: linear-gradient(145deg, #ffd57e, #f5b841) !important;
  border-color: #dfa82f !important;
}
.tool-content .download-buttons button:hover {
  color: #ffd57e !important;
  -webkit-text-fill-color: #ffd57e !important;
  border-color: rgba(245, 184, 65, .7) !important;
  transform: translateY(-1px) !important;
}
.tool-content .download-buttons #imgBtn:hover {
  color: #17372a !important;
  -webkit-text-fill-color: #17372a !important;
  background: linear-gradient(145deg, #ffe19c, #f8c457) !important;
}
.tool-content .download-buttons .btn-icon {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  object-fit: contain !important;
}
@media (max-width: 520px) {
  .tool-content .download-buttons { display: grid !important; grid-template-columns: 1fr !important; }
  .tool-content .download-buttons button { width: 100% !important; }
}

/* Ready-made times-table chart actions */
.tool-content .btnContainer {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 16px auto 6px !important;
  padding: 0 !important;
}
.tool-content .btnContainer :is(.downloadButton, .printButton) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 112px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(23, 55, 42, .28) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 22px -17px rgba(13, 43, 29, .8) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.tool-content .btnContainer button.downloadButton {
  color: #fff8e7 !important;
  -webkit-text-fill-color: #fff8e7 !important;
  background: linear-gradient(145deg, #194633, #0e3021) !important;
}
.tool-content .btnContainer a.downloadButton,
.tool-content .btnContainer a.downloadButton:link,
.tool-content .btnContainer a.downloadButton:visited,
.tool-content .btnContainer a.downloadButton:hover,
.tool-content .btnContainer a.downloadButton:focus {
  color: #2e2a16 !important;
  -webkit-text-fill-color: #2e2a16 !important;
  background: linear-gradient(145deg, #ffd57e, #f5b841) !important;
  border-color: #dda62e !important;
}
.tool-content .btnContainer button.printButton {
  color: #17372a !important;
  -webkit-text-fill-color: #17372a !important;
  background: #f7f1e5 !important;
  border-color: #b7c5bc !important;
}
.tool-content .btnContainer button.printButton::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9V2h12v7h1a3 3 0 0 1 3 3v6h-4v4H6v-4H2v-6a3 3 0 0 1 3-3h1Zm2-5v5h8V4H8Zm8 12H8v4h8v-4Zm3-5H5a1 1 0 0 0-1 1v4h2v-2h12v2h2v-4a1 1 0 0 0-1-1Zm-1 1.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9V2h12v7h1a3 3 0 0 1 3 3v6h-4v4H6v-4H2v-6a3 3 0 0 1 3-3h1Zm2-5v5h8V4H8Zm8 12H8v4h8v-4Zm3-5H5a1 1 0 0 0-1 1v4h2v-2h12v2h2v-4a1 1 0 0 0-1-1Zm-1 1.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.tool-content .btnContainer :is(.downloadButton, .printButton):hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 25px -18px rgba(13, 43, 29, .85) !important;
}
.tool-content .btnContainer :is(.downloadButton, .printButton):focus-visible {
  outline: 3px solid rgba(245, 184, 65, .3) !important;
  outline-offset: 2px !important;
}
@media (max-width: 520px) {
  .tool-content .btnContainer { display: grid !important; grid-template-columns: 1fr !important; }
  .tool-content .btnContainer :is(.downloadButton, .printButton) { width: 100% !important; }
}

/* Embedded games */
.native-app--embedded-game { min-height: 0; padding: clamp(14px, 2.5vw, 26px); background-color: #10291e; background-image: radial-gradient(600px 260px at 100% 0, rgba(127, 215, 174, .13), transparent 65%), radial-gradient(rgba(245, 184, 65, .08) 1px, transparent 1.5px); background-size: auto, 20px 20px; }
.embedded-game-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 3px 3px 0; }
.embedded-game-heading-copy { display: flex; align-items: center; gap: 13px; min-width: 0; }
.tool-content .native-app--embedded-game .embedded-game-heading .native-eyebrow { margin: 0 0 4px; color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; text-transform: uppercase; letter-spacing: .16em; font-size: 9px; font-weight: 800; }
.tool-content .native-app--embedded-game .embedded-game-heading h2 { margin: 0; color: #fff8e7 !important; -webkit-text-fill-color: #fff8e7 !important; font: 600 clamp(23px, 3.2vw, 32px)/1.15 var(--display); letter-spacing: -.025em; }
.embedded-game-status { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 8px; margin: 0 !important; color: #c6d7cd !important; text-transform: uppercase; letter-spacing: .1em; font-size: 9px !important; font-weight: 800; }
.embedded-game-status span { width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(127, 215, 174, .1); }
.embedded-game-frame { position: relative; min-height: 650px; overflow: hidden; background: #121412; border: 1px solid rgba(245, 184, 65, .3); border-radius: 14px; box-shadow: 0 25px 55px -34px rgba(0, 0, 0, .9); }
.embedded-game-frame iframe { display: block; width: 100%; height: 650px; border: 0; background: #121412; }
.embedded-game-note { margin: 12px 3px 0 !important; color: #9eb3a7 !important; font-size: 10px !important; line-height: 1.55 !important; }
.game-links-callout { width: min(100%, var(--article-width, 830px)); margin: 0 auto clamp(34px, 6vw, 58px); padding: clamp(18px, 3vw, 26px); color: #eef6f0; background: radial-gradient(420px 180px at 100% 0, rgba(127, 215, 174, .16), transparent 68%), linear-gradient(145deg, #153a2a, #0d291d); border: 1px solid rgba(245, 184, 65, .44); border-radius: 18px; box-shadow: 0 24px 52px -38px rgba(5, 25, 17, .95); }
.tool-content .game-links-callout header > span { display: block; margin-bottom: 5px; color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; font-size: 9px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.tool-content .game-links-callout h2 { margin: 0 0 17px; color: #fff8e8 !important; -webkit-text-fill-color: #fff8e8 !important; font: 600 clamp(24px, 3.6vw, 34px)/1.12 var(--display); letter-spacing: -.025em; }
.game-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tool-content .game-links-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 15px; min-height: 76px; padding: 14px 16px; color: #eaf4ed; background: rgba(255, 255, 255, .055); border: 1px solid rgba(127, 215, 174, .22); border-radius: 13px; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.tool-content .game-links-grid a:hover { color: #fff; background: rgba(127, 215, 174, .11); border-color: rgba(245, 184, 65, .52); transform: translateY(-1px); }
.tool-content .tool-guide .game-links-callout .game-links-grid small { color: #a9beb1 !important; -webkit-text-fill-color: #a9beb1 !important; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.tool-content .tool-guide .game-links-callout .game-links-grid strong { grid-column: 1; color: #fff8e8 !important; -webkit-text-fill-color: #fff8e8 !important; font-size: 13px; }
.tool-content .tool-guide .game-links-callout .game-links-grid b { grid-column: 2; grid-row: 1 / 3; color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; font-size: 20px; font-weight: 500; }
.native-app--embedded-game:fullscreen { display: flex; flex-direction: column; padding: clamp(10px, 2vw, 22px); }
.native-app--embedded-game:fullscreen .embedded-game-frame { flex: 1 1 auto; min-height: 0; }
.native-app--embedded-game:fullscreen iframe { height: 100%; }
.native-app--embedded-game:fullscreen .embedded-game-note { display: none; }
.native-app--embedded-game:-webkit-full-screen { display: flex; flex-direction: column; padding: clamp(10px, 2vw, 22px); }
.native-app--embedded-game:-webkit-full-screen .embedded-game-frame { flex: 1 1 auto; min-height: 0; }
.native-app--embedded-game:-webkit-full-screen iframe { height: 100%; }
.native-app--embedded-game:-webkit-full-screen .embedded-game-note { display: none; }
.native-app--embedded-game-daily-jigsaw { background-image: radial-gradient(640px 300px at 100% 0, rgba(245, 184, 65, .16), transparent 66%), radial-gradient(520px 300px at 0 100%, rgba(127, 215, 174, .1), transparent 70%), radial-gradient(rgba(245, 184, 65, .08) 1px, transparent 1.5px); background-size: auto, auto, 20px 20px; }
.native-app--embedded-game-google-feud { background-color: #0d291e; background-image: radial-gradient(620px 280px at 100% 0, rgba(66, 133, 244, .18), transparent 66%), radial-gradient(520px 260px at 0 100%, rgba(251, 188, 5, .12), transparent 68%), radial-gradient(rgba(127, 215, 174, .07) 1px, transparent 1.5px); background-size: auto, auto, 20px 20px; }
.native-app--embedded-game-google-feud .embedded-game-frame { background: #fff; border-color: rgba(245, 184, 65, .48); }
.native-app--embedded-game-google-feud .embedded-game-frame iframe { background: #fff; }
.native-app--beat-burger-drum { display: block !important; width: 100% !important; min-width: 0; height: auto !important; overflow: hidden; }
.native-app--beat-burger-drum .native-package-body,
.native-app--beat-burger-drum #beat-burger-root,
.native-app--beat-burger-drum .App,
.native-app--beat-burger-drum .burger-drum { display: block; width: 100% !important; min-width: 0; max-width: none; }
.native-app--beat-burger-drum .native-package-body { height: auto !important; padding: 0; }
.native-app--beat-burger-drum .burger-drum .container { width: 100% !important; max-width: none !important; }
.native-app--beat-burger-drum canvas { display: block; max-width: none; }
.drum-tools-callout { width: min(100%, var(--article-width, 830px)); margin: clamp(34px, 5vw, 58px) auto clamp(30px, 5vw, 50px); padding: clamp(18px, 3vw, 25px); color: #edf7f1 !important; -webkit-text-fill-color: #edf7f1; background: radial-gradient(440px 170px at 100% 0, rgba(245,184,65,.17), transparent 70%), linear-gradient(140deg, #153d2d, #0b281d); border: 1px solid rgba(245,184,65,.48); border-radius: 17px; box-shadow: 0 22px 48px -36px rgba(4,28,18,.95); }
.tool-content .drum-tools-callout > span { display: block; margin-bottom: 7px; color: #f4c65e !important; -webkit-text-fill-color: #f4c65e !important; font-size: 10px !important; font-weight: 800; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; }
.tool-content .drum-tools-callout p { margin: 0; color: #e9f4ed !important; -webkit-text-fill-color: #e9f4ed !important; font-size: clamp(15px, 2vw, 18px) !important; font-weight: 500; line-height: 1.65 !important; }
.tool-content .drum-tools-callout a { display: inline-block; padding: 1px 5px; color: #fff3c5 !important; -webkit-text-fill-color: #fff3c5 !important; background: rgba(245,184,65,.13); border-bottom: 1px solid #f4c65e; border-radius: 4px 4px 0 0; font-weight: 800; text-decoration: none; }
.tool-content .drum-tools-callout a:hover { color: #132f23 !important; -webkit-text-fill-color: #132f23 !important; background: #f4c65e; }
.native-app--embedded-flash { min-height: 0; padding: clamp(8px, 1.5vw, 14px); background: #eee8da; }
.native-app--embedded-flash .embedded-game-heading { align-items: center; max-width: 800px; margin: 0 auto 14px; padding: 0; }
.native-app--embedded-flash .embedded-game-heading-copy { min-width: 0; }
.tool-content .native-app--embedded-flash .embedded-game-heading .native-eyebrow { margin: 0 0 4px !important; color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; font-size: 9px !important; font-weight: 800; line-height: 1.2 !important; letter-spacing: .16em; text-transform: uppercase; }
.tool-content .native-app--embedded-flash .embedded-game-heading h2 { margin: 0 !important; padding: 0 !important; color: #fff8e7 !important; -webkit-text-fill-color: #fff8e7 !important; font: 600 clamp(24px, 3vw, 32px)/1.1 var(--display) !important; letter-spacing: -.02em; }
.native-app--embedded-flash .embedded-game-status { margin: 0 !important; color: #c6d7cd !important; -webkit-text-fill-color: #c6d7cd !important; }
.embedded-flash-frame { position: relative; width: min(100%, 800px); aspect-ratio: 4 / 3; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid #c9c1af; border-radius: 9px; box-shadow: 0 10px 24px rgba(25,48,37,.1); }
.embedded-flash-frame object, .embedded-flash-frame ruffle-player { display: block; width: 100% !important; height: 100% !important; border: 0; }
.tool-content .native-app--embedded-flash .embedded-game-note { width: min(100%, 800px); margin: 11px auto 0 !important; color: #a9beb2 !important; -webkit-text-fill-color: #a9beb2 !important; font-size: 11px !important; line-height: 1.5 !important; text-align: center; }
.native-app--embedded-flash:fullscreen, .native-app--embedded-flash:-webkit-full-screen { display: grid; place-items: center; padding: clamp(10px, 2vw, 22px); background: #171c19; }
.native-app--embedded-flash:fullscreen .embedded-flash-frame, .native-app--embedded-flash:-webkit-full-screen .embedded-flash-frame { width: min(100%, calc(100vh * 4 / 3)); max-width: none; flex: 1 1 auto; min-height: 0; }
.native-app--embedded-flash:fullscreen .embedded-game-note, .native-app--embedded-flash:-webkit-full-screen .embedded-game-note { display: none; }
@media (max-width: 620px) { .embedded-flash-frame { border-radius: 7px; } }
.google-feud-more-games { width: min(100%, var(--article-width, 830px)); margin: 0 auto clamp(28px, 5vw, 48px); padding: clamp(18px, 3vw, 25px); color: #eef8f2; background: radial-gradient(420px 160px at 100% 0, rgba(66, 133, 244, .18), transparent 70%), linear-gradient(140deg, #143d2d, #0b281d); border: 1px solid rgba(245, 184, 65, .5); border-radius: 17px; box-shadow: 0 22px 48px -35px rgba(4, 28, 18, .95); }
.tool-content .tool-guide .google-feud-more-games > span { display: block; margin-bottom: 7px; color: #f4c65e !important; -webkit-text-fill-color: #f4c65e !important; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.tool-content .tool-guide .google-feud-more-games p { margin: 0; color: #e9f4ed !important; -webkit-text-fill-color: #e9f4ed !important; font-size: clamp(15px, 2vw, 18px) !important; line-height: 1.65 !important; }
.tool-content .tool-guide .google-feud-more-games a { display: inline-block; padding: 1px 5px; color: #fff4cc !important; -webkit-text-fill-color: #fff4cc !important; background: rgba(245, 184, 65, .13); border-bottom: 1px solid #f4c65e; border-radius: 4px 4px 0 0; text-decoration: none; }
.tool-content .tool-guide .google-feud-more-games a:hover { color: #132f23 !important; -webkit-text-fill-color: #132f23 !important; background: #f4c65e; }
.native-app--embedded-game-daily-jigsaw .embedded-game-mark { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2, 17px); grid-template-rows: repeat(2, 17px); gap: 3px; width: 43px; height: 43px; padding: 3px; border: 1px solid rgba(245, 184, 65, .38); border-radius: 12px; background: rgba(5, 34, 23, .58); box-shadow: inset 0 1px rgba(255, 255, 255, .05); }
.native-app--embedded-game-daily-jigsaw .embedded-game-mark i { display: block; border-radius: 4px; background: var(--mint); }
.native-app--embedded-game-daily-jigsaw .embedded-game-mark i:nth-child(2),
.native-app--embedded-game-daily-jigsaw .embedded-game-mark i:nth-child(3) { background: var(--gold); }
.native-app--embedded-game-daily-jigsaw .embedded-game-frame { min-height: 690px; background: #f3efe5; border-color: rgba(245, 184, 65, .52); box-shadow: 0 28px 65px -38px rgba(0, 0, 0, .95), 0 0 0 4px rgba(255, 248, 231, .035); }
.native-app--embedded-game-daily-jigsaw .embedded-game-frame iframe { height: 690px; background: #f3efe5; }
.native-app--embedded-game-holiday-card { background-image: radial-gradient(620px 290px at 100% 0, rgba(245, 184, 65, .18), transparent 68%), radial-gradient(500px 280px at 0 100%, rgba(127, 215, 174, .12), transparent 70%), radial-gradient(380px 230px at 72% 75%, rgba(150, 48, 45, .13), transparent 70%), radial-gradient(rgba(245, 184, 65, .08) 1px, transparent 1.5px); background-size: auto, auto, auto, 20px 20px; }
.native-app--embedded-game-holiday-card .embedded-game-frame { min-height: 620px; background: #f7f1e5; border-color: rgba(245, 184, 65, .54); box-shadow: 0 28px 65px -38px rgba(0, 0, 0, .95), 0 0 0 4px rgba(255, 248, 231, .035); }
.native-app--embedded-game-holiday-card .embedded-game-frame iframe { min-height: 620px; height: 620px; background: #f7f1e5; }

/* 3D Object Maker */
.native-app--3d-object-maker { min-height: 0; padding: clamp(14px, 2.5vw, 26px); color: #edf7f0; background: radial-gradient(680px 300px at 100% 0, rgba(127, 215, 174, .16), transparent 66%), radial-gradient(520px 260px at 0 100%, rgba(245, 184, 65, .11), transparent 72%), #10291e; }
.object-maker-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 15px; padding: 2px; }
.object-maker-mark { position: relative; display: block; width: 52px; height: 52px; border: 1px solid rgba(245, 184, 65, .45); border-radius: 14px; background: rgba(5, 34, 23, .62); box-shadow: inset 0 1px rgba(255, 255, 255, .06); }
.object-maker-mark i { position: absolute; width: 17px; height: 17px; border: 2px solid #f5c969; border-radius: 4px; transform: rotate(30deg) skew(-5deg); }
.object-maker-mark i:nth-child(1) { top: 9px; left: 17px; }
.object-maker-mark i:nth-child(2) { top: 25px; left: 8px; border-color: #7fd7ae; }
.object-maker-mark i:nth-child(3) { top: 25px; right: 8px; border-color: #fff8e7; }
.tool-content .native-app--3d-object-maker .native-eyebrow { margin: 0 0 4px; color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.tool-content .native-app--3d-object-maker h2 { margin: 0; color: #fff8e7 !important; -webkit-text-fill-color: #fff8e7 !important; font: 600 clamp(23px, 3.2vw, 32px)/1.14 var(--display); letter-spacing: -.025em; }
.tool-content .native-app--3d-object-maker .object-maker-heading > div > p:last-child { max-width: 760px; margin: 6px 0 0; color: #b9cdc0 !important; -webkit-text-fill-color: #b9cdc0 !important; font-size: 11px; line-height: 1.5; }
.object-maker-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; color: #d4e3d9 !important; -webkit-text-fill-color: #d4e3d9 !important; font-size: 9px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.object-maker-status span { width: 8px; height: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(127, 215, 174, .11); }
.object-maker-frame { position: relative; min-height: 680px; overflow: hidden; background: #071b13; border: 1px solid rgba(245, 184, 65, .4); border-radius: 15px; box-shadow: 0 28px 62px -38px rgba(0, 0, 0, .95), 0 0 0 4px rgba(255, 248, 231, .025); }
.object-maker-frame iframe { display: block; width: 100%; height: clamp(680px, 70vw, 820px); min-height: 680px; border: 0; background: #071b13; }
.object-maker-note { margin: 12px 3px 0 !important; color: #a9beb1 !important; -webkit-text-fill-color: #a9beb1 !important; font-size: 10px !important; line-height: 1.55 !important; }
.tool-content .native-app--3d-object-maker .object-maker-note strong { color: #f5c969 !important; -webkit-text-fill-color: #f5c969 !important; }
.native-app--3d-object-maker:fullscreen, .native-app--3d-object-maker:-webkit-full-screen { display: flex; flex-direction: column; padding: 12px; }
.native-app--3d-object-maker:fullscreen .object-maker-frame, .native-app--3d-object-maker:-webkit-full-screen .object-maker-frame { flex: 1 1 auto; min-height: 0; }
.native-app--3d-object-maker:fullscreen iframe, .native-app--3d-object-maker:-webkit-full-screen iframe { height: 100%; min-height: 0; }
.native-app--3d-object-maker:fullscreen .object-maker-note, .native-app--3d-object-maker:-webkit-full-screen .object-maker-note { display: none; }

/* Keep Bootstrap dialogs inside the embedded iWriter workspace. */
:is(.native-app--iwriter, .native-app--ispeaker) .modal {
  position: absolute;
  top: var(--native-modal-top, 0);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 1060;
  width: 100%;
  height: var(--native-modal-height, 100%);
  padding: clamp(.75rem, 2.5vw, 1.5rem);
  overflow-x: hidden;
  overflow-y: auto;
}
:is(.native-app--iwriter, .native-app--ispeaker) .modal-dialog { display: flex; align-items: center; min-height: 100%; margin: 0 auto; pointer-events: none; }
:is(.native-app--iwriter, .native-app--ispeaker) .modal-dialog-scrollable { height: 100%; max-height: 100%; }
:is(.native-app--iwriter, .native-app--ispeaker) .modal-dialog-scrollable .modal-content { max-height: 100%; }
:is(.native-app--iwriter, .native-app--ispeaker) .modal-content { color: #25372f; background: #fbf8ee; border: 1px solid rgba(12, 62, 43, .22); border-radius: 1rem; box-shadow: 0 24px 70px rgba(4, 28, 19, .28); pointer-events: auto; }
:is(.native-app--iwriter, .native-app--ispeaker) .modal-header,
:is(.native-app--iwriter, .native-app--ispeaker) .modal-footer { border-color: rgba(12, 62, 43, .14); }
:is(.native-app--iwriter, .native-app--ispeaker) .native-iwriter-backdrop { position: absolute; inset: 0; z-index: 1050; width: auto; height: auto; }

/* Settings sits at the right edge, so its menu must open inward. */
.native-app--iwriter .iwriter-settings-menu {
  min-width: min(17rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  overflow: visible;
}
.native-app--iwriter .iwriter-settings-menu > li > .dropdown-item {
  width: 100%;
  padding: .6rem .9rem;
  overflow: visible;
  white-space: normal;
  text-align: left;
}
.native-app--iwriter .iwriter-settings-menu > .dropstart > .load_pro {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.native-app--iwriter .iwriter-settings-menu > .dropstart > .load_pro::before { display: none; }
.native-app--iwriter .iwriter-settings-menu > .dropstart > .load_pro::after {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: auto;
  content: "";
  border-top: .3em solid transparent;
  border-right: 0;
  border-bottom: .3em solid transparent;
  border-left: .3em solid currentColor;
}
.native-app--iwriter .iwriter-settings-menu .prolist_load {
  max-width: calc(100vw - 1.5rem);
}
.native-app--iwriter .iwriter-settings-menu .prolist_load .dropdown-item {
  white-space: normal;
}
@media (max-width: 600px) {
  .native-app--iwriter .iwriter-settings-menu .prolist_load {
    position: static !important;
    width: 100%;
    max-width: 100%;
    margin: .25rem 0 0;
    transform: none !important;
  }
}

/* Native iWriter theme controls and color modes */
.native-app--iwriter .navbar { min-height: 58px; padding: 8px 14px; }
.native-app--iwriter .navbar .container-fluid { align-items: center !important; gap: 14px; }
.native-app--iwriter .navbar-collapse { align-items: center; }
.native-app--iwriter .navbar-nav { margin-left: auto; }
.native-app--iwriter #bd-theme { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; line-height: 1.2; }
.native-app--iwriter #bd-theme::after { margin-left: 2px; }
.native-app--iwriter #bd-theme .ms-1,
.native-app--iwriter #bd-theme .ms-2 { margin-left: 0 !important; }
.native-app--iwriter .bi-nav {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  overflow: visible;
  fill: currentColor;
  vertical-align: -.125em;
}
.native-app--iwriter .theme-icon-active { color: var(--amber-2); }
.native-app--iwriter .dropdown-menu[aria-labelledby="bd-theme"] { min-width: 210px; padding: 7px; color: #26372f; background: #fffdf7; border: 1px solid rgba(18, 42, 31, .18); border-radius: 12px; box-shadow: 0 18px 42px -20px rgba(0, 0, 0, .55); }
.native-app--iwriter [data-bs-theme-value] { gap: 9px; min-height: 40px; padding: 9px 10px; color: #40554b; border-radius: 8px; font-size: 13px; }
.native-app--iwriter [data-bs-theme-value]:hover { color: #153326; background: #edf4ef; }
.native-app--iwriter [data-bs-theme-value].active { color: #153326; background: #dff1e7; }
.native-app--iwriter [data-bs-theme-value].active .bi-nav.ms-auto { display: inline-block !important; color: #177653; }

html[data-bs-theme="dark"] .native-app--iwriter {
  --bs-body-color: #e4eee8;
  --bs-body-color-rgb: 228, 238, 232;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: rgba(228, 238, 232, .72);
  --bs-tertiary-bg: #192b23;
  --bs-border-color: #354b40;
  --bs-primary-text-emphasis: #9fe3c2;
  color: #e4eee8;
  background-color: #0e1c16;
  background-image: radial-gradient(rgba(159, 227, 194, .055) 1px, transparent 1.5px), radial-gradient(700px 320px at 90% 0, rgba(245, 184, 65, .08), transparent 60%);
}
html[data-bs-theme="dark"] .native-app--iwriter .native-package-body,
html[data-bs-theme="dark"] .native-app--iwriter .main_wrapper,
html[data-bs-theme="dark"] .native-app--iwriter .inner_wrapper,
html[data-bs-theme="dark"] .native-app--iwriter .first_page { color: #e4eee8; }
html[data-bs-theme="dark"] .native-app--iwriter :is(.card, .modal-content, .offcanvas, .list-group-item) { color: #e4eee8; background-color: #18271f; border-color: #354b40; }
html[data-bs-theme="dark"] .native-app--iwriter :is(.card-title, .card-text, .modal-title, .lead, label, legend, p, li) { color: inherit; }
html[data-bs-theme="dark"] .native-app--iwriter :is(.form-control, .form-select, [contenteditable="true"]) { color: #eef5f1; background-color: #101d17; border-color: #40564b; }
html[data-bs-theme="dark"] .native-app--iwriter :is(.form-control, .form-select)::placeholder { color: #8ba397; opacity: 1; }
html[data-bs-theme="dark"] .native-app--iwriter a:not(.btn):not(.dropdown-item) { color: #8edeb8; }
html[data-bs-theme="dark"] .native-app--iwriter .native-mode-switch a.active { color: #3a2a05; }
html[data-bs-theme="dark"] .native-app--iwriter .dropdown-menu[aria-labelledby="bd-theme"] { color: #e4eee8; background: #17251f; border-color: #40564b; }
html[data-bs-theme="dark"] .native-app--iwriter [data-bs-theme-value] { color: #c8d8cf; }
html[data-bs-theme="dark"] .native-app--iwriter [data-bs-theme-value]:hover { color: #ffffff; background: #22382e; }
html[data-bs-theme="dark"] .native-app--iwriter [data-bs-theme-value].active { color: #f7d98d; background: #294337; }
html[data-bs-theme="dark"] .native-app--iwriter [data-bs-theme-value].active .bi-nav.ms-auto { color: #92dfba; }

html[data-bs-theme="dark"] .native-app--ispeaker {
  --bs-body-color: #e4eee8;
  --bs-body-color-rgb: 228, 238, 232;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: rgba(228, 238, 232, .72);
  --bs-tertiary-bg: #192b23;
  --bs-border-color: #40564b;
  --bs-primary-text-emphasis: #9fe3c2;
  --bs-list-group-color: #e4eee8;
  --bs-list-group-bg: #18271f;
  --bs-list-group-border-color: #40564b;
  --bs-list-group-action-color: #dce9e1;
  --bs-list-group-action-hover-color: #ffffff;
  --bs-list-group-action-hover-bg: #22382e;
  --bs-list-group-action-active-color: #ffffff;
  --bs-list-group-action-active-bg: #294337;
  --bs-accordion-color: #e4eee8;
  --bs-accordion-bg: #18271f;
  --bs-accordion-border-color: #40564b;
  --bs-table-color: #e4eee8;
  --bs-table-bg: #18271f;
  --bs-table-border-color: #40564b;
  --bs-table-hover-color: #ffffff;
  --bs-table-hover-bg: #22382e;
  color: #e4eee8;
  background-color: #0e1c16;
  background-image: radial-gradient(rgba(159, 227, 194, .055) 1px, transparent 1.5px), radial-gradient(700px 320px at 90% 0, rgba(245, 184, 65, .08), transparent 60%);
}
html[data-bs-theme="dark"] .native-app--ispeaker :is(.native-package-body, .main_wrapper, .middle_wrap, .responsive_row) { color: #e4eee8; }
html[data-bs-theme="dark"] .native-app--ispeaker :is(.card, .accordion-item, .list-group-item, .modal-content, .offcanvas) { color: #e4eee8; background-color: #18271f; border-color: #40564b; }
html[data-bs-theme="dark"] .native-app--ispeaker .sp_left { color: #e4eee8; }
html[data-bs-theme="dark"] .native-app--ispeaker .list-group-item-action:hover .sp_left,
html[data-bs-theme="dark"] .native-app--ispeaker .list-group-item-action:focus .sp_left { color: #ffffff; }
html[data-bs-theme="dark"] .native-app--ispeaker :is(.card-title, .card-text, .accordion-body, .modal-title, label, legend, p, li) { color: inherit; }
html[data-bs-theme="dark"] .native-app--ispeaker :is(.form-control, .form-select, [contenteditable="true"]) { color: #eef5f1; background-color: #101d17; border-color: #40564b; }
html[data-bs-theme="dark"] .native-app--ispeaker :is(.form-control, .form-select)::placeholder { color: #8ba397; opacity: 1; }
html[data-bs-theme="dark"] .native-app--ispeaker .dropdown-menu { color: #e4eee8; background: #17251f; border-color: #40564b; }
html[data-bs-theme="dark"] .native-app--ispeaker .dropdown-item { color: #c8d8cf; }
html[data-bs-theme="dark"] .native-app--ispeaker .dropdown-item:hover,
html[data-bs-theme="dark"] .native-app--ispeaker .dropdown-item:focus { color: #ffffff; background: #22382e; }
html[data-bs-theme="dark"] .native-app--ispeaker .table { --bs-table-color: #e4eee8; --bs-table-bg: #18271f; --bs-table-border-color: #40564b; --bs-table-hover-color: #ffffff; --bs-table-hover-bg: #22382e; }

/* Native custom-shape word cloud generator */
.native-app--word-cloud,
.native-app--word-cloud .native-package-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.native-app--word-cloud .topbar,
.native-app--word-cloud .panel { border-color: rgba(15, 107, 76, .16); }

.native-app--love-calculator,
.native-app--love-calculator .native-package-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

/* Native pixel-art editor */
.native-app--pixel-art-maker,
.native-app--pixel-art-maker .native-package-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.native-app--pixel-art-maker {
  padding: clamp(12px, 2.5vw, 28px);
  border-radius: 22px;
  background: linear-gradient(145deg, #173c2f, #0d2d23);
}
.native-app--pixel-art-maker .app-container { width: min(1280px, 100%); }
.native-app--pixel-art-maker .app-container > header {
  margin: 0 0 20px;
  padding: 15px 18px;
  color: #f4d17c;
  border: 1px solid rgba(244, 209, 124, .22);
  border-radius: 14px;
  background: rgba(7, 30, 22, .52);
}
.native-app--pixel-art-maker .app-container > header h1 { font-size: clamp(18px, 3vw, 28px); }
.native-app--pixel-art-maker #app .app__main { margin-bottom: 0; }
.native-app--pixel-art-maker #app .app__central-container {
  margin-bottom: 0;
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: #f7f3e8;
}
.native-app--pixel-art-maker #app .app__frames-container {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
}
.native-app--pixel-art-maker #app .grid-container { max-width: 640px; }
.native-app--pixel-art-maker #app :is(button, input, select) { max-width: 100%; }

@media (max-width: 730px) {
  .native-app--pixel-art-maker { padding: 8px; border-radius: 16px; }
  .native-app--pixel-art-maker .app-container > header { padding: 12px; }
  .native-app--pixel-art-maker #app .app__central-container { padding: 10px; }
  .native-app--pixel-art-maker #app .app__mobile--container .app__mobile--group { min-width: 0; }
  .native-app--pixel-art-maker #app .grid-container { width: 100%; }
}

/* The original editor maps ordinary letters through an icon font. Use stable
   symbols here so native CSS scoping or font loading cannot expose the letters. */
.native-app--pixel-art-maker :is(
  .app__shortcuts-button,
  .preview-box .play,
  .frame .duplicate,
  .eraser,
  .preview-box .pause,
  .preview-box .screen-full,
  .color-picker__button,
  .move,
  .preview-box .screen-normal,
  .preview-box .frames,
  .picker__columns,
  .picker__rows,
  .bucket,
  .eyedropper,
  .undo-redo__icon--undo,
  .undo-redo__icon--redo,
  .app__download-button,
  .icon-help,
  .app__toggle-help-button,
  .drawing__delete,
  .frame .delete
)::before {
  font-family: Arial, "Segoe UI Symbol", sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.native-app--pixel-art-maker #app .app__help-container .app__shortcuts-button::before { content: "⌨" !important; }
.native-app--pixel-art-maker .preview-box .play::before { content: "▶" !important; }
.native-app--pixel-art-maker .frame .duplicate::before { content: "⧉" !important; }
.native-app--pixel-art-maker .eraser::before { content: "▱" !important; }
.native-app--pixel-art-maker .preview-box .pause::before { content: "Ⅱ" !important; }
.native-app--pixel-art-maker .preview-box .screen-full::before { content: "⛶" !important; }
.native-app--pixel-art-maker .color-picker .color-picker__button::before { content: "◉" !important; }
.native-app--pixel-art-maker .move::before { content: "✥" !important; }
.native-app--pixel-art-maker .preview-box .screen-normal::before { content: "↙" !important; }
.native-app--pixel-art-maker .preview-box .frames::before { content: "▣" !important; }
.native-app--pixel-art-maker .picker label.picker__columns::before { content: "↔" !important; }
.native-app--pixel-art-maker .picker label.picker__rows::before { content: "↕" !important; }
.native-app--pixel-art-maker .bucket::before { content: "◩" !important; }
.native-app--pixel-art-maker .eyedropper::before { content: "◈" !important; }
.native-app--pixel-art-maker .undo-redo .undo-redo__icon--undo::before { content: "↶" !important; }
.native-app--pixel-art-maker .undo-redo .undo-redo__icon--redo::before { content: "↷" !important; }
.native-app--pixel-art-maker #app .app__social-container .app__download-button::before { content: "↓" !important; }
.native-app--pixel-art-maker :is(.icon-help, #app .app__help-container .app__toggle-help-button)::before { content: "?" !important; }
.native-app--pixel-art-maker :is(.load-drawing .drawing__delete, .frame .delete)::before { content: "×" !important; }

/* Match the editor's original drawing-tool artwork instead of generic symbols. */
.native-app--pixel-art-maker :is(.bucket, .eyedropper, .color-picker__button, .eraser, .move)::before {
  content: "" !important;
  display: inline-block !important;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  vertical-align: -.2em;
}
.native-app--pixel-art-maker .bucket::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3.35 10.15 7.8-7.8a1.2 1.2 0 0 1 1.7 0l7.8 7.8a1.2 1.2 0 0 1 0 1.7l-7.8 7.8a1.2 1.2 0 0 1-1.7 0l-7.8-7.8a1.2 1.2 0 0 1 0-1.7ZM7.1 9.6h9.8L12 4.7 7.1 9.6Zm13.35 5.05S18.2 17.1 18.2 18.6a2.25 2.25 0 1 0 4.5 0c0-1.5-2.25-3.95-2.25-3.95Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3.35 10.15 7.8-7.8a1.2 1.2 0 0 1 1.7 0l7.8 7.8a1.2 1.2 0 0 1 0 1.7l-7.8 7.8a1.2 1.2 0 0 1-1.7 0l-7.8-7.8a1.2 1.2 0 0 1 0-1.7ZM7.1 9.6h9.8L12 4.7 7.1 9.6Zm13.35 5.05S18.2 17.1 18.2 18.6a2.25 2.25 0 1 0 4.5 0c0-1.5-2.25-3.95-2.25-3.95Z'/%3E%3C/svg%3E");
}
.native-app--pixel-art-maker .eyedropper::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.7 2.3a2.4 2.4 0 0 0-3.4 0l-2.15 2.15-1.1-1.1-1.4 1.4 1.1 1.1-8.9 8.9L2 20.3 3.7 22l5.55-1.85 8.9-8.9 1.1 1.1 1.4-1.4-1.1-1.1 2.15-2.15a2.4 2.4 0 0 0 0-3.4l-2-2ZM8.2 18.35l-3.05 1.02 1.02-3.06 7.98-7.97 2.02 2.02-7.97 7.99Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.7 2.3a2.4 2.4 0 0 0-3.4 0l-2.15 2.15-1.1-1.1-1.4 1.4 1.1 1.1-8.9 8.9L2 20.3 3.7 22l5.55-1.85 8.9-8.9 1.1 1.1 1.4-1.4-1.1-1.1 2.15-2.15a2.4 2.4 0 0 0 0-3.4l-2-2ZM8.2 18.35l-3.05 1.02 1.02-3.06 7.98-7.97 2.02 2.02-7.97 7.99Z'/%3E%3C/svg%3E");
}
.native-app--pixel-art-maker .color-picker .color-picker__button::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 14.7c-2.1 0-3.7 1.7-3.7 3.8 0 .9-.8 1.6-1.7 1.6.9 1.1 2.6 1.9 4.5 1.9 2.9 0 5.2-1.6 5.2-4.3 0-1.7-1.7-3-4.3-3Zm14.3-12.2a2.1 2.1 0 0 0-3 0L9.3 12c1.4.4 2.6 1.4 3.3 2.7l8.9-9.2a2.1 2.1 0 0 0 0-3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 14.7c-2.1 0-3.7 1.7-3.7 3.8 0 .9-.8 1.6-1.7 1.6.9 1.1 2.6 1.9 4.5 1.9 2.9 0 5.2-1.6 5.2-4.3 0-1.7-1.7-3-4.3-3Zm14.3-12.2a2.1 2.1 0 0 0-3 0L9.3 12c1.4.4 2.6 1.4 3.3 2.7l8.9-9.2a2.1 2.1 0 0 0 0-3Z'/%3E%3C/svg%3E");
}
.native-app--pixel-art-maker .eraser::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.25 3.25 22 9l-10.5 10.5H5.75L2 15.75 14.5 3.25a1.24 1.24 0 0 1 1.75 0ZM5 15.75l2.25 2.25h3.63l4.25-4.25-4.5-4.5L5 14.88v.87ZM3 21h19v-2H13.5l-2 2H3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.25 3.25 22 9l-10.5 10.5H5.75L2 15.75 14.5 3.25a1.24 1.24 0 0 1 1.75 0ZM5 15.75l2.25 2.25h3.63l4.25-4.25-4.5-4.5L5 14.88v.87ZM3 21h19v-2H13.5l-2 2H3Z'/%3E%3C/svg%3E");
}
.native-app--pixel-art-maker .move::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 1-4 4h3v5H6V7l-5 5 5 5v-3h5v5H8l4 4 4-4h-3v-5h5v3l5-5-5-5v3h-5V5h3l-4-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 1-4 4h3v5H6V7l-5 5 5 5v-3h5v5H8l4 4 4-4h-3v-5h5v3l5-5-5-5v3h-5V5h3l-4-4Z'/%3E%3C/svg%3E");
}

/* Native 3D sofa customization studio */
.native-app--sofa-studio,
.native-app--sofa-studio .native-package-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
.native-app--sofa-studio {
  border: 1px solid rgba(77, 61, 44, .13);
  border-radius: 22px;
  background: #f7f3ec;
}
.native-app--sofa-studio .topbar { border-radius: 22px 22px 0 0; }

@media (max-width: 760px) {
  .native-app--sofa-studio { border-radius: 16px; }
  .native-app--sofa-studio .topbar { border-radius: 16px 16px 0 0; }
}

html.native-help-open { overflow: hidden; }
.native-iwriter-help { position: fixed; z-index: 9998; inset: 0; display: grid; place-items: center; padding: clamp(12px, 3vw, 32px); color: #26372f; background: rgba(5, 15, 11, .82); backdrop-filter: blur(7px); }
.native-iwriter-help-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(980px, 100%); max-height: min(900px, 92vh); overflow: hidden; background: #fbf8ee; border: 1px solid rgba(245, 184, 65, .42); border-radius: 18px; box-shadow: 0 32px 90px rgba(0, 0, 0, .58); }
.native-iwriter-help-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px clamp(17px, 3vw, 28px); color: #eef5f0; background: linear-gradient(180deg, #173a2b, #112d21); border-bottom: 1px solid rgba(245, 184, 65, .3); }
.native-iwriter-help-header span { display: block; color: #8fdcb7; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 800; }
.native-iwriter-help-header h2 { margin: 2px 0 0; color: #fff8e7; font-size: clamp(20px, 3vw, 28px); font-weight: 700; }
.native-iwriter-help-header button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 11px; color: #f5dfaa; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; cursor: pointer; font-size: 11px; }
.native-iwriter-help-header button span { color: inherit; font-size: 22px; font-weight: 400; line-height: .8; }
.native-iwriter-help-header button b { text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.native-iwriter-help-content { min-height: 0; padding: clamp(22px, 4vw, 44px); overflow-y: auto; overscroll-behavior: contain; color: #33443b; scroll-behavior: smooth; }
.native-iwriter-help-content > .container { display: block !important; width: min(760px, 100%); max-width: none; margin: 0 auto; padding: 0 !important; }
.native-iwriter-help-content > .container > div { padding: 0 !important; }
.native-iwriter-help-content .row { display: block; margin: 0; }
.native-iwriter-help-content [class*="col-"] { width: 100%; margin: 0; padding: 0; }
.native-iwriter-help-content :is(h3, h4, h5) { color: #17372a; }
.native-ispeaker-help { position: absolute; min-height: 100%; place-items: start center; }
.native-ispeaker-help .native-iwriter-help-dialog { margin-top: clamp(12px, 2vw, 24px); }
.native-iwriter-help-content h3 { margin-top: 0; font-size: 23px; }
.native-iwriter-help-content h4 { scroll-margin-top: 20px; font-size: 20px; }
.native-iwriter-help-content h5 { font-size: 16px; }
.native-iwriter-help-content p { color: #405149; font-size: 14px; line-height: 1.75; }
.native-iwriter-help-content a { color: #0f7855; text-underline-offset: 2px; }
.native-iwriter-help-content .border-top { border-color: rgba(22, 50, 38, .2) !important; }
html[data-bs-theme="dark"] .native-iwriter-help-dialog { color: #e4eee8; background: #111f19; border-color: #456052; }
html[data-bs-theme="dark"] .native-iwriter-help-content { color: #dce8e1; background-color: #111f19; }
html[data-bs-theme="dark"] .native-iwriter-help-content :is(h3, h4, h5) { color: #f1f6f3; }
html[data-bs-theme="dark"] .native-iwriter-help-content p { color: #c7d7ce; }
html[data-bs-theme="dark"] .native-iwriter-help-content a { color: #91dfba; }
html[data-bs-theme="dark"] .native-iwriter-help-content .border-top { border-color: #385044 !important; }

/* Invisible Unicode character tool */
.invisible-tool { width: min(100%, 1080px); margin: 0 auto; color: #26372f; }
.invisible-tool-intro { position: relative; padding: clamp(25px, 5vw, 48px); overflow: hidden; color: #edf7f1; background: radial-gradient(500px 230px at 100% 0, rgba(127, 215, 174, .16), transparent 65%), linear-gradient(145deg, #173a2b, #102a1e); border: 1px solid rgba(245, 184, 65, .32); border-radius: 18px; }
.invisible-tool-kicker { margin: 0 0 7px !important; color: #d7a947 !important; text-transform: uppercase; letter-spacing: .17em; font-size: 9px !important; font-weight: 800; }
.invisible-tool-intro h2 { position: relative; z-index: 1; max-width: 760px; margin: 0; color: #fff8e7; font: 600 clamp(29px, 5vw, 49px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.invisible-tool-intro > p:last-child { position: relative; z-index: 1; max-width: 700px; margin: 14px 0 0; color: #b9cfc2; font-size: clamp(13px, 1.7vw, 16px); line-height: 1.7; }
.invisible-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.invisible-method { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 3.5vw, 30px); background: #fbf8ee; border: 1px solid #d9d5c7; border-radius: 16px; box-shadow: 0 22px 50px -38px rgba(18, 42, 31, .55); }
.invisible-method-heading { display: flex; align-items: center; gap: 13px; }
.invisible-method-heading > span { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; color: #3b2b08; background: linear-gradient(145deg, var(--amber-2), var(--amber)); border-radius: 11px; font-size: 11px; font-weight: 900; }
.invisible-method-heading p { margin: 0 !important; color: #8b691d !important; text-transform: uppercase; letter-spacing: .12em; font-size: 8px !important; font-weight: 800; }
.invisible-method-heading h3 { margin: 2px 0 0; color: #17372a; font: 600 clamp(20px, 3vw, 26px)/1.15 var(--display); }
.invisible-method-copy { margin: 18px 0 !important; color: #53635a !important; font-size: 13px !important; line-height: 1.7 !important; }
.invisible-character-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: auto 0 18px; }
.invisible-character-data > div { padding: 11px 12px; background: #f0ecdf; border-radius: 10px; }
.invisible-character-data dt { color: #79877f; text-transform: uppercase; letter-spacing: .08em; font-size: 7px; font-weight: 800; }
.invisible-character-data dd { margin: 3px 0 0; color: #1b392d; font-size: 11px; font-weight: 800; }
.invisible-method-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invisible-method-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 1 1 145px; min-height: 44px; padding: 9px 13px; color: #173326; background: var(--mint); border: 1px solid #65c99a; border-radius: 10px; cursor: pointer; font-size: 10px; font-weight: 800; }
.invisible-method-actions button:hover { background: #9ae7c4; }
.invisible-method-actions button.is-secondary { color: #315044; background: transparent; border-color: #bdc9c1; }
.invisible-method-actions button.is-secondary:hover { color: #173326; background: #edf3ef; border-color: #8fb6a2; }
.invisible-method-actions button b { font-size: 16px; }
.invisible-tester { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 45px); margin-top: 14px; padding: clamp(22px, 4vw, 38px); background: #e9f0eb; border: 1px solid #cbd8d0; border-radius: 16px; }
.invisible-tester h3 { margin: 0; color: #17372a; font: 600 clamp(22px, 3vw, 30px)/1.15 var(--display); }
.invisible-tester-copy > p:last-child { margin: 11px 0 0; color: #5d6e65; font-size: 12px; line-height: 1.65; }
.invisible-tester-field label { display: block; margin-bottom: 7px; color: #28483a; font-size: 9px; font-weight: 800; }
.invisible-tester textarea { display: block; width: 100%; min-height: 125px; padding: 14px; resize: vertical; color: #18392b; background: #fffdf7; border: 1px solid #b8c9bf; border-radius: 11px; outline: 0; font: 14px/1.6 var(--body); }
.invisible-tester textarea:focus { border-color: #4ba97d; box-shadow: 0 0 0 3px rgba(75, 169, 125, .13); }
.invisible-tester textarea::placeholder { color: #8a9991; }
.invisible-tester-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; color: #607269; font-size: 9px; font-weight: 800; }
.invisible-tester-meta button { padding: 5px 8px; color: #7d5610; background: transparent; border: 0; cursor: pointer; font-size: 9px; font-weight: 800; }
.invisible-status { min-height: 22px; margin: 10px 0 0 !important; color: #476057 !important; text-align: center; font-size: 10px !important; font-weight: 800; }
.invisible-status.is-success { color: #126d4a !important; }
.invisible-status.is-error { color: #a33d30 !important; }
.invisible-guide { width: min(100%, 830px); margin: clamp(48px, 7vw, 80px) auto 0; }
.invisible-guide > header { margin-bottom: 32px; padding-bottom: 23px; border-bottom: 1px solid rgba(22, 50, 38, .24); }
.invisible-guide > header h2 { margin: 0; color: #163226; font: 600 clamp(29px, 4.5vw, 45px)/1.08 var(--display); text-wrap: balance; }
.invisible-guide > p,
.invisible-guide > ol { color: #33443b; font-family: var(--reading); font-size: clamp(16.5px, 1.55vw, 18px); line-height: 1.9; letter-spacing: -.012em; }
.invisible-guide > h3 { margin: 2em 0 .65em; color: #17372a; font: 600 clamp(20px, 2.5vw, 27px)/1.2 var(--display); }
.invisible-guide > ol { padding-left: 1.35em; }
.invisible-guide > ol li + li { margin-top: .65em; }
.invisible-guide > ol li::marker { color: #b97b12; font-family: var(--body); font-weight: 800; }
.invisible-guide strong { color: #203b2f; font-weight: 700; }
@media (max-width: 760px) {
  .invisible-methods,
  .invisible-tester { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .invisible-character-data { grid-template-columns: 1fr; }
  .invisible-method-actions button { flex-basis: 100%; }
}

/* Native YouTube tags app */
.native-app--youtube { display: grid; align-content: center; gap: 26px; min-height: 560px; padding: clamp(28px, 6vw, 72px); }
.youtube-app-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; max-width: 820px; margin: 0 auto; }
.youtube-app-mark { position: relative; display: grid; place-items: center; width: 74px; height: 58px; background: #e04736; border-radius: 17px; box-shadow: 0 16px 35px -18px rgba(160, 34, 25, .65); transform: rotate(-3deg); }
.youtube-app-mark i { width: 0; height: 0; margin-left: 5px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid #fff8e8; }
.native-eyebrow { margin: 0 0 4px !important; color: #94620c !important; text-transform: uppercase; letter-spacing: .18em; font-size: 9px !important; font-weight: 800; }
.youtube-app-intro h2 { margin: 0; color: #153326; font: 600 clamp(27px, 4vw, 40px)/1.12 var(--display); letter-spacing: -.025em; }
.youtube-app-intro > div > p:last-child { margin: 8px 0 0; color: #617168; font-size: 13px; }
.youtube-tag-form, .youtube-tag-results { width: min(820px, 100%); margin: 0 auto; padding: clamp(19px, 3vw, 29px); background: rgba(255, 253, 246, .94); border: 1px solid rgba(18, 42, 31, .14); border-radius: 16px; box-shadow: 0 24px 55px -38px rgba(18, 42, 31, .6); }
.youtube-tag-form label { display: block; margin-bottom: 8px; color: #294339; font-size: 11px; font-weight: 800; }
.youtube-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.youtube-input-row input { min-width: 0; min-height: 51px; padding: 12px 15px; color: #1e352b; background: #fff; border: 1px solid #cbd5ce; border-radius: 10px; outline: 0; font-size: 14px; }
.youtube-input-row input:focus { border-color: #2e8e69; box-shadow: 0 0 0 3px rgba(46, 142, 105, .13); }
.youtube-input-row button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 128px; color: #3a2a05; background: linear-gradient(145deg, var(--amber-2), var(--amber)); border: 0; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 800; }
.youtube-input-row button:disabled { cursor: wait; filter: grayscale(.25); opacity: .7; }
.youtube-input-row button b { font-size: 17px; }
.youtube-status { min-height: 20px; margin: 10px 0 0 !important; color: #6d7c72 !important; font-size: 10px !important; }
.youtube-status.is-error { color: #a43c2f !important; }
.youtube-results-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px dashed #d3dbd5; }
.youtube-results-head strong { color: #153326; font: 600 22px/1.2 var(--display); }
.youtube-results-head button { padding: 8px 12px; color: #176b50; background: #e7f4ed; border: 1px solid #abd2bd; border-radius: 8px; cursor: pointer; font-size: 10px; font-weight: 800; }
.youtube-tags { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 15px; }
.youtube-tags button { padding: 7px 10px; color: #40554b; background: #f2ede1; border: 1px solid #dad1bd; border-radius: 999px; cursor: pointer; font-size: 10px; }
.youtube-tags button:hover { color: #176b50; border-color: #82b89d; }
.related-section { margin-bottom: 60px; }
.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.search-page { max-width: 800px; margin: 0 auto; padding: clamp(38px, 8vw, 90px) 0 40px; text-align: center; }
.search-page-form { margin-top: 28px; }
.search-summary { margin: 24px 0 0; color: var(--muted); font-size: 13px; }
.search-summary strong { color: var(--amber-2); font: 600 24px/1 var(--display); }
.category-cloud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 30px; text-align: left; }
.category-cloud a { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 13px 15px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 11px; text-decoration: none; font-size: 11px; font-weight: 800; }
.category-cloud a:hover { border-color: rgba(245, 184, 65, .5); }
.category-cloud a > span { color: var(--mint); font-family: var(--display); }
.category-cloud small { color: var(--amber-2); }
.empty-state { max-width: 620px; margin: 10px auto 50px; padding: 45px 25px; color: var(--muted); background: var(--card); border: 1px dashed rgba(245, 184, 65, .3); border-radius: 17px; text-align: center; }
.empty-state > span { color: var(--amber); font: 600 50px/1 var(--display); }
.empty-state h2 { margin: 10px 0 5px; color: var(--text); font: 600 30px/1.2 var(--display); }
.button-secondary { display: inline-flex; padding: 10px 17px; color: var(--amber-2); border: 1px solid rgba(245, 184, 65, .35); border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 800; }
.error-page { max-width: 700px; margin: 0 auto; padding: clamp(60px, 12vw, 140px) 0; text-align: center; }
.error-page > span { color: rgba(245, 184, 65, .16); font: 600 clamp(100px, 25vw, 210px)/.7 var(--display); }
.error-page h1 { margin: 22px 0 10px; color: var(--text); font: 600 clamp(40px, 7vw, 64px)/1 var(--display); }
.error-page > p:not(.section-kicker) { color: var(--muted); }
.error-page > div { display: flex; justify-content: center; gap: 9px; margin-top: 25px; }

.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 25px; margin-top: 60px; padding: 28px 0 5px; border-top: 1px solid var(--line); }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand .brand-mark { width: 42px; height: 42px; border-radius: 11px; font-size: 14px; }
.footer-brand { align-items: center; }
.footer-logo { display: block; width: min(250px, 100%); height: auto; border-radius: 7px; }
.footer-brand > p { max-width: 290px; margin: 7px 0 0; }
.footer-brand strong { color: var(--text); font: 600 20px/1 var(--display); }
.footer-brand p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 18px; }
.footer-contact,
.footer-links a { color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; }
.footer-contact { margin: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.footer-contact span { color: #8fa59a; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; }
.footer-contact-link { text-underline-offset: 3px; }
.footer-policy-link { text-underline-offset: 3px; }
.footer-links a:hover,
.footer-contact-link:hover,
.footer-policy-link:hover { color: var(--amber-2); }
.copyright { grid-column: 1 / -1; margin: 10px 0 0; padding-top: 14px; color: #708b7c; border-top: 1px dashed var(--line); font-size: 9px; text-align: center; }

@media (max-width: 1050px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-card { min-height: 260px; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-header { align-items: center; }
  .brand small { display: none; }
  .main-nav a:nth-child(2) { display: none; }
  .home-hero { padding-top: 36px; }
  .tool-hero { grid-template-columns: 1fr; }
  .tool-hero-image { width: min(100%, 620px); max-width: none; order: -1; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: center; }
}

@media (max-width: 600px) {
  .site-shell { padding-right: 13px; padding-left: 13px; }
  .brand-mark { width: 45px; height: 45px; border-radius: 12px; }
  .brand strong { font-size: 25px; }
  .main-nav { gap: 5px; }
  .main-nav a { padding: 7px 10px; font-size: 9px; }
  .home-hero h1 { font-size: clamp(43px, 14vw, 64px); }
  .hero-search { grid-template-columns: 25px 1fr; padding-right: 8px; }
  .hero-search button { grid-column: 1 / -1; margin-top: 3px; }
  .hero-stats { gap: 27px; }
  .featured-grid, .tools-grid, .related-grid, .category-cloud { grid-template-columns: 1fr; }
  .featured-card { min-height: 250px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .tools-title { flex-direction: row; align-items: flex-end; }
  .card-link { grid-template-columns: 112px minmax(0, 1fr); min-height: 177px; }
  .card-copy { padding: 14px 13px; }
  .privacy-note { grid-template-columns: 1fr; }
  .privacy-mark { width: 55px; height: 55px; border-radius: 14px; }
  .archive-hero { grid-template-columns: 1fr; }
  .archive-icon { width: 68px; height: 68px; border-radius: 18px; }
  .tool-content { padding: 14px; }
  .paper-ribbon small { display: none; }
  .fullscreen-button > span:last-child { display: none; }
  .youtube-app-intro { grid-template-columns: 1fr; text-align: center; }
  .youtube-app-mark { margin: 0 auto; }
  .youtube-input-row { grid-template-columns: 1fr; }
  .youtube-input-row button { min-height: 48px; }
  .native-app--youtube { padding: 25px 14px; }
  .native-app--embedded-game { padding: 10px; }
  .embedded-game-heading { align-items: flex-start; flex-direction: column; gap: 9px; padding: 3px; }
  .embedded-game-frame, .embedded-game-frame iframe { min-height: 560px; height: 560px; }
  .native-app--embedded-game-daily-jigsaw .embedded-game-frame,
  .native-app--embedded-game-daily-jigsaw .embedded-game-frame iframe { min-height: 590px; height: 590px; }
  .native-app--embedded-game-holiday-card .embedded-game-frame,
  .native-app--embedded-game-holiday-card .embedded-game-frame iframe { min-height: 560px; height: 560px; }
  .native-app--3d-object-maker { padding: 10px; }
  .object-maker-heading { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .object-maker-status { grid-column: 2; }
  .object-maker-frame, .object-maker-frame iframe { min-height: 620px; height: 620px; }
  .game-links-grid { grid-template-columns: 1fr; }
  .related-tool-callout { grid-template-columns: 1fr auto; }
  .related-tool-callout > span { grid-column: 1 / -1; width: max-content; }
  .native-mode-switch { align-items: stretch; }
  .native-mode-switch a { flex: 1; padding-right: 8px; padding-left: 8px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.ati-guide-related { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; width: min(100%, 900px); margin: 0 auto clamp(38px, 6vw, 64px); padding: clamp(18px, 3vw, 24px); color: #edf6f0; background: radial-gradient(420px 170px at 100% 0, rgba(127, 215, 174, .17), transparent 70%), linear-gradient(140deg, #173b2b, #0d291d); border: 1px solid rgba(245, 184, 65, .52); border-radius: 16px; box-shadow: 0 22px 48px -34px rgba(5, 25, 17, .95); }
.ati-guide-related > span { display: grid; width: 43px; height: 43px; place-items: center; color: #173326; background: linear-gradient(135deg, #f5c969, #7fd7ae); border-radius: 12px; }
.tool-content .ati-guide-related p { width: auto; margin: 0; color: #dce9e1 !important; -webkit-text-fill-color: #dce9e1 !important; font: 600 clamp(16px, 2vw, 20px)/1.45 var(--display); }
.tool-content .ati-guide-related a, .tool-content .ati-guide-related strong { color: #fff7e5 !important; -webkit-text-fill-color: #fff7e5 !important; text-decoration-color: #7fd7ae; text-underline-offset: 4px; }
.ati-guide-related > b { color: #f5c969; font-size: 25px; font-weight: 400; }
.ati-guide-note, .ati-guide-warning { width: min(100%, 900px); margin: clamp(32px, 5vw, 52px) auto; padding: clamp(20px, 4vw, 31px); border-radius: 17px; }
.ati-guide-note { color: #eaf4ed; background: radial-gradient(420px 180px at 100% 0, rgba(127, 215, 174, .16), transparent 70%), #123426; border: 1px solid rgba(127, 215, 174, .42); }
.ati-guide-note > span { display: inline-block; margin-bottom: 8px; color: #f5c969; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 850; }
.tool-content .ati-guide-note h3 { width: auto; margin: 0; color: #fff8e7 !important; -webkit-text-fill-color: #fff8e7 !important; font: 600 clamp(23px, 3vw, 32px)/1.18 var(--display); }
.tool-content .ati-guide-note p, .tool-content .ati-guide-warning p { width: auto; margin: 13px 0 0; color: #c9dacf !important; -webkit-text-fill-color: #c9dacf !important; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75; }
.tool-content .ati-guide-note code { padding: 2px 6px; color: #0b2d20 !important; -webkit-text-fill-color: #0b2d20 !important; background: #d7efe2; border: 1px solid #a9d8c1; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; }
.ati-guide-warning { color: #3f2c08; background: linear-gradient(135deg, #fff5d8, #f6e4b5); border: 1px solid #ddb75d; }
.tool-content .ati-guide-warning > strong { display: block; color: #513708 !important; -webkit-text-fill-color: #513708 !important; font: 600 clamp(23px, 3vw, 31px)/1.2 var(--display); }
.tool-content .ati-guide-warning p { color: #5f4d27 !important; -webkit-text-fill-color: #5f4d27 !important; }
@media (max-width: 560px) { .ati-guide-related { grid-template-columns: auto minmax(0, 1fr); } .ati-guide-related > b { display: none; } }

@media print {
  body { color: #111; background: #fff; }
  .site-header, .ruler, .breadcrumbs, .paper-ribbon, .related-section, .site-footer, .ghost { display: none; }
  .site-shell, .tool-content { max-width: none; padding: 0; }
  .tool-hero { display: block; padding: 0 0 20px; }
  .tool-hero h1, .tool-content h1, .tool-content h2, .tool-content h3 { color: #111; }
  .tool-summary, .tool-content p, .tool-content li { color: #222; }
  .tool-hero-image { display: none; }
  .tool-paper { border: 0; box-shadow: none; }
}

.native-app--resume-embed { display: flex; min-height: 760px; overflow: hidden; background: #f7f3e8; }
.resume-embed-frame { flex: 1 1 auto; width: 100%; height: clamp(760px, 84vh, 980px); background: #f7f3e8; }
.resume-embed-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #f7f3e8; }
.native-app--resume-embed:fullscreen,
.native-app--resume-embed:-webkit-full-screen { width: 100vw; height: 100vh; min-height: 0; padding: 0; background: #f7f3e8; }
.native-app--resume-embed:fullscreen .resume-embed-frame,
.native-app--resume-embed:-webkit-full-screen .resume-embed-frame { height: 100%; }
.resume-download-example { width: min(50%, 450px); margin: 28px auto 48px !important; padding: 12px; overflow: hidden !important; border: 1px solid #d8d1be; border-radius: 14px; background: #fff; box-shadow: 0 18px 42px -34px rgba(7, 37, 25, .65); }
.resume-download-example img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 700px) {
  .native-app--resume-embed { min-height: 680px; }
  .resume-embed-frame { height: 760px; }
}

/* Modern Venn diagram editor. The IDs come from this legacy tool and keep the
   redesign isolated from every other page. Important declarations are needed
   because the original editor stylesheet is loaded from inside the article. */
#topBar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  color: #eaf5ee !important;
  background:
    radial-gradient(520px 130px at 100% 0, rgba(245, 184, 65, .16), transparent 68%),
    linear-gradient(135deg, #123a2a, #0b271c) !important;
  border: 1px solid rgba(127, 215, 174, .2) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 18px 42px -30px rgba(4, 30, 20, .85) !important;
}
#topBar button,
#topBar .dropbtn {
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  color: #eef8f1 !important;
  background: rgba(255, 255, 255, .075) !important;
  border: 1px solid rgba(211, 235, 219, .2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease !important;
}
#topBar button:hover,
#topBar .dropbtn:hover {
  color: #fff !important;
  background: rgba(127, 215, 174, .17) !important;
  border-color: rgba(127, 215, 174, .52) !important;
  transform: translateY(-1px) !important;
}
#topBar button:focus-visible,
#topBar input:focus-visible {
  outline: 3px solid rgba(245, 184, 65, .42) !important;
  outline-offset: 2px !important;
}
#topBar .dropdown { position: relative !important; margin: 0 !important; }
#topBar .dropdown-content {
  top: calc(100% + 7px) !important;
  min-width: 180px !important;
  padding: 7px !important;
  overflow: hidden !important;
  background: #fffdf8 !important;
  border: 1px solid #d9e3dc !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 46px -22px rgba(6, 38, 25, .7) !important;
}
#topBar .dropdown-content div {
  padding: 9px 11px !important;
  color: #243b30 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
#topBar .dropdown-content div:hover { background: #e8f3ec !important; }
#topBar .pencilLabel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  color: #dcebe1 !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(211,235,219,.16) !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}
#topBar .pencilLabel input { margin: 0 !important; }
#topBar input[type="color"] {
  width: 29px !important;
  height: 27px !important;
  padding: 2px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 7px !important;
}
#topBar input[type="number"] {
  width: 52px !important;
  height: 28px !important;
  padding: 4px 6px !important;
  color: #173629 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 7px !important;
}
#topBar .spacer { flex: 1 1 28px !important; }
#workspace {
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 34px !important;
  overflow: hidden !important;
  background: #eef3ef !important;
  border: 1px solid #d5dfd8 !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 28px 62px -46px rgba(4, 30, 20, .75) !important;
}
#templatePanel {
  flex: 0 0 210px !important;
  width: 210px !important;
  max-height: min(76vw, 780px) !important;
  padding: 16px !important;
  overflow-y: auto !important;
  color: #18382a !important;
  background: #f3f7f4 !important;
  border-right: 1px solid #d6e1da !important;
  box-shadow: none !important;
}
#templatePanel.hidden { display: none !important; }
#templatePanel h2 { margin: 0 0 13px !important; font-size: 16px !important; }
#templatePanel .tItem {
  width: calc(50% - 5px) !important;
  margin: 2px 2px 7px !important;
  padding: 7px !important;
  background: #fff !important;
  border: 1px solid #dce5df !important;
  border-radius: 10px !important;
  box-shadow: 0 7px 18px -15px rgba(9, 43, 29, .7) !important;
}
#templatePanel .tItem:hover { background: #e7f3eb !important; border-color: #9bc7ac !important; }
#templatePanel .tItem img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 9 / 8 !important; object-fit: contain !important; }
#templatePanel > button {
  width: 100% !important;
  min-height: 38px !important;
  margin-top: 5px !important;
  color: #fff !important;
  background: #173b2b !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-weight: 750 !important;
}
#svgContainer {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(rgba(23, 59, 43, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 59, 43, .045) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  box-shadow: inset 0 0 0 1px rgba(23, 59, 43, .06) !important;
}
#mainCanvas { display: block !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
#toolbox {
  max-width: calc(100% - 20px) !important;
  padding: 7px !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  color: #263d32 !important;
  background: rgba(255, 253, 248, .96) !important;
  border: 1px solid #d2ded6 !important;
  border-radius: 11px !important;
  box-shadow: 0 16px 36px -22px rgba(4, 32, 20, .7) !important;
  backdrop-filter: blur(12px) !important;
}
#toolbox button {
  min-height: 30px !important;
  padding: 5px 9px !important;
  color: #fff !important;
  background: #a5443f !important;
  border-radius: 7px !important;
  font-weight: 750 !important;
}
#toolbox select,
#toolbox input[type="number"] { min-height: 30px !important; border: 1px solid #cad8cf !important; border-radius: 6px !important; }
#codePanel {
  right: 14px !important;
  width: min(440px, calc(100% - 28px)) !important;
  height: 230px !important;
  padding: 12px !important;
  border: 1px solid #cfdbd3 !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 52px -28px rgba(4, 32, 20, .75) !important;
}
#svgCodeArea { padding: 9px !important; border: 1px solid #dde5df !important; border-radius: 8px !important; }
.venn-quick-guide {
  width: min(100%, 920px);
  margin: 30px auto 46px;
  padding: clamp(20px, 3vw, 28px);
  color: #dcebe2;
  background:
    radial-gradient(460px 180px at 100% 0, rgba(245, 184, 65, .15), transparent 70%),
    linear-gradient(140deg, #173b2b, #0c291d);
  border: 1px solid rgba(127, 215, 174, .35);
  border-radius: 17px;
  box-shadow: 0 24px 50px -38px rgba(4, 30, 20, .95);
}
.tool-content .venn-quick-guide p {
  width: auto;
  margin: 0;
  color: #dcebe2 !important;
  -webkit-text-fill-color: #dcebe2 !important;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.7;
}
.tool-content .venn-quick-guide p + p {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(215, 235, 222, .13);
}
.tool-content .venn-quick-guide strong {
  color: #fff4d5 !important;
  -webkit-text-fill-color: #fff4d5 !important;
}

@media (max-width: 760px) {
  #topBar { gap: 6px !important; padding: 10px !important; border-radius: 14px 14px 0 0 !important; }
  #topBar button, #topBar .dropbtn { flex: 1 1 calc(33.333% - 6px) !important; min-width: 88px !important; padding-inline: 8px !important; }
  #topBar .dropdown { display: flex !important; flex: 1 1 calc(33.333% - 6px) !important; min-width: 88px !important; }
  #topBar .dropdown > button { width: 100% !important; }
  #topBar .pencilLabel { flex: 1 1 calc(50% - 6px) !important; justify-content: center !important; }
  #topBar .spacer { display: none !important; }
  #workspace { display: block !important; border-radius: 0 0 14px 14px !important; }
  #templatePanel { width: 100% !important; max-height: 300px !important; border-right: 0 !important; border-bottom: 1px solid #d6e1da !important; }
  #templatePanel .tItem { width: calc(25% - 7px) !important; }
  #svgContainer { width: 100% !important; min-height: 390px !important; aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 480px) {
  #topBar button, #topBar .dropbtn, #topBar .dropdown { flex-basis: calc(50% - 5px) !important; }
  #templatePanel .tItem { width: calc(50% - 6px) !important; }
  #svgContainer { min-height: 320px !important; }
}

/* Keep this as the final rule in the global stylesheet. App styles must not
   replace the interaction cursor on links or enabled button controls. */
html body a[href],
html body a[href] *,
html body button:not(:disabled),
html body button:not(:disabled) *,
html body input[type="button"]:not(:disabled),
html body input[type="submit"]:not(:disabled),
html body input[type="reset"]:not(:disabled),
html body [role="button"]:not([aria-disabled="true"]),
html body [role="button"]:not([aria-disabled="true"]) * {
  cursor: pointer !important;
}

html body button:disabled,
html body button:disabled *,
html body input[type="button"]:disabled,
html body input[type="submit"]:disabled,
html body input[type="reset"]:disabled,
html body [role="button"][aria-disabled="true"],
html body [role="button"][aria-disabled="true"] * {
  cursor: not-allowed !important;
}