.fs-sample {
  position: absolute; inset: 0; overflow: hidden;
  color: #28394a; container-type: inline-size;
  font-family: inherit; font-size: clamp(12px,1vw,16px);
  color-scheme: light;
}
.fs-sample strong { font-family: Georgia,serif; font-weight: 400; }
.fs-sample p { margin: 0; }
.sample-label {
  display: block; font: 600 clamp(9px,1.6cqw,12px)/1.3 ui-monospace,monospace;
  text-transform: uppercase; letter-spacing: .07em;
}
.fs-sample-letter {
  background: radial-gradient(ellipse at 18% 15%,#efdecb,transparent 65%),linear-gradient(132deg,#d8c5b4,#a49a92);
}
.sample-letter {
  position:absolute; left:10%; top:9%; width:79%; min-height:89%;
  padding:5% 7%; transform:rotate(-3deg); background:#fffaf0;
  border:1px solid #fff; color:#38382f;
  box-shadow:2px 3px 0 #d8cfc0,4px 5px 0 #f4e9d9,12px 16px 24px #4d403437;
}
.sample-letter-title { display:block; font-size:clamp(19px,5.1cqw,40px); line-height:1.15; margin:2% 0 4%; }
.sample-letter p {font: 400 clamp(11px,2.4cqw,17px)/1.48 Georgia,serif;}
.sample-subject {display:block; font-size:clamp(10px,1.9cqw,14px); line-height:1.3; margin-bottom:3%; color:#78583a;}
.sample-subject[hidden] { display:none; }
.sample-switch {
  position:absolute; bottom:4%; right:3%; padding:4px 9px;
  display:flex; align-items:center; gap:6px; border-radius:4px; min-height:30px;
  background:#383e35; color:#fffdf2; cursor:pointer; font-size:clamp(10px,2cqw,14px);
}
.sample-switch input {accent-color:#cfdebd; width:15px; height:15px; margin:0;}
.sample-switch:focus-within { outline:3px solid #242a69; outline-offset:2px;}
.fs-sample-source { display:grid; place-items:center; background:radial-gradient(ellipse at 25% 0%,#e2e8d3,transparent 60%),#adbcb0; }
.sample-book {
  display:grid; grid-template-columns:1fr 1fr; width:91%; height:74%; color:#334539;
  transform:perspective(700px) rotateY(-4deg) rotateZ(-1deg);
  box-shadow:1px 3px #c3bda8,3px 5px #e3dfd0,6px 12px 20px #27362a3b;
}
.sample-book section { min-width:0; padding:9% 8%; background:linear-gradient(90deg,#faf7e9 88%,#d8d4c5 100%); }
.sample-book section + section { background:linear-gradient(90deg,#d5d9c5,#eef1d9 7%,#f1f2dc 90%,#e3e6d0); }
.sample-book strong { display:block; font-size:clamp(16px,3.8cqw,29px);line-height:1.06;margin:8% 0 6%;}
.sample-book p {font:400 clamp(11px,2.3cqw,16px)/1.4 Georgia,serif;}
.sample-book mark {background:#e7d99d; color:inherit;}
.sample-link {display:block;font-size:11px;line-height:1.3;margin-top:4%;color:#62735a;}
.fs-sample-walk {background:#eae6d6;}
.fs-sample-walk canvas {width:100%;height:100%;position:absolute;inset:0;}
.sample-route {
  position:absolute; left:4%; top:9%; width:37%;padding:3% 3%;
  border-left:3px solid #42726a;background:#fffceeeb;
  box-shadow:2px 5px 12px #5a5b4720;
}
.sample-route strong {display:block;font-size:clamp(18px,4.1cqw,33px);line-height:1.1;margin:6% 0 11%;}
.sample-route > span:not(.sample-label){display:block;font-size:clamp(10px,1.94cqw,14px);line-height:1.5;}
.sample-key {display:inline-block;width:11px;border-top:2px solid #2c6c66;vertical-align:middle;margin-right:3px;}
.sample-key.road {border-top:2px dashed #936d57;}
.fs-sample-price {display:grid;place-items:center;background:linear-gradient(130deg,#dae3de,#acb9b8);}
.sample-chart {position:relative;width:86%;height:79%;padding:4% 5%;background:#fcfcf2;box-shadow:4px 10px 24px #23413d2e;}
.price-reference {position:absolute;top:34%;left:6%;width:86%; border-top:1px dashed #9e7155; }
.price-reference span {position:absolute;bottom:3px;right:0;color:#8e6147;font-size:clamp(10px,2cqw,14px);}
.sample-chart canvas {position:absolute;top:42%;left:6%;width:86%;height:38%;}
.price-observed {position:absolute;left:8%;top:41%;color:#23635d;font-size:clamp(10px,2cqw,14px);}
.sample-axis {position:absolute;bottom:8%;left:6%;width:86%;border-top:1px solid #b4bdb3;display:flex;justify-content:space-between;font-size:clamp(9px,1.9cqw,13px);color:#647465;}
.fs-sample-lesson {background:linear-gradient(130deg,#e4d5b3,#b3b1a9);}
.sample-light-study {position:absolute;inset:0;}
.lesson-sphere,.lesson-shadow,.lesson-source {position:absolute;display:block;}
.lesson-sphere {left:54%;top:23%;width:24%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 27% 24%,#fff7df 0%,#ebd8b4 18%,#cfb98f 38%,#8a867a 68%,#52616b 91%,#38495a);box-shadow:inset -1px -1px 5px #6e73641a;}
.lesson-shadow {left:61%;top:61%;width:36%;height:11%;border-radius:50%;background:linear-gradient(to right,#4c4c4877,#4c4c4811);filter:blur(4px);transform:rotate(8deg);}
.lesson-source {left:29%;top:18%;width:43%;height:40%;opacity:.63;background:linear-gradient(120deg,#fff4b677,transparent 75%);clip-path:polygon(0 0,100% 26%,75% 100%);}
.sample-lesson-title {position:absolute;left:6%;top:20%;width:39%;color:#443d32;}
.sample-lesson-title strong {display:block;font-size:clamp(26px,6.5cqw,52px);line-height:1;margin:8% 0 8%;}
.sample-lesson-title p {font-size:clamp(12px,2.5cqw,18px);line-height:1.4;}
@container (max-width: 360px) {
  .sample-book {height:85%;}
  .sample-book section {padding:8% 7%;}
  .sample-letter {top:3%;left:6%;width:86%;padding:3% 6% 14%;}
  .sample-letter-title {margin:2% 0;}
  .sample-letter p {font-size:10px;line-height:1.25;}
  .sample-switch {bottom:2%;min-height:25px;padding:2px 7px;}
  .sample-route {width:47%;top:7%;padding:3% 2%;}
  .sample-route strong {font-size:18px;margin:4% 0 5%;}
  .sample-route > span:not(.sample-label) {font-size:9px;}
}