.nextjs-example .nextjs-project{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr)}.nextjs-example .nextjs-files{display:flex;flex-direction:column;padding:var(--cf-space-200) 0;border-right:1px solid var(--cf-color-border);background:var(--cf-color-surface-raised);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275);line-height:var(--cf-line-height-150)}.nextjs-example .nextjs-folder{color:var(--cf-color-text-tertiary)}.nextjs-example .nextjs-file,.nextjs-example .nextjs-folder{padding-block:var(--cf-space-100);-webkit-padding-end:var(--cf-space-250);padding-inline-end:var(--cf-space-250)}.nextjs-example .nextjs-file{display:flex;align-items:baseline;justify-content:space-between;gap:var(--cf-space-200);width:100%;border:0;border-left:2px solid rgba(0,0,0,0);background:none;color:var(--cf-color-text-secondary);font:inherit;text-align:left;cursor:pointer}.nextjs-example .nextjs-file:hover{background:var(--cf-color-surface-hover);color:var(--cf-color-text)}.nextjs-example .nextjs-file[aria-current=true]{border-left-color:var(--cf-color-primary-solid);background:var(--cf-color-code-bg);color:var(--cf-color-text-strong)}.nextjs-example .nextjs-file.is-base:not([aria-current=true]){color:var(--cf-color-text-tertiary)}.nextjs-example .nextjs-file:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:-2px}.nextjs-example .nextjs-file-note{color:var(--cf-color-text-muted);font-family:var(--cf-font-sans);font-size:var(--cf-font-size-225);white-space:nowrap}.nextjs-example .nextjs-code{min-width:0}.nextjs-example .nextjs-code pre{max-height:480px;overflow:auto}.nextjs-example .nextjs-binary-file{padding:var(--cf-space-300) var(--cf-space-350)}.nextjs-example .nextjs-binary-file img{display:block;max-width:100%;height:auto;border-radius:var(--cf-radius-100)}.nextjs-example .nextjs-code-path{display:flex;justify-content:space-between;gap:var(--cf-space-250);padding:var(--cf-space-150) var(--cf-space-350);border-bottom:1px solid var(--cf-color-border);color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-225)}.nextjs-example .nextjs-code-path code{padding:0;background:none;color:var(--cf-color-text-secondary);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-250)}.nextjs-example .nextjs-result{border-top:1px solid var(--cf-color-border)}.nextjs-example .nextjs-result-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--cf-space-300);padding:0 var(--cf-space-350);border-bottom:1px solid var(--cf-color-border);background:var(--cf-color-surface-raised)}.nextjs-example .nextjs-result-tabs{display:flex;gap:var(--cf-space-100)}.nextjs-example .nextjs-result-tabs button{margin-bottom:-1px;padding:var(--cf-space-200) var(--cf-space-250);border:0;border-bottom:2px solid rgba(0,0,0,0);background:none;color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-275);font-weight:var(--cf-font-weight-semibold);cursor:pointer}.nextjs-example .nextjs-result-tabs button:hover{color:var(--cf-color-text)}.nextjs-example .nextjs-result-tabs button[aria-selected=true]{border-bottom-color:var(--cf-color-primary-solid);color:var(--cf-color-text-strong)}.nextjs-example .nextjs-result-tabs button:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:-2px}.nextjs-example .nextjs-recorded{padding-block:var(--cf-space-150);color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-225)}.nextjs-example .nextjs-result-body{padding:var(--cf-space-350);background:var(--cf-color-surface)}.nextjs-example .nextjs-requests{display:flex;flex-wrap:wrap;gap:var(--cf-space-150);margin-bottom:var(--cf-space-300)}.nextjs-example .nextjs-requests button{display:inline-flex;align-items:baseline;gap:var(--cf-space-150);padding:var(--cf-space-100) var(--cf-space-250);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-full);background:var(--cf-color-surface);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-250);cursor:pointer}.nextjs-example .nextjs-requests button code{padding:0;background:none;font-family:var(--cf-font-mono);font-size:inherit}.nextjs-example .nextjs-requests button:hover{border-color:var(--cf-color-border-hover);color:var(--cf-color-text)}.nextjs-example .nextjs-requests button[aria-pressed=true]{border-color:var(--cf-color-primary-border);background:var(--cf-color-primary-subtle);color:var(--cf-color-text-strong)}.nextjs-example .nextjs-requests button:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:2px}.nextjs-example .nextjs-window{overflow:hidden;border:1px solid var(--cf-color-border-strong);border-radius:var(--cf-radius-200);background:var(--cf-color-bg)}.nextjs-example .nextjs-window-bar{display:flex;align-items:center;gap:var(--cf-space-250);padding:var(--cf-space-150) var(--cf-space-300);border-bottom:1px solid var(--cf-color-border);background:var(--cf-color-surface-raised);font-size:var(--cf-font-size-250)}.nextjs-example .nextjs-window-dots{display:flex;gap:var(--cf-space-100)}.nextjs-example .nextjs-window-dots span{width:8px;height:8px;border-radius:var(--cf-radius-round);background:var(--cf-color-border-strong)}.nextjs-example .nextjs-address{flex:1 1;min-width:0;overflow:hidden;padding:var(--cf-space-050) var(--cf-space-250);border-radius:var(--cf-radius-full);background:var(--cf-color-surface-sunken);color:var(--cf-color-text-secondary);font-family:var(--cf-font-mono);text-overflow:ellipsis;white-space:nowrap}.nextjs-example .nextjs-page-title{max-width:35%;overflow:hidden;color:var(--cf-color-text-tertiary);text-overflow:ellipsis;white-space:nowrap}.nextjs-example .nextjs-page{padding:var(--cf-space-400) var(--cf-space-450);color:var(--cf-color-text);font-size:var(--cf-font-size-350);line-height:var(--cf-line-height-160);overflow-wrap:anywhere}.nextjs-example .nextjs-page blockquote,.nextjs-example .nextjs-page dl,.nextjs-example .nextjs-page figure,.nextjs-example .nextjs-page ol,.nextjs-example .nextjs-page p,.nextjs-example .nextjs-page pre,.nextjs-example .nextjs-page table,.nextjs-example .nextjs-page ul{margin:0 0 var(--cf-space-250)}.nextjs-example .nextjs-page ol,.nextjs-example .nextjs-page ul{padding-left:var(--cf-space-500)}.nextjs-example .nextjs-page li{margin:var(--cf-space-100) 0}.nextjs-example .nextjs-page b,.nextjs-example .nextjs-page strong{font-weight:var(--cf-font-weight-semibold)}.nextjs-example .nextjs-page code{font-family:var(--cf-font-mono)}.nextjs-example .nextjs-page.is-picture{padding:0}.nextjs-example .nextjs-screenshot{display:block;width:100%;height:auto}.nextjs-example .nextjs-image-answer{margin-bottom:var(--cf-space-250)}.nextjs-example .nextjs-image-answer img{display:block;max-width:100%;height:auto;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-100)}.nextjs-example .nextjs-stylesheets{margin:0;padding:0;list-style:none}.nextjs-example .nextjs-stylesheets li+li{margin-top:var(--cf-space-300)}.nextjs-example .nextjs-stylesheet-path{display:block;margin-bottom:var(--cf-space-150);font-size:var(--cf-font-size-275);overflow-wrap:anywhere}.nextjs-example .recorded-h1,.nextjs-example .recorded-h2,.nextjs-example .recorded-h3,.nextjs-example .recorded-h4,.nextjs-example .recorded-h5,.nextjs-example .recorded-h6{margin:0 0 var(--cf-space-250);color:var(--cf-color-text-strong);font-weight:var(--cf-font-weight-bold);line-height:var(--cf-line-height-130)}.nextjs-example .recorded-h1{font-size:var(--cf-font-size-600)}.nextjs-example .recorded-h2{font-size:var(--cf-font-size-500)}.nextjs-example .recorded-h3{font-size:var(--cf-font-size-400)}.nextjs-example .recorded-header,.nextjs-example .recorded-nav{margin-bottom:var(--cf-space-350);padding-bottom:var(--cf-space-200);border-bottom:1px solid var(--cf-color-border)}.nextjs-example .recorded-link{padding:0;border:0;background:none;color:var(--cf-color-primary);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.nextjs-example .recorded-link:hover{color:var(--cf-color-primary-hover)}.nextjs-example .recorded-link.is-inert,.nextjs-example .recorded-link.is-unrecorded{color:var(--cf-color-text-secondary);cursor:default}.nextjs-example .recorded-link.is-inert{color:var(--cf-color-primary)}.nextjs-example .recorded-link.is-current{color:var(--cf-color-text-strong);font-weight:var(--cf-font-weight-bold);text-decoration:none}.nextjs-example .recorded-button,.nextjs-example .recorded-input{display:inline-block;padding:var(--cf-space-050) var(--cf-space-250);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-raised);color:var(--cf-color-text);font-size:var(--cf-font-size-300);line-height:var(--cf-line-height-150)}.nextjs-example .recorded-image{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--cf-space-050);box-sizing:border-box;max-width:100%;min-height:var(--cf-space-1600);padding:var(--cf-space-200);border:1px dashed var(--cf-color-border-strong);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-sunken);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-275);text-align:center;vertical-align:middle}.nextjs-example .recorded-image-size{color:var(--cf-color-text-tertiary);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-250)}.nextjs-example .recorded-input{background:var(--cf-color-surface-input);color:var(--cf-color-text-secondary)}.nextjs-example .nextjs-note{margin:var(--cf-space-200) 0 0;color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-275)}.nextjs-example .nextjs-note code{margin-right:var(--cf-space-100)}.nextjs-example .nextjs-note a{color:inherit;text-decoration:underline}.nextjs-example pre.nextjs-source,.nextjs-example pre.nextjs-terminal{max-height:420px;margin:0;overflow:auto;padding:var(--cf-space-300) 0;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-150);background:var(--cf-color-code-bg);color:var(--cf-color-code-text);font-size:var(--cf-font-size-300);line-height:var(--cf-line-height-160)}.nextjs-example pre.nextjs-source:focus-visible,.nextjs-example pre.nextjs-terminal:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:-2px}.nextjs-example pre.nextjs-source{max-height:360px;padding-inline:var(--cf-space-350);font-size:var(--cf-font-size-275);white-space:pre}.nextjs-example pre.nextjs-source.is-body{white-space:pre-wrap;overflow-wrap:anywhere}.nextjs-example .nextjs-terminal-line{display:block;min-width:max-content;padding-inline:var(--cf-space-350);border-left:2px solid rgba(0,0,0,0);white-space:pre}.nextjs-example .nextjs-terminal-line.is-command{color:var(--cf-color-text-tertiary)}.nextjs-example .nextjs-terminal-line.is-marked{border-left-color:var(--cf-color-primary-solid);background:var(--cf-color-primary-subtle-hover)}.nextjs-example .nextjs-terminal-line.is-error{color:var(--cf-color-danger)}.nextjs-example .nextjs-terminal-line.is-added{color:var(--cf-color-success)}.nextjs-example .nextjs-terminal-line.is-removed{color:var(--cf-color-danger)}.nextjs-example .nextjs-request-line{display:flex;align-items:baseline;gap:var(--cf-space-250);margin:0 0 var(--cf-space-250)}.nextjs-example .nextjs-request-line code,.nextjs-example .nextjs-request-line span{font-family:var(--cf-font-mono);font-size:var(--cf-font-size-300)}.nextjs-example .nextjs-request-line span{color:var(--cf-color-success);font-weight:var(--cf-font-weight-semibold)}.nextjs-example .nextjs-label{margin:0 0 var(--cf-space-150);color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-250);font-weight:var(--cf-font-weight-semibold)}.nextjs-example .nextjs-headers{margin:0 0 var(--cf-space-350)}.nextjs-example .nextjs-headers dd{display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr);grid-gap:0 var(--cf-space-300);gap:0 var(--cf-space-300);margin:0;padding:var(--cf-space-100) 0;border-bottom:1px solid var(--cf-color-border);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275);overflow-wrap:anywhere}.nextjs-example .nextjs-headers code{padding:0;background:none;color:var(--cf-color-text-strong);font-size:inherit}.nextjs-example .nextjs-headers span{color:var(--cf-color-text-secondary)}.nextjs-example .nextjs-step-list{display:flex;flex-wrap:wrap;gap:var(--cf-space-150);margin:0 0 var(--cf-space-300);padding:0;list-style:none}.nextjs-example .nextjs-step-list button{display:inline-flex;align-items:baseline;gap:var(--cf-space-150);padding:var(--cf-space-100) var(--cf-space-250) var(--cf-space-100) var(--cf-space-100);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-full);background:var(--cf-color-surface);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-250);text-align:left;cursor:pointer}.nextjs-example .nextjs-step-list button:hover{border-color:var(--cf-color-border-hover);color:var(--cf-color-text)}.nextjs-example .nextjs-step-list button[aria-pressed=true]{border-color:var(--cf-color-primary-border);background:var(--cf-color-primary-subtle);color:var(--cf-color-text-strong)}.nextjs-example .nextjs-step-list button:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:2px}.nextjs-example .nextjs-step-number{min-width:var(--cf-space-450);padding:0 var(--cf-space-100);border-radius:var(--cf-radius-full);background:var(--cf-color-surface-sunken);color:var(--cf-color-text-tertiary);font-family:var(--cf-font-mono);text-align:center}.nextjs-example .nextjs-step-facts{display:flex;flex-wrap:wrap;gap:var(--cf-space-150) var(--cf-space-500);margin:var(--cf-space-300) 0;font-size:var(--cf-font-size-275)}.nextjs-example .nextjs-step-facts dt{color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-250);font-weight:var(--cf-font-weight-semibold)}.nextjs-example .nextjs-step-facts dd{margin:0;color:var(--cf-color-text)}.nextjs-example .nextjs-step-requests{max-height:420px;margin:0;overflow:auto;padding:0 var(--cf-space-350);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-150);background:var(--cf-color-code-bg);list-style:none}.nextjs-example .nextjs-step-requests li{padding:var(--cf-space-250) 0}.nextjs-example .nextjs-step-requests li+li{border-top:1px solid var(--cf-color-border)}.nextjs-example .nextjs-step-requests code{padding:0;border:0;border-radius:0;background:none;color:inherit;font-family:var(--cf-font-mono);font-size:inherit}.nextjs-example .nextjs-step-request-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cf-space-100) var(--cf-space-250);min-width:0;font-family:var(--cf-font-mono);font-size:var(--cf-font-size-300)}.nextjs-example .nextjs-step-request-line .nextjs-step-method{color:var(--cf-color-text-strong);font-weight:var(--cf-font-weight-semibold)}.nextjs-example .nextjs-step-request-line>.nextjs-long-text,.nextjs-example .nextjs-step-request-line>.nextjs-long-value{flex:0 1 auto;color:var(--cf-color-text-strong)}.nextjs-example .nextjs-step-status{color:var(--cf-color-success);font-weight:var(--cf-font-weight-semibold)}.nextjs-example .nextjs-step-type{color:var(--cf-color-text-tertiary);font-family:var(--cf-font-sans);font-size:var(--cf-font-size-250)}.nextjs-example .nextjs-step-headers{margin:var(--cf-space-200) 0 0}.nextjs-example .nextjs-step-headers>div{display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr);grid-gap:0 var(--cf-space-300);gap:0 var(--cf-space-300);padding:var(--cf-space-100) 0;border-top:1px solid var(--cf-color-border);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-275)}.nextjs-example .nextjs-step-headers dt{color:var(--cf-color-text-strong);overflow-wrap:anywhere}.nextjs-example .nextjs-step-headers dd{min-width:0;margin:0;color:var(--cf-color-text-secondary)}.nextjs-example .nextjs-long-value{display:flex;align-items:baseline;gap:var(--cf-space-200);min-width:0}.nextjs-example .nextjs-long-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.is-open>.nextjs-example .nextjs-long-text{overflow:visible;white-space:normal;overflow-wrap:anywhere}.nextjs-example .nextjs-show-all{flex:none;padding:0;border:0;background:none;color:var(--cf-color-primary);font-family:var(--cf-font-sans);font-size:var(--cf-font-size-250);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.nextjs-example .nextjs-show-all:hover{color:var(--cf-color-primary-hover)}.nextjs-example .nextjs-show-all:focus-visible{outline:2px solid var(--cf-color-focus-ring);outline-offset:2px}.nextjs-example .nextjs-step-errors{margin:0 0 var(--cf-space-250);padding:0;list-style:none}.nextjs-example .nextjs-step-errors li{padding-top:var(--cf-space-150);border-top:1px solid var(--cf-color-border)}.nextjs-example .nextjs-step-errors code{color:var(--cf-color-danger);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-250);overflow-wrap:anywhere}.nextjs-example .nextjs-step-console code{color:var(--cf-color-text-secondary);white-space:pre-wrap}.nextjs-example pre.nextjs-step-overlay{margin-bottom:var(--cf-space-250);padding-inline:var(--cf-space-350);white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:768px){.nextjs-example .nextjs-project{grid-template-columns:minmax(0,1fr)}.nextjs-example .nextjs-files{max-height:220px;overflow-y:auto;border-right:0;border-bottom:1px solid var(--cf-color-border)}}@media(max-width:560px){.nextjs-example .nextjs-files,.nextjs-example .nextjs-label,.nextjs-example .nextjs-note,.nextjs-example .nextjs-requests button,.nextjs-example .nextjs-result-tabs button,.nextjs-example .nextjs-step-facts,.nextjs-example .nextjs-step-list button,.nextjs-example .nextjs-window-bar{font-size:var(--cf-font-size-350)}.nextjs-example .nextjs-code-path code,.nextjs-example .nextjs-headers dd,.nextjs-example pre.nextjs-source,.nextjs-example pre.nextjs-terminal{font-size:var(--cf-font-size-325)}.nextjs-example .nextjs-result-body{padding:var(--cf-space-250)}.nextjs-example .nextjs-page{padding:var(--cf-space-300)}.nextjs-example .nextjs-headers dd,.nextjs-example .nextjs-step-headers>div{grid-template-columns:minmax(0,1fr)}.nextjs-example .nextjs-step-requests{padding-inline:var(--cf-space-250)}.nextjs-example .nextjs-step-headers>div,.nextjs-example .nextjs-step-request-line{font-size:var(--cf-font-size-325)}}.nextjs-variants>.nextjs-example{margin:0;border:0;border-radius:0}.nextjs-variant-choices{display:flex;flex-wrap:wrap;gap:var(--cf-space-150)}