/* 通常モードの白い石（2026-10-07）
 *
 * 通常モードの全画面を、一枚の白い石から彫り出した計器に見せる。光源は一つで、本物の太陽
 * （NatureScene が --sx --sy --la --hl --lpx --lpy --night と石の色を入れる）。押せる物は浮き出し、
 * 入れる所は凹み、選ばれた物は金の象嵌、計器の窓は紺のガラス。背景は動かさない。
 *
 * 対象は NatureScene が data-kirin-stone を付けた画面だけ。ジャングルモードと Reference（CE 2226 の
 * 暗い地）と碑文の画面には付かない。純白は使わない（光は温かい白 255 252 246 まで）。
 */

[data-kirin-stone="true"] {
  /* 光の既定値（昼・左上から）。NatureScene が本物の太陽の値で上書きする。 */
  --sx: 0.3;
  --sy: 0.95;
  --la: 161deg;
  --hl: 255 252 246;
  --sh: 84 66 46;
  --lpx: 38%;
  --lpy: -14%;
  --night: 0;
  --stone: oklch(0.945 0.008 82);
  --stone-lit: oklch(0.975 0.006 85);
  --stone-deep: oklch(0.905 0.011 78);
  /* 夜は、金を月明かりの銀へ、茶色みの墨を青みの墨へ移す（--night に合わせて薄明のあいだに少しずつ）。
     石だけを月明かりの青にして金と茶色を昼のまま残すと、青と茶・橙がぶつかって統一感がなかった（2026-10-08）。
     紺のガラスの計器の窓の中は、窓の色（象牙と淡い金）のまま。 */
  --moon-mix: calc(var(--night) * 100%);
  --stone-gold: color-mix(in oklab, #a88443, #8d96a8 var(--moon-mix));
  --stone-gold-deep: color-mix(in oklab, #7a5d27, #5b6477 var(--moon-mix));
  --stone-gold-lit: color-mix(in oklab, #e6c685, #d9dee8 var(--moon-mix));
  --stone-gold-ink: color-mix(in oklab, #85662d, #566075 var(--moon-mix));
  --tone-gold: color-mix(in oklab, #6a5927, #56607a var(--moon-mix));
  --tone-gold-line: color-mix(in oklab, rgb(126 106 46 / 0.55), rgb(96 108 134 / 0.5) var(--moon-mix));
  --tone-gold-wash: color-mix(in oklab, rgb(126 106 46 / 0.16), rgb(96 108 134 / 0.14) var(--moon-mix));
  --ink-primary: color-mix(in oklab, oklch(0.22 0.02 60), oklch(0.23 0.018 262) var(--moon-mix));
  --ink-body: color-mix(in oklab, oklch(0.42 0.01 60), oklch(0.42 0.014 262) var(--moon-mix));
  --ink-muted: color-mix(in oklab, oklch(0.56 0.008 60), oklch(0.56 0.01 262) var(--moon-mix));
  --signal-amber: color-mix(in oklab, oklch(0.5 0.085 84), oklch(0.5 0.04 250) var(--moon-mix));
  --accent-terracotta: color-mix(in oklab, oklch(0.6 0.1 86), oklch(0.56 0.04 252) var(--moon-mix));
  --accent-terracotta-soft: color-mix(in oklab, oklch(0.81 0.075 85), oklch(0.82 0.025 252) var(--moon-mix));
  --accent-terracotta-trace: color-mix(in oklab, oklch(0.93 0.04 85), oklch(0.93 0.012 252) var(--moon-mix));
  /* 大元（:root）で上の色から作られる色は :root の値のまま届くので、石の上で作り直す。 */
  --accent: var(--accent-terracotta);
  --accent-soft: var(--accent-terracotta-soft);
  --accent-trace: var(--accent-terracotta-trace);
  --ink-headline: var(--ink-primary);
  --color-warning: var(--signal-amber);
  --color-warn-amber: var(--signal-amber);
  --tone-warning: var(--signal-amber);
  --balance-reference-center: var(--ink-muted);
  --result-read-tone: var(--tone-gold);
  --result-read-line: var(--tone-gold-line);
  --result-read-wash: var(--tone-gold-wash);
  --result-masking-tone: var(--tone-gold);
  --result-masking-line: var(--tone-gold-line);
  --result-masking-wash: var(--tone-gold-wash);
  --studio-vocal: var(--tone-gold);
  --studio-vocal-line: var(--tone-gold-line);
  --studio-vocal-wash: var(--tone-gold-wash);
  --studio-bv: var(--tone-gold);
  --studio-bv-line: var(--tone-gold-line);
  --studio-bv-wash: var(--tone-gold-wash);
  --studio-music: var(--tone-gold);
  --studio-music-line: var(--tone-gold-line);
  --studio-music-wash: var(--tone-gold-wash);
  --stone-aqua: #78c6d0;
  --stone-lift:
    inset calc(var(--sx) * 1px) calc(var(--sy) * 1.2px) 0 rgb(var(--hl) / 0.92),
    inset calc(var(--sx) * -1px) calc(var(--sy) * -1.1px) 0 rgb(var(--sh) / 0.07),
    calc(var(--sx) * 1px) calc(var(--sy) * 1.5px) 2px rgb(var(--sh) / 0.16),
    calc(var(--sx) * 3px) calc(var(--sy) * 4px) 10px -2px rgb(var(--sh) / 0.18);
  --stone-press:
    inset calc(var(--sx) * 2px) calc(var(--sy) * 2.8px) 5px rgb(var(--sh) / 0.24),
    inset calc(var(--sx) * -1px) calc(var(--sy) * -1px) 0 rgb(var(--hl) / 0.85),
    0 0 0 rgb(var(--sh) / 0),
    0 0 0 rgb(var(--sh) / 0);
  --stone-well:
    inset calc(var(--sx) * 2px) calc(var(--sy) * 3px) 6px rgb(var(--sh) / 0.16),
    inset calc(var(--sx) * 0.5px) calc(var(--sy) * 0.8px) 1px rgb(var(--sh) / 0.13),
    inset calc(var(--sx) * -1px) calc(var(--sy) * -1px) 0 rgb(var(--hl) / 0.9);
  --stone-plate:
    inset calc(var(--sx) * 1px) calc(var(--sy) * 1.4px) 0 rgb(var(--hl) / 0.95),
    inset calc(var(--sx) * -1px) calc(var(--sy) * -1px) 0 rgb(var(--sh) / 0.05),
    calc(var(--sx) * 1px) calc(var(--sy) * 1.5px) 3px rgb(var(--sh) / 0.1),
    calc(var(--sx) * 9px) calc(var(--sy) * 13px) 30px -8px rgb(var(--sh) / 0.17);
  --stone-engrave: calc(var(--sx) * 0.5px) calc(var(--sy) * 0.95px) 0 rgb(var(--hl) / 0.92), calc(var(--sx) * -0.4px) calc(var(--sy) * -0.55px) 0 rgb(var(--sh) / 0.16);

  /* 画面の地は石の色（不透明。地の色を文字や塗りに使う部品があるため）。光は画面全体に重ねる光の層で出す。
     カードと窓は明るい石。線は影に任せて薄く。金の文字は、明るい地で橙に見えないくすんだ金。 */
  --canvas-cream: var(--stone);
  --canvas-soft: var(--stone);
  --canvas-deep: var(--stone-deep);
  --color-gold: color-mix(in oklab, #8a6a2e, #5f6980 var(--moon-mix));
  --kirin-collection-metal: color-mix(in oklab, oklch(0.64 0.055 88), oklch(0.66 0.02 255) var(--moon-mix));
  --result-sticky-surface: var(--stone);
  --surface-card: var(--stone-lit);
  --surface-elevated: var(--stone-lit);
  --surface-dark: #161d33;
  --hairline: rgb(var(--sh) / 0.13);
  --hairline-soft: rgb(var(--sh) / 0.07);
  --hairline-strong: rgb(var(--sh) / 0.2);

  /* Works の暗い帯と札は、白い石の板にそろえる。 */
  --works-band: transparent;
  --works-card-surface: var(--stone-lit);
  --works-card-edge: rgb(var(--sh) / 0.12);
  --works-menu-surface: var(--stone-lit);
  --works-focus-edge: var(--stone-gold);
  --works-ink-strong: var(--ink-primary);
  --works-ink-dim: var(--ink-muted);

  background:
    radial-gradient(140% 120% at var(--lpx) var(--lpy), var(--stone-lit), var(--stone) 58%, var(--stone-deep));
}

/* 太陽の光は地（上の background）だけで受ける。画面の一番上に soft-light の光の層を重ねると、
   スクロールのたびに下の絵を読み直す合成が要り、合成の時間が石の前の 1.6〜3 倍になった（2026-10-08 計測）。
   見た目の差は 255 段階の平均 1〜3 段だったので、層ごと外した。 */

/* 石の肌理と、夜の月明かり（上から差す冷たい光の溜まりと、わずかな暗さ）。どちらも画面の一番上に薄く重ね、押す操作は通す。
   夜に暖かい色は足さない。明るい石の画面では、焚き火の暖かい溜まりは夕陽の色と見分けられなかった
   （2026-10-08 に見本で確かめた）。夕陽は温かく横から、夜は冷たい月明かりが上から、で分ける。
   重ね方は普通の重ね方（multiply にすると、スクロールのたびに下の絵を読み直す合成が要る）。 */
[data-kirin-stone="true"]::before,
[data-kirin-stone="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
[data-kirin-stone="true"]::before {
  opacity: 0.05;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .34  0 0 0 0 .27  0 0 0 0 .19  0 0 0 .85 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .33  0 0 0 0 .25  0 0 0 .45 0'/></filter><rect width='900' height='900' filter='url(%23m)'/></svg>");
}
[data-kirin-stone="true"]::after {
  background:
    radial-gradient(75% 65% at var(--lpx) var(--lpy), rgb(214 224 246 / calc(var(--night) * 0.14)), rgb(214 224 246 / 0) 70%),
    rgb(22 28 48 / calc(var(--night) * 0.05));
}

/* ── 上の帯 ─────────────────────────────────────────────── */

[data-kirin-stone="true"] [data-kirin-topbar] {
  background: linear-gradient(180deg, rgb(var(--hl) / 0.6), rgb(var(--hl) / 0.12)), var(--stone) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgb(var(--sh) / 0.1), 0 2px 0 rgb(var(--hl) / 0.85), 0 8px 18px -14px rgb(var(--sh) / 0.45);
}
[data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-brand] {
  display: inline-block;
  color: var(--ink-primary);
  text-shadow: var(--stone-engrave);
}
/* ロゴの K は金。その日の最初に開いた時だけ、K に光がひと筋走る（静止の決まりの例外）。 */
[data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-brand-k] {
  color: var(--stone-gold-ink);
}
[data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-brand-k][data-shine="true"] {
  display: inline-block;
  background-image: linear-gradient(105deg, rgb(255 247 224 / 0) 42%, rgb(255 247 224 / 0.95) 50%, rgb(255 247 224 / 0) 58%), linear-gradient(var(--stone-gold-ink), var(--stone-gold-ink));
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kirin-k-shine 1.4s cubic-bezier(0.3, 0.1, 0.2, 1) both !important;
}
@keyframes kirin-k-shine { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
[data-kirin-stone="true"] [data-kirin-topbar] [role="tablist"] {
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(var(--la), var(--stone-deep), var(--stone) 64%);
  box-shadow: var(--stone-well);
}
[data-kirin-stone="true"] [data-kirin-topbar] [role="tab"] {
  position: relative;
  border-radius: 9px !important;
  background-color: transparent !important;
  color: var(--ink-muted) !important;
  transition: color 180ms ease-out, box-shadow 220ms ease-out !important;
}
[data-kirin-stone="true"] [data-kirin-topbar] [role="tab"]:hover {
  color: var(--ink-primary) !important;
}
[data-kirin-stone="true"] [data-kirin-topbar] [role="tab"][aria-selected="true"] {
  background: linear-gradient(var(--la), var(--stone-lit), var(--stone) 74%) !important;
  color: var(--ink-primary) !important;
  box-shadow: var(--stone-lift);
}
/* 選んだタブの金の象嵌：1 本の線が、選んだタブへ滑って移る。滑り着くと光がひと筋走る（静止の決まりの例外）。 */
[data-kirin-tab-inlay] { display: none; }
[data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-tab-inlay] {
  display: block;
  position: absolute;
  z-index: 1;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--stone-gold-deep), var(--stone-gold-lit) 42%, var(--stone-gold) 70%, var(--stone-gold-deep));
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.2), 0 1px 0 rgb(var(--hl) / 0.9);
}
[data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-tab-inlay][data-ready="true"] {
  transition: left 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.38s cubic-bezier(0.3, 0.7, 0.2, 1) !important;
}
[data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-tab-inlay][data-glint="true"] {
  background-image: linear-gradient(105deg, rgb(255 248 226 / 0) 40%, rgb(255 248 226 / 0.95) 50%, rgb(255 248 226 / 0) 60%), linear-gradient(90deg, var(--stone-gold-deep), var(--stone-gold-lit) 42%, var(--stone-gold) 70%, var(--stone-gold-deep));
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: kirin-inlay-glint 0.9s ease both !important;
}
@keyframes kirin-inlay-glint { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
[data-kirin-stone="true"] [data-kirin-topbar] [data-top-nav-collaboration] {
  border-color: transparent !important;
  border-radius: 17px !important;
  background: linear-gradient(var(--la), var(--stone-lit), var(--stone) 74%) !important;
  box-shadow: var(--stone-lift);
}
[data-kirin-stone="true"] [data-kirin-topbar] [data-top-nav-settings-support]:hover {
  background: linear-gradient(var(--la), var(--stone-lit), var(--stone) 74%) !important;
  box-shadow: var(--stone-lift);
}

/* ── 左の帯 ─────────────────────────────────────────────── */

[data-kirin-stone="true"] [data-kirin-sidebar] {
  background: linear-gradient(90deg, rgb(var(--hl) / 0.25), rgb(var(--hl) / 0)) !important;
  border-right: 0 !important;
  box-shadow: inset -1px 0 0 rgb(var(--hl) / 0.85), inset -2px 0 0 rgb(var(--sh) / 0.09);
}
[data-kirin-stone="true"] [data-kirin-sidebar] button[aria-current="page"] {
  position: relative;
  background: linear-gradient(var(--la), var(--stone-deep), var(--stone) 64%) !important;
  box-shadow: var(--stone-well);
  color: var(--ink-primary) !important;
}
[data-kirin-stone="true"] [data-kirin-sidebar] button[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklab, #fff1cf, #f2f5fb var(--moon-mix)), var(--stone-gold-lit) 30%, var(--stone-gold) 62%, var(--stone-gold-deep));
  box-shadow: inset 0 -1px 1px rgb(0 0 0 / 0.25), 0 1px 0 rgb(var(--hl) / 0.95);
}
[data-kirin-stone="true"] [data-kirin-hypha-support] {
  border-color: transparent !important;
  background: linear-gradient(var(--la), var(--stone-lit), var(--stone) 74%) !important;
  box-shadow: var(--stone-lift);
}
[data-kirin-stone="true"] [data-kirin-hypha-support][aria-pressed="true"] [data-kirin-hypha-support-dot] {
  background: radial-gradient(circle at 35% 30%, #c9f1f5, #5aa8b4 60%) !important;
  box-shadow: inset 0 -1px 1px rgb(0 0 0 / 0.25), 0 0 6px rgb(120 198 208 / 0.7) !important;
}

/* 季節の印：小さな日時計（夜は月）と、今日の二十四節気。 */
[data-kirin-season] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 2px 8px 10px;
}
[data-kirin-season-text] { display: grid; gap: 4px; min-width: 0; }
[data-kirin-season-text] b {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.2em;
  color: var(--ink-body);
  text-shadow: var(--stone-engrave);
}
[data-kirin-season-text] span {
  font: 400 10px/1.3 var(--font-mono);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-kirin-season-dial] {
  width: 26px;
  height: 26px;
  overflow: visible;
  filter: drop-shadow(calc(var(--sx) * 0.6px) calc(var(--sy) * 0.9px) 0.6px rgb(var(--sh) / 0.3));
}
[data-kirin-season-disc] { fill: var(--stone-lit); stroke: rgb(var(--sh) / 0.2); stroke-width: 0.6; }
[data-kirin-season-tick] { stroke: rgb(var(--sh) / 0.38); stroke-width: 0.7; stroke-linecap: round; }
[data-kirin-season-shadow] { stroke: rgb(var(--sh) / 0.5); stroke-width: 1.4; stroke-linecap: round; }
[data-kirin-season-gnomon] { fill: var(--stone-gold); }
[data-kirin-season-moon-dark] { fill: rgb(78 82 94 / 0.5); stroke: rgb(var(--sh) / 0.32); stroke-width: 0.5; }
[data-kirin-season-moon-lit] { fill: #f6f1e4; }

/* 日付の印：Stage の公演の日の夜の月（指を乗せると日没と月齢）、発売日の二十四節気。 */
[data-kirin-night-mark] {
  width: 11px;
  height: 11px;
  margin-left: 5px;
  align-self: center;
  flex: none;
  overflow: visible;
  filter: drop-shadow(calc(var(--sx) * 0.4px) calc(var(--sy) * 0.6px) 0.4px rgb(var(--sh) / 0.3));
}
[data-kirin-night-moon-dark] { fill: rgb(78 82 94 / 0.42); stroke: rgb(var(--sh) / 0.3); stroke-width: 0.5; }
[data-kirin-night-moon-lit] { fill: #f6f1e4; }
[data-kirin-term-tag] {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 0.92em;
  letter-spacing: 0.12em;
  color: var(--stone-gold-ink);
  text-shadow: var(--stone-engrave);
}

/* 照合済みの印：SHA-256 の頭 6 文字を彫った金の印。現れるときに一度だけ押される。 */
[data-kirin-hash-seal] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
}
[data-kirin-hash-seal] svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  filter: drop-shadow(calc(var(--sx) * 0.6px) calc(var(--sy) * 0.9px) 0.6px rgb(var(--sh) / 0.35));
  animation: kirin-seal-press 420ms cubic-bezier(.2, .8, .2, 1) both;
}
[data-kirin-hash-seal-disc] { fill: var(--stone-gold); stroke: var(--stone-gold-deep); stroke-width: 0.6; }
[data-kirin-hash-seal-ticks] line { stroke: var(--stone-gold-lit); stroke-width: 0.7; stroke-linecap: round; }
[data-kirin-hash-seal-core] { fill: var(--stone-gold-deep); }
[data-kirin-hash-seal] code {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--stone-gold-ink);
  text-shadow: var(--stone-engrave);
}
@keyframes kirin-seal-press {
  from { transform: scale(1.25); opacity: 0; }
  60% { transform: scale(0.96); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

/* ── 押せる物は浮き出し、入れる所は凹み ───────────────────────── */

/* 線を持つ中立のボタンは、浮き出た石の板。押すと沈む。 */
[data-kirin-stone="true"] button[style*="border: 1px solid var(--hairline"]:not([role="tab"]):not([aria-current]):not(:disabled) {
  border-color: transparent !important;
  background: linear-gradient(var(--la), var(--stone-lit), var(--stone) 74%) !important;
  box-shadow: var(--stone-lift);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
/* 色を持つボタン（区分の色の線）は、色はそのままで少しだけ浮かせる。 */
[data-kirin-stone="true"] button[style*="border: 1px solid var(--"][style*="-line"]:not([role="tab"]):not(:disabled) {
  box-shadow:
    calc(var(--sx) * 0.8px) calc(var(--sy) * 1.2px) 2px rgb(var(--sh) / 0.14),
    inset calc(var(--sx) * 0.8px) calc(var(--sy) * 1px) 0 rgb(var(--hl) / 0.55);
}
[data-kirin-stone="true"] button[style*="border: 1px solid var(--hairline"]:not([role="tab"]):not([aria-current]):not(:disabled):active,
[data-kirin-stone="true"] [data-kirin-topbar] [data-top-nav-collaboration]:active,
[data-kirin-stone="true"] [data-kirin-hypha-support]:active {
  transform: translate(calc(var(--sx) * 0.6px), calc(var(--sy) * 0.9px));
  box-shadow: var(--stone-press);
}
/* 押されている状態（切り替えのオン・選ばれた札）は凹み。 */
[data-kirin-stone="true"] button[aria-pressed="true"][style*="border: 1px solid var(--hairline"]:not([data-kirin-hypha-support]) {
  background: linear-gradient(var(--la), var(--stone-deep), var(--stone) 64%) !important;
  box-shadow: var(--stone-well);
}

/* 入力欄は凹んだ面。 */
[data-kirin-stone="true"] input:is([type="text"], [type="search"], [type="number"], [type="email"], [type="url"], [type="password"], [type="date"], [type="time"], :not([type])):not(:focus-visible),
[data-kirin-stone="true"] textarea:not(:focus-visible),
[data-kirin-stone="true"] select:not(:focus-visible) {
  border-color: transparent !important;
  background-color: var(--stone) !important;
  background-image: linear-gradient(var(--la), var(--stone-deep), var(--stone) 64%) !important;
  box-shadow: var(--stone-well);
}

/* カードと窓は、光を受ける明るい石の板。入れ子の板は影を浅く。 */
[data-kirin-stone="true"] :is([style*="background: var(--surface-card)"], [style*="background-color: var(--surface-card)"], [style*="background: var(--surface-elevated)"], [style*="background-color: var(--surface-elevated)"]):not(button) {
  border-color: transparent !important;
  background: linear-gradient(var(--la), var(--stone-lit), var(--stone) 52%) !important;
  box-shadow: var(--stone-plate);
}
[data-kirin-stone="true"] :is([style*="background: var(--surface-card)"], [style*="background-color: var(--surface-card)"], [style*="background: var(--surface-elevated)"], [style*="background-color: var(--surface-elevated)"]) :is([style*="background: var(--surface-card)"], [style*="background-color: var(--surface-card)"], [style*="background: var(--surface-elevated)"], [style*="background-color: var(--surface-elevated)"]):not(button) {
  box-shadow:
    inset calc(var(--sx) * 1px) calc(var(--sy) * 1.2px) 0 rgb(var(--hl) / 0.9),
    calc(var(--sx) * 1px) calc(var(--sy) * 1.5px) 3px rgb(var(--sh) / 0.1),
    calc(var(--sx) * 3px) calc(var(--sy) * 5px) 12px -4px rgb(var(--sh) / 0.12);
}

/* Works は自前の森の写真と霞を敷いているので、白い石では外して地の光を見せる。 */
[data-kirin-stone="true"] [data-works-root] {
  background-image: none !important;
  background-color: transparent !important;
}

/* ── 主役の窓 ─────────────────────────────────────────────── */

/* Drop の受け口：深く彫った面に、細い同心円の溝。元の枠の線と飾りの帯は外す。 */
[data-kirin-stone="true"] [data-stone-basin] {
  border-color: transparent !important;
  border-radius: 26px !important;
  overflow: hidden;
  background:
    radial-gradient(120% 110% at calc(100% - var(--lpx)) 115%, rgb(var(--hl) / 0.55), rgb(var(--hl) / 0) 60%),
    linear-gradient(var(--la), var(--stone-deep), var(--stone) 52%) !important;
  box-shadow:
    inset calc(var(--sx) * 7px) calc(var(--sy) * 10px) 24px rgb(var(--sh) / 0.17),
    inset calc(var(--sx) * 1.5px) calc(var(--sy) * 2px) 3px rgb(var(--sh) / 0.15),
    inset calc(var(--sx) * -2px) calc(var(--sy) * -2.2px) 0 rgb(var(--hl) / 0.92) !important;
}
/* 受け口の「Kirin OS」の文字を中心に、細い同心円の溝を彫る（音の道具の受け口）。文字より奥、波紋より奥に置く。
   受け口の大きさで中心がずれないよう、溝は文字そのものに付ける（2026-10-08：受け口の 47 % の位置だと文字から 42 px 下にずれ、
   「Kirin OS を中心にした円がなくなった」と見えた）。 */
[data-kirin-stone="true"] [data-stone-basin] {
  isolation: isolate;
}
[data-kirin-stone="true"] [data-drop-brand]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1400px;
  height: 1400px;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
  background: repeating-radial-gradient(circle at center, rgb(var(--sh) / 0) 0 21px, rgb(var(--sh) / 0.085) 21px 22px, rgb(var(--hl) / 0.75) 22px 23px, rgb(var(--sh) / 0) 23px 44px);
  -webkit-mask: radial-gradient(circle at center, #000 0 175px, transparent 404px);
  mask: radial-gradient(circle at center, #000 0 175px, transparent 404px);
}
[data-kirin-stone="true"] [data-jungle-main-window-fill] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-kirin-stone="true"] [data-jungle-hide] {
  display: none !important;
}

/* 作品の詳細の「Version の音源情報」は紺のガラスの計器。周りに石の縁。中の枠と文字も紺のガラスに合わせる。 */
[data-kirin-stone="true"] .work-observation {
  --surface-card: rgb(6 10 22 / 0.34);
  --canvas-cream: rgb(0 0 0 / 0.18);
  --ink-primary: #f1e9da;
  --ink-muted: #9aa3b8;
  --hairline: rgb(255 252 246 / 0.1);
  --hairline-soft: rgb(255 252 246 / 0.06);
  --obs-water: #7fcbd4;
  --obs-gold: #e9cb93;
  background: linear-gradient(178deg, #1e2843 0%, #161d33 48%, #10162a 100%) !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgb(255 252 246 / 0.1),
    inset 0 0 0 1px rgb(0 0 0 / 0.55),
    inset 0 16px 26px -14px rgb(0 0 0 / 0.75),
    0 0 0 6px var(--stone-deep),
    0 0 0 7px rgb(var(--hl) / 0.85),
    calc(var(--sx) * 4px) calc(var(--sy) * 6px) 18px 6px rgb(var(--sh) / 0.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-kirin-hash-seal] svg { animation: none; }
  [data-kirin-stone="true"] button,
  [data-kirin-stone="true"] [role="tab"] {
    transition: none !important;
  }
  [data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-brand-k][data-shine="true"],
  [data-kirin-stone="true"] [data-kirin-topbar] [data-kirin-tab-inlay] {
    animation: none !important;
    transition: none !important;
  }
}