:root {
        --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
        --font-serif: "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;
        --artisan-red: #c8102e;
        --artisan-dark: #171a20;
        --ink: #171a20;
        --muted: #61646b;
        --line: #e5e5e5;
        --soft: #f7f7f6;
        --paper: #fafafa;
        --radius: 6px;
        --shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
      }

      * { box-sizing: border-box; }

      html {
        background: var(--paper);
        color: var(--ink);
        font-family: var(--font-sans);
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
      }

      body {
        margin: 0;
        background: var(--paper);
      }

      body.mobile-open {
        overflow: hidden;
      }

      a { color: inherit; text-decoration: none; }
      button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
      img { display: block; max-width: 100%; }

      .artisan-breadcrumb {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
        padding-top: 88px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
      }

      .artisan-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .artisan-breadcrumb li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .artisan-breadcrumb li + li::before {
        content: "/";
        color: #a7a9ad;
        font-weight: 500;
      }

      .artisan-breadcrumb a {
        color: inherit;
        transition: color 160ms ease;
      }

      .artisan-breadcrumb a:hover {
        color: var(--artisan-red);
      }

      .artisan-breadcrumb span[aria-current="page"] {
        color: var(--ink);
      }

      .artisan-breadcrumb + .product-main,
      .artisan-breadcrumb + .cart-page,
      .artisan-breadcrumb + .checkout-page,
      .artisan-breadcrumb + .checkout-intl-page {
        padding-top: 24px;
      }

      .site-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 80;
        color: #fff;
        transition: background 240ms ease, color 240ms ease, box-shadow 240ms ease;
      }

      .site-header.is-scrolled,
      .site-header.is-menu-open {
        background: rgba(255, 255, 255, 0.95);
        color: var(--artisan-dark);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(16px);
      }

      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 68px;
        padding: 0 24px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        min-width: 140px;
      }

      .brand img {
        width: 126px;
        height: auto;
      }

      .site-header.is-scrolled .brand img,
      .site-header.is-menu-open .brand img {
        filter: invert(1);
      }

      .nav-center,
      .nav-right {
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .nav-button,
      .nav-link,
      .icon-nav {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        transition: background 160ms ease;
      }

      .nav-button:hover,
      .nav-link:hover,
      .icon-nav:hover {
        background: rgba(255, 255, 255, 0.12);
      }

      .site-header.is-scrolled .nav-button:hover,
      .site-header.is-scrolled .nav-link:hover,
      .site-header.is-scrolled .icon-nav:hover,
      .site-header.is-menu-open .nav-button:hover,
      .site-header.is-menu-open .nav-link:hover,
      .site-header.is-menu-open .icon-nav:hover {
        background: rgba(0, 0, 0, 0.06);
      }

      .mega-wrap {
        position: relative;
      }

      .mega-menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        width: 560px;
        padding: 24px;
        border-radius: 12px;
        background: #1a1a1a;
        color: #fff;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
        transform: translateX(-50%) translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease, transform 160ms ease;
      }

      .mega-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }

      .mega-menu::before {
        position: absolute;
        top: -7px;
        left: 50%;
        width: 14px;
        height: 14px;
        background: #1a1a1a;
        content: "";
        transform: translateX(-50%) rotate(45deg);
      }

      .mega-label {
        margin: 0 0 14px;
        color: #9ca3af;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .mega-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
      }

      .mega-item {
        padding: 12px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        text-align: left;
      }

      .mega-item:hover {
        background: rgba(255, 255, 255, 0.11);
      }

      .mega-item strong {
        display: block;
        color: #fff;
        font-size: 13px;
        white-space: nowrap;
      }

      .mega-item span {
        display: block;
        margin-top: 3px;
        color: #8d929d;
        font-size: 12px;
      }

      .mega-foot {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
      }

      .mega-foot button,
      .mega-foot a {
        color: #a8adb7;
        font-size: 13px;
        font-weight: 600;
      }

      .mega-foot button:last-child,
      .mega-foot a:last-child {
        color: var(--artisan-red);
      }

      .cart-count {
        min-width: 18px;
        opacity: 0.75;
      }

      .mobile-actions {
        display: none;
        align-items: center;
        gap: 4px;
      }

      .desktop-language-menu,
      .mobile-product-toggle,
      .mobile-language-toggle,
      .mobile-product-menu,
      .mobile-language-menu {
        display: none;
      }

      .mobile-menu {
        display: none;
        border-top: 1px solid var(--line);
        background: #fff;
        color: var(--artisan-dark);
      }

      .mobile-menu.is-open {
        display: block;
      }

      .mobile-menu button,
      .mobile-menu a {
        display: block;
        width: 100%;
        padding: 14px 24px;
        font-weight: 600;
        text-align: left;
      }

      .hero {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        background: #050505;
        color: #fff;
      }

      .hero picture,
      .hero picture img,
      .hero-overlay {
        position: absolute;
        inset: 0;
      }

      .hero picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
      }

      .hero-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.68));
      }

      .hero::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        height: 34vh;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
        content: "";
        pointer-events: none;
      }

      .charter-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: min(90vw, 520px);
        height: 70vh;
        overflow: hidden;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

      .charter-scroll {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        animation: charterScroll 60s linear infinite;
      }

      .charter-head {
        margin-bottom: 48px;
        padding: 0 24px 32px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        text-align: center;
      }

      .charter-head h1 {
        margin: 0 0 12px;
        color: #fff;
        font-size: clamp(24px, 5vw, 32px);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
      }

      .charter-head p {
        margin: 0;
        color: rgba(255, 255, 255, 0.85);
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
      }

      .charter-content {
        padding: 0 24px;
        color: #fff;
        font-family: var(--font-serif);
        font-size: 15px;
        line-height: 1.9;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.62);
        overflow-wrap: anywhere;
      }

      .charter-article {
        margin-bottom: 40px;
      }

      .charter-article p {
        margin: 0;
      }

      .charter-article p + p {
        margin-top: 16px;
      }

      .article-num {
        margin-right: 8px;
        font-weight: 800;
      }

      .hero-center-copy {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: min(920px, 88vw);
        margin: 0;
        color: #fff;
        font-family: var(--font-sans);
        font-size: clamp(10px, 1.67vw, 23px);
        font-weight: 900;
        letter-spacing: 0;
        line-height: 1.14;
        text-align: center;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.72), 0 0 42px rgba(0, 0, 0, 0.72);
        transform: translate(-50%, -50%);
      }

      .below-charter {
        position: absolute;
        top: var(--catch-block-top, 22%);
        left: 50%;
        z-index: 3;
        width: min(1100px, 92vw);
        color: #fff;
        font-family: var(--font-serif);
        font-size: 13px;
        letter-spacing: 0.08em;
        line-height: 1.38;
        text-align: center;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9);
        transform: translateX(-50%);
        opacity: 1;
      }

      .below-charter-main {
        display: block;
        margin: 0;
        color: #111;
        font-family: var(--font-sans);
        font-size: clamp(13px, 1.45vw, 18px);
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.25;
        text-shadow: none;
        white-space: normal;
      }

      .mobile-catch {
        display: none;
      }

      .catch-comic {
        position: relative;
        /* Catch collage controls: adjust these values to move the main bubble, copy, and surrounding bubbles. */
        --main-bubble-top: -22%;
        --main-bubble-left: 50%;
        --main-bubble-width: min(680px, 58vw);
        --main-bubble-rotate: 1deg;
        --copy-top: calc(30% - 25px);
        --copy-left: calc(50% + 20px);
        --copy-width: min(250px, 24vw);
        --copy-rotate: 0deg;
        --bubble-01-top: 58%;
        --bubble-01-left: calc(22% + 200px);
        --bubble-01-width: 21.6%;
        --bubble-01-rotate: -8deg;
        --bubble-01-copy-top: calc(58% + 94px);
        --bubble-01-copy-left: calc(22% + 320px);
        --bubble-01-copy-width: 130px;
        --bubble-01-copy-rotate: -8deg;
        --bubble-02-top: calc(66% + 100px);
        --bubble-02-left: calc(42% + 50px);
        --bubble-02-width: 19.2%;
        --bubble-02-rotate: 5deg;
        --bubble-02-copy-top: calc(66% + 6px);
        --bubble-02-copy-left: calc(42% + 100px + 12%);
        --bubble-02-copy-width: 122px;
        --bubble-02-copy-rotate: 5deg;
        --bubble-03-top: 0;
        --bubble-03-right: calc(18% + 70px);
        --bubble-03-width: 17.6%;
        --bubble-03-rotate: -5deg;
        --bubble-03-copy-top: calc(0% + 68px);
        --bubble-03-copy-right: calc(18% + 8.8% + 75px);
        --bubble-03-copy-width: 106px;
        --bubble-03-copy-rotate: -5deg;
        --bubble-04-top: calc(2% + 30px);
        --bubble-04-right: -2%;
        --bubble-04-width: 17.5%;
        --bubble-04-rotate: 8deg;
        --bubble-04-copy-top: calc(2% + 116px);
        --bubble-04-copy-right: calc(-2% + 8.75%);
        --bubble-04-copy-width: 99px;
        --bubble-04-copy-rotate: 8deg;
        --bubble-05-left: calc(58% - 75px);
        --bubble-05-bottom: calc(-14% - 8px);
        --bubble-05-width: 22.8%;
        --bubble-05-rotate: 7deg;
        --bubble-05-copy-left: calc(58% - 140px + 11.4%);
        --bubble-05-copy-bottom: calc(-14% - 73px + 10%);
        --bubble-05-copy-width: 132px;
        --bubble-05-copy-rotate: 7deg;
        --bubble-06-right: 8%;
        --bubble-06-bottom: calc(-8% - 100px);
        --bubble-06-width: 24%;
        --bubble-06-rotate: -5deg;
        --bubble-06-copy-right: calc(8% + 12%);
        --bubble-06-copy-bottom: calc(-8% + 54px);
        --bubble-06-copy-width: 132px;
        --bubble-06-copy-rotate: 5deg;
        --bubble-07-right: 10%;
        --bubble-07-bottom: calc(-8% - 220px);
        --bubble-07-width: 17.28%;
        --bubble-07-rotate: 7deg;
        --bubble-07-copy-right: calc(10% + 8.64%);
        --bubble-07-copy-bottom: calc(-8% - 130px + 10%);
        --bubble-07-copy-width: 99px;
        --bubble-07-copy-rotate: 7deg;
        --bubble-08-top: calc(66% + 30px);
        --bubble-08-left: calc(42% + 130px);
        --bubble-08-width: 21.6%;
        --bubble-08-rotate: -6deg;
        --bubble-08-copy-top: calc(66% + 110px + 10%);
        --bubble-08-copy-left: calc(42% + 130px + 10.8%);
        --bubble-08-copy-width: 118px;
        --bubble-08-copy-rotate: -6deg;
        --bubble-09-right: calc(22% - 130px);
        --bubble-09-bottom: calc(-8% + 58px);
        --bubble-09-width: 23.04%;
        --bubble-09-rotate: -8deg;
        --bubble-09-copy-right: calc(22% + 11.52% - 130px);
        --bubble-09-copy-bottom: calc(-8% + 133px + 24%);
        --bubble-09-copy-width: 117px;
        --bubble-09-copy-rotate: -8deg;
        --bubble-10-top: calc(58% + 120px);
        --bubble-10-left: calc(22% + 140px);
        --bubble-10-width: 21.12%;
        --bubble-10-rotate: -5deg;
        --bubble-10-copy-top: calc(58% + 170px + 9%);
        --bubble-10-copy-left: calc(22% + 126px + 10.56%);
        --bubble-10-copy-width: 148px;
        --bubble-10-copy-rotate: -5deg;
        width: min(1120px, 92vw);
        height: clamp(220px, 27vw, 300px);
        margin: 0 auto;
        pointer-events: none;
      }

      .comic-bubble {
        position: absolute;
        display: block;
        --edit-x: 0px;
        --edit-y: 0px;
        height: auto;
        object-fit: contain;
        opacity: 1;
        user-select: none;
        filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28));
      }

      .comic-panel {
        top: var(--main-bubble-top);
        left: var(--main-bubble-left);
        z-index: 4;
        width: var(--main-bubble-width);
        max-height: 100%;
        transform: translate(var(--edit-x), var(--edit-y)) translateX(-50%) rotate(var(--main-bubble-rotate));
      }

      .bubble-01 { top: var(--bubble-01-top); left: var(--bubble-01-left); z-index: 1; width: var(--bubble-01-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-01-rotate)); }
      .bubble-02 { top: var(--bubble-02-top); left: var(--bubble-02-left); z-index: 2; width: var(--bubble-02-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-02-rotate)); }
      .bubble-03 { top: var(--bubble-03-top); right: var(--bubble-03-right); z-index: 2; width: var(--bubble-03-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-03-rotate)); }
      .bubble-04 { top: var(--bubble-04-top); right: var(--bubble-04-right); z-index: 1; width: var(--bubble-04-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-04-rotate)); }
      .bubble-05 { left: var(--bubble-05-left); bottom: var(--bubble-05-bottom); z-index: 3; width: var(--bubble-05-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-05-rotate)); }
      .bubble-06 { right: var(--bubble-06-right); bottom: var(--bubble-06-bottom); z-index: 3; width: var(--bubble-06-width); transform: translate(var(--edit-x), var(--edit-y)) scaleX(-1) rotate(var(--bubble-06-rotate)); }
      .bubble-07 { right: var(--bubble-07-right); bottom: var(--bubble-07-bottom); z-index: 4; width: var(--bubble-07-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-07-rotate)); }
      .bubble-08 { top: var(--bubble-08-top); left: var(--bubble-08-left); z-index: 4; width: var(--bubble-08-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-08-rotate)); }
      .bubble-09 { right: var(--bubble-09-right); bottom: var(--bubble-09-bottom); z-index: 4; width: var(--bubble-09-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-09-rotate)); }
      .bubble-10 { top: var(--bubble-10-top); left: var(--bubble-10-left); z-index: 3; width: var(--bubble-10-width); transform: translate(var(--edit-x), var(--edit-y)) rotate(var(--bubble-10-rotate)); }

      .bubble-label {
        position: absolute;
        z-index: 8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 8px;
        border: 1px solid rgba(255, 255, 255, 0.82);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.72);
        color: #fff;
        font-family: var(--font-sans);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1;
        text-shadow: none;
        transform: translate(-50%, -50%);
        white-space: nowrap;
      }

      .label-main { top: calc(var(--main-bubble-top) + 18%); left: var(--main-bubble-left); }
      .label-01 { top: calc(var(--bubble-01-top) + 9%); left: calc(var(--bubble-01-left) + var(--bubble-01-width) / 2); }
      .label-02 { top: calc(var(--bubble-02-top) + 9%); left: calc(var(--bubble-02-left) + var(--bubble-02-width) / 2); }
      .label-03 { top: calc(var(--bubble-03-top) + 9%); right: calc(var(--bubble-03-right) + var(--bubble-03-width) / 2); transform: translate(50%, -50%); }
      .label-04 { top: calc(var(--bubble-04-top) + 9%); right: calc(var(--bubble-04-right) + var(--bubble-04-width) / 2); transform: translate(50%, -50%); }
      .label-05 { left: calc(var(--bubble-05-left) + var(--bubble-05-width) / 2); bottom: calc(var(--bubble-05-bottom) + 9%); transform: translate(-50%, 50%); }
      .label-06 { right: calc(var(--bubble-06-right) + var(--bubble-06-width) / 2); bottom: calc(var(--bubble-06-bottom) + 9%); transform: translate(50%, 50%); }
      .label-07 { right: calc(var(--bubble-07-right) + var(--bubble-07-width) / 2); bottom: calc(var(--bubble-07-bottom) + 9%); transform: translate(50%, 50%); }
      .label-08 { top: calc(var(--bubble-08-top) + 9%); left: calc(var(--bubble-08-left) + var(--bubble-08-width) / 2); }
      .label-09 { right: calc(var(--bubble-09-right) + var(--bubble-09-width) / 2); bottom: calc(var(--bubble-09-bottom) + 9%); transform: translate(50%, 50%); }
      .label-10 { top: calc(var(--bubble-10-top) + 9%); left: calc(var(--bubble-10-left) + var(--bubble-10-width) / 2); }

      .catch-copy {
        position: absolute;
        --edit-x: 0px;
        --edit-y: 0px;
        top: var(--copy-top);
        left: var(--copy-left);
        z-index: 5;
        width: var(--copy-width);
        transform: translate(var(--edit-x), var(--edit-y)) translate(-50%, -50%) rotate(var(--copy-rotate));
      }

      .bubble-copy {
        position: absolute;
        --edit-x: 0px;
        --edit-y: 0px;
        z-index: 6;
        color: #111;
        font-family: var(--font-sans);
        font-size: clamp(10px, 1vw, 13px);
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.12;
        text-align: center;
        text-shadow: none;
        pointer-events: none;
        white-space: normal;
      }

      .bubble-01-copy {
        top: var(--bubble-01-copy-top);
        left: var(--bubble-01-copy-left);
        width: var(--bubble-01-copy-width);
        transform: translate(var(--edit-x), var(--edit-y)) translate(-50%, -50%) rotate(var(--bubble-01-copy-rotate));
      }

      .bubble-06-copy {
        right: var(--bubble-06-copy-right);
        bottom: var(--bubble-06-copy-bottom);
        width: var(--bubble-06-copy-width);
        font-size: clamp(9px, 0.82vw, 12px);
        line-height: 1.08;
        text-shadow:
          -2px -2px 0 #fff,
          0 -2px 0 #fff,
          2px -2px 0 #fff,
          -2px 0 0 #fff,
          2px 0 0 #fff,
          -2px 2px 0 #fff,
          0 2px 0 #fff,
          2px 2px 0 #fff;
        transform: translate(var(--edit-x), var(--edit-y)) translate(50%, 50%) rotate(var(--bubble-06-copy-rotate));
      }

      .bubble-07-copy {
        right: var(--bubble-07-copy-right);
        bottom: var(--bubble-07-copy-bottom);
        width: var(--bubble-07-copy-width);
        font-size: clamp(8px, 0.78vw, 11px);
        line-height: 1.12;
        transform: translate(var(--edit-x), var(--edit-y)) translate(50%, 50%) rotate(var(--bubble-07-copy-rotate));
      }

      .bubble-08-copy {
        top: var(--bubble-08-copy-top);
        left: var(--bubble-08-copy-left);
        width: var(--bubble-08-copy-width);
        color: #fff;
        font-size: clamp(8px, 0.78vw, 11px);
        line-height: 1.12;
        transform: translate(var(--edit-x), var(--edit-y)) translate(-50%, -50%) rotate(var(--bubble-08-copy-rotate));
      }

      .bubble-02-copy {
        top: var(--bubble-02-copy-top);
        left: var(--bubble-02-copy-left);
        width: var(--bubble-02-copy-width);
        font-size: clamp(9px, 0.82vw, 12px);
        line-height: 1.08;
        transform: translate(var(--edit-x), var(--edit-y)) translate(-50%, -50%) rotate(var(--bubble-02-copy-rotate));
      }

      .bubble-03-copy {
        top: var(--bubble-03-copy-top);
        right: var(--bubble-03-copy-right);
        width: var(--bubble-03-copy-width);
        font-size: clamp(9px, 0.82vw, 12px);
        line-height: 1.08;
        transform: translate(var(--edit-x), var(--edit-y)) translate(50%, -50%) rotate(var(--bubble-03-copy-rotate));
      }

      .bubble-04-copy {
        top: var(--bubble-04-copy-top);
        right: var(--bubble-04-copy-right);
        width: var(--bubble-04-copy-width);
        color: #fff;
        font-size: clamp(8px, 0.76vw, 11px);
        line-height: 1.14;
        transform: translate(var(--edit-x), var(--edit-y)) translate(50%, -50%) rotate(var(--bubble-04-copy-rotate));
      }

      .bubble-05-copy {
        left: var(--bubble-05-copy-left);
        bottom: var(--bubble-05-copy-bottom);
        width: var(--bubble-05-copy-width);
        font-size: clamp(8px, 0.78vw, 11px);
        line-height: 1.12;
        text-shadow:
          -2px -2px 0 #fff,
          0 -2px 0 #fff,
          2px -2px 0 #fff,
          -2px 0 0 #fff,
          2px 0 0 #fff,
          -2px 2px 0 #fff,
          0 2px 0 #fff,
          2px 2px 0 #fff;
        transform: translate(var(--edit-x), var(--edit-y)) translate(-50%, 50%) rotate(var(--bubble-05-copy-rotate));
      }

      .bubble-09-copy {
        right: var(--bubble-09-copy-right);
        bottom: var(--bubble-09-copy-bottom);
        width: var(--bubble-09-copy-width);
        font-size: clamp(8px, 0.78vw, 11px);
        line-height: 1.12;
        transform: translate(var(--edit-x), var(--edit-y)) translate(50%, 50%) rotate(var(--bubble-09-copy-rotate));
      }

      .bubble-10-copy {
        top: var(--bubble-10-copy-top);
        left: var(--bubble-10-copy-left);
        width: var(--bubble-10-copy-width);
        font-size: clamp(13px, 1.16vw, 16px);
        font-weight: 800;
        line-height: 1.26;
        text-align: center;
        transform: translate(var(--edit-x), var(--edit-y)) translate(-50%, -50%) rotate(var(--bubble-10-copy-rotate));
      }

      .bubble-10-copy .arabic-mixed-line {
        display: inline-flex;
        align-items: baseline;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
      }

      .bubble-10-copy .rtl {
        direction: rtl;
        unicode-bidi: isolate;
      }

      .bubble-10-copy .latin {
        direction: ltr;
        unicode-bidi: isolate;
      }

      .bubble-10-copy .latin-line {
        display: block;
        direction: ltr;
        unicode-bidi: isolate;
      }

      .bubble-10-copy .arabic-line {
        display: block;
        direction: rtl;
        unicode-bidi: isolate;
      }

      .catch-comic .comic-bubble,
      .catch-comic .bubble-copy,
      .catch-comic .catch-copy {
        transform-origin: center center;
      }

      body.comic-reveal-pending:not(.comic-reveal-ready) .catch-comic .comic-bubble,
      body.comic-reveal-pending:not(.comic-reveal-ready) .catch-comic .bubble-copy,
      body.comic-reveal-pending:not(.comic-reveal-ready) .catch-comic .catch-copy {
        opacity: 0;
        scale: 0.62;
      }

      body.comic-reveal-ready .catch-comic .comic-bubble,
      body.comic-reveal-ready .catch-comic .bubble-copy,
      body.comic-reveal-ready .catch-comic .catch-copy {
        animation: comicRevealGwan 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: var(--comic-reveal-delay, 0ms);
      }

      .main-bubble,
      .main-copy { --comic-reveal-delay: 0ms; }
      .bubble-01,
      .bubble-01-copy { --comic-reveal-delay: 80ms; }
      .bubble-03,
      .bubble-03-copy { --comic-reveal-delay: 140ms; }
      .bubble-09,
      .bubble-09-copy { --comic-reveal-delay: 200ms; }
      .bubble-02,
      .bubble-02-copy { --comic-reveal-delay: 260ms; }
      .bubble-08,
      .bubble-08-copy { --comic-reveal-delay: 320ms; }
      .bubble-06,
      .bubble-06-copy { --comic-reveal-delay: 380ms; }
      .bubble-04,
      .bubble-04-copy { --comic-reveal-delay: 440ms; }
      .bubble-07,
      .bubble-07-copy { --comic-reveal-delay: 500ms; }
      .bubble-05,
      .bubble-05-copy { --comic-reveal-delay: 560ms; }
      .bubble-10,
      .bubble-10-copy { --comic-reveal-delay: 620ms; }

      @keyframes comicRevealGwan {
        0% {
          opacity: 0;
          scale: 0.62;
        }

        58% {
          opacity: 1;
          scale: 1.12;
        }

        76% {
          opacity: 1;
          scale: 0.94;
        }

        100% {
          opacity: 1;
          scale: 1;
        }
      }

      body.collage-edit-mode .catch-comic {
        pointer-events: auto;
      }

      body.collage-edit-mode .comic-bubble,
      body.collage-edit-mode .comic-panel,
      body.collage-edit-mode .bubble-copy,
      body.collage-edit-mode .catch-copy {
        cursor: move;
        outline: 1px dashed rgba(255, 255, 255, 0.62);
        outline-offset: 3px;
        pointer-events: auto;
      }

      body.collage-edit-mode [data-edit-selected="true"] {
        outline: 2px solid #35d0ff;
        outline-offset: 4px;
      }

      .collage-editor-panel {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 200;
        width: min(360px, calc(100vw - 32px));
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        background: rgba(12, 12, 14, 0.94);
        color: #fff;
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
        font-family: var(--font-sans);
      }

      .collage-editor-panel h2 {
        margin: 0 0 10px;
        font-size: 14px;
      }

      .collage-editor-row {
        display: flex;
        gap: 8px;
        margin-top: 8px;
      }

      .collage-editor-panel select,
      .collage-editor-panel textarea {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 5px;
        background: #101114;
        color: #fff;
        font: inherit;
      }

      .collage-editor-panel select {
        height: 34px;
        padding: 0 8px;
      }

      .collage-editor-panel textarea {
        height: 110px;
        margin-top: 8px;
        padding: 8px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        line-height: 1.45;
        resize: vertical;
      }

      .collage-editor-panel button {
        min-height: 32px;
        padding: 0 10px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.11);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
      }

      .collage-editor-panel button:hover {
        background: rgba(255, 255, 255, 0.18);
      }

      .collage-editor-help {
        margin: 8px 0 0;
        color: rgba(255, 255, 255, 0.66);
        font-size: 11px;
        line-height: 1.5;
      }

      .catch-translations {
        display: block;
        width: min(720px, 88vw);
        margin: 10px auto 0;
        color: #fff;
        font-size: 13px;
        letter-spacing: 0.06em;
        line-height: 1.5;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9);
      }

      .hero-cta {
        position: absolute;
        bottom: 96px;
        left: 50%;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        transform: translateX(-50%);
      }

      .hero-cta-row {
        display: flex;
        gap: 12px;
      }

      .hero-pill {
        min-width: 210px;
        min-height: 44px;
        padding: 0 28px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        color: var(--artisan-dark);
        font-size: 14px;
        font-weight: 700;
        backdrop-filter: blur(12px);
        transition: background 160ms ease;
      }

      .hero-pill:hover {
        background: #fff;
      }

      .hero-pill.dark {
        background: rgba(23, 26, 32, 0.72);
        color: #fff;
      }

      .hero-pill.dark:hover {
        background: rgba(23, 26, 32, 0.94);
      }

      .down-button {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        animation: bounce 2s infinite;
      }

      .page-section {
        padding: clamp(52px, 7vw, 88px) 0;
      }

      .finder-section {
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: #fafafa;
      }

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

      .section-title-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 10px;
      }

      .round-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: #111;
        color: #fff;
      }

      .section-title {
        margin: 0;
        font-size: clamp(22px, 3vw, 40px);
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.12;
      }

      .section-lead {
        margin: 0 0 28px 52px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.8;
      }

      .finder-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }

      .finder-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 106px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
        text-align: left;
        transition: border-color 160ms ease, transform 160ms ease;
      }

      .finder-card:hover {
        border-color: #9ca3af;
        transform: translateY(-1px);
      }

      .finder-flow {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
      }

      .finder-flow-mark {
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border: 1px solid #d7dce3;
        border-radius: 999px;
        color: #667085;
        font-size: 15px;
        line-height: 1;
      }

      .finder-flow span:first-child {
        color: #40434a;
        font-size: 12px;
        font-weight: 800;
      }

      .finder-flow strong {
        color: #111;
        font-size: 14px;
        white-space: nowrap;
      }

      .finder-card p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.65;
      }

      .finder-arrow {
        display: inline-grid;
        place-items: center;
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        border: 1px solid #d7dce3;
        border-radius: 999px;
        color: var(--artisan-red);
        font-size: 17px;
        line-height: 1;
        opacity: 0;
        transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
      }

      .finder-card:hover .finder-arrow {
        border-color: #cbd5e1;
        background: #fff;
        opacity: 1;
      }

      .compare-table-wrap {
        margin-top: 32px;
        overflow-x: auto;
      }

      .compare-table {
        width: 100%;
        min-width: 720px;
        border-collapse: collapse;
        font-size: 12px;
      }

      .compare-table th,
      .compare-table td {
        padding: 10px 8px;
        border-bottom: 1px solid var(--line);
      }

      .compare-table th {
        color: var(--muted);
        font-weight: 700;
        text-align: center;
      }

      .compare-table th:first-child,
      .compare-table td:first-child {
        text-align: left;
      }

      .compare-table td {
        color: #25272c;
        text-align: center;
      }

      .products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }

      .product-card {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
        transition: box-shadow 180ms ease, transform 180ms ease;
      }

      .product-card:hover {
        box-shadow: var(--shadow);
        transform: translateY(-2px);
      }

      .product-visual {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #ddd;
      }

      .product-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .product-info {
        padding: 16px;
      }

      .product-name {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.01em;
      }

      .product-jp {
        margin: 2px 0 0;
        color: var(--muted);
        font-family: var(--font-serif);
        font-size: 14px;
      }

      .product-desc {
        height: 54px;
        margin: 12px 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
        /* DB説明文は長いため、トップカード内では3行に収める。 */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .label {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: 0 8px;
        border-radius: 4px;
        background: #f1f1f1;
        color: #52545a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .meter-list {
        display: grid;
        gap: 8px;
        margin-top: 16px;
        padding-top: 4px;
      }

      .meter {
        display: grid;
        grid-template-columns: 58px 1fr;
        align-items: center;
        gap: 8px;
      }

      .meter-label {
        color: var(--muted);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .meter-track {
        height: 4px;
        overflow: hidden;
        border-radius: 999px;
        background: #e7e7e7;
      }

      .meter-fill {
        height: 100%;
        border-radius: inherit;
        background: #222;
        width: var(--meter-width, 0);
      }

      .meter-fill.value-25 { --meter-width: 25%; }
      .meter-fill.value-30 { --meter-width: 30%; }
      .meter-fill.value-40 { --meter-width: 40%; }
      .meter-fill.value-50 { --meter-width: 50%; }
      .meter-fill.value-55 { --meter-width: 55%; }
      .meter-fill.value-60 { --meter-width: 60%; }
      .meter-fill.value-70 { --meter-width: 70%; }
      .meter-fill.value-75 { --meter-width: 75%; }
      .meter-fill.value-80 { --meter-width: 80%; }
      .meter-fill.value-85 { --meter-width: 85%; }
      .meter-fill.value-95 { --meter-width: 95%; }

      .product-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
      }

      .price {
        font-size: 18px;
        font-weight: 800;
      }

      .currency-code {
        margin-right: 0.25em;
        color: var(--muted);
        font-size: 0.72em;
        font-weight: 600;
        letter-spacing: 0;
      }

      .order-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 16px;
        border-radius: 4px;
        background: var(--artisan-dark);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
      }

      .order-button:hover {
        background: #000;
      }

      .science-layout {
        display: grid;
        grid-template-columns: 0.45fr 1fr;
        align-items: stretch;
        gap: 48px;
      }

      .tribology-diagram {
        position: relative;
        min-height: 280px;
        overflow: hidden;
        border-radius: var(--radius);
        background:
          linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
          #f4f4f4;
        background-size: 20px 20px;
      }

      .tribology-diagram svg {
        width: 100%;
        height: 100%;
        min-height: 280px;
        padding: 16px;
      }

      .science-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .science-copy p {
        margin: 0;
        color: var(--muted);
        font-family: var(--font-serif);
        line-height: 1.9;
      }

      .metric-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 28px;
      }

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

      .metric-card strong {
        display: block;
        font-size: 14px;
      }

      .metric-card code {
        color: var(--muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
      }

      .metric-card p {
        margin-top: 10px;
        font-family: var(--font-sans);
        font-size: 12px;
        line-height: 1.6;
      }

      .floating-share {
        position: fixed;
        top: 50%;
        right: 16px;
        z-index: 50;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transform: translateY(-50%);
      }

      .share-button {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #262626;
        color: #fff;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        transition: transform 160ms ease, filter 160ms ease;
      }

      .share-button:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
      }

      .share-button svg {
        display: block;
      }

      .share-button.reddit { background: #ff4500; }
      .share-button.facebook { background: #1877f2; }
      .share-button.twitter { background: #1da1f2; }

      .artisan-pick {
        position: fixed !important;
        right: 0;
        bottom: 24px;
        left: 0;
        z-index: 2147483000;
        display: flex !important;
        justify-content: center;
        padding: 0 16px;
        opacity: 1 !important;
        pointer-events: none;
        visibility: visible !important;
      }

      .artisan-pick-panel {
        position: absolute;
        bottom: 92px;
        width: min(448px, calc(100% - 32px));
        padding: 24px;
        border: 1px solid #27272a;
        border-radius: 16px;
        background: #0a0a0a;
        color: #fff;
        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .artisan-pick-panel.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .artisan-pick-panel h2 {
        margin: 0 0 4px;
        font-size: 18px;
        text-align: center;
      }

      .artisan-pick-panel > p {
        margin: 0 0 18px;
        color: #a3a3a3;
        font-size: 14px;
        text-align: center;
      }

      .set-row {
        display: grid;
        grid-template-columns: 48px 1fr auto;
        align-items: center;
        gap: 14px;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid #27272a;
        border-radius: 12px;
        background: #171717;
      }

      .set-thumb {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 8px;
        background: #27272a;
        font-size: 12px;
        font-weight: 800;
      }

      .set-thumb.type-99-thumb {
        background: #c86b28;
        color: #fff;
      }

      .set-total {
        display: flex;
        justify-content: space-between;
        margin: 18px 0;
        padding-top: 18px;
        border-top: 1px solid #27272a;
      }

      .artisan-pick-main {
        position: relative;
        z-index: 1;
        display: inline-flex !important;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 0 28px;
        border-radius: 999px;
        background: var(--artisan-red);
        color: #fff;
        font-weight: 800;
        box-shadow: 0 18px 50px rgba(200, 16, 46, 0.32);
        opacity: 1 !important;
        pointer-events: auto;
        visibility: visible !important;
      }

      .artisan-pick-main:hover {
        background: #a00d25;
      }

      .charter-signature {
        margin: 60px 0 80px;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-align: center;
      }

      .section-divider {
        margin: 0;
        border: 0;
        border-top: 1px solid var(--line);
      }

      .artisan-pick.is-hidden {
        display: none !important;
      }

      .artisan-floating-action {
        position: fixed;
        right: 0;
        bottom: 24px;
        left: 0;
        z-index: 2147483600;
        display: flex;
        justify-content: center;
        padding: 0 16px;
        opacity: 1;
        pointer-events: none;
        visibility: visible;
      }

      .artisan-floating-panel {
        bottom: 72px;
        left: 50%;
        transform: translate(-50%, 12px);
      }

      .artisan-floating-panel.is-open {
        transform: translate(-50%, 0);
      }

      .artisan-floating-close {
        position: absolute;
        top: 14px;
        right: 14px;
        color: #a3a3a3;
      }

      .main-bubble { --edit-x: -9px; --edit-y: -46px; }
      .bubble-01 { --edit-x: -15px; --edit-y: -117px; }
      .bubble-04 { --edit-x: -15px; --edit-y: 86px; }
      .bubble-06 { --edit-x: -29px; --edit-y: -15px; }
      .bubble-07 { --edit-x: -186px; --edit-y: -116px; }
      .bubble-08 { --edit-x: -133px; --edit-y: -72px; }
      .bubble-09 { --edit-x: -32px; --edit-y: 271px; }
      .bubble-01-copy { --edit-x: -13px; --edit-y: -119px; }
      .bubble-03-copy { --edit-x: -3px; --edit-y: 4px; }
      .bubble-04-copy { --edit-x: -17px; --edit-y: 90px; }
      .bubble-06-copy { --edit-x: -24px; --edit-y: -22px; }
      .bubble-07-copy { --edit-x: -181px; --edit-y: -116px; }
      .bubble-08-copy { --edit-x: -143px; --edit-y: -73px; }
      .bubble-09-copy { --edit-x: -31px; --edit-y: 271px; }
      .main-copy { --edit-x: -7px; --edit-y: -41px; }

      .artisan-pick-close {
        position: absolute;
        top: 14px;
        right: 14px;
        color: #a3a3a3;
      }

      .checkout-button {
        display: grid;
        place-items: center;
        width: 100%;
        min-height: 46px;
        border-radius: 4px;
        background: var(--artisan-dark);
        color: #fff;
        font-weight: 700;
      }

      .site-footer {
        border-top: 1px solid var(--line);
        background: #fff;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.2fr repeat(4, 1fr);
        gap: 40px;
        padding: 52px 0;
      }

      .footer-brand {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.22em;
      }

      .footer-about {
        max-width: 280px;
        margin: 16px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.8;
      }

      .footer-col h3 {
        margin: 0 0 16px;
        font-size: 14px;
      }

      .footer-col a {
        display: block;
        margin-top: 10px;
        color: var(--muted);
        font-size: 14px;
      }

      .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 22px 0;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 14px;
      }

      .footer-bottom div {
        display: flex;
        gap: 24px;
      }

      @keyframes charterScroll {
        0% { transform: translateY(70%); }
        100% { transform: translateY(-100%); }
      }

      @keyframes belowCharterCycle {
        0% { opacity: 0; }
        50% { opacity: 0; }
        60% { opacity: 1; }
        90% { opacity: 1; }
        100% { opacity: 0; }
      }

      @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(6px); }
      }

      @media (max-width: 1040px) {
        .nav-center,
        .nav-right {
          display: none;
        }

        .mobile-actions {
          display: flex;
        }

        .finder-grid,
        .products-grid,
        .metric-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .science-layout {
          grid-template-columns: 1fr;
        }

        .footer-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .floating-share {
          display: none;
        }
      }

      @media (max-width: 720px) {
        .header-inner {
          min-height: 60px;
          padding: 0 16px;
        }

        .brand {
          min-width: auto;
        }

        .brand img {
          width: 112px;
        }

        .charter-overlay {
          width: 94vw;
          height: 72vh;
        }

        .charter-head {
          margin-bottom: 36px;
          padding: 0 16px 24px;
        }

        .charter-content {
          padding: 0 16px;
          font-size: 13px;
          line-height: 1.75;
        }

        .below-charter {
          --catch-block-top: 18%;
          width: 94vw;
        }

        .catch-comic {
          --main-bubble-top: 8%;
          --main-bubble-width: 76vw;
          --copy-top: 46%;
          --copy-width: 58vw;
          --bubble-01-top: 12%;
          --bubble-01-left: -18%;
          --bubble-01-width: 38%;
          --bubble-01-copy-top: calc(12% + 54px);
          --bubble-01-copy-left: calc(-18% + 96px);
          --bubble-01-copy-width: 90px;
          --bubble-02-top: calc(-2% + 0px);
          --bubble-02-left: calc(20% + 0px);
          --bubble-02-width: 27.2%;
          --bubble-02-copy-top: calc(-2% - 94px);
          --bubble-02-copy-left: calc(20% + 17% + 50px);
          --bubble-02-copy-width: 94px;
          --bubble-02-copy-rotate: 5deg;
          --bubble-03-top: 4%;
          --bubble-03-right: calc(-6% + 70px);
          --bubble-03-width: 28.8%;
          --bubble-03-copy-top: calc(4% + 64px);
          --bubble-03-copy-right: calc(-6% + 14.4% + 75px);
          --bubble-03-copy-width: 83px;
          --bubble-03-copy-rotate: -5deg;
          --bubble-04-top: 40%;
          --bubble-04-right: -24%;
          --bubble-04-width: 28%;
          --bubble-04-copy-top: calc(40% + 94px);
          --bubble-04-copy-right: calc(-24% + 14%);
          --bubble-04-copy-width: 67px;
          --bubble-04-copy-rotate: 8deg;
          --bubble-05-left: calc(-18% - 35px);
          --bubble-05-bottom: calc(8% + 22px);
          --bubble-05-width: 40%;
          --bubble-05-copy-left: calc(-18% - 100px + 20%);
          --bubble-05-copy-bottom: calc(8% - 43px + 10%);
          --bubble-05-copy-width: 88px;
          --bubble-05-copy-rotate: 7deg;
          --bubble-06-right: 10%;
          --bubble-06-bottom: 0;
          --bubble-06-width: 34%;
          --bubble-06-copy-right: calc(10% + 17%);
          --bubble-06-copy-bottom: calc(0% + 18% + 110px);
          --bubble-06-copy-width: 96px;
          --bubble-06-copy-rotate: 5deg;
          --bubble-07-right: 6%;
          --bubble-07-bottom: -28%;
          --bubble-07-width: 28.8%;
          --bubble-07-copy-right: calc(6% + 14.4%);
          --bubble-07-copy-bottom: calc(-28% + 16% + 90px);
          --bubble-07-copy-width: 70px;
          --bubble-07-copy-rotate: 7deg;
          --bubble-08-top: calc(-2% - 54px);
          --bubble-08-left: calc(46% - 80px);
          --bubble-08-width: 24%;
          --bubble-08-copy-top: calc(-2% + 26px + 10%);
          --bubble-08-copy-left: calc(46% - 80px + 12%);
          --bubble-08-copy-width: 74px;
          --bubble-08-copy-rotate: -6deg;
          --bubble-09-right: calc(6% - 130px);
          --bubble-09-bottom: calc(-8% + 52px);
          --bubble-09-width: 25.6%;
          --bubble-09-copy-right: calc(6% + 12.8% - 130px);
          --bubble-09-copy-bottom: calc(-8% + 127px + 24%);
          --bubble-09-copy-width: 67px;
          --bubble-09-copy-rotate: -8deg;
          --bubble-10-top: calc(12% + 160px);
          --bubble-10-left: calc(-18% - 24px);
          --bubble-10-width: 34.56%;
          --bubble-10-rotate: -5deg;
          --bubble-10-copy-top: calc(12% + 210px + 9%);
          --bubble-10-copy-left: calc(-18% - 38px + 17.28%);
          --bubble-10-copy-width: 107px;
          --bubble-10-copy-rotate: -5deg;
          width: 108vw;
          height: 250px;
          margin-left: -3vw;
        }

        .below-charter-main {
          font-size: clamp(13px, 4vw, 18px);
          white-space: normal;
        }

        .desktop-catch {
          display: none;
        }

        .mobile-catch {
          display: block;
        }

        .catch-translations {
          width: 90vw;
          margin-top: 6px;
          font-size: 9px;
          line-height: 1.28;
        }

        .hero-cta {
          right: 16px;
          bottom: 62px;
          left: 16px;
          transform: none;
        }

        .hero-cta-row {
          width: 100%;
          flex-direction: column;
        }

        .hero-pill {
          width: 100%;
        }

        .section-lead {
          margin-left: 0;
        }

        .finder-grid,
        .products-grid,
        .metric-grid,
        .footer-grid {
          grid-template-columns: 1fr;
        }

        .product-desc {
          height: auto;
          min-height: 48px;
        }

        .artisan-pick-main {
          width: 100%;
          justify-content: center;
          padding: 0 18px;
          font-size: 14px;
        }

        .footer-bottom {
          align-items: flex-start;
          flex-direction: column;
        }
      }

/* White-background standard styles. */
      /* White-background trial overrides for translated index page. */
      body {
        background: #fafafa;
        color: var(--artisan-dark);
      }

      body .site-header {
        border-bottom: 1px solid rgba(23, 26, 32, 0.1);
        background: rgba(255, 255, 255, 0.92);
        color: var(--artisan-dark);
        backdrop-filter: blur(16px);
      }

      body .site-header .brand img {
        filter: invert(1);
      }

      body .nav-button:hover,
      body .nav-link:hover,
      body .icon-nav:hover {
        background: rgba(0, 0, 0, 0.06);
      }

      body .mega-menu {
        border: 1px solid rgba(47, 51, 57, 0.12);
        background: #f3f4f6;
        color: #2f3339;
        box-shadow: 0 24px 64px rgba(17, 24, 39, 0.16);
      }

      body .mega-menu::before {
        background: #f3f4f6;
      }

      body .nav-right {
        position: relative;
      }

      body .desktop-language-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 48px;
        z-index: 305;
        display: none;
        width: 220px;
        max-height: min(520px, calc(100vh - 96px));
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 42px rgba(17, 24, 39, 0.14);
        color: var(--artisan-dark);
        backdrop-filter: blur(16px);
      }

      body .desktop-language-menu.is-open {
        display: block;
      }

      body .desktop-language-menu .mobile-menu-label {
        margin: 0;
        padding: 12px 16px 6px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      body .desktop-language-menu .mobile-menu-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 6px;
      }

      body .desktop-language-menu .mobile-menu-grid a {
        display: flex;
        align-items: center;
        min-height: 36px;
        border-radius: 5px;
        padding: 0 10px;
        color: var(--artisan-dark);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;
        text-align: left;
        text-decoration: none;
        white-space: nowrap;
      }

      body .desktop-language-menu .mobile-menu-grid a:hover {
        background: #f3f4f6;
      }

      body .mega-label,
      body .mega-item span,
      body .mega-foot button,
      body .mega-foot a {
        color: #6b7280;
      }

      body .mega-item {
        background: #fafafa;
      }

      body .mega-item:hover {
        background: #e5e7eb;
      }

      body .mega-item strong {
        color: #111827;
      }

      body .mega-foot {
        border-top-color: rgba(47, 51, 57, 0.14);
      }

      body .hero {
        background: #ffffff;
        color: var(--artisan-dark);
      }

      body .hero picture img {
        opacity: 1;
        filter: none;
      }

      body .hero-overlay,
      body .hero::after {
        background: transparent;
      }

      body .below-charter,
      body .catch-translations {
        color: var(--artisan-dark);
        text-shadow: none;
      }

      body .hero-center-copy {
        color: #ffffff;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.72), 0 0 42px rgba(0, 0, 0, 0.72);
      }

      body .below-charter-main {
        color: var(--artisan-dark);
      }

      body .hero-pill {
        border: 1px solid rgba(23, 26, 32, 0.16);
        background: var(--artisan-dark);
        color: #ffffff;
      }

      body .hero-pill:hover {
        background: #000000;
      }

      body .hero-pill.dark {
        border-color: rgba(23, 26, 32, 0.16);
        background: #ffffff;
        color: var(--artisan-dark);
      }

      body .hero-pill.dark:hover {
        background: #f3f4f6;
      }

      body .down-button {
        color: var(--artisan-dark);
      }

      body .artisan-pick-panel {
        border-color: var(--line);
        background: #ffffff;
        color: var(--artisan-dark);
        box-shadow: 0 22px 60px rgba(17, 24, 39, 0.16);
      }

      body .artisan-pick-panel > p,
      body .artisan-pick-close {
        color: var(--muted);
      }

      body .set-row,
      body .set-thumb {
        border-color: var(--line);
        background: #f7f7f6;
      }

      body .set-total {
        border-top-color: var(--line);
      }


/* White-background standard styles. */
       @media (max-width: 1040px) {
        body .site-header {
          z-index: 300;
        }

        body .header-inner {
          position: relative;
        }

        body .mobile-product-toggle {
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 302;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-height: 36px;
          border: 1px solid var(--line);
          border-radius: 6px;
          background: rgba(255, 255, 255, 0.9);
          padding: 0 14px;
          color: var(--artisan-dark);
          font-size: 13px;
          font-weight: 800;
          transform: translate(-50%, -50%);
        }

        body .mobile-language-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 40px;
          min-height: 36px;
          border: 1px solid var(--line);
          border-radius: 6px;
          background: rgba(255, 255, 255, 0.9);
          color: var(--artisan-dark);
          font-size: 12px;
          font-weight: 800;
        }

        body .desktop-language-menu {
          position: absolute;
          top: calc(100% + 10px);
          right: 48px;
          z-index: 305;
          width: 320px;
          max-height: min(520px, calc(100vh - 96px));
          overflow-y: auto;
          border: 1px solid var(--line);
          border-radius: 8px;
          background: rgba(255, 255, 255, 0.98);
          box-shadow: 0 18px 42px rgba(17, 24, 39, 0.14);
          color: var(--artisan-dark);
          backdrop-filter: blur(16px);
        }

        body .desktop-language-menu.is-open {
          display: block;
        }

      body .desktop-language-menu .mobile-menu-label {
        margin: 0;
        padding: 12px 16px 6px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      body .desktop-language-menu .mobile-menu-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 6px;
      }

      body .desktop-language-menu .mobile-menu-grid a {
        display: flex;
        align-items: center;
        min-height: 36px;
        border-radius: 5px;
        padding: 0 10px;
        color: var(--artisan-dark);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;
        text-align: left;
        text-decoration: none;
        white-space: nowrap;
      }

      body .desktop-language-menu .mobile-menu-grid a:hover {
        background: #f3f4f6;
      }

        body .mobile-product-menu,
        body .mobile-language-menu {
          position: fixed;
          top: 60px;
          z-index: 295;
          max-height: calc(100vh - 60px);
          overflow-y: auto;
          border: 1px solid var(--line);
          border-radius: 0 0 8px 8px;
          background: rgba(255, 255, 255, 0.98);
          box-shadow: 0 18px 42px rgba(17, 24, 39, 0.14);
          backdrop-filter: blur(16px);
        }

        body .mobile-product-menu {
          left: 50%;
          width: min(360px, calc(100vw - 48px));
          transform: translateX(-50%);
        }

        body .mobile-language-menu {
          right: 16px;
          width: min(320px, calc(100vw - 32px));
        }

        body .mobile-product-menu.is-open,
        body .mobile-language-menu.is-open {
          display: block;
        }

        body .mobile-menu {
          position: fixed;
          top: 60px;
          right: 0;
          left: 0;
          z-index: 290;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          background: rgba(255, 255, 255, 0.98);
          box-shadow: 0 18px 42px rgba(17, 24, 39, 0.14);
          backdrop-filter: blur(16px);
          max-height: calc(100vh - 60px);
          overflow-y: auto;
        }

        body .mobile-menu.is-open,
        body .site-header.is-menu-open .mobile-menu {
          display: block;
        }

        body .mobile-menu button,
        body .mobile-menu a {
          color: var(--artisan-dark);
        }

        body .mobile-menu > button:nth-last-child(-n + 2) {
          display: none;
        }

        body .mobile-menu-section {
          border-top: 1px solid var(--line);
          padding: 10px 0;
        }

        body .mobile-menu-label {
          margin: 0;
          padding: 10px 24px 6px;
          color: var(--muted);
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }

        body .mobile-menu-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
          padding: 8px 24px 12px;
        }

        body .mobile-menu-grid a {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 3px;
          min-height: 42px;
          border: 1px solid var(--line);
          border-radius: 6px;
          background: #f7f7f6;
          padding: 0 12px;
          font-size: 13px;
          font-weight: 800;
          text-decoration: none;
        }

        body .mobile-menu-grid a strong {
          color: var(--artisan-dark);
          font-size: 13px;
          line-height: 1.1;
        }

        body .mobile-menu-grid a span {
          color: var(--muted);
          font-size: 11px;
          font-weight: 700;
          line-height: 1.1;
        }

        body .floating-share {
          top: calc(50% + 36px);
          right: 10px;
          z-index: 90;
          display: flex;
          gap: 8px;
        }

        body .share-button {
          width: 34px;
          height: 34px;
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
        }

        body .below-charter {
          display: block;
          top: 27%;
          z-index: 3;
          width: 100vw;
          opacity: 1;
          pointer-events: none;
        }

        body .catch-comic {
          --main-bubble-top: -22%;
          --main-bubble-left: 50%;
          --main-bubble-width: 680px;
          --copy-top: calc(30% - 25px);
          --copy-left: calc(50% + 20px);
          --copy-width: 250px;
          --bubble-01-top: 58%;
          --bubble-01-left: calc(22% + 200px);
          --bubble-01-width: 21.6%;
          --bubble-01-copy-top: calc(58% + 94px);
          --bubble-01-copy-left: calc(22% + 320px);
          --bubble-01-copy-width: 130px;
          --bubble-02-top: calc(66% + 100px);
          --bubble-02-left: calc(42% + 50px);
          --bubble-02-width: 19.2%;
          --bubble-02-copy-top: calc(66% + 6px);
          --bubble-02-copy-left: calc(42% + 100px + 12%);
          --bubble-02-copy-width: 122px;
          --bubble-03-top: 0;
          --bubble-03-right: calc(18% + 70px);
          --bubble-03-width: 17.6%;
          --bubble-03-copy-top: calc(0% + 68px);
          --bubble-03-copy-right: calc(18% + 8.8% + 75px);
          --bubble-03-copy-width: 106px;
          --bubble-04-top: calc(2% + 30px);
          --bubble-04-right: -2%;
          --bubble-04-width: 17.5%;
          --bubble-04-copy-top: calc(2% + 116px);
          --bubble-04-copy-right: calc(-2% + 8.75%);
          --bubble-04-copy-width: 99px;
          --bubble-05-left: calc(58% - 75px);
          --bubble-05-bottom: calc(-14% - 8px);
          --bubble-05-width: 22.8%;
          --bubble-05-copy-left: calc(58% - 140px + 11.4%);
          --bubble-05-copy-bottom: calc(-14% - 73px + 10%);
          --bubble-05-copy-width: 132px;
          --bubble-06-right: 8%;
          --bubble-06-bottom: calc(-8% - 100px);
          --bubble-06-width: 24%;
          --bubble-06-copy-right: calc(8% + 12%);
          --bubble-06-copy-bottom: calc(-8% + 54px);
          --bubble-06-copy-width: 132px;
          --bubble-07-right: 10%;
          --bubble-07-bottom: calc(-8% - 220px);
          --bubble-07-width: 17.28%;
          --bubble-07-copy-right: calc(10% + 8.64%);
          --bubble-07-copy-bottom: calc(-8% - 130px + 10%);
          --bubble-07-copy-width: 99px;
          --bubble-08-top: calc(66% + 30px);
          --bubble-08-left: calc(42% + 130px);
          --bubble-08-width: 21.6%;
          --bubble-08-copy-top: calc(66% + 110px + 10%);
          --bubble-08-copy-left: calc(42% + 130px + 10.8%);
          --bubble-08-copy-width: 118px;
          --bubble-09-right: calc(22% - 130px);
          --bubble-09-bottom: calc(-8% + 58px);
          --bubble-09-width: 23.04%;
          --bubble-09-copy-right: calc(22% + 11.52% - 130px);
          --bubble-09-copy-bottom: calc(-8% + 133px + 24%);
          --bubble-09-copy-width: 117px;
          --bubble-10-top: calc(58% + 120px);
          --bubble-10-left: calc(22% + 140px);
          --bubble-10-width: 21.12%;
          --bubble-10-copy-top: calc(58% + 170px + 9%);
          --bubble-10-copy-left: calc(22% + 126px + 10.56%);
          --bubble-10-copy-width: 148px;
          width: 1120px;
          height: 300px;
          margin-left: calc(50vw - 560px);
          transform: scale(0.38);
          transform-origin: top center;
        }

        body .catch-comic .comic-bubble {
          filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
        }

        body .catch-comic .bubble-copy {
          font-size: 7px;
          line-height: 1.02;
        }

        body .catch-comic .catch-copy {
          display: block;
        }

        body .hero picture img {
          top: -180px;
          height: calc(100% + 180px);
          object-position: center top;
        }

        body .hero-center-copy {
          top: 34%;
          z-index: 4;
          width: min(330px, 82vw);
          font-size: clamp(22px, 6vw, 30px);
          line-height: 1.18;
        }

        body.comic-reveal-ready .hero-center-copy {
          display: none;
        }

        body .hero-cta {
          bottom: 124px;
          z-index: 5;
        }

        body .hero-pill {
          min-height: 50px;
        }

        body .hero-pill:not(.dark) {
          border-color: rgba(255, 255, 255, 0.28);
          background: rgba(17, 24, 39, 0.96);
          box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
        }

        body .hero-pill.dark {
          background: rgba(255, 255, 255, 0.96);
          box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
        }
      }

       @media (max-width: 720px) {
        body .artisan-breadcrumb {
          width: min(100% - 32px, 1180px);
          padding-top: 82px;
          font-size: 12px;
        }

        body .floating-share {
          right: 8px;
          gap: 7px;
        }

        body .share-button {
          width: 32px;
          height: 32px;
        }
      }