:root {
  --fd-ink:#252a2e;
  --fd-soft:#69737a;
  --fd-line:#d5dde0;
  --fd-blue:#1480c1;
  --fd-paper:#f6f7f5;
  --fd-canvas:#e7edef;
  --fd-charcoal:#262b2f;
}

body.fd-inner {
  min-width:1120px;
  --fd-scene:none;
  background:#e7f0f1 var(--fd-scene) center / cover fixed no-repeat;
  color:var(--fd-ink);
  font-family:Inter,"Microsoft YaHei",Arial,sans-serif;
}

body.fd-scene-tools { --fd-scene:url("inner-scenes/tools-garden-studio-v5.png"); }
body.fd-scene-games { --fd-scene:url("inner-scenes/games-orchard-pavilion-v5.png"); }
body.fd-scene-downloads { --fd-scene:url("inner-scenes/garden-watercolor-v1.png"); }
body.fd-scene-notes { --fd-scene:url("inner-scenes/lakeside-watercolor-v1.png"); }

.fd-inner .top {
  height:74px;
  padding:0 42px;
  border:0;
  background:var(--fd-charcoal);
  color:#fff;
}

.fd-inner .brand {
  color:#fff;
  font-size:25px;
  font-weight:500;
  letter-spacing:.02em;
}

.fd-inner .brand small {
  color:#bdc8ce;
  font-size:11px;
  letter-spacing:.12em;
}

.fd-inner .top nav {
  display:flex;
  align-items:center;
  gap:20px;
}

.fd-inner .top nav a {
  color:#d6dde0;
  font-size:12px;
  letter-spacing:.08em;
  text-decoration:none;
}

.fd-inner .top nav a:hover,
.fd-inner .top nav a[aria-current="page"] {
  color:#fff;
}

.fd-inner .page {
  width:auto;
  max-width:1440px;
  min-height:calc(100vh - 74px);
  margin:0 auto;
  padding:58px 66px 74px;
  background:rgba(247,249,247,.82);
  backdrop-filter:blur(3px) saturate(.82);
}

.fd-inner .eyebrow {
  color:#267eaf;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
}

.fd-inner h1 {
  margin:15px 0 52px;
  font:500 54px/.9 Georgia,"Noto Serif SC",serif;
  letter-spacing:0;
}

.fd-inner .item,
.fd-inner .empty {
  border-color:#cbd4d8;
  background:#fbfcfb;
}

.fd-inner .item {
  padding:34px 0;
  border-top:2px solid #272d31;
  border-bottom:1px solid #cbd4d8;
}

.fd-inner .item h2 {
  font:500 30px Georgia,"Noto Serif SC",serif;
}

.fd-inner .item p,
.fd-inner .empty {
  color:var(--fd-soft);
}

.fd-inner .link {
  height:46px;
  border:1px solid #272d31;
  border-radius:0;
  background:transparent;
  color:#27363b;
  font-size:11px;
  letter-spacing:.1em;
}

.fd-inner .link:hover {
  background:#262b2f;
  color:#fff;
}

.fd-inner .empty {
  min-height:460px;
  border-top:2px solid #272d31;
  border-bottom:1px solid #cbd4d8;
}

.fd-compliance-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:16px 28px;
  color:rgba(55,67,72,.68);
  background:rgba(247,249,247,.78);
  border-top:1px solid rgba(53,70,76,.14);
  font-size:11px;
  letter-spacing:.04em;
}

.fd-compliance-footer a {
  color:inherit;
  text-decoration:none;
}

.fd-compliance-footer a:hover { color:var(--fd-blue); }

/* Workbench pages borrow the homepage's single translucent frame instead of
   dividing every interaction into separately outlined panels. */
body.fd-inner.fd-workbench {
  padding:20px;
}

.fd-workbench .shell {
  --fd-rail:clamp(210px,18vw,250px);
  display:grid;
  grid-template-columns:var(--fd-rail) minmax(0,1fr);
  width:min(100%,1400px);
  min-height:0;
  margin:0 auto;
  background:transparent;
  align-items:start;
}

.fd-workbench .fd-frame {
  position:relative;
  min-height:calc(100vh - 40px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.62);
  background-color:#dceef2;
  background-image:linear-gradient(rgba(221,239,244,.22),rgba(221,239,244,.22)),var(--fd-scene);
  background-position:center;
  background-size:cover;
  box-shadow:0 20px 50px rgba(44,91,121,.11);
}

.fd-workbench .fd-frame::before {
  position:absolute;
  z-index:0;
  inset:0;
  content:"";
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.2),transparent 37%,rgba(255,255,255,.1));
}

/* The ranch illustration is intentionally light; this keeps it in the same
   mid-tone range as the homepage without changing other inner-page scenes. */
.fd-scene-games .fd-frame::after {
  position:absolute;
  z-index:0;
  inset:0;
  content:"";
  pointer-events:none;
  background:rgba(64,128,165,.11);
  mix-blend-mode:multiply;
}

.fd-workbench .top,
.fd-workbench .shell {
  position:relative;
  z-index:1;
}

.fd-workbench .top {
  background:rgba(235,249,255,.08);
  border-bottom:1px solid rgba(35,54,71,.2);
  color:var(--fd-ink);
}

.fd-workbench .brand,
.fd-workbench .top nav a,
.fd-workbench .top nav a:hover,
.fd-workbench .top nav a[aria-current="page"] {
  color:var(--fd-ink);
}

.fd-workbench .brand small {
  color:rgba(48,52,58,.68);
}

.fd-workbench .sidebar {
  position:sticky;
  top:20px;
  height:auto;
  min-height:0;
  align-self:start;
  padding-bottom:34px;
  border-right:1px solid rgba(35,54,71,.17);
  background:rgba(235,246,247,.55);
  backdrop-filter:blur(10px) saturate(.82);
}

.fd-workbench .sidebar > .eyebrow,
.fd-workbench .sidebar > h1,
.fd-workbench .sidebar > p,
.fd-workbench .sidebar-foot {
  margin-left:28px;
  margin-right:28px;
}

.fd-workbench .sidebar h1 {
  font-size:38px;
  line-height:1;
}

.fd-workbench .toolnav button {
  padding-left:28px;
  padding-right:28px;
}

.fd-workbench .sidebar-foot {
  display:none;
}

.fd-workbench .main {
  min-height:0;
  padding:46px clamp(42px,5vw,66px) 54px;
  background:rgba(242,250,251,.57);
  backdrop-filter:blur(10px) saturate(.84);
}

.fd-workbench .main .view {
  width:min(100%,1080px);
  margin-left:auto;
  margin-right:auto;
}

.fd-workbench .tool-layout,
.fd-workbench .group-layout,
.fd-workbench .dice-layout {
  grid-template-columns:minmax(230px,250px) minmax(0,1fr);
  gap:34px;
  align-items:start;
}

.fd-workbench .sidebar p,
.fd-workbench .helper,
.fd-workbench .view-head p {
  color:rgba(48,62,68,.68);
}

.fd-workbench .toolnav,
.fd-workbench .toolnav button {
  border-color:rgba(35,54,71,.16);
}

.fd-workbench .toolnav button:hover {
  background:rgba(255,255,255,.22);
}

.fd-workbench .toolnav button.on {
  background:rgba(250,254,252,.52);
  box-shadow:inset 3px 0 #1681be;
}

.fd-workbench .view-head {
  border-bottom:1px solid rgba(35,54,71,.48);
}

.fd-workbench textarea,
.fd-workbench input,
.fd-workbench select,
.fd-workbench .preset,
.fd-workbench .secondary,
.fd-workbench .stat {
  border-color:rgba(44,71,80,.12);
  background:rgba(255,255,255,.36);
}

.fd-workbench textarea:focus,
.fd-workbench input:focus,
.fd-workbench select:focus {
  background:rgba(255,255,255,.64);
}

.fd-workbench .primary {
  background:rgba(38,47,51,.88);
}

.fd-workbench .empty,
.fd-workbench .group-stage,
.fd-workbench .wheel-stage,
.fd-workbench .dice-area,
.fd-workbench .timer-stage,
.fd-workbench .suika-stage,
.fd-workbench .lock-stage {
  border:0;
  background:rgba(251,254,253,.38);
  box-shadow:inset 0 1px rgba(255,255,255,.6);
}

.fd-workbench .group-stage {
  min-height:430px;
}

.fd-workbench .result-placeholder {
  width:calc(100% - 32px);
  max-width:440px;
  padding:16px 0;
  border:0;
  color:rgba(42,55,60,.7);
  text-align:center;
}

.fd-workbench .result-placeholder span {
  margin-bottom:16px;
  color:#267eaf;
}

.fd-workbench .result-placeholder p {
  font-size:20px;
}

.fd-workbench .groups {
  gap:12px;
  padding:18px 0;
  border:0;
  background:transparent;
}

.fd-workbench .group {
  border:1px solid rgba(255,255,255,.55);
  background:rgba(249,253,251,.38);
  box-shadow:0 14px 30px rgba(50,83,87,.07);
}

.fd-workbench .wheel-stage::before,
.fd-workbench .dice-area::before,
.fd-workbench .dice-area::after,
.fd-workbench .timer-stage::before {
  display:none;
}

.fd-workbench .wheel-stage,
.fd-workbench .dice-area,
.fd-workbench .timer-stage,
.fd-workbench .suika-stage {
  min-height:460px;
}

.fd-workbench .dice-surface {
  border:0;
}

.fd-workbench .die {
  border-color:rgba(37,53,59,.36);
  background:rgba(250,253,251,.75);
  box-shadow:12px 13px 0 rgba(255,255,255,.37),0 20px 28px rgba(25,38,42,.12);
}

.fd-workbench .timer-face {
  background:rgba(250,253,251,.76);
}

.fd-workbench .suika-canvas {
  border-color:rgba(255,255,255,.72);
  background:rgba(236,248,250,.43);
  box-shadow:0 22px 42px rgba(38,76,84,.14);
}

.fd-workbench .suika-overlay {
  background:transparent;
}

.fd-workbench .mine-board {
  border-color:rgba(255,255,255,.65);
  background:rgba(220,237,235,.64);
  box-shadow:0 18px 35px rgba(38,76,84,.1);
}

@media (max-width:850px) {
  body.fd-inner { min-width:0; }
  body.fd-inner.fd-workbench { padding:0; }
  .fd-workbench .fd-frame { min-height:100vh; border:0; }
  .fd-workbench .sidebar,
  .fd-workbench .main { height:auto; min-height:0; }
  .fd-workbench .shell { display:block; width:100%; }
  .fd-inner .top { height:64px; padding:0 20px; }
  .fd-inner .top nav a:nth-child(n+4) { display:none; }
  .fd-inner .page { padding:44px 22px 58px; }
  .fd-inner h1 { font-size:43px; }
}

/* V5 workbench: one illustrated field, a quiet editorial rail, and a single
   working sheet. The image belongs to the environment rather than to each panel. */
body.fd-inner.fd-workbench {
  padding:clamp(16px,2vw,30px);
}

.fd-inner.fd-workbench .fd-frame {
  min-height:calc(100vh - clamp(32px,4vw,60px));
  background-color:#cfe4e6;
  background-image:linear-gradient(105deg,rgba(238,248,247,.18),rgba(197,224,229,.1)),var(--fd-scene);
  background-position:center;
  background-size:cover;
  box-shadow:0 24px 60px rgba(30,78,95,.16);
}

.fd-inner.fd-workbench .fd-frame::before {
  background:linear-gradient(90deg,rgba(255,255,255,.13),transparent 38%,rgba(255,255,255,.08));
}

.fd-inner.fd-workbench .top {
  background:rgba(245,251,249,.32);
  border-bottom:1px solid rgba(39,69,76,.2);
  backdrop-filter:blur(12px) saturate(.82);
}

.fd-inner.fd-workbench .shell {
  --fd-rail:208px;
  grid-template-columns:var(--fd-rail) minmax(0,1fr);
  gap:34px;
  width:min(100%,1280px);
  min-height:calc(100vh - 142px);
  padding:42px 40px 54px;
  align-items:start;
}

.fd-inner.fd-workbench .sidebar {
  position:sticky;
  top:106px;
  align-self:start;
  min-height:0;
  padding:12px 0 0;
  border:0;
  background:transparent;
  backdrop-filter:none;
}

.fd-inner.fd-workbench .sidebar > .eyebrow,
.fd-inner.fd-workbench .sidebar > h1,
.fd-inner.fd-workbench .sidebar > p {
  margin-left:0;
  margin-right:0;
}

.fd-inner.fd-workbench .sidebar h1 {
  margin-top:12px;
  margin-bottom:20px;
  font-size:42px;
  line-height:.96;
}

.fd-inner.fd-workbench .sidebar p {
  max-width:184px;
  color:rgba(39,61,66,.74);
}

.fd-inner.fd-workbench .toolnav {
  display:grid;
  gap:5px;
  margin-top:34px;
  border:0;
}

.fd-inner.fd-workbench .toolnav button {
  width:100%;
  height:42px;
  padding:0 12px;
  border:0;
  border-left:1px solid rgba(39,69,76,.35);
  background:transparent;
  color:rgba(35,54,61,.68);
}

.fd-inner.fd-workbench .toolnav button:hover {
  border-left-color:#1c86b7;
  background:rgba(250,254,252,.22);
}

.fd-inner.fd-workbench .toolnav button.on {
  border-left:3px solid #1c86b7;
  background:rgba(248,253,251,.46);
  box-shadow:none;
  color:#243d45;
}

.fd-inner.fd-workbench .main {
  min-height:0;
  padding:0;
  background:transparent;
  backdrop-filter:none;
}

.fd-inner.fd-workbench .main .view {
  position:relative;
  width:100%;
  min-height:0;
  margin:0;
  padding:42px 44px 46px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.58);
  border-radius:7px 0 7px 0;
  background:rgba(242,250,249,.34);
  box-shadow:0 18px 38px rgba(36,86,96,.13),inset 0 1px rgba(255,255,255,.58);
  backdrop-filter:blur(7px) saturate(.86);
}

.fd-inner.fd-workbench .main .view::before {
  position:absolute;
  top:0;
  right:0;
  width:34px;
  height:34px;
  content:"";
  border-left:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.55);
  background:rgba(240,250,248,.18);
}

.fd-inner.fd-workbench .view-head {
  position:relative;
  z-index:1;
  padding-bottom:24px;
  border-bottom:1px solid rgba(35,56,62,.38);
}

.fd-inner.fd-workbench .view-head h2 {
  font-size:50px;
}

.fd-inner.fd-workbench .tool-layout,
.fd-inner.fd-workbench .group-layout,
.fd-inner.fd-workbench .dice-layout {
  position:relative;
  z-index:1;
  grid-template-columns:minmax(220px,250px) minmax(0,1fr);
  gap:44px;
  padding-top:32px;
}

.fd-inner.fd-workbench textarea,
.fd-inner.fd-workbench input,
.fd-inner.fd-workbench select,
.fd-inner.fd-workbench .preset,
.fd-inner.fd-workbench .secondary,
.fd-inner.fd-workbench .stat {
  border-color:rgba(35,69,76,.16);
  background:rgba(251,254,252,.42);
}

.fd-inner.fd-workbench .empty,
.fd-inner.fd-workbench .group-stage,
.fd-inner.fd-workbench .wheel-stage,
.fd-inner.fd-workbench .dice-area,
.fd-inner.fd-workbench .timer-stage,
.fd-inner.fd-workbench .suika-stage,
.fd-inner.fd-workbench .lock-stage {
  border:1px solid rgba(255,255,255,.44);
  background:linear-gradient(135deg,rgba(250,254,252,.25),rgba(235,247,247,.1));
  box-shadow:inset 0 1px rgba(255,255,255,.5);
  backdrop-filter:blur(3px);
}

.fd-inner.fd-workbench .group-stage { min-height:430px; }

.fd-inner.fd-workbench .wheel-stage,
.fd-inner.fd-workbench .dice-area,
.fd-inner.fd-workbench .timer-stage,
.fd-inner.fd-workbench .suika-stage { min-height:480px; }

.fd-inner.fd-workbench .groups { padding:0; }

.fd-inner.fd-workbench .group {
  border-color:rgba(255,255,255,.5);
  background:rgba(249,253,251,.34);
}

@media (max-width:850px) {
  body.fd-inner.fd-workbench { padding:0; }
  .fd-inner.fd-workbench .fd-frame { min-height:100vh; border:0; }
  .fd-inner.fd-workbench .shell { display:block; min-height:0; padding:28px 22px 46px; }
  .fd-inner.fd-workbench .sidebar { position:static; padding:0 0 24px; }
  .fd-inner.fd-workbench .sidebar h1 { display:block; font-size:39px; }
  .fd-inner.fd-workbench .toolnav { display:flex; overflow:auto; margin:22px -22px 0; padding:0 22px; }
  .fd-inner.fd-workbench .toolnav button { min-width:130px; border-left:0; border-bottom:1px solid rgba(35,69,76,.25); }
  .fd-inner.fd-workbench .toolnav button.on { border-bottom:3px solid #1c86b7; }
  .fd-inner.fd-workbench .main .view { padding:30px 22px 34px; }
  .fd-inner.fd-workbench .view-head h2 { font-size:40px; }
  .fd-inner.fd-workbench .tool-layout,
  .fd-inner.fd-workbench .group-layout,
  .fd-inner.fd-workbench .dice-layout { grid-template-columns:1fr; gap:28px; }
}