.gg-wrap{max-width:1280px;margin:0 auto}.gg-toolbar{position:sticky;top:0;z-index:10;display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-8) 0 var(--space-16);margin-bottom:var(--space-16);background:var(--color-bg-gray)}.gg-search{max-width:32rem}.gg-nav{display:flex;flex-wrap:wrap;gap:.35rem}@media(max-width:600px){.gg-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}.gg-nav a{flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .7rem;font-size:var(--font-size-xs);color:var(--color-text-sub);text-decoration:none;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.gg-nav a span{font-family:var(--font-mono);color:var(--color-text-muted)}.gg-nav a:hover{border-color:var(--color-primary);color:var(--color-text)}.gg-group{margin-bottom:var(--space-48);scroll-margin-top:7rem}.gg-group[hidden]{display:none}.gg-lead{margin:calc(var(--space-8) * -1) 0 var(--space-16);font-size:var(--font-size-s);color:var(--color-text-sub)}.gg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-16)}@media(max-width:400px){.gg-grid{grid-template-columns:1fr}}.gg-card{display:flex;flex-direction:column;overflow:hidden;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);scroll-margin-top:8rem}.gg-card[hidden]{display:none}.gg-stage{position:relative;aspect-ratio:4/3;background:#f5f7fb;border-bottom:1px solid var(--color-border)}.gg-frame{display:block;width:100%;height:100%;border:0}.gg-stage-hint{position:absolute;left:var(--space-8);bottom:var(--space-8);display:inline-flex;align-items:center;gap:.2rem;padding:.15rem .5rem .15rem .35rem;font-size:var(--font-size-xs);color:var(--color-white);background:#113275cc;border-radius:var(--radius-sm);pointer-events:none}.gg-stage-hint .material-symbols-outlined{font-size:1rem}.gg-replay{position:absolute;top:var(--space-8);right:var(--space-8);display:inline-grid;place-items:center;width:2rem;height:2rem;color:var(--color-primary);background:var(--color-white);border:1px solid var(--color-border);border-radius:50%;cursor:pointer;opacity:.85;transition:opacity var(--transition) var(--ease-out),border-color var(--transition) var(--ease-out)}.gg-replay:hover{opacity:1;border-color:var(--color-primary)}.gg-replay .material-symbols-outlined{font-size:1.2rem}.gg-body{display:flex;flex:1;flex-direction:column;padding:var(--space-16)}.gg-title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}.gg-desc{margin:var(--space-8) 0 var(--space-16);font-size:var(--font-size-xs);line-height:var(--line-height-base);color:var(--color-text-sub)}.gg-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);margin-top:auto}.gg-tags{display:flex;flex-wrap:wrap;gap:.25rem}.gg-trigger.is-scroll{background:var(--studio-ok-bg);color:var(--studio-ok)}.gg-trigger.is-hover,.gg-trigger.is-click{background:var(--studio-warn-bg);color:var(--studio-warn)}.gg-open{flex-shrink:0;padding:var(--space-4) var(--space-12)}.gg-code{position:relative;margin-bottom:var(--space-16)}.gg-code pre{max-height:28rem;overflow:auto;padding:var(--space-16);font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:var(--line-height-base);border-radius:var(--radius-sm);-moz-tab-size:2;-o-tab-size:2;tab-size:2}.gg-code.is-modal{margin-bottom:0}.gg-pre{max-height:50vh;overflow:auto;padding:var(--space-48) var(--space-16) var(--space-16);font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:var(--line-height-base);color:var(--color-white);background:var(--color-primary);border-radius:var(--radius-sm);-moz-tab-size:2;-o-tab-size:2;tab-size:2}.gg-guide{margin-top:var(--space-16)}.gg-guide p{margin-bottom:var(--space-16);font-size:var(--font-size-s)}.gg-guide code:not(pre code){padding:.1em .35em;font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-gray);border-radius:var(--radius-sm)}.gg-guide-title{margin:var(--space-32) 0 var(--space-8);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-primary)}.gg-guide-title:first-of-type{margin-top:0}.gg-modal{width:min(960px,100% - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;color:var(--color-text);background:var(--color-white);border:0;border-radius:var(--radius-md);box-shadow:var(--shadow-lg, 0 20px 40px rgba(0, 0, 0, .2))}.gg-modal::backdrop{background:#0f172a99}.gg-modal-inner{padding:var(--space-24)}@media(max-width:600px){.gg-modal-inner{padding:var(--space-16)}}.gg-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-16);margin-bottom:var(--space-16)}.gg-modal-title{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight)}.gg-modal-close{display:inline-grid;place-items:center;flex-shrink:0;width:2.25rem;height:2.25rem;color:var(--color-text);background:var(--color-bg-gray);border:0;border-radius:50%;cursor:pointer}.gg-modal-close:hover{color:var(--color-white);background:var(--color-primary)}.gg-modal-stage{position:relative;height:min(420px,45vh);margin-bottom:var(--space-16);overflow:hidden;background:#f5f7fb;border:1px solid var(--color-border);border-radius:var(--radius-sm)}.gg-modal-tip{margin-bottom:var(--space-16);padding:var(--space-12) var(--space-16);font-size:var(--font-size-xs);line-height:var(--line-height-relaxed);background:var(--color-bg-blue);border-radius:var(--radius-sm)}.gg-tabs{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-8)}.gg-tabs .tab-btn{padding:var(--space-4) var(--space-12);font-size:var(--font-size-xs)}.gg-code .copy-button{z-index:1}