:root {
      --bg: #fffaf6;
      --text: #243042;
      --muted: #5f6b7a;
      --primary: #ff8c5a;
      --primary-dark: #ea7440;
      --secondary: #4fb3a9;
      --secondary-dark: #3e988f;
      --line: #eadfd6;
      --shadow: 0 10px 28px rgba(36, 48, 66, 0.08);
      --radius-xl: 28px;
      --radius-lg: 20px;
      --max: var(--totink-site-max, 1180px);
      --paper-width: 800px;
      --paper-height: 1131px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, #fff1e8 0, transparent 28%),
        radial-gradient(circle at top right, #eef9ff 0, transparent 22%),
        var(--bg);
      line-height: 1.6;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    .sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    .container {
      width: min(100% - 32px, var(--max));
      margin: 0 auto;
    }

    .skip-link {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .skip-link:focus {
      left: 16px;
      top: 16px;
      width: auto;
      height: auto;
      background: #fff;
      border-radius: 12px;
      padding: 10px 14px;
      z-index: 999;
      box-shadow: var(--shadow);
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
      background: rgba(255, 250, 246, 0.86);
      border-bottom: 1px solid rgba(234, 223, 214, 0.8);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      min-height: 76px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: -0.02em;
      font-size: 1.15rem;
      white-space: nowrap;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      object-fit: cover;
      box-shadow: 0 8px 18px rgba(255, 140, 90, 0.20);
      background: #fff;
      border: 1px solid rgba(234, 223, 214, 0.9);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .nav-links a {
      color: var(--muted);
      font-weight: 600;
      font-size: 0.94rem;
    }

    .nav-links a:hover { color: var(--text); }

    .nav-links a.active {
      color: var(--primary-dark);
      font-weight: 700;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .lang-switch {
      appearance: none;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      font-weight: 600;
      cursor: pointer;
      width: 120px;
      min-width: 120px;
      max-width: 120px;
      height: 44px;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 14px;
      font-weight: 700;
      border: 0;
      cursor: pointer;
      transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
      white-space: nowrap;
      font-size: 0.98rem;
    }

    .btn:hover { transform: translateY(-1px); }

    .btn-primary {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 10px 22px rgba(255, 140, 90, 0.24);
    }

    .btn-primary:hover { background: var(--primary-dark); }

    .btn-secondary {
      background: #fff;
      color: var(--text);
      border: 1px solid var(--line);
    }

    .btn-secondary:hover { background: #fff8f4; }

    .hero {
      padding: 34px 0 24px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #fffaf6 0%, #fffdfb 100%);
    }

    .breadcrumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: 0.94rem;
      margin-bottom: 16px;
    }

    .breadcrumbs a:hover { color: var(--primary-dark); }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 28px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--secondary-dark);
      font-weight: 700;
      font-size: 0.92rem;
      box-shadow: var(--shadow);
    }

    h1 {
      margin: 18px 0 14px;
      font-size: clamp(2.2rem, 4vw, 3.8rem);
      line-height: 1.05;
      letter-spacing: -0.04em;
    }

    .hero p {
      margin: 0;
      color: var(--muted);
      font-size: 1.08rem;
      max-width: 62ch;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 24px;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--text);
      font-weight: 700;
      font-size: 0.93rem;
    }

    .hero-visual .visual-card,
    .panel,
    .preview-panel,
    .section-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
    }

    .hero-visual .visual-card {
      padding: 20px;
      overflow: hidden;
      background: linear-gradient(180deg, #ffffff 0%, #fff7f2 100%);
    }

    .visual-sheet {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 18px;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
    }

    .hero-row {
      position: relative;
      height: 56px;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
      border: 1px dashed #ecd6c9;
      overflow: hidden;
    }

    .hero-guide {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: #d9dee6;
      opacity: 0.9;
    }

    .hero-guide.top { top: 18%; }
    .hero-guide.mid { top: 50%; }
    .hero-guide.base { top: 82%; }
    .hero-guide.bottom { bottom: 1px; }

    .hero-trace-text,
    .hero-solid-text {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 6px;
      font-family: "Patrick Hand", cursive;
      font-size: 34px;
      line-height: 1;
      letter-spacing: 0.08em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hero-trace-text {
      color: transparent;
      -webkit-text-stroke: 1.3px #9aa4b2;
    }

    .hero-solid-text {
      color: #7a8796;
    }

    .layout {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 28px;
      align-items: start;
      margin: 28px 0;
    }

    .panel {
      position: sticky;
      top: 92px;
      padding: 22px;
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 20px;
    }

    .panel h2 {
      margin: 0;
      font-size: 1.25rem;
      letter-spacing: -0.02em;
    }

    .mode-chip {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      background: #ebfbf6;
      color: #267d6c;
      border: 1px solid #d5f3ea;
      text-transform: uppercase;
    }

    .field { margin-bottom: 18px; }

    .field label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      font-size: 0.94rem;
      font-weight: 700;
      color: var(--text);
    }

    .field-help {
      margin-top: 6px;
      font-size: 0.82rem;
      color: var(--muted);
    }

    textarea,
    input[type="range"] {
      width: 100%;
    }

    textarea {
      min-height: 136px;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px;
      background: #fff;
      color: var(--text);
      font-size: 1rem;
      font-weight: 600;
      resize: vertical;
      outline: none;
      font-family: inherit;
    }

    textarea:focus {
      border-color: #e7c8b4;
      box-shadow: 0 0 0 4px rgba(255, 140, 90, 0.10);
    }

    .slider-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 6px;
      font-size: 0.8rem;
      color: var(--muted);
    }

    input[type="range"] {
      appearance: none;
      height: 8px;
      border-radius: 999px;
      background: #eedfd5;
      outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--secondary);
      border: 3px solid #fff;
      box-shadow: 0 2px 10px rgba(79, 179, 169, 0.35);
      cursor: pointer;
    }

    .switch-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 56px;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 12px 14px;
      background: #fff;
    }

    .switch-copy {
      display: grid;
      gap: 2px;
    }

    .switch-copy strong {
      font-size: 0.94rem;
    }

    .switch-copy span {
      color: var(--muted);
      font-size: 0.82rem;
    }

    .switch {
      position: relative;
      width: 52px;
      height: 30px;
      display: inline-block;
    }

    .switch input { display: none; }

    .slider {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #d8dee7;
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .slider::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.14);
      transition: all 0.2s ease;
    }

    .switch input:checked + .slider {
      background: var(--primary);
    }

    .switch input:checked + .slider::before {
      transform: translateX(22px);
    }

    .status-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 20px 0;
    }

    .status-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff9f5;
      padding: 14px;
    }

    .status-card .label {
      font-size: 0.75rem;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .status-card .value {
      margin-top: 8px;
      font-weight: 800;
      color: var(--text);
      font-size: 0.94rem;
    }

    .panel-actions {
      display: grid;
      gap: 10px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .panel-note {
      margin-top: 10px;
      font-size: 0.8rem;
      color: var(--muted);
      text-align: center;
    }

    .preview-panel {
      padding: 22px;
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

    .section-title {
      margin: 0;
      font-size: 1.55rem;
      line-height: 1.15;
      letter-spacing: -0.03em;
    }

    .section-desc {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 0.98rem;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: #fff8f4;
      border: 1px solid var(--line);
      color: var(--muted);
      font-weight: 800;
      font-size: 0.78rem;
    }

    .preview-wrap {
      background: #e5e7eb;
      border: 1px solid #d4d7db;
      border-radius: 22px;
      padding: 16px;
      min-height: 420px;
      max-height: 920px;
      overflow: auto;
      box-shadow: inset 0 8px 18px rgba(0,0,0,0.05);
    }

    .preview-fit-area {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .papers-scale-wrap {
      transform-origin: top center;
      width: var(--paper-width);
    }

    .papers-container {
      display: grid;
      gap: 24px;
      justify-content: center;
    }

    .page {
      width: var(--paper-width);
      height: var(--paper-height);
      background: #fff;
      border-radius: 8px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 22px rgba(0,0,0,0.12);
      color: #243042;
      flex-shrink: 0;
    }

    .page-inner {
      position: absolute;
      inset: 0;
      padding: 48px 56px 42px;
    }

    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .page-title {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .page-badge {
      font-size: 13px;
      font-weight: 800;
      color: #267d6c;
      background: #ebfbf6;
      border: 1px solid #d5f3ea;
      border-radius: 999px;
      padding: 6px 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .name-line {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 22px;
      color: #667085;
      font-size: 18px;
      font-weight: 700;
    }

    .name-line .rule {
      flex: 1;
      border-bottom: 2px solid #d7dee7;
      transform: translateY(1px);
    }

    .practice-area {
      width: 100%;
      height: 905px;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .practice-block {
      display: grid;
      gap: 10px;
      page-break-inside: avoid;
    }

    .writing-row {
      position: relative;
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
      border: 1px solid rgba(234, 223, 214, 0.6);
    }

    .writing-row.guidelines-off {
      background: linear-gradient(180deg, #fff 0%, #fffdfb 100%);
    }

    .guide-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: #d7dde7;
      opacity: 0.95;
    }

    .guide-line.top { top: 18%; }
    .guide-line.mid { top: 50%; }
    .guide-line.base { top: 82%; }
    .guide-line.bottom { bottom: 1px; }

    .trace-text,
    .solid-text {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 6px;
      font-family: "Patrick Hand", cursive;
      line-height: 1;
      letter-spacing: 0.08em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }

    .trace-text {
      color: transparent;
      -webkit-text-stroke: 1.6px #9ca3af;
    }

    .solid-text {
      color: #6f7c8a;
    }

    /* Keep preview tracing letters hollow in the worksheet preview/export */
    .tracing-text {
      color: transparent !important;
      -webkit-text-stroke: 1.6px #9ca3af;
      text-stroke: 1.6px #9ca3af;
      paint-order: stroke fill;
    }


    .page-footer {
      position: absolute;
      left: 56px;
      right: 56px;
      bottom: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #8a97a7;
      font-size: 13px;
      font-weight: 700;
    }

    .info-grid,
    .faq-grid,
    .related-grid {
      display: grid;
      gap: 16px;
    }

    .info-grid {
      grid-template-columns: repeat(3, minmax(0,1fr));
      margin-top: 18px;
    }

    .faq-grid,
    .related-grid {
      grid-template-columns: 1fr 1fr;
      margin-top: 16px;
    }

    .card-kicker {
      font-size: 0.82rem;
      font-weight: 800;
      color: var(--secondary-dark);
      margin-bottom: 6px;
    }

    .split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 18px;
    }

    .info-card,
    .faq-card,
    .guide-card,
    .related-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: var(--shadow);
      transition: transform 0.18s ease, border-color 0.18s ease;
    }

    .info-card:hover,
    .faq-card:hover,
    .guide-card:hover,
    .related-card:hover {
      transform: translateY(-2px);
      border-color: #e5cdbd;
    }

    .card-title {
      margin: 0 0 8px;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .card-text {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .related-grid.three {
      grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .related-card .cta {
      margin-top: 12px;
      color: var(--secondary-dark);
      font-weight: 800;
      font-size: 0.92rem;
    }

    .section {
      margin-top: 18px;
    }

    footer {
      margin-top: 32px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.7);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr;
      gap: 24px;
      padding: 34px 0 24px;
    }

    .footer-title {
      margin: 0 0 12px;
      font-size: 1rem;
      font-weight: 800;
    }

    .footer-list {
      display: grid;
      gap: 10px;
    }

    .footer-list a,
    .footer-copy,
    .footer-copy p {
      color: var(--muted);
    }

    .footer-list a:hover { color: var(--text); }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--line);
      padding: 16px 0 28px;
      color: var(--muted);
      font-size: 0.94rem;
      flex-wrap: wrap;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(16, 24, 40, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 110;
      backdrop-filter: blur(4px);
    }

    .modal-backdrop.show { display: flex; }

    .modal {
      width: min(100%, 460px);
      background: #fff;
      border-radius: 28px;
      border: 1px solid var(--line);
      box-shadow: 0 24px 60px rgba(16,24,40,0.18);
      padding: 24px;
      position: relative;
    }

    .modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 999px;
      background: #fff8f4;
      color: var(--muted);
      cursor: pointer;
      font-size: 1.1rem;
      font-weight: 800;
    }

    .modal h3 {
      margin: 0 0 8px;
      font-size: 1.3rem;
      letter-spacing: -0.02em;
    }

    .modal p {
      margin: 0 0 18px;
      color: var(--muted);
    }

    .hidden { display: none !important; }

    @media (max-width: 1200px) {
      .page {
        width: 680px;
        height: 960px;
      }

      .page-inner { padding: 42px 42px 34px; }
      .practice-area { height: 765px; }
    }

    @media (max-width: 1024px) {
      .hero-grid,
      .layout,
      .split-grid,
      .faq-grid,
      .footer-grid,
      .info-grid,
      .related-grid.three {
        grid-template-columns: 1fr;
      }

      .panel { position: static; }
    }

    @media (max-width: 820px) {
      .nav {
        align-items: flex-start;
        padding: 14px 0;
        flex-direction: column;
      }

      .nav-links,
      .nav-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .page {
        width: 560px;
        height: 792px;
      }

      .page-inner { padding: 28px 28px 28px; }
      .page-title { font-size: 24px; }
      .practice-area { height: 615px; }
      .page-footer {
        left: 28px;
        right: 28px;
      }
    }

    @media (max-width: 640px) {
      .container { width: min(100% - 20px, var(--max)); }

      .page {
        width: 360px;
        height: 509px;
      }

      .page-inner { padding: 16px 16px 16px; }
      .page-title { font-size: 16px; }
      .page-badge {
        font-size: 10px;
        padding: 4px 7px;
      }
      .name-line {
        font-size: 12px;
        margin-bottom: 10px;
      }
      .practice-area { height: 405px; }
      .page-footer {
        bottom: 12px;
        left: 16px;
        right: 16px;
        font-size: 9px;
      }

      .status-grid,
      .faq-grid,
      .related-grid {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

:root {
      --glass-ink: #17233f;
      --glass-ink-soft: #506078;
      --glass-muted: #7d8aa2;
      --glass-blue: #246bff;
      --glass-blue-dark: #1555d5;
      --glass-cyan: #5fd7ff;
      --glass-violet: #8d7dff;
      --glass-orange: #ff8c5a;
      --glass-line: rgba(122,151,196,.2);
      --glass-panel: rgba(255,255,255,.68);
      --glass-panel-strong: rgba(255,255,255,.86);
      --glass-shadow: 0 30px 88px rgba(40,58,94,.16);
      --glass-shadow-soft: 0 18px 46px rgba(40,58,94,.12);
      --content: 1120px;
    }

    body.name-tracing-page {
      color: var(--glass-ink);
      background:
        radial-gradient(circle at 14% 10%, rgba(79,168,255,.32) 0, rgba(79,168,255,.06) 26%, transparent 44%),
        radial-gradient(circle at 88% 20%, rgba(153,134,255,.36) 0, rgba(153,134,255,.08) 23%, transparent 44%),
        radial-gradient(circle at 84% 78%, rgba(95,215,255,.28) 0, transparent 34%),
        linear-gradient(135deg, #edf7ff 0%, #f8fbff 42%, #f4f0ff 100%) !important;
      overflow-x: hidden;
    }

    body.name-tracing-page::before,
    body.name-tracing-page::after {
      content: "";
      position: fixed;
      pointer-events: none;
      z-index: 0;
      border-radius: 999px;
      filter: blur(2px);
    }
    body.name-tracing-page::before {
      width: 320px;
      height: 320px;
      right: -90px;
      top: 92px;
      background: radial-gradient(circle, rgba(141,125,255,.2), transparent 65%);
    }
    body.name-tracing-page::after {
      width: 260px;
      height: 260px;
      left: -84px;
      bottom: 100px;
      background: radial-gradient(circle, rgba(95,215,255,.22), transparent 64%);
    }

    .page-wrap {
      width: calc(100% - 28px);
      max-width: none;
      margin: 16px auto 32px;
      border: 1px solid rgba(255,255,255,.68);
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(28px) saturate(1.15);
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    .page-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 78% 14%, rgba(58,141,255,.14), transparent 28%),
        radial-gradient(circle at 16% 76%, rgba(142,126,255,.1), transparent 34%);
      pointer-events: none;
    }
    .site-shell-inner { position: relative; z-index: 1; }
    body.name-tracing-page .container { width: calc(100% - 44px); max-width: none; margin-inline: auto; }

    body.name-tracing-page .topbar {
      position: relative;
      top: auto;
      z-index: 10;
      padding: 18px 0 8px;
      background: transparent;
      border-bottom: 0;
      backdrop-filter: none;
    }
    body.name-tracing-page .topbar .nav {
      min-height: 52px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: 9px 10px 9px 14px;
      border: 1px solid rgba(255,255,255,.76);
      border-radius: 26px;
      background: rgba(255,255,255,.58);
      box-shadow: 0 12px 34px rgba(52,80,128,.10);
      backdrop-filter: blur(18px);
    }
    body.name-tracing-page .brand {
      color: var(--glass-ink);
      font-weight: 950;
      letter-spacing: -.03em;
      gap: 10px;
      text-decoration: none;
    }
    body.name-tracing-page .brand-logo {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      border: 0;
      background: transparent;
      box-shadow: 0 10px 22px rgba(36,107,255,.16);
    }
    body.name-tracing-page .brand span { font-size: 1rem; }
    body.name-tracing-page .nav-links {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      min-width: 0;
      flex-wrap: wrap;
    }
    body.name-tracing-page .nav-links a {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      color: rgba(23,35,63,.72);
      font-size: .82rem;
      font-weight: 850;
      transition: background .16s ease, color .16s ease, transform .16s ease;
      white-space: nowrap;
    }
    body.name-tracing-page .nav-links a:hover,
    body.name-tracing-page .nav-links a.active {
      background: rgba(36,107,255,.10);
      color: var(--glass-blue-dark);
      transform: translateY(-1px);
    }
    body.name-tracing-page .nav-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
    body.name-tracing-page .lang-switch {
      height: 36px;
      width: auto;
      min-width: 96px;
      max-width: 108px;
      border: 1px solid rgba(90,125,180,.18);
      border-radius: 999px;
      padding: 0 10px;
      background: rgba(255,255,255,.74);
      color: var(--glass-ink);
      font-weight: 850;
      box-shadow: none;
    }
    body.name-tracing-page .btn {
      min-height: 42px;
      padding: 0 15px;
      border-radius: 999px;
      font-size: .92rem;
      font-weight: 850;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    }
    body.name-tracing-page .btn:hover { transform: translateY(-2px); }
    body.name-tracing-page .btn-primary {
      color: #fff !important;
      background: linear-gradient(135deg, #2f7cff, #1455dc) !important;
      box-shadow: 0 14px 30px rgba(36,107,255,.26) !important;
    }
    body.name-tracing-page .btn-secondary {
      color: var(--glass-ink) !important;
      background: rgba(255,255,255,.66) !important;
      border: 1px solid rgba(94,125,178,.18) !important;
      box-shadow: 0 12px 26px rgba(40,58,94,.08) !important;
    }

    body.name-tracing-page .totink-main-frame { background: transparent !important; border: 0 !important; box-shadow: none !important; }
    body.name-tracing-page .hero {
      padding: clamp(24px,3vw,44px) 0 18px;
      background: transparent;
      border-bottom: 0;
    }
    body.name-tracing-page .hero > .container {
      border: 1px solid rgba(255,255,255,.74);
      border-radius: 30px;
      background:
        radial-gradient(circle at 88% 18%, rgba(95,215,255,.18), transparent 34%),
        radial-gradient(circle at 10% 90%, rgba(141,125,255,.13), transparent 40%),
        rgba(255,255,255,.56);
      box-shadow: var(--glass-shadow-soft);
      backdrop-filter: blur(20px) saturate(1.12);
      padding: clamp(22px,3vw,40px);
      overflow: hidden;
      position: relative;
    }
    body.name-tracing-page .hero-grid { grid-template-columns: minmax(0,.95fr) minmax(430px,1.05fr); gap: clamp(24px,4vw,56px); }
    body.name-tracing-page .breadcrumbs { margin-bottom: 16px; color: var(--glass-muted); }
    body.name-tracing-page .eyebrow,
    body.name-tracing-page .badge,
    body.name-tracing-page .chip,
    body.name-tracing-page .mode-chip {
      border: 1px solid rgba(122,151,196,.18) !important;
      background: rgba(255,255,255,.64) !important;
      color: var(--glass-blue-dark) !important;
      box-shadow: 0 10px 22px rgba(40,58,94,.07) !important;
      font-weight: 850;
    }
    body.name-tracing-page h1 {
      color: var(--glass-ink);
      font-size: clamp(2rem, 3.6vw, 3.35rem);
      line-height: 1.04;
      letter-spacing: -.052em;
    }
    body.name-tracing-page .hero p,
    body.name-tracing-page .section-desc,
    body.name-tracing-page .card-text,
    body.name-tracing-page .field-help,
    body.name-tracing-page .panel-note,
    body.name-tracing-page .footer-copy p {
      color: var(--glass-ink-soft) !important;
    }

    .name-hero-art {
      position: relative;
      min-height: 430px;
      padding: 0 !important;
      border: 1px solid rgba(255,255,255,.78) !important;
      background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(239,247,255,.58)) !important;
      overflow: hidden;
      box-shadow: 0 24px 66px rgba(40,58,94,.14) !important;
    }
    .name-hero-art::before {
      content: "";
      position: absolute;
      inset: -35%;
      background: conic-gradient(from 120deg, transparent, rgba(95,215,255,.2), transparent, rgba(141,125,255,.18), transparent);
      animation: slowSpin 18s linear infinite;
      opacity: .75;
    }
    .name-hero-svg { position: relative; z-index: 2; width: 100%; height: auto; display: block; }
    .art-card.main-card { animation: paperFloat 5.8s ease-in-out infinite; transform-origin: 50% 50%; }
    .art-card.back-card { animation: paperFloatBack 7.2s ease-in-out infinite; transform-origin: 50% 50%; }
    .outline-name { stroke-dasharray: 780; stroke-dashoffset: 780; animation: traceName 4.8s ease-in-out infinite; }
    .animated-underline { animation: drawUnderline 4.8s ease-in-out infinite; }
    .pencil-group { animation: pencilMove 4.8s ease-in-out infinite; transform-origin: 50% 50%; }
    .mini-card-one { animation: miniFloat 5.2s ease-in-out infinite; }
    .mini-card-two { animation: miniFloat 6.4s ease-in-out infinite reverse; }
    .small-dash { stroke-dasharray: 12 10; animation: dashWalk 2.4s linear infinite; }
    .floating-letter {
      position: absolute;
      z-index: 3;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.76);
      border: 1px solid rgba(255,255,255,.82);
      color: var(--glass-blue-dark);
      font-weight: 950;
      box-shadow: 0 18px 42px rgba(48,79,130,.12);
      animation: bubbleFloat 6s ease-in-out infinite;
    }
    .letter-a { left: 18px; top: 34px; }
    .letter-b { right: 28px; bottom: 86px; animation-delay: -1.8s; }
    .letter-heart { left: 42%; bottom: 20px; color: var(--glass-orange); animation-delay: -3s; }
    .hero-art-tabs {
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 18px;
      z-index: 4;
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .hero-art-tabs span {
      display: inline-flex;
      min-height: 32px;
      align-items: center;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(122,151,196,.16);
      color: var(--glass-ink);
      font-size: .82rem;
      font-weight: 850;
      box-shadow: 0 10px 22px rgba(40,58,94,.08);
    }

    body.name-tracing-page .layout { grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); gap: clamp(20px,2.4vw,34px); }
    body.name-tracing-page .panel,
    body.name-tracing-page .preview-panel,
    body.name-tracing-page .section-card,
    body.name-tracing-page .info-card,
    body.name-tracing-page .faq-card,
    body.name-tracing-page .guide-card,
    body.name-tracing-page .related-card {
      background: rgba(255,255,255,.68) !important;
      border: 1px solid rgba(255,255,255,.76) !important;
      box-shadow: 0 18px 46px rgba(40,58,94,.10) !important;
      backdrop-filter: blur(18px) saturate(1.1);
      position: relative;
      overflow: hidden;
    }
    body.name-tracing-page .panel,
    body.name-tracing-page .preview-panel,
    body.name-tracing-page .section-card { border-radius: 30px !important; }
    body.name-tracing-page .panel { top: 26px; }
    body.name-tracing-page .panel::before,
    body.name-tracing-page .preview-panel::before,
    body.name-tracing-page .section-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 92% 8%, rgba(36,107,255,.08), transparent 32%);
      pointer-events: none;
    }
    body.name-tracing-page .panel > *,
    body.name-tracing-page .preview-panel > *,
    body.name-tracing-page .section-card > * { position: relative; z-index: 1; }
    body.name-tracing-page textarea,
    body.name-tracing-page .switch-row,
    body.name-tracing-page .status-card {
      background: rgba(255,255,255,.72) !important;
      border-color: rgba(122,151,196,.18) !important;
      box-shadow: 0 10px 22px rgba(40,58,94,.05);
    }
    body.name-tracing-page textarea:focus {
      border-color: rgba(36,107,255,.28) !important;
      box-shadow: 0 0 0 5px rgba(36,107,255,.10) !important;
    }
    body.name-tracing-page input[type="range"] { background: rgba(36,107,255,.12); accent-color: var(--glass-blue); }
    body.name-tracing-page input[type="range"]::-webkit-slider-thumb { background: var(--glass-blue); box-shadow: 0 8px 20px rgba(36,107,255,.22); }
    body.name-tracing-page .switch input:checked + .slider { background: linear-gradient(135deg, #2f7cff, #1455dc); }
    body.name-tracing-page .preview-wrap {
      border: 1px solid rgba(122,151,196,.22) !important;
      background:
        radial-gradient(circle at 20% 10%, rgba(95,215,255,.12), transparent 36%),
        linear-gradient(135deg, rgba(235,243,255,.86), rgba(246,241,255,.82)) !important;
      border-radius: 24px !important;
      box-shadow: inset 0 10px 24px rgba(36,107,255,.05) !important;
    }
    body.name-tracing-page .page { border-radius: 16px; box-shadow: 0 28px 62px rgba(40,58,94,.18); }
    body.name-tracing-page .tracing-text { animation: previewGlow 3.8s ease-in-out infinite; }

    .preset-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .preset-chip {
      border: 1px solid rgba(122,151,196,.18);
      border-radius: 999px;
      min-height: 34px;
      padding: 0 12px;
      background: rgba(255,255,255,.72);
      color: var(--glass-ink);
      font-weight: 850;
      cursor: pointer;
      transition: transform .16s ease, background .16s ease, color .16s ease;
    }
    .preset-chip:hover { transform: translateY(-2px); background: rgba(36,107,255,.10); color: var(--glass-blue-dark); }

    body.name-tracing-page .info-card,
    body.name-tracing-page .related-card,
    body.name-tracing-page .guide-card,
    body.name-tracing-page .faq-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
    body.name-tracing-page .info-card:hover,
    body.name-tracing-page .related-card:hover,
    body.name-tracing-page .guide-card:hover,
    body.name-tracing-page .faq-card:hover {
      transform: translateY(-4px);
      border-color: rgba(36,107,255,.24) !important;
      box-shadow: 0 22px 54px rgba(40,58,94,.14) !important;
    }
    body.name-tracing-page .info-card::before,
    body.name-tracing-page .related-card::before {
      content: "Aa";
      position: absolute;
      right: 14px;
      top: 14px;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(36,107,255,.09);
      color: var(--glass-blue-dark);
      font-weight: 950;
      opacity: .92;
    }
    body.name-tracing-page .info-card:nth-child(2)::before { content: "✎"; background: rgba(255,140,90,.12); color: #c85f30; }
    body.name-tracing-page .info-card:nth-child(3)::before { content: "🔒"; background: rgba(79,179,169,.12); color: #267d6c; }
    body.name-tracing-page .related-card:nth-child(1)::before { content: "A·"; }
    body.name-tracing-page .related-card:nth-child(2)::before { content: "✂"; background: rgba(255,140,90,.12); color: #c85f30; }
    body.name-tracing-page .related-card:nth-child(3)::before { content: "▦"; background: rgba(79,179,169,.12); color: #267d6c; }
    body.name-tracing-page .card-kicker,
    body.name-tracing-page .related-card .cta { color: var(--glass-blue-dark) !important; }

    /* Content stays visible even when IntersectionObserver is unavailable or delayed. */
    .nt-reveal { opacity: 1; transform: none; }
    .nt-reveal.in-view { opacity: 1; transform: none; }
    .nt-reveal:nth-child(2) { transition-delay: .06s; }
    .nt-reveal:nth-child(3) { transition-delay: .12s; }

    .read-progress {
      position: fixed;
      left: 0;
      top: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, #2f7cff, #7b70ff, #ff8c5a);
      z-index: 9999;
      box-shadow: 0 6px 18px rgba(36,107,255,.25);
    }
    .back-top {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 90;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 999px;
      background: rgba(255,255,255,.78);
      color: var(--glass-blue-dark);
      font-weight: 950;
      box-shadow: 0 18px 40px rgba(40,58,94,.16);
      cursor: pointer;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }
    .back-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

    body.name-tracing-page footer {
      margin-top: 34px;
      border-top: 1px solid rgba(122,151,196,.16);
      background: rgba(255,255,255,.42);
    }
    body.name-tracing-page .footer-grid,
    body.name-tracing-page .footer-bottom { width: calc(100% - 44px); max-width: none; margin-inline: auto; }
    body.name-tracing-page .footer-title { color: var(--glass-ink); font-weight: 900; }
    body.name-tracing-page .footer-list a { color: var(--glass-ink-soft); font-weight: 650; }
    body.name-tracing-page .footer-list a:hover { color: var(--glass-blue-dark); }

    @keyframes slowSpin { to { transform: rotate(360deg); } }
    @keyframes paperFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
    @keyframes paperFloatBack { 0%,100% { transform: translate(0,0) rotate(3deg); } 50% { transform: translate(6px,-8px) rotate(1deg); } }
    @keyframes traceName { 0% { stroke-dashoffset: 780; opacity: .45; } 46%,70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 780; opacity: .45; } }
    @keyframes drawUnderline { 0%,18% { stroke-dashoffset: 520; } 58%,78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 520; } }
    @keyframes pencilMove { 0% { transform: translate(-74px, 32px) rotate(-1deg); } 50% { transform: translate(0,0) rotate(2deg); } 100% { transform: translate(-74px, 32px) rotate(-1deg); } }
    @keyframes miniFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes bubbleFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
    @keyframes dashWalk { to { stroke-dashoffset: -42; } }
    @keyframes previewGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(36,107,255,0)); } 50% { filter: drop-shadow(0 0 8px rgba(36,107,255,.12)); } }

    @media (max-width: 1120px) {
      body.name-tracing-page .topbar .nav { grid-template-columns: auto 1fr; }
      body.name-tracing-page .nav-links { grid-column: 1 / -1; justify-content: flex-start; order: 3; }
      body.name-tracing-page .nav-actions { justify-content: flex-end; }
      body.name-tracing-page .hero-grid { grid-template-columns: 1fr; }
      .name-hero-art { min-height: 360px; }
    }
    @media (max-width: 820px) {
      .page-wrap { width: calc(100% - 16px); margin-top: 8px; border-radius: 26px; }
      body.name-tracing-page .container,
      body.name-tracing-page .footer-grid,
      body.name-tracing-page .footer-bottom { width: calc(100% - 24px) !important; }
      body.name-tracing-page .topbar { padding-top: 12px; }
      body.name-tracing-page .topbar .nav { grid-template-columns: 1fr; justify-items: start; }
      body.name-tracing-page .nav-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
      body.name-tracing-page .layout { grid-template-columns: 1fr; }
      .name-hero-art { min-height: 320px; }
    }
    @media (max-width: 640px) {
      body.name-tracing-page .nav-links { gap: 2px; }
      body.name-tracing-page .nav-links a { font-size: .8rem; padding-inline: 8px; }
      .floating-letter, .hero-art-tabs { display: none; }
      .name-hero-art { min-height: 260px; }
      body.name-tracing-page .hero > .container { padding: 20px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .name-hero-art *, .nt-reveal, .back-top, .read-progress { animation: none !important; transition: none !important; }
    }

:root {
      --cream: #fff7e8;
      --cream-deep: #fff0d6;
      --orange: #ff8c5a;
      --orange-deep: #ef6f3b;
      --yellow: #ffd56a;
      --green: #8fc56b;
      --blue: #6eb6e8;
      --purple: #b696d8;
      --pink: #ffb6b6;
      --brown: #3f2d25;
      --text: #3b302a;
      --muted: #7c6b5f;
      --card: #ffffff;
      --border: #f0dfc8;
      --soft-shadow: 0 10px 30px rgba(96, 64, 32, 0.08);
      --soft-shadow-hover: 0 16px 36px rgba(96, 64, 32, 0.12);
      --max: 1180px;
      --paper-width: 800px;
      --paper-height: 1131px;
    }

    body.totink-nursery-ui {
      margin: 0;
      color: var(--text) !important;
      font-family: "Nunito", "Comic Neue", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      background:
        radial-gradient(circle at 8% 12%, rgba(255, 213, 106, .22) 0 5px, transparent 6px),
        radial-gradient(circle at 92% 14%, rgba(182, 150, 216, .18) 0 6px, transparent 7px),
        radial-gradient(circle at 16% 76%, rgba(110, 182, 232, .14) 0 6px, transparent 7px),
        radial-gradient(circle at 84% 86%, rgba(255, 140, 90, .12) 0 7px, transparent 8px),
        linear-gradient(180deg, #fff7e8 0%, #fff4e2 48%, #fff7e8 100%) !important;
      overflow-x: hidden;
    }

    body.totink-nursery-ui::before,
    body.totink-nursery-ui::after {
      display: none !important;
    }

    body.totink-nursery-ui .page-wrap {
      width: 100% !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      overflow: visible !important;
    }

    body.totink-nursery-ui .page-wrap::before,
    body.totink-nursery-ui .site-shell-inner::before {
      display: none !important;
    }

    body.totink-nursery-ui .container,
    body.totink-nursery-ui .footer-grid,
    body.totink-nursery-ui .footer-bottom {
      width: min(1180px, calc(100% - 48px)) !important;
      max-width: 1180px !important;
      margin-inline: auto !important;
    }

    body.totink-nursery-ui .topbar {
      position: sticky !important;
      top: 0 !important;
      z-index: 100 !important;
      padding: 0 !important;
      border-bottom: 1px solid rgba(240, 223, 200, .72) !important;
      background: rgba(255, 247, 232, .88) !important;
      backdrop-filter: blur(16px) !important;
    }

    body.totink-nursery-ui .topbar .nav {
      min-height: 72px !important;
      height: 72px !important;
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 24px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    body.totink-nursery-ui .brand {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      color: var(--brown) !important;
      font-size: 30px !important;
      font-weight: 950 !important;
      letter-spacing: -.04em !important;
      text-decoration: none !important;
      white-space: nowrap !important;
    }

    body.totink-nursery-ui .brand-mark {
      width: 42px;
      height: 42px;
      display: inline-grid;
      place-items: center;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(135deg, var(--orange), var(--yellow));
      box-shadow: 0 10px 24px rgba(255, 140, 90, .24);
      border: 2px solid rgba(255, 255, 255, .72);
      font-size: 20px;
    }

    body.totink-nursery-ui .brand-word { font-size: 30px !important; line-height: 1; }
    body.totink-nursery-ui .brand-tot { color: var(--orange-deep); }
    body.totink-nursery-ui .brand-ink { color: #348fd2; }

    body.totink-nursery-ui .nav-links {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 6px !important;
      min-width: 0 !important;
      overflow-x: auto !important;
      flex-wrap: nowrap !important;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    body.totink-nursery-ui .nav-links::-webkit-scrollbar { display: none; }

    body.totink-nursery-ui .nav-links a {
      height: 38px !important;
      min-height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      padding: 0 12px !important;
      border-radius: 999px !important;
      color: #6d5a4f !important;
      font-size: 14px !important;
      font-weight: 850 !important;
      text-decoration: none !important;
      white-space: nowrap !important;
      transition: .22s ease !important;
    }

    body.totink-nursery-ui .nav-links a:hover {
      color: var(--brown) !important;
      background: rgba(255, 255, 255, .72) !important;
      transform: translateY(-1px) !important;
    }

    body.totink-nursery-ui .nav-links a.active {
      color: var(--orange-deep) !important;
      background: rgba(255, 140, 90, .16) !important;
      box-shadow: inset 0 0 0 1px rgba(255, 140, 90, .18) !important;
    }

    body.totink-nursery-ui .nav-actions {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 8px !important;
      flex-wrap: nowrap !important;
      width: auto !important;
    }

    body.totink-nursery-ui .lang-switch {
      width: auto !important;
      min-width: 108px !important;
      max-width: 118px !important;
      height: 38px !important;
      padding: 0 12px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(240, 223, 200, .95) !important;
      background: rgba(255,255,255,.72) !important;
      color: var(--brown) !important;
      font-weight: 850 !important;
      box-shadow: none !important;
    }

    body.totink-nursery-ui .btn,
    body.totink-nursery-ui .card-link {
      min-height: 46px !important;
      border-radius: 14px !important;
      font-weight: 950 !important;
      letter-spacing: 0 !important;
      box-shadow: 0 10px 24px rgba(96, 64, 32, .10) !important;
      transition: transform .22s ease, filter .22s ease, box-shadow .22s ease !important;
    }

    body.totink-nursery-ui .btn:hover,
    body.totink-nursery-ui .card-link:hover {
      transform: translateY(-2px) !important;
      filter: brightness(1.02) !important;
    }

    body.totink-nursery-ui .btn-primary {
      color: #fff !important;
      background: linear-gradient(180deg, var(--orange), var(--orange-deep)) !important;
      box-shadow: 0 12px 26px rgba(255, 140, 90, .24) !important;
    }

    body.totink-nursery-ui .btn-secondary {
      color: var(--brown) !important;
      background: #fff !important;
      border: 1px solid rgba(240, 223, 200, .95) !important;
      box-shadow: 0 10px 24px rgba(96,64,32,.08) !important;
    }

    body.totink-nursery-ui .nav-cta {
      min-height: 38px !important;
      padding-inline: 14px !important;
      border-radius: 999px !important;
      font-size: 14px !important;
    }

    body.totink-nursery-ui .hero {
      position: relative !important;
      overflow: hidden !important;
      padding: 0 !important;
      border-bottom: 0 !important;
      border-radius: 0 0 36px 36px !important;
      background:
        radial-gradient(circle at 14% 18%, rgba(255, 213, 106, .38) 0 70px, transparent 72px),
        radial-gradient(circle at 83% 22%, rgba(255, 182, 182, .24) 0 84px, transparent 86px),
        linear-gradient(180deg, #fff3d8 0%, #fff8ec 100%) !important;
    }

    body.totink-nursery-ui .hero > .container {
      padding: 48px 0 62px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      overflow: visible !important;
    }

    body.totink-nursery-ui .hero-grid {
      display: grid !important;
      grid-template-columns: .96fr 1.04fr !important;
      align-items: center !important;
      gap: 44px !important;
    }

    body.totink-nursery-ui .breadcrumbs {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin: 0 0 16px !important;
      padding: 8px 13px !important;
      border-radius: 999px !important;
      color: #8b563d !important;
      background: rgba(255,255,255,.72) !important;
      border: 1px solid rgba(240,223,200,.9) !important;
      box-shadow: 0 8px 22px rgba(96,64,32,.05) !important;
      font-size: 13px !important;
      font-weight: 850 !important;
    }

    body.totink-nursery-ui .eyebrow,
    body.totink-nursery-ui .badge,
    body.totink-nursery-ui .chip,
    body.totink-nursery-ui .mode-chip {
      border: 1px solid rgba(240, 223, 200, .9) !important;
      background: rgba(255,255,255,.72) !important;
      color: #8b563d !important;
      box-shadow: 0 8px 22px rgba(96,64,32,.05) !important;
      font-weight: 900 !important;
    }

    body.totink-nursery-ui .eyebrow::before {
      content: "✦" !important;
      width: auto !important;
      height: auto !important;
      background: transparent !important;
      color: var(--orange) !important;
      box-shadow: none !important;
      font-size: 16px !important;
    }

    body.totink-nursery-ui h1 {
      max-width: 650px !important;
      margin: 18px 0 16px !important;
      color: var(--brown) !important;
      font-size: clamp(42px, 5vw, 62px) !important;
      line-height: 1.08 !important;
      letter-spacing: -.055em !important;
      font-weight: 950 !important;
    }

    body.totink-nursery-ui .hero p {
      max-width: 560px !important;
      margin: 0 !important;
      color: var(--muted) !important;
      font-size: 18px !important;
      line-height: 1.72 !important;
      font-weight: 650 !important;
    }

    body.totink-nursery-ui .hero-actions,
    body.totink-nursery-ui .hero-badges {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 12px !important;
    }

    body.totink-nursery-ui .hero-actions { margin-top: 28px !important; }
    body.totink-nursery-ui .hero-badges { margin-top: 22px !important; }

    body.totink-nursery-ui .badge {
      min-height: 38px !important;
      padding: 0 13px !important;
      border-radius: 999px !important;
      font-size: 13px !important;
      color: #79523f !important;
    }

    body.totink-nursery-ui .hero-visual {
      min-height: 440px !important;
      position: relative !important;
    }

    body.totink-nursery-ui .name-hero-art.nursery-name-preview {
      min-height: 440px !important;
      position: relative !important;
      padding: 0 !important;
      border-radius: 38px !important;
      border: 1px solid rgba(240, 223, 200, .86) !important;
      background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.88) 0 36px, transparent 37px),
        linear-gradient(180deg, #fffdf8, #fff5e6) !important;
      box-shadow: var(--soft-shadow) !important;
      overflow: hidden !important;
    }

    body.totink-nursery-ui .name-hero-art::before,
    body.totink-nursery-ui .name-hero-art::after {
      display: none !important;
    }

    .hero-star {
      position: absolute;
      z-index: 2;
      display: inline-grid;
      place-items: center;
      color: var(--orange);
      font-size: 28px;
      opacity: .75;
      animation: heroFloat 5.6s ease-in-out infinite;
    }
    .star-one { left: 42px; top: 38px; }
    .star-two { right: 42px; top: 72px; color: var(--pink); animation-delay: -1.6s; }
    .hero-cloud {
      position: absolute;
      z-index: 1;
      width: 148px;
      height: 54px;
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      filter: blur(.1px);
      opacity: .78;
    }
    .hero-cloud::before,
    .hero-cloud::after {
      content: "";
      position: absolute;
      bottom: 12px;
      border-radius: 50%;
      background: inherit;
    }
    .hero-cloud::before { left: 24px; width: 52px; height: 52px; }
    .hero-cloud::after { right: 28px; width: 42px; height: 42px; }
    .cloud-one { left: -36px; bottom: 68px; }
    .cloud-two { right: -34px; bottom: 28px; transform: scale(.8); opacity: .62; }

    .worksheet-card {
      position: absolute;
      z-index: 3;
      border-radius: 26px;
      background: #fff;
      border: 1px solid rgba(240,223,200,.94);
      box-shadow: 0 20px 46px rgba(96,64,32,.14);
    }

    .worksheet-card-main {
      left: 36px;
      top: 58px;
      width: min(64%, 360px);
      min-height: 318px;
      padding: 22px;
      transform: rotate(-4deg);
      animation: paperFloatWarm 6s ease-in-out infinite;
    }

    .worksheet-card-side {
      right: 36px;
      bottom: 56px;
      width: 226px;
      min-height: 210px;
      padding: 18px;
      transform: rotate(7deg);
      animation: paperFloatWarm 7.2s ease-in-out infinite reverse;
    }

    .teacher-note-card {
      position: absolute;
      z-index: 4;
      right: 72px;
      top: 62px;
      width: 188px;
      padding: 15px 16px;
      border-radius: 22px;
      background: #fff;
      border: 1px solid rgba(240,223,200,.9);
      box-shadow: 0 15px 34px rgba(96,64,32,.12);
      transform: rotate(3deg);
    }
    .teacher-note-card span { display:block; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
    .teacher-note-card b { display:block; margin-top: 4px; color: var(--brown); font-size: 17px; line-height: 1.18; }

    .worksheet-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .worksheet-pill { display:inline-flex; align-items:center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: #fff0e7; color: #bd5d36; font-size: 12px; font-weight: 950; }
    .worksheet-hole-group { display:grid; gap:5px; }
    .worksheet-hole-group i { width:7px; height:7px; border-radius:50%; background:#f1e1cb; display:block; }
    .worksheet-card h3 { margin:0 0 12px; color: var(--brown); font-size: 25px; font-weight: 950; letter-spacing:-.035em; }
    .hero-tracing-name {
      height: 82px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 8px 0 16px;
      border-radius: 18px;
      border: 2px dashed #ffc3a8;
      background: linear-gradient(180deg, #fff, #fffaf3);
      color: rgba(63,45,37,.42);
      font-family: "Patrick Hand", "Comic Sans MS", cursive;
      font-size: 56px;
      font-weight: 950;
      letter-spacing:.06em;
      -webkit-text-stroke: 1px rgba(63,45,37,.35);
    }
    .worksheet-lines { display:grid; gap: 12px; }
    .worksheet-lines span { height:1px; border-bottom:2px dashed #ddbfa3; }
    .worksheet-doodles { display:flex; align-items:center; justify-content:space-between; margin-top:16px; color: var(--orange); font-size: 25px; }
    .mini-page-title { color: var(--muted); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .07em; }
    .letter-row { display:flex; align-items:center; justify-content:space-between; margin: 10px 0 12px; }
    .letter-row strong { color: var(--orange-deep); font-size: 62px; line-height: 1; letter-spacing: -.08em; }
    .apple-dot { width: 54px; height: 54px; border-radius: 48% 52% 56% 44%; background: var(--orange); position: relative; box-shadow: inset 10px -10px 0 rgba(255,255,255,.14); }
    .apple-dot::before { content:""; position:absolute; top:-10px; left:25px; width:8px; height:17px; border-radius:8px; background:#8d6a41; transform:rotate(18deg); }
    .apple-dot::after { content:""; position:absolute; top:-11px; left:32px; width:22px; height:13px; border-radius:100% 0 100% 0; background:var(--green); transform:rotate(-15deg); }
    .mini-guide-lines { display:grid; gap:10px; }
    .mini-guide-lines span { height:11px; border-top:1px dashed #dfc0a7; border-bottom:1px dashed #dfc0a7; }

    body.totink-nursery-ui #generator {
      margin-top: 54px !important;
    }

    body.totink-nursery-ui .layout {
      display: grid !important;
      grid-template-columns: minmax(340px, 390px) minmax(0, 1fr) !important;
      gap: 28px !important;
      align-items: start !important;
      margin: 0 0 28px !important;
    }

    body.totink-nursery-ui .panel,
    body.totink-nursery-ui .preview-panel,
    body.totink-nursery-ui .section-card,
    body.totink-nursery-ui .info-card,
    body.totink-nursery-ui .faq-card,
    body.totink-nursery-ui .guide-card,
    body.totink-nursery-ui .related-card {
      background: #fff !important;
      border: 1px solid rgba(240,220,190,.82) !important;
      border-radius: 24px !important;
      box-shadow: var(--soft-shadow) !important;
      backdrop-filter: none !important;
      overflow: hidden !important;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    }

    body.totink-nursery-ui .panel:hover,
    body.totink-nursery-ui .preview-panel:hover,
    body.totink-nursery-ui .section-card:hover,
    body.totink-nursery-ui .info-card:hover,
    body.totink-nursery-ui .faq-card:hover,
    body.totink-nursery-ui .guide-card:hover,
    body.totink-nursery-ui .related-card:hover {
      transform: translateY(-3px) !important;
      box-shadow: var(--soft-shadow-hover) !important;
      border-color: rgba(255, 140, 90, .24) !important;
    }

    body.totink-nursery-ui .panel {
      position: sticky !important;
      top: 96px !important;
      padding: 24px !important;
      border-radius: 28px !important;
      background:
        radial-gradient(circle at 92% 8%, rgba(255, 213, 106, .18), transparent 76px),
        #fff !important;
    }

    body.totink-nursery-ui .panel::before,
    body.totink-nursery-ui .preview-panel::before,
    body.totink-nursery-ui .section-card::before {
      display: none !important;
    }

    body.totink-nursery-ui .panel-head h2,
    body.totink-nursery-ui .section-title,
    body.totink-nursery-ui .card-title {
      color: var(--brown) !important;
      font-weight: 950 !important;
      letter-spacing: -.03em !important;
    }

    body.totink-nursery-ui .panel-head h2 { font-size: 22px !important; }
    body.totink-nursery-ui .section-title { font-size: clamp(26px, 2.2vw, 34px) !important; line-height: 1.12 !important; }
    body.totink-nursery-ui .section-desc,
    body.totink-nursery-ui .card-text,
    body.totink-nursery-ui .field-help,
    body.totink-nursery-ui .panel-note,
    body.totink-nursery-ui .footer-copy p {
      color: var(--muted) !important;
      font-weight: 700 !important;
    }

    body.totink-nursery-ui .field label {
      color: var(--brown) !important;
      font-weight: 950 !important;
    }

    body.totink-nursery-ui textarea,
    body.totink-nursery-ui .switch-row,
    body.totink-nursery-ui .status-card {
      border: 1px solid rgba(240,223,200,.95) !important;
      border-radius: 18px !important;
      background: #fffaf3 !important;
      box-shadow: none !important;
    }

    body.totink-nursery-ui textarea {
      min-height: 150px !important;
      color: var(--brown) !important;
      font-size: 16px !important;
      font-weight: 800 !important;
    }

    body.totink-nursery-ui textarea:focus {
      border-color: rgba(255,140,90,.48) !important;
      box-shadow: 0 0 0 5px rgba(255,140,90,.10) !important;
    }

    body.totink-nursery-ui input[type="range"] {
      height: 9px !important;
      background: #f3dfca !important;
      accent-color: var(--orange) !important;
    }

    body.totink-nursery-ui input[type="range"]::-webkit-slider-thumb {
      width: 24px !important;
      height: 24px !important;
      background: var(--orange) !important;
      border: 4px solid #fff !important;
      box-shadow: 0 6px 14px rgba(255,140,90,.28) !important;
    }

    body.totink-nursery-ui .switch input:checked + .slider {
      background: linear-gradient(180deg, var(--orange), var(--orange-deep)) !important;
    }

    body.totink-nursery-ui .slider {
      background: #e6d6c4 !important;
    }

    body.totink-nursery-ui .preset-strip { gap: 8px !important; }
    body.totink-nursery-ui .preset-chip {
      min-height: 34px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(240,223,200,.95) !important;
      background: #fff !important;
      color: #79523f !important;
      font-weight: 950 !important;
      cursor: pointer !important;
    }
    body.totink-nursery-ui .preset-chip:hover {
      color: var(--orange-deep) !important;
      background: #fff0e7 !important;
      transform: translateY(-2px) !important;
    }

    body.totink-nursery-ui .status-card {
      padding: 14px !important;
      background: #fff7e8 !important;
    }

    body.totink-nursery-ui .status-card .label {
      color: #9a7a64 !important;
      font-weight: 950 !important;
    }

    body.totink-nursery-ui .status-card .value {
      color: var(--brown) !important;
      font-weight: 950 !important;
    }

    body.totink-nursery-ui .preview-panel {
      padding: 24px !important;
      border-radius: 30px !important;
    }

    body.totink-nursery-ui .preview-wrap {
      min-height: 500px !important;
      border: 1px solid rgba(224, 201, 170, .9) !important;
      border-radius: 24px !important;
      background:
        radial-gradient(circle at 18% 12%, rgba(255, 213, 106, .14), transparent 78px),
        linear-gradient(180deg, #fff3de, #f5e8d4) !important;
      box-shadow: inset 0 8px 18px rgba(96,64,32,.06) !important;
    }

    body.totink-nursery-ui .page {
      border-radius: 14px !important;
      box-shadow: 0 20px 46px rgba(96,64,32,.18) !important;
    }

    body.totink-nursery-ui .page-title,
    body.totink-nursery-ui .name-line,
    body.totink-nursery-ui .page-footer {
      color: var(--brown) !important;
    }

    body.totink-nursery-ui .page-badge {
      color: #bd5d36 !important;
      background: #fff0e7 !important;
      border-color: #ffd8c6 !important;
    }

    body.totink-nursery-ui .writing-row {
      border-color: rgba(240,223,200,.9) !important;
      background: #fffdf8 !important;
    }

    body.totink-nursery-ui .guide-line.top,
    body.totink-nursery-ui .guide-line.bottom { background: #ead7bd !important; }
    body.totink-nursery-ui .guide-line.mid { background: #f0bfa7 !important; }
    body.totink-nursery-ui .guide-line.base { background: #cbdcb8 !important; }

    body.totink-nursery-ui .trace-text,
    body.totink-nursery-ui .tracing-text {
      -webkit-text-stroke: 1.6px #8b7b70 !important;
      text-stroke: 1.6px #8b7b70 !important;
      filter: none !important;
    }

    body.totink-nursery-ui .info-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 16px !important;
      margin-top: 18px !important;
    }

    body.totink-nursery-ui .info-card,
    body.totink-nursery-ui .guide-card,
    body.totink-nursery-ui .faq-card,
    body.totink-nursery-ui .related-card {
      padding: 18px !important;
      border-radius: 22px !important;
    }

    body.totink-nursery-ui .card-kicker,
    body.totink-nursery-ui .related-card .cta {
      color: var(--orange-deep) !important;
      font-weight: 950 !important;
    }

    body.totink-nursery-ui .info-card::before,
    body.totink-nursery-ui .related-card::before {
      background: #fff0e7 !important;
      color: var(--orange-deep) !important;
    }

    body.totink-nursery-ui .section-card {
      margin-top: 22px !important;
      padding: 24px !important;
      border-radius: 30px !important;
      background:
        radial-gradient(circle at 92% 12%, rgba(110,182,232,.12), transparent 86px),
        #fff !important;
    }

    body.totink-nursery-ui .split-grid {
      display: grid !important;
      grid-template-columns: .86fr 1.14fr !important;
      gap: 22px !important;
      margin-top: 0 !important;
    }

    body.totink-nursery-ui .faq-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 14px !important;
      margin-top: 0 !important;
    }

    body.totink-nursery-ui .related-grid.three {
      grid-template-columns: repeat(3, minmax(0,1fr)) !important;
      gap: 16px !important;
    }

    body.totink-nursery-ui footer {
      margin-top: 54px !important;
      border-top: 1px solid rgba(240,223,200,.88) !important;
      background: rgba(255,255,255,.52) !important;
    }

    body.totink-nursery-ui footer .brand {
      font-size: 22px !important;
      color: var(--brown) !important;
    }

    body.totink-nursery-ui footer .brand-logo {
      width: 42px !important;
      height: 42px !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 20px rgba(255,140,90,.16) !important;
    }

    body.totink-nursery-ui .footer-title {
      color: var(--brown) !important;
      font-weight: 950 !important;
    }

    body.totink-nursery-ui .footer-list a {
      color: var(--muted) !important;
      font-weight: 800 !important;
    }

    body.totink-nursery-ui .footer-list a:hover {
      color: var(--orange-deep) !important;
    }

    body.totink-nursery-ui .modal {
      border-radius: 28px !important;
      border: 1px solid rgba(240,223,200,.95) !important;
      box-shadow: 0 24px 60px rgba(96,64,32,.20) !important;
    }

    body.totink-nursery-ui .read-progress {
      background: linear-gradient(90deg, var(--orange), var(--yellow), var(--blue)) !important;
      box-shadow: 0 6px 18px rgba(255,140,90,.22) !important;
    }

    body.totink-nursery-ui .back-top {
      color: var(--orange-deep) !important;
      background: rgba(255,255,255,.84) !important;
      border: 1px solid rgba(240,223,200,.95) !important;
      box-shadow: 0 14px 32px rgba(96,64,32,.15) !important;
    }

    @keyframes heroFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
    @keyframes paperFloatWarm { 0%,100% { transform: translateY(0) rotate(var(--r, -4deg)); } 50% { transform: translateY(-8px) rotate(1deg); } }

    @media (max-width: 1120px) {
      body.totink-nursery-ui .topbar .nav {
        height: auto !important;
        min-height: 72px !important;
        grid-template-columns: 1fr auto !important;
        padding: 14px 0 !important;
      }
      body.totink-nursery-ui .nav-links {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
        order: 3 !important;
        width: 100% !important;
      }
      body.totink-nursery-ui .hero-grid,
      body.totink-nursery-ui .layout,
      body.totink-nursery-ui .split-grid,
      body.totink-nursery-ui .related-grid.three,
      body.totink-nursery-ui .info-grid {
        grid-template-columns: 1fr !important;
      }
      body.totink-nursery-ui .panel { position: static !important; }
      body.totink-nursery-ui .name-hero-art.nursery-name-preview { min-height: 430px !important; }
    }

    @media (max-width: 760px) {
      body.totink-nursery-ui .container,
      body.totink-nursery-ui .footer-grid,
      body.totink-nursery-ui .footer-bottom {
        width: min(100% - 24px, 540px) !important;
      }
      body.totink-nursery-ui .topbar .nav {
        grid-template-columns: 1fr !important;
        align-items: flex-start !important;
      }
      body.totink-nursery-ui .nav-actions { width: 100% !important; justify-content: flex-start !important; }
      body.totink-nursery-ui h1 { font-size: clamp(36px, 9vw, 46px) !important; }
      body.totink-nursery-ui .hero p { font-size: 16px !important; }
      body.totink-nursery-ui .hero-actions { flex-direction: column !important; align-items: stretch !important; }
      body.totink-nursery-ui .hero-actions .btn { width: 100% !important; }
      body.totink-nursery-ui .name-hero-art.nursery-name-preview { min-height: 560px !important; }
      .worksheet-card-main { left: 50% !important; top: 34px !important; width: min(92%, 330px) !important; transform: translateX(-50%) rotate(-3deg) !important; }
      .worksheet-card-side { left: 50% !important; right: auto !important; bottom: 42px !important; width: min(82%, 250px) !important; transform: translateX(-50%) rotate(4deg) !important; }
      .teacher-note-card { display:none !important; }
      body.totink-nursery-ui .faq-grid { grid-template-columns: 1fr !important; }
      body.totink-nursery-ui .section-head { flex-direction: column !important; align-items: flex-start !important; }
    }

    @media (max-width: 520px) {
      body.totink-nursery-ui .nav-links a { font-size: 13px !important; padding-inline: 10px !important; }
      body.totink-nursery-ui .brand-word { font-size: 26px !important; }
      body.totink-nursery-ui .brand-mark { width: 38px; height: 38px; }
      body.totink-nursery-ui .preview-panel,
      body.totink-nursery-ui .panel,
      body.totink-nursery-ui .section-card { padding: 18px !important; }
      body.totink-nursery-ui .preview-wrap { padding: 10px !important; min-height: 420px !important; }
      .hero-star, .hero-cloud { display: none !important; }
    }

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

/*
      Correct live preview containment:
      papersScaleWrap = the visible scaled viewport size.
      papersContainer = the real unscaled worksheet size, then transformed.
      This prevents the paper content from being clipped when the browser is full width.
    */

    body.totink-nursery-ui .panel,
    body.name-tracing-page .panel {
      position: static !important;
      top: auto !important;
      align-self: start !important;
    }

    body.totink-nursery-ui .layout,
    body.name-tracing-page .layout {
      align-items: start !important;
    }

    body.totink-nursery-ui .preview-panel,
    body.name-tracing-page .preview-panel {
      overflow: hidden !important;
    }

    body.totink-nursery-ui .preview-wrap,
    body.name-tracing-page .preview-wrap {
      max-height: none !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
      padding: 5px !important;
      border-radius: 28px !important;
      background:
        radial-gradient(circle at 18% 12%, rgba(255, 213, 106, .16), transparent 34%),
        linear-gradient(135deg, rgba(255, 247, 232, .82), rgba(255, 250, 246, .96)) !important;
    }

    body.totink-nursery-ui .preview-fit-area,
    body.name-tracing-page .preview-fit-area {
      width: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      justify-content: center !important;
      align-items: flex-start !important;
      padding: 0 !important;
    }

    body.totink-nursery-ui .papers-scale-wrap,
    body.name-tracing-page .papers-scale-wrap {
      position: relative !important;
      display: block !important;
      flex: 0 0 auto !important;
      margin: 0 auto !important;
      overflow: hidden !important;
      transform: none !important;
    }

    body.totink-nursery-ui .papers-container,
    body.name-tracing-page .papers-container {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      display: grid !important;
      justify-content: start !important;
      align-content: start !important;
      overflow: visible !important;
      transform-origin: top left !important;
      will-change: transform;
    }

    body.totink-nursery-ui .page,
    body.name-tracing-page .page {
      margin: 0 !important;
      flex-shrink: 0 !important;
    }

    @media (max-width: 640px) {
      body.totink-nursery-ui .preview-wrap,
      body.name-tracing-page .preview-wrap {
        padding: 5px !important;
      }

      body.totink-nursery-ui .preview-fit-area,
      body.name-tracing-page .preview-fit-area {
        padding: 6px 0 12px !important;
      }
    }