.x-guide{border:1px solid #bdd0a4;border-radius:8px;overflow:hidden;background:#eaf1df}.x-guide-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#173022}.x-guide-tabs button{background:none;color:#88a477;padding:13px 10px;font-size:8px;text-align:left;border-right:1px solid #78946533}.x-guide-tabs button:last-child{border:0}.x-guide-tabs button.active{background:#dceac7;color:#3d5b30}.x-guide-main{display:grid;grid-template-columns:1.05fr 1fr;min-height:280px}.x-guide-copy{padding:28px}.x-guide-copy>span{font-size:7px;letter-spacing:.12em;color:#789164}.x-guide-copy h4{font:400 29px/1.04 Georgia;color:#3b5730;letter-spacing:-.04em;margin:15px 0}.x-guide-copy>p{font-size:10px;line-height:1.8;color:#748967}.x-guide-copy>div{border-top:1px solid #c7d5b5;margin-top:19px;padding-top:15px}.x-guide-copy>div strong{font-size:8px;color:#64824f}.x-guide-copy>div p{font-size:9px;line-height:1.7;color:#879979;margin-top:8px}.x-guide-art{position:relative;display:grid;place-items:center;background:radial-gradient(circle,#d4e6af,#aabc83);overflow:hidden}.x-guide-art>span{position:absolute;width:210px;height:210px;border:1px solid #6f8b5660;border-radius:50%;box-shadow:0 0 0 21px #fff1,0 0 0 22px #75915c44}.x-guide-art img{width:92%;height:155px;object-fit:contain;z-index:1;filter:drop-shadow(0 17px 9px #31462235)}.x-guide-art small{position:absolute;left:15px;bottom:13px;font-size:6px;letter-spacing:.1em;color:#5a7546;z-index:2}.x-guide-journey{--guide-progress:0%;display:grid;grid-template-columns:1fr 1.3fr auto;gap:18px;align-items:center;padding:18px 22px;border-top:1px solid #c9d7b8;background:linear-gradient(90deg,#d5e7b7 var(--guide-progress),#edf3e4 var(--guide-progress))}.x-guide-journey>div{display:grid;grid-template-columns:auto 1fr;gap:4px 10px}.x-guide-journey span{font-size:7px;color:#7f956d}.x-guide-journey strong{font-size:11px;color:#4d6b3d}.x-guide-journey small{grid-column:2;font-size:8px;color:#839675}.x-guide-journey input{width:100%;accent-color:#557b3e}.x-guide-journey a{font-size:8px;color:#587742;border-bottom:1px solid #9ab581;padding-bottom:5px;white-space:nowrap}
@media(max-width:640px){.x-guide-main{grid-template-columns:1fr}.x-guide-copy{padding:22px 18px}.x-guide-art{min-height:190px}.x-guide-art img{height:120px}.x-guide-journey{grid-template-columns:1fr}.x-guide-journey a{justify-self:start}}
.x-structure{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid #afc5a0;border-radius:8px;overflow:hidden}.x-structure-canvas{position:relative;background:#0b281e;min-height:320px;cursor:ns-resize;touch-action:none}.x-structure-canvas svg{width:100%;height:310px}.x-frame-grid{fill:none;stroke:#234238;stroke-width:1}.x-structure-canvas [data-x-part]{fill:none;stroke:#7ecf9b;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:.38;cursor:pointer}.x-structure-canvas [data-x-part].active,.x-structure-canvas [data-x-part]:hover{opacity:1;filter:drop-shadow(0 0 6px #b1ffba)}.x-structure-canvas [data-x-part=posts]{stroke:#6f9482}.x-structure-canvas>span{position:absolute;top:14px;right:16px;font-size:7px;letter-spacing:.1em;color:#9abda6}.x-structure-range{grid-column:1;display:flex;align-items:center;gap:12px;background:#17382b;color:#9db9a6;padding:13px 16px;font-size:8px}.x-structure-range input{flex:1;accent-color:#83d29e}.x-structure-range output{color:#a5efb7}.x-structure-copy{grid-column:2;grid-row:1/3;background:#edf3e7;padding:23px}.x-structure-copy select{width:100%;padding:10px;border:1px solid #c9d9ba;background:#fff;color:#4f7048;border-radius:4px;font-size:9px}.x-structure-copy h4{font:26px Georgia;color:#3c5b35;margin:25px 0 12px}.x-structure-copy p{font-size:9px;line-height:1.8;color:#75896d}.x-structure-copy strong{display:block;border-top:1px solid #cbd8c0;padding-top:15px;margin-top:18px;font-size:7px;letter-spacing:.12em;color:#5a7e4d}
.x-transport-reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:13px calc(50% - 145px) 20px;border:1px solid #afc8a2;background:#edf3e8;cursor:grab;touch-action:pan-x pan-y;scrollbar-color:#7ea765 #dfe9d5}.x-transport-reel button{flex:0 0 290px;scroll-snap-align:center;text-align:left;padding:21px;border-radius:8px;background:#dce8d5;color:#58744f;transition:.3s;min-height:235px}.x-transport-reel button.active{background:#173126;color:#d9edc9;transform:translateY(-5px)}.x-transport-reel button>span{font-size:6px;letter-spacing:.12em;opacity:.7}.x-transport-reel button strong{display:block;font:22px Georgia;margin-top:13px}.x-transport-reel svg{width:100%;height:105px;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;margin-top:9px}.x-transport-reel button small{font-size:8px;line-height:1.6;opacity:.75}.x-transport-readout{display:grid;grid-template-columns:65px 1fr 1.7fr;align-items:center;gap:15px;padding:16px 19px;background:#f3f7ed;border:1px solid #c5d4b8;border-top:0}.x-transport-readout span{font-size:7px;color:#6f925b}.x-transport-readout strong{font:18px Georgia;color:#47613f}.x-transport-readout p{font-size:8px;line-height:1.7;color:#819177}
.x-unfold{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid #b4c7a6;border-radius:8px;overflow:hidden}.x-unfold>div:first-child{background:#edf2e9}.x-unfold-canvas{position:relative;height:310px;cursor:ew-resize;touch-action:none}.x-unfold-canvas svg{width:100%;height:300px}.x-unfold-canvas g{fill:none;stroke:#648c73;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;transition:transform .08s linear,opacity .2s}.x-unfold-canvas #x-unfold-posts{stroke:#8ea99a}.x-unfold-canvas #x-unfold-shell{fill:#aacf9a44;stroke-width:4;opacity:0}.x-unfold-canvas>span{position:absolute;left:15px;top:13px;font-size:6px;letter-spacing:.1em;color:#69806d}.x-unfold-range{display:flex;align-items:center;gap:11px;padding:13px 16px;font-size:8px;color:#758875}.x-unfold-range input{flex:1;accent-color:#588545}.x-unfold-copy{background:#f7f9f3;padding:24px}.x-unfold-copy>span{font-size:7px;color:#6a8d57;letter-spacing:.12em}.x-unfold-copy h4{font:24px Georgia;color:#405d36;margin:17px 0}.x-unfold-copy strong{display:block;font-size:7px;letter-spacing:.1em;color:#5f814f;margin-top:17px}.x-unfold-copy p{font-size:9px;line-height:1.75;color:#7b8e73;margin-top:7px}
@media(max-width:640px){.x-structure,.x-unfold{grid-template-columns:1fr}.x-structure-copy{grid-column:1;grid-row:auto}.x-structure-canvas{min-height:250px}.x-structure-canvas svg{height:240px}.x-transport-reel{padding-inline:calc(50% - 120px)}.x-transport-reel button{flex-basis:240px;min-height:210px}.x-transport-readout{grid-template-columns:1fr}.x-unfold-canvas{height:230px}.x-unfold-canvas svg{height:220px}.x-unfold-copy{padding:20px}}