*{box-sizing:border-box}
:root .moss-structure{--guide-text:#edf4ff;--guide-muted:#aebed3;--guide-edge:#30445f}
:root[data-moss-theme="light"] .moss-structure{--guide-text:#172a43;--guide-muted:#455b75;--guide-edge:#b2cbe2}
:root .moss-structure main{padding-block:44px 70px}
.guide-intro{max-width:820px;margin-bottom:34px}.guide-back{display:block;color:var(--guide-muted);font-size:.8rem;margin-bottom:35px}.guide-intro h1{color:var(--guide-text);font-size:clamp(2.1rem,4.5vw,3.6rem);font-weight:650;line-height:1.15;letter-spacing:-.045em;margin:16px 0 22px}.guide-intro p,.guide-next p{color:var(--guide-muted);font-size:.92rem;max-width:700px}.wire-console{padding:24px;border:1px solid var(--guide-edge);border-radius:12px}.wire-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.wire-toolbar h2{font-size:1.1rem;font-weight:600;color:var(--guide-text);margin:0 0 4px}.wire-toolbar p{color:var(--guide-muted);font-size:.74rem;margin:0}.view-switch{display:flex;gap:7px;flex-shrink:0}.view-switch[hidden]{display:none}.view-switch button{font:600 .75rem/1.4 'Segoe UI',Arial,sans-serif;border:1px solid var(--guide-edge);background:transparent;color:var(--guide-text);border-radius:6px;padding:11px 13px;min-height:44px;cursor:pointer}.view-switch button[aria-pressed=true]{background:#174f79;border-color:#4d8ab7;color:white}.wire-page{max-width:1000px;margin-inline:auto;background:#fff;color:#263244;border:1px solid #9daaba;border-radius:8px;overflow:hidden}.wire-page[data-view=mobile]{max-width:390px}.wire-browser{display:flex;justify-content:space-between;gap:20px;padding:10px 16px;background:#e9edf3;color:#516175;font:.65rem/1.5 Consolas,monospace;border-bottom:1px solid #bac6d4}.wire-browser>span:first-child{letter-spacing:4px;color:#64748b}.wire-block{margin:18px;border:1px dashed #aab7c5;border-radius:5px}.wire-block details{border-bottom:1px solid #d6dee7;background:#f3f6fa}.wire-block summary{cursor:pointer;padding:12px 14px;color:#243d57;font-size:.8rem;font-weight:600;line-height:1.5;list-style-position:inside}.wire-block summary b{display:inline-block;margin-inline:4px 8px;font:600 .65rem/1.5 Consolas,monospace;color:#705019;background:#f7e8c5;border-radius:4px;padding:2px 5px}.wire-block details p{font-size:.78rem;color:#435369;margin:0;padding:0 18px 16px;line-height:1.7}.wire-block summary:focus-visible{outline:3px solid #08729b;outline-offset:3px}.mock{padding:22px;pointer-events:none;min-width:0}.mock-header,.mock-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.mock-logo{font-size:.65rem;padding:12px 20px;border:1px dashed #95a5b7;color:#546779;background:#f3f5f8}.mock-nav{display:flex;gap:12px}.mock-nav span{width:50px;height:8px;background:#cbd4df;border-radius:3px}.mock-button{display:inline-block;margin-top:12px;background:#d4dde8;border:1px solid #a3b3c5;color:#384b61;border-radius:5px;padding:10px 13px;font:600 .6rem/1.5 'Segoe UI',sans-serif;max-width:100%}.mock-header .mock-button{margin:0}.mock-hero,.mock-about,.mock-contact{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.skeleton{height:7px;border-radius:3px;background:#dbe2eb;margin-block:10px;width:100%}.skeleton.short{width:40%}.skeleton.medium{width:70%}.skeleton.title{height:16px;margin-block:12px}.placeholder{border:1px dashed #9eafc2;min-height:120px;display:grid;place-items:center;color:#53687e;font:.6rem/1.4 Consolas,monospace;text-align:center;background:linear-gradient(35deg,transparent 49.7%,#c8d3df 49.9%,#c8d3df 50.1%,transparent 50.3%),linear-gradient(-35deg,transparent 49.7%,#c8d3df 49.9%,#c8d3df 50.1%,transparent 50.3%),#f0f3f7}.mock-cards,.mock-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.mock-cards>div{border:1px solid #d0d9e3;padding:10px;border-radius:4px}.mock-cards .placeholder{min-height:85px}.mock-gallery .placeholder{min-height:105px}.mock-about .placeholder{min-height:120px}.mock-fields>div{height:25px;margin-bottom:9px;background:#f0f3f7;border:1px solid #c1ccda;border-radius:3px}.mock-footer{background:#eef2f6;font-size:.55rem;color:#516175}.wire-page[data-view=mobile] .mock{padding:15px}.wire-page[data-view=mobile] .mock-nav{display:none}.wire-page[data-view=mobile] .mock-hero,.wire-page[data-view=mobile] .mock-about,.wire-page[data-view=mobile] .mock-contact{grid-template-columns:1fr;gap:14px}.wire-page[data-view=mobile] .mock-cards,.wire-page[data-view=mobile] .mock-gallery{grid-template-columns:1fr}.wire-page[data-view=mobile] .mock-hero>.placeholder{grid-row:1}.wire-page[data-view=mobile] .wire-block{margin:12px}.guide-note{color:var(--guide-muted);font-size:.76rem;margin:18px 0 0}.guide-next{margin-top:50px;max-width:780px}.guide-next h2{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:600;line-height:1.25;color:var(--guide-text);letter-spacing:-.035em}.guide-next>div{display:flex;flex-wrap:wrap;gap:15px 25px}.guide-next a,.moss-structure footer a{color:var(--navy);font-size:.83rem;text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){.wire-toolbar{align-items:flex-start;flex-direction:column}.wire-console{padding:16px}.mock-nav{display:none}.mock{padding:14px}.mock-hero,.mock-about,.mock-contact{gap:14px}.mock-header{gap:8px}.mock-logo{padding:9px 12px}.mock-header .mock-button{font-size:.5rem;padding:8px}.wire-block{margin:12px}.guide-intro h1 br{display:none}}
@media(max-width:400px){.wire-console{padding:10px}.mock-cards,.mock-gallery{grid-template-columns:1fr}.mock-hero,.mock-about,.mock-contact{grid-template-columns:1fr}.wire-browser{gap:10px;padding:9px}.wire-block summary{padding:10px}.wire-block details p{padding-inline:12px}}