:root {
  font-size: 100%;
  color-scheme: dark;
  --wik-bg: #070807;
  --wik-text-primary: #F2F2F2;
  --wik-text-secondary: #C8C8C4;
  --wik-gold-primary: #D6AA4F;
  --wik-gold-highlight: #F3D27A;
  --font-ui: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-brand: "Marcellus", Georgia, serif;
  --type-hero: 1.5625rem;
  --type-page: 1.25rem;
  --type-section: .9375rem;
  --type-title: .875rem;
  --type-body: .8125rem;
  --type-small: .75rem;
  --type-meta: .6875rem;
  --type-number: 1.4375rem;
  --type-weight-heading: 500;
  --icon-size: 3.75rem;
  --card-inset: .5rem;
  --card-radius: 1.375rem;
  --card-glass-radius: 22px;
  --card-glass-icon-radius: 14px;
  --card-glass-icon-inset: 8px;
  --card-glass-spacing: 12px;
  --card-glass-text: #F2F2F2;
}

html:lang(en),html:lang(es) {
  --font-ui: "Inter",Arial,sans-serif;
}

html:lang(ru) {
  --font-ui: "PT Sans",Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

html,body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.5;
  background: var(--wik-bg);
  color: var(--wik-text-primary);
  -webkit-text-size-adjust: 100%;
}

button,select,input {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.backdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: #0C1111 url("../assets/bg/top-restoration-bg.webp") center top/cover no-repeat;
}

.backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg,rgba(6,11,11,.62),rgba(7,11,11,.20) 52%,rgba(7,11,11,.03) 90%),linear-gradient(180deg,rgba(7,10,11,.20),rgba(7,10,11,.04) 25%,rgba(8,13,12,.19) 48%,rgba(4,8,9,.48) 100%);
}

.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 43.5rem;
  min-width: 0;
  margin: 0 auto;
  padding: 0 max(.875rem,env(safe-area-inset-right,0px)) calc(3.8rem + env(safe-area-inset-bottom,0px)) max(.875rem,env(safe-area-inset-left,0px));
}

.top-area {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 30svh;
  padding-top: calc(.65rem + env(safe-area-inset-top,0px));
}

/* Header and Hero share the approved 30svh first view. */

/* Shared header appearance is owned by css/v2-shared-header.css. */

.hero {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  min-height: 0;
  padding: 0 .15rem .6rem;
  margin: 0;
}

.hero-surface {
  width: 100%;
  min-width: 0;
}

.hero-kicker {
  margin: 0;
  color: var(--wik-gold-highlight);
  font-size: var(--type-meta);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
}

.hero-title {
  margin: .55rem 0 .52rem;
  font-family: var(--font-brand);
  font-size: var(--type-hero);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .025em;
  color: var(--wik-text-primary);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.hero-text {
  max-width: 30rem;
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.5;
  font-weight: 400;
  color: var(--wik-text-secondary);
  text-shadow: 0 1px 10px rgba(0,0,0,.85);
}

.tool-section {
  margin-top: .25rem;
}

.tool-list {
  margin: 0;
  padding: 0;
}

/* 04 Refined Satin: approved surface and directionality, with one 1px gradient optical edge. */

/* V2 2026-10-16: five-row, two-column golden-rectangle navigation.
   Scope is limited to the home menu; backdrop, Hero and C2 ray modules are unchanged. */

/* The preview shell already uses min-height:30svh; content can expand with zoom. */
.tool-category + .tool-category { margin-top: 1.55rem; }
.tool-category-title {
  margin: 0 .15rem .72rem;
  font-size: var(--type-section);
  font-weight: var(--type-weight-heading);
  line-height: 1.35;
  color: var(--wik-gold-primary);
}
.tool-category-title span {
  display: block;
  margin-top: .18rem;
  color: var(--wik-text-secondary);
  font-size: var(--type-small);
  font-weight: 400;
}
/* Unified category/2-column grid. No gap property. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: calc(var(--card-glass-spacing) / -2);
  padding: 0;
}
.tool-card {
  --tile: 30.0283cqw; /* 48.59% of card height at 1.618034:1 */
  --chev: 14.5898cqw; /* next smaller golden square */
  --chev-inset: calc(var(--card-glass-icon-inset) + (var(--tile) - var(--chev)) / 2);

  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 1.618034 / 1;
  min-width: 0;
  min-height: 0;
  margin: calc(var(--card-glass-spacing) / 2);
  padding: 0;
  border: 0;
  border-radius: var(--card-glass-radius);
  overflow: hidden;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 .9rem 1.9rem rgba(0, 0, 0, .28);
  color: var(--card-glass-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 180ms ease;
}

/* Preserve a text-safe upper portion without a second CSS definition. */
.tool-card::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: calc(var(--card-glass-icon-inset) + var(--tile) + 3cqw);
}

/* Independent optical layers, not additional card borders. */
.glass-plane,
.glass-lustre,
.glass-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.glass-plane {
  z-index: 0;
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .065) 0%,
      rgba(255, 255, 255, .024) 48%,
      rgba(18, 21, 21, .22) 100%),
    rgba(48, 47, 43, .42);
  -webkit-backdrop-filter: blur(15px) saturate(118%);
  backdrop-filter: blur(15px) saturate(118%);
  -webkit-mask-image: var(--aperture-mask, linear-gradient(#000,#000));
  mask-image: var(--aperture-mask, linear-gradient(#000,#000));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Exactly 12% white from upper-left and 8% white from lower-right. */
.glass-lustre {
  z-index: 1;
  background:
    radial-gradient(ellipse 95% 100% at -2% -12%,
      rgba(255, 255, 255, .12) 0%,
      transparent 75%),
    radial-gradient(ellipse 92% 95% at 105% 110%,
      rgba(255, 255, 255, .08) 0%,
      transparent 62%);
  -webkit-mask-image: var(--aperture-mask, linear-gradient(#000,#000));
  mask-image: var(--aperture-mask, linear-gradient(#000,#000));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* One 1px perimeter: top-left WHITE 76%, bottom-right WHITE 60%. */
.glass-edge {
  z-index: 2;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .76) 0%,
    rgba(255, 255, 255, .30) 18%,
    rgba(255, 255, 255, .10) 37%,
    rgba(255, 255, 255, .08) 63%,
    rgba(255, 255, 255, .25) 83%,
    rgba(255, 255, 255, .60) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* True aperture: empty tile; no dark fill and no inset shadow. */
.tool-icon {
  position: absolute;
  z-index: 3;
  top: var(--card-glass-icon-inset);
  left: var(--card-glass-icon-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .27);
  border-radius: var(--card-glass-icon-radius);
  background: transparent;
  box-shadow: none;
}

.tool-icon > img {
  display: block;
  flex: 0 0 auto;
  width: 86.6667%;
  height: 86.6667%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-chevron {
  position: absolute;
  z-index: 3;
  top: var(--chev-inset);
  right: var(--chev-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--chev);
  height: var(--chev);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, .91);
  border-radius: 50%;
  color: var(--card-glass-text);
  font-size: 0;
}

.card-chevron::after {
  content: "";
  display: block;
  width: 29%;
  height: 29%;
  margin-left: -10%;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.tool-title {
  position: relative;
  z-index: 3;
  display: block;
  margin: auto 8px 14px;
  color: var(--card-glass-text);
  font-size: clamp(10px, 6.65cqw, 13px);
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 355px) {
  .tool-title { font-size: clamp(10px, 6cqw, 12px); }
}

.tool-card[href]:hover,
.tool-card[href]:focus-visible {
  box-shadow: 0 1.1rem 2rem rgba(0, 0, 0, .36);
}
.tool-card[href]:focus-visible { outline: 2px solid #f3d27a; outline-offset: 2px; }
.tool-card[aria-disabled="true"] { cursor: default; }
.tool-card[aria-disabled="true"] .card-chevron { opacity: .5; }

@media (prefers-reduced-transparency: reduce) {
  .glass-plane {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(35, 35, 33, .76);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card { transition: none; }
}

.site-footer {
  margin-top: 1.6rem;
  padding: .9rem .2rem 1rem;
  border-top: 1px solid rgba(242, 242, 242, .12);
  color: var(--wik-text-secondary);
  text-align: center;
}
.site-footer small {
  display: block;
  font-size: 8px;
  line-height: 1.4;
}

.site-footer .copyright {
  margin-bottom: .4rem;
  color: var(--wik-text-primary);
  font-size: 9px;
}