.guide-section{padding-block:var(--space-12);background:var(--bg-page)}@media(min-width:768px){.guide-section{padding-block:var(--space-16)}}.guide-section-inner{max-inline-size:var(--container-max);margin-inline:auto;padding-inline:var(--space-4)}.guide-back{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--color-text-muted);min-block-size:44px;transition:color var(--dur-fast) var(--ease-standard)}.guide-back:hover{color:var(--color-green-700)}.guide-section-head{margin-block:var(--space-2) var(--space-8);text-align:center}.guide-section-title{color:var(--color-ink)}.guide-section-intro{color:var(--color-text);max-inline-size:62ch;margin-inline:auto;margin-block-start:var(--space-4)}.guide-section-note{color:var(--color-text-muted);max-inline-size:62ch;margin-inline:auto;margin-block-start:var(--space-3)}.guide{display:flex;flex-direction:column;gap:var(--space-6)}.guide-roles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}@media(min-width:768px){.guide-roles{grid-template-columns:repeat(4,1fr)}}.guide-role{display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start;text-align:start;padding:var(--space-3) var(--space-4);min-block-size:44px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-page);color:var(--color-text);cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}.guide-role:hover{border-color:var(--border-strong);background:var(--bg-soft);transform:translateY(-2px)}.guide-role.is-active{border-color:var(--color-green);background:var(--bg-hero-tint)}.guide-role-name{color:var(--color-ink)}.guide-role.is-active .guide-role-name{color:var(--color-green-700)}.guide-role-summary{color:var(--color-text-muted)}.guide-role-value{color:var(--color-text);text-align:center;max-inline-size:70ch;margin-inline:auto}.guide-frame{position:relative;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-page);box-shadow:var(--shadow-md);overflow:hidden}.guide-frame-bar{display:flex;align-items:center;gap:var(--space-3);padding-inline:var(--space-4);padding-block:var(--space-3);background:var(--bg-soft);border-block-end:1px solid var(--border)}.guide-frame-dots{display:inline-flex;gap:6px}.guide-frame-dot{inline-size:10px;block-size:10px;border-radius:var(--radius-pill);background:var(--border-strong)}.guide-frame-title{color:var(--color-ink)}.guide-frame-body{position:relative}@media(min-width:768px){.guide-frame-body{display:grid;grid-template-columns:232px 1fr;align-items:stretch}}.guide-screens{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-3);border-block-end:1px solid var(--border)}@media(min-width:768px){.guide-screens{flex-direction:column;gap:var(--space-1);overflow-x:visible;overflow-y:auto;max-block-size:540px;border-block-end:none;border-inline-end:1px solid var(--border)}}.guide-screen-tab{display:inline-flex;align-items:center;gap:var(--space-2);inline-size:auto;text-align:start;padding:var(--space-2) var(--space-3);min-block-size:44px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--color-text);cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}@media(min-width:768px){.guide-screen-tab{inline-size:100%;justify-content:space-between;white-space:normal}}.guide-screen-tab:hover{background:var(--bg-soft);color:var(--color-ink)}.guide-screen-tab.is-active{background:var(--bg-hero-tint);border-color:var(--color-green);color:var(--color-ink)}.guide-screen-pill{color:var(--color-green-700);background:var(--bg-page);border:1px solid var(--border);border-radius:var(--radius-pill);padding-block:1px;padding-inline:var(--space-2);white-space:nowrap;flex-shrink:0}.guide-canvas{padding:var(--space-6)}.guide-canvas-head{margin-block-end:var(--space-6)}.guide-screen-name{color:var(--color-ink)}.guide-screen-summary{color:var(--color-text);margin-block-start:var(--space-2);max-inline-size:60ch}.guide-hotspots{display:grid;grid-template-columns:1fr;gap:var(--space-3)}@media(min-width:560px){.guide-hotspots{grid-template-columns:repeat(2,1fr)}}.guide-hotspot{display:flex;align-items:center;gap:var(--space-3);inline-size:100%;text-align:start;padding:var(--space-3) var(--space-4);min-block-size:44px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-page);color:var(--color-ink);cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}.guide-hotspot:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--border-strong)}.guide-hotspot-nested{background:var(--bg-subtle)}.guide-hotspot-type{flex-shrink:0;color:var(--color-text-muted);background:var(--bg-soft);border-radius:var(--radius-pill);padding-block:2px;padding-inline:var(--space-2);text-align:center}.guide-hotspot-label{flex:1;color:var(--color-ink)}.guide-hotspot-module{flex-shrink:0;color:var(--color-green-700);background:var(--bg-hero-tint);border-radius:var(--radius-pill);padding-block:2px;padding-inline:var(--space-2);white-space:nowrap}.guide-hotspot-more{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;color:var(--color-green-700)}.guide-scrim{position:absolute;inset:0;z-index:5;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard)}.guide-scrim.is-open{opacity:1;pointer-events:auto}@media(max-width:767px){.guide-scrim{position:fixed}}.guide-detail{position:absolute;inset-block:0;inset-inline-end:0;z-index:6;inline-size:min(384px,72%);display:flex;flex-direction:column;background:var(--bg-page);border-inline-start:1px solid var(--border);box-shadow:var(--shadow-md);transform:translateY(10px);opacity:0;pointer-events:none;transition:transform var(--dur-base) var(--ease-spring),opacity var(--dur-base) var(--ease-standard)}.guide-detail.is-open{transform:none;opacity:1;pointer-events:auto}@media(max-width:767px){.guide-detail{position:fixed;inset-block:auto 0;inset-inline:0;inline-size:auto;max-block-size:86dvh;border-inline-start:none;border-start-start-radius:var(--radius-xl);border-start-end-radius:var(--radius-xl);transform:translateY(100%);opacity:1;transition:transform var(--dur-slow) var(--ease-spring)}.guide-detail.is-open{transform:translateY(0)}}.guide-detail-grab{flex-shrink:0}.guide-detail-handle{display:none}@media(max-width:767px){.guide-detail-grab{touch-action:none;cursor:grab}.guide-detail-handle{display:block;inline-size:40px;block-size:4px;border-radius:var(--radius-pill);background:var(--border-strong);margin-block:var(--space-3) var(--space-1);margin-inline:auto}}.guide-detail-bar{display:flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-2);padding-block:var(--space-2);border-block-end:1px solid var(--border)}.guide-detail-iconbtn{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;flex-shrink:0;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--color-text);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}.guide-detail-iconbtn:hover{background:var(--bg-soft);color:var(--color-ink)}.guide-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;flex:1;min-inline-size:0}.guide-crumb-group{display:inline-flex;align-items:center;gap:2px}.guide-crumb{background:transparent;border:none;padding-block:2px;padding-inline:var(--space-1);border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;transition:color var(--dur-fast) var(--ease-standard)}.guide-crumb:hover{color:var(--color-green-700)}.guide-crumb-current{padding-block:2px;padding-inline:var(--space-1);color:var(--color-ink);font-weight:var(--weight-small)}.guide-crumb-sep{color:var(--color-text-muted);flex-shrink:0}.guide-detail-body{padding-block:var(--space-5) var(--space-8);padding-inline:var(--space-6);overflow-y:auto}.guide-detail-type{display:inline-block;color:var(--color-green-700);background:var(--bg-hero-tint);border-radius:var(--radius-pill);padding-block:2px;padding-inline:var(--space-3);margin-block-end:var(--space-3)}.guide-detail-title{color:var(--color-ink);margin-block-end:var(--space-3)}.guide-detail-explain{color:var(--color-text);margin-block-end:var(--space-6)}.guide-children-head{color:var(--color-text-muted);margin-block-end:var(--space-3)}.guide-children{display:flex;flex-direction:column;gap:var(--space-2)}