.construct-shell { max-width: 1120px; padding-top: 3rem; }
.construct-hero { padding: 1rem 0 3.25rem; border-bottom: 1px solid var(--line); }
.construct-hero h1 { max-width: 790px; margin: .55rem 0 .9rem; font-size: clamp(2.55rem, 6vw, 5.7rem); line-height: .94; letter-spacing: -.075em; }
.construct-hero .lead { max-width: 640px; margin: 0; color: var(--muted); font-size: 1.1rem; line-height: 1.55; }
.portal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 2.75rem; }
.portal-choice { display: flex; min-height: 220px; flex-direction: column; align-items: flex-start; padding: 1.15rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.portal-choice:hover, .portal-choice:focus-visible { transform: translateY(-4px); border-color: var(--accent); background: color-mix(in srgb, var(--panel) 90%, var(--accent)); outline: none; }
.portal-number { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.portal-choice strong { margin-top: auto; font-size: 1.65rem; letter-spacing: -.045em; }
.portal-choice small { min-height: 3.9em; margin-top: .6rem; color: var(--muted); font-size: .84rem; line-height: 1.42; }
.portal-choice .choose { margin-top: 1.2rem; color: var(--accent); font-size: .78rem; font-weight: 800; }
.portal-choice.void { background: #151218; }
.construct-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.construct-bar strong { font-size: 1.05rem; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.workspace-canvas { padding: 2.25rem 0 3.5rem; }
.canvas-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.5rem; }
.canvas-heading h2 { margin: .25rem 0 0; font-size: 1.75rem; letter-spacing: -.04em; }
.canvas-heading > p { max-width: 390px; margin: 0; color: var(--muted); line-height: 1.45; }
.site-footer { max-width: 1120px; margin: 0 auto; padding: 1.2rem 1.5rem 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.quick-nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.quick-nav span { color: var(--text); font-weight: 800; }
.site-footer a { color: var(--text); text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 1.25rem; line-height: 1.5; }
.footer-bottom p { max-width: 530px; margin: 0; }
.footer-bottom button { padding: 0; border: 0; color: inherit; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 840px) { .portal-grid { grid-template-columns: repeat(2, 1fr); } .portal-choice { min-height: 190px; } }
@media (max-width: 620px) { .construct-shell { padding-top: 1.5rem; } .portal-grid { grid-template-columns: 1fr; } .portal-choice { min-height: 168px; } .canvas-heading, .construct-bar, .footer-bottom { align-items: flex-start; flex-direction: column; } }
.portal-choice.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.portal-comparison { padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.comparison-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.3rem; }
.comparison-heading h2 { margin: .25rem 0 0; font-size: 1.8rem; letter-spacing: -.05em; }
.comparison-heading > p { max-width: 390px; margin: 0; color: var(--muted); line-height: 1.45; }
.sample-preview { overflow: hidden; border: 1px solid var(--line); border-radius: .85rem; background: #f6f4f0; color: #191716; }
.sample-top { display: flex; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid #d8d3ca; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.sample-preview h3 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.7rem); line-height: .93; letter-spacing: -.07em; }
.sample-preview .eyebrow { color: #a85f15; }
.sample-preview a { display: inline-block; margin-top: 1.5rem; padding: .65rem .9rem; border-radius: .35rem; background: #201c19; color: #fff; font-size: .8rem; font-weight: 800; text-decoration: none; }
.sample-showcase { min-height: 340px; padding: 3rem; background: linear-gradient(135deg, #201b16, #4c3020 52%, #d99434); color: #fff; }
.sample-showcase .eyebrow { color: #f5c170; }
.sample-showcase h3 { max-width: 560px; }
.sample-showcase h3 em { color: #ffd37d; font-style: normal; }
.sample-showcase > p:not(.eyebrow) { max-width: 430px; margin: 1.3rem 0 0; color: #f1e7dc; }
.sample-links { display: grid; grid-template-columns: repeat(3, 1fr); background: #f8f5ee; }
.sample-links span { padding: 1.05rem; border-right: 1px solid #d8d3ca; font-size: .85rem; font-weight: 700; }
.sample-pro { display: grid; grid-template-columns: 1.6fr .7fr; min-height: 360px; }
.sample-pro > div { padding: 3rem; background: #e5e7e1; }
.sample-pro > div > p:not(.eyebrow) { max-width: 490px; margin: 1.3rem 0 0; color: #53574f; }
.sample-pro aside { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: #242a28; color: #f1eee7; }
.sample-pro aside b { color: #e5ba65; font-size: 2rem; }
.sample-pro aside strong { padding-bottom: .8rem; border-bottom: 1px solid #ffffff2e; font-size: .9rem; }
.sample-shop { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 360px; background: #d9e0d3; }
.sample-shop > div:first-child { padding: 3rem; background: #e8e8dd; }
.product-row { display: grid; grid-template-columns: repeat(3, 1fr); align-content: end; gap: .5rem; padding: 1rem; background: #68745f; }
.product-row span { min-height: 150px; padding: 1rem; background: #c4b89b; color: #2d302c; font-size: .83rem; font-weight: 700; }
.product-row span:nth-child(2) { background: #a87542; } .product-row span:nth-child(3) { background: #d8d0bd; }
.product-row b { display: block; margin-top: .6rem; }
.sample-void { background: #0b0e12; color: #e4e6eb; }
.sample-void .sample-top { border-color: #ffffff1f; }
.void-center { display: flex; min-height: 390px; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background-image: radial-gradient(#8090a522 1px, transparent 1px); background-size: 21px 21px; text-align: center; }
.void-center > span { color: #c7d4f4; font-size: 5rem; line-height: 1; } .void-center p { color: #abb3c1; }
.void-center a { background: #e4e6eb; color: #101216; }
@media (max-width: 620px) { .comparison-heading { align-items: flex-start; flex-direction: column; gap: .75rem; } .sample-showcase, .sample-pro > div, .sample-shop > div:first-child { min-height: 300px; padding: 2rem 1.3rem; } .sample-pro, .sample-shop { grid-template-columns: 1fr; } .sample-pro aside { display: grid; grid-template-columns: 1fr 1fr; } .product-row span { min-height: 115px; padding: .65rem; } .sample-links span { padding: .75rem; font-size: .72rem; } }
.preview-device-control { display: flex; align-items: center; gap: .7rem; width: fit-content; margin: 0 0 1.25rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--panel); font-size: .78rem; }
.preview-device-control > span { color: var(--muted); font-weight: 700; }
.preview-device-control label { font-weight: 800; }
.preview-device-control input { width: 72px; accent-color: var(--accent); }
.preview-device-control output { min-width: 3.9rem; color: var(--accent); font-weight: 800; }
.is-mobile-preview .sample-preview { width: min(100%, 390px); margin: 0 auto; box-shadow: 0 18px 40px #0005; }
.is-mobile-preview .sample-top { font-size: .62rem; }
.is-mobile-preview .sample-preview h3 { font-size: 2.7rem; }
.is-mobile-preview .sample-showcase, .is-mobile-preview .sample-pro > div, .is-mobile-preview .sample-shop > div:first-child { min-height: 330px; padding: 2rem 1.35rem; }
.is-mobile-preview .sample-links { grid-template-columns: 1fr; }
.is-mobile-preview .sample-links span { border-right: 0; border-bottom: 1px solid #d8d3ca; }
.is-mobile-preview .sample-pro, .is-mobile-preview .sample-shop { grid-template-columns: 1fr; }
.is-mobile-preview .sample-pro aside { display: grid; grid-template-columns: 1fr 1fr; }
.is-mobile-preview .product-row span { min-height: 104px; padding: .65rem; font-size: .7rem; }
.is-mobile-preview .void-center { min-height: 530px; }
@media (max-width: 620px) { .preview-device-control { gap: .42rem; padding: .45rem .55rem; } .preview-device-control > span { display: none; } }
.sample-showcase { background-image: linear-gradient(90deg, #17120eeF 0%, #241913e0 42%, #4a3020a8 68%, #c7832d44 100%), url('/assets/images/demos/showcase/creator-workspace-hero.png'); background-position: center; background-size: cover; }
.sample-pro aside { background-image: linear-gradient(#202725dd, #202725dd), url('/assets/images/demos/pro/service-workshop-hero.png'); background-position: center; background-size: cover; }
.product-row { background-image: linear-gradient(#56614cdd, #56614cdd), url('/assets/images/demos/shop/collection-hero.png'); background-position: center; background-size: cover; }