.cod-hero{padding-block:var(--section-space-xl) var(--section-space-m)}.cod-hero__container{align-items:flex-start;gap:var(--space-m)}.cod-hero__actions{align-items:center;gap:var(--space-s) var(--space-m);flex-wrap:wrap;display:flex}.cod-trip__container{gap:var(--space-l)}.cod-trip__swap{border:1px solid var(--hairline-bright);background:var(--surface-raised);border-radius:50%;place-self:center;place-items:center;block-size:3rem;inline-size:3rem;display:grid;@media (width<=900px){rotate:90deg}}.cod-files{border-block-start:1px solid var(--hairline)}.cod-files__container{gap:var(--space-xxl);grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start;display:grid;@media (width<=900px){gap:var(--space-l);grid-template-columns:minmax(0,1fr)}}.cod-files__copy{gap:var(--space-s);flex-direction:column;display:flex;position:sticky;inset-block-start:calc(var(--header-height) + var(--space-l));@media (width<=900px){position:static}}.cod-files__list{flex-direction:column;gap:0;display:flex}.cod-files__row{justify-content:space-between;align-items:center;gap:var(--space-m);padding-block:var(--space-s);border-block-end:1px solid var(--hairline);display:flex}.cod-files__path{overflow-wrap:anywhere}.cod-files__badge{font-size:var(--text-xs);border-radius:40rem;flex:none;padding-block:.2em;padding-inline:.7em}.cod-files__badge--ours{border:1px solid var(--primary-40);background:var(--primary-10)}.cod-files__badge--yours{border:1px solid var(--hairline-bright)}.cod-notes{border-block-start:1px solid var(--hairline)}.cod-notes__container{gap:var(--space-xl);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));display:grid}.cod-notes__item{gap:var(--space-s);border-block-start:1px solid var(--hairline-bright);flex-direction:column;padding-block-start:var(--space-m);display:flex}.cod-notes__title{font-size:var(--h5)}.app-col{border:1px solid var(--ui-border);background:var(--ui-card);min-block-size:24rem;box-shadow:var(--panel-shadow);border-radius:12px;flex-direction:column;gap:0;display:flex;overflow:hidden}.app-col__tabs{border-block-end:1px solid var(--ui-border);flex-wrap:wrap;align-items:center;gap:4px;padding:10px;display:flex}.app-col__pill{color:var(--ui-muted-foreground);border-radius:8px;padding:6px 12px;font-weight:500}.app-col__pill--on{background:var(--ui-accent);color:var(--ui-foreground)}.app-editor{flex-direction:column;gap:0;min-block-size:0;display:flex}.app-editor--fill{flex:1}.app-editor__code{font-family:var(--ui-mono);background:oklch(24.5% .003 286/.4);flex-direction:column;flex:1;gap:0;padding-block:12px;font-size:12.5px;line-height:20px;display:flex;overflow-x:auto}.app-editor__line{grid-template-columns:2.6rem minmax(0,1fr);gap:0;display:grid}.app-editor__line--active{background:oklch(100% 0 0/.04)}.app-editor__num{color:oklch(66.5% .004 286/.45);text-align:end;user-select:none;padding-inline-end:12px}.app-editor__src{white-space:pre;padding-inline-end:12px}.app-editor__bar{border-block-start:1px solid var(--ui-border);align-items:center;gap:4px;padding:4px 8px;display:flex}.app-editor__format{color:var(--ui-muted-foreground);border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:11px;display:flex}.app-editor__format-icon{block-size:14px;inline-size:14px}.app-editor__lang{color:oklch(66.5% .004 286/.7);margin-inline-start:auto;padding-inline-end:4px;font-size:11px}.app-tree{flex-direction:column;flex:1;gap:0;display:flex}.app-tree__search{border:1px solid var(--ui-input);block-size:36px;color:var(--ui-muted-foreground);background:oklch(100% 0 0/.04);border-radius:6px;align-items:center;gap:8px;margin:10px;padding-inline:10px;display:flex}.app-tree__search-icon{block-size:14px;inline-size:14px}.app-tree__list{flex-direction:column;gap:0;padding:0 6px 6px;display:flex}.app-tree__row{white-space:nowrap;border-radius:6px;align-items:center;gap:4px;block-size:28px;padding-inline-end:6px;font-size:12.5px;display:flex}.app-tree__row--d0{padding-inline-start:4px}.app-tree__row--d1{padding-inline-start:18px}.app-tree__row--d2{padding-inline-start:32px}.app-tree__row--d3{padding-inline-start:46px}.app-tree__row--d4{padding-inline-start:60px}.app-tree__row--on{background:var(--ui-ring);color:var(--ui-primary-foreground);& .app-tree__tag,& .app-tree__chev,& .app-tree__glyph{color:inherit;opacity:.9}}.app-tree__chev{block-size:14px;inline-size:16px;color:var(--ui-muted-foreground);flex:none}.app-tree__glyph{block-size:16px;inline-size:16px;color:var(--ui-muted-foreground);flex:none}.app-tree__tag{color:var(--ui-muted-foreground)}.app-tree__label{opacity:.9;margin-inline-start:2px}.cod-trip__grid{align-items:stretch;gap:var(--space-m);grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);display:grid;@media (width<=900px){grid-template-columns:minmax(0,1fr)}}.cod-editor{isolation:isolate;border-block-start:1px solid var(--hairline);position:relative;overflow:clip;&:before{content:"";z-index:-1;background:radial-gradient(closest-side, var(--primary-20), transparent);filter:blur(40px);block-size:60%;position:absolute;inset:20% -10% auto 30%}}.cod-editor__container{gap:var(--space-l)}.cod-editor__head{gap:var(--space-s);flex-direction:column;max-inline-size:48rem;display:flex}.cod-editor__stage{align-items:center;gap:var(--space-l);grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr);display:grid;@media (width<=900px){grid-template-columns:minmax(0,1fr);&>.cod-editor__arrow{justify-self:center;rotate:90deg}}}.cod-editor__window{border:1px solid var(--ui-border);background:var(--ui-card);min-block-size:22rem;box-shadow:0 0 0 1px var(--primary-20), var(--panel-shadow), var(--glow-red);border-radius:12px;flex-direction:column;gap:0;display:flex;position:relative;overflow:hidden;&:has(#cod-tab-css:checked) .cod-editor__pane--html,&:has(#cod-tab-html:checked) .cod-editor__pane--css{display:none}&:has(#cod-tab-html:checked) .cod-editor__tab--html,&:has(#cod-tab-css:checked) .cod-editor__tab--css{background:var(--ui-accent);color:var(--ui-foreground)}&:has(#cod-tab-html:focus-visible) .cod-editor__tab--html,&:has(#cod-tab-css:focus-visible) .cod-editor__tab--css{outline:var(--focus-width) var(--focus-style) var(--focus-color);outline-offset:2px}}.cod-editor__bar{border-block-end:1px solid var(--ui-border);flex-wrap:wrap;align-items:center;gap:8px;padding:10px;display:flex}.cod-editor__tabs{gap:4px;display:flex}.cod-editor__tab{color:var(--ui-muted-foreground);cursor:pointer;border-radius:8px;padding:6px 12px;font-weight:500;transition:background-color .15s,color .15s;&:hover{color:var(--ui-foreground)}@media (prefers-reduced-motion:reduce){transition:none}}.cod-editor__file{color:var(--ui-muted-foreground);margin-inline-start:auto;font-size:11px}.cod-editor__pane{flex-direction:column;flex:1;gap:0;display:flex}.cod-editor__arrow{color:var(--primary)}.cod-editor__preview{gap:var(--space-s);padding:var(--space-l);border:1px dashed var(--hairline-bright);border-radius:var(--panel-radius);background-color:var(--app-chrome);background-image:radial-gradient(var(--hairline) 1px, transparent 1px);background-size:18px 18px;flex-direction:column;display:flex}.cod-editor__preview-label{font-size:var(--text-xs)}.cod-plan{align-items:flex-start;gap:var(--space-s);padding:var(--space-l);border:1px solid var(--hairline-bright);border-radius:var(--radius-l);background:var(--surface-raised);transition:border-color var(--motion-duration) var(--motion-ease);flex-direction:column;display:flex;&:hover{border-color:var(--primary)}@media (prefers-reduced-motion:reduce){transition:none}}.cod-plan__price{font-size:var(--h2)}