.sound-story{height:390svh;position:relative;background:#e9e7dd;isolation:isolate;margin-top:30px}.craft-stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;background:radial-gradient(ellipse at 70% 45%,#f4efe1 0%,#e7e5da 54%,#d8dacf 100%)}.craft-top{position:absolute;top:38px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;z-index:4;gap:20px}.craft-top>span{font-size:11px;letter-spacing:1.6px}.craft-top>a{font-size:12px;border-bottom:1px solid #888a784f;padding-bottom:5px}.craft-word{position:absolute;top:17%;left:33%;font-size:clamp(140px,21vw,350px);font-weight:600;letter-spacing:-.08em;line-height:1;color:#7b7d6814;pointer-events:none;user-select:none}.craft-visual{position:absolute;inset:0 0 0 29%;z-index:2;pointer-events:none}.craft-visual canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .8s}.craft-ready .craft-visual canvas{opacity:1}.craft-fallback{position:absolute;inset:16% 13%;width:74%;height:68%;object-fit:contain;mix-blend-mode:multiply;opacity:1;transition:opacity .6s}.craft-ready .craft-fallback{opacity:0}.craft-copy{position:absolute;left:6%;top:30%;width:31%;max-width:440px;z-index:3}.craft-count{display:flex;align-items:center;gap:12px;margin-bottom:23px;font-size:11px;letter-spacing:1px;color:#666955}.craft-count:before{content:'';height:1px;width:35px;background:#ad6144}.craft-copy h2{font-size:clamp(38px,4.5vw,69px);line-height:1.07;letter-spacing:-2.8px;margin:0 0 26px}.craft-copy h2 em{color:#a65437}.craft-copy p{max-width:310px;color:#686c5c;font-size:16px;line-height:1.85;margin:0}.craft-description{transition:opacity .2s,transform .2s}.craft-description.changing{opacity:0;transform:translateY(8px)}.craft-caption{position:absolute;right:6%;bottom:135px;text-align:right;z-index:3;font-size:10px;letter-spacing:1.5px;line-height:1.8;color:#666955}.craft-controls{position:absolute;bottom:42px;left:6%;right:6%;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.craft-tabs{display:flex;gap:26px}.craft-tab{background:none;border:0;border-top:2px solid #89907b40;padding:15px 0 0;text-align:left;color:#737a65;font-size:12px;min-width:105px;transition:color .25s,border-color .25s}.craft-tab span{display:inline-block;margin-right:12px;font-size:10px}.craft-tab[aria-pressed=true]{border-color:#ae5b3d;color:#2a3023}.craft-hint{font-size:11px;display:flex;align-items:center;gap:12px;color:#626956}.craft-mouse{width:18px;height:27px;border:1px solid #7d856e;border-radius:12px;position:relative}.craft-mouse:after{content:'';position:absolute;left:7px;top:5px;width:2px;height:6px;background:#7d856e;border-radius:2px;animation:scroll-hint 2s infinite}.craft-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:#7d856e22;z-index:5}.craft-progress span{display:block;width:100%;height:100%;background:#ac5c3f;transform:scaleX(0);transform-origin:left;will-change:transform}.craft-sr-description{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}@keyframes scroll-hint{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}}
@media(max-width:800px){.sound-story{height:340svh}.craft-stage{min-height:650px}.craft-top{top:26px;left:6%;right:6%}.craft-top>span{font-size:9px;letter-spacing:1px}.craft-top>a{font-size:11px}.craft-copy{left:7%;top:13%;width:86%;max-width:unset}.craft-count{font-size:9px;margin-bottom:14px}.craft-copy h2{font-size:clamp(35px,8vw,49px);letter-spacing:-1.8px;line-height:1.07;margin-bottom:15px}.craft-copy h2 br{display:none}.craft-copy p{font-size:14px;line-height:1.75;max-width:340px}.craft-visual{inset:27% -6% 7%;}.craft-word{top:43%;left:0%;font-size:30vw;letter-spacing:-.08em}.craft-caption{display:none}.craft-controls{bottom:28px;left:7%;right:7%}.craft-tabs{width:100%;gap:14px;justify-content:space-between}.craft-tab{flex:1;min-width:0;font-size:11px;padding-top:12px;white-space:nowrap}.craft-tab span{margin-right:6px;font-size:9px}.craft-hint{display:none}.craft-fallback{inset:10% 20%;width:60%;height:80%}}
@media(max-width:380px){.craft-tab{font-size:10px}.craft-copy p{font-size:13px}.craft-copy h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.sound-story{height:auto}.craft-stage{height:850px}.craft-description,.craft-visual canvas{transition:none}.craft-hint{display:none}.craft-mouse:after{animation:none}}
.craft-visual canvas{mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 100%)}
.craft-stage:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,#e9e7dd 0%,transparent 12%,transparent 80%,#e1e2d6 100%)}
.craft-caption{background:#ecebddb8;padding:10px 13px;backdrop-filter:blur(12px);color:#505741}
.craft-controls:before{content:'';position:absolute;inset:-22px -8vw -42px;background:linear-gradient(transparent,#e1e2d6 62%);z-index:-1;pointer-events:none}
.craft-unavailable{height:100svh;min-height:750px}
@media(max-width:800px){.craft-visual canvas{mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 90%,transparent 100%)}.craft-stage:after{background:linear-gradient(to bottom,#e9e7dd 0%,transparent 20%,transparent 80%,#e1e2d6 100%)}.craft-controls:before{bottom:-28px}.craft-top{z-index:4}}
@media(max-width:800px){.craft-copy h2 br{display:block}.craft-visual{inset:34% -6% 10%}.craft-copy h2{font-size:35px;line-height:1.1}.craft-copy p{max-width:325px}}
@media(max-width:380px){.craft-copy h2{font-size:33px}.craft-copy p{font-size:13px}}