body.dev-portal{background: radial-gradient(ellipse 70% 45% at 50% -5%,var(--cyan-glow),transparent 55%),radial-gradient(ellipse 40% 30% at 100% 50%,var(--accent-glow),transparent 50%),var(--bg);}body.dev-portal .section-kicker{color: var(--cyan);}body.dev-portal .field input:focus,body.dev-portal .field textarea:focus,body.dev-portal .field select:focus{border-color: var(--cyan);box-shadow: 0 0 0 3px var(--focus-ring-cyan);}.dev-header{position: sticky;top: 0;z-index: 300;height: var(--header-h);display: flex;align-items: center;backdrop-filter: blur(16px);background: var(--header-bg);border-bottom: 1px solid var(--border);}.dev-header .container{display: flex;align-items: center;justify-content: space-between;gap: 1.5rem;}.dev-logo{font-weight: 700;font-size: 1.1rem;letter-spacing: -0.02em;white-space: nowrap;transition: color 0.2s;}.dev-logo:hover{color: var(--cyan);}.dev-nav{display: flex;align-items: center;gap: 1.75rem;}.dev-nav a{color: var(--text-muted);font-size: 0.92rem;font-weight: 500;transition: color 0.2s;}.dev-nav ul{list-style: none;margin: 0;padding: 0;display: flex;align-items: center;gap: 1.75rem;flex-wrap: wrap;}.dev-nav a:hover,.dev-nav a.active{color: var(--text);}.dev-nav a.active{color: var(--cyan);}.dev-header-actions{display: flex;align-items: center;gap: 0.75rem;}.dev-menu-toggle{display: none;width: 2.5rem;height: 2.5rem;min-width: 2.5rem;min-height: 2.5rem;padding: 0;place-items: center;border-radius: var(--radius-sm);border: 1px solid transparent;background: transparent;color: var(--text-muted);cursor: pointer;transition: color 0.2s,border-color 0.2s,background 0.2s;flex-shrink: 0;box-sizing: border-box;}.dev-menu-toggle:hover{color: var(--text);border-color: var(--border-strong);background: var(--wash);transform: none;}.dev-hero{padding: clamp(4rem,10vw,7rem) 0 clamp(3rem,6vw,5rem);text-align: center;}.dev-hero .badge{color: var(--cyan);margin-bottom: 1.5rem;}.dev-hero h1{font-size: clamp(2.25rem,5.5vw,3.75rem);font-weight: 800;letter-spacing: -0.03em;line-height: 1.1;margin-bottom: 1.25rem;}.dev-hero h1 .text-cyan{color: var(--cyan);}.dev-hero-lead{color: var(--text-muted);font-size: clamp(1rem,2vw,1.15rem);max-width: 52ch;margin: 0 auto 2rem;line-height: 1.65;}.dev-hero-ctas{display: flex;flex-wrap: wrap;gap: 0.85rem;justify-content: center;}.dev-hero-ctas .btn-ghost{border-color: var(--border-strong);}.dev-hero-ctas .btn-ghost:hover{border-color: color-mix(in oklab,var(--cyan) 35%,transparent);color: var(--cyan);}.tech-grid{display: flex;flex-wrap: wrap;gap: 0.65rem;}.tech-pill{display: inline-flex;align-items: center;gap: 0.45rem;padding: 0.5rem 0.9rem;border-radius: var(--radius-pill);font-size: 0.82rem;font-weight: 600;background: var(--bg-surface);border: 1px solid var(--border);color: var(--text);transition: border-color 0.2s,color 0.2s,background 0.2s;}.tech-pill:hover{border-color: color-mix(in oklab,var(--cyan) 30%,transparent);color: var(--text);background: var(--cyan-soft);}.tech-pill svg{flex-shrink: 0;opacity: 0.75;}.project-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr));gap: 1.5rem;}.project-card{background: var(--bg-elevated);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;transition: border-color 0.25s var(--ease),transform 0.25s var(--ease),box-shadow 0.25s var(--ease);}.project-card:hover{border-color: color-mix(in oklab,var(--cyan) 25%,transparent);transform: translateY(-3px);box-shadow: 0 20px 50px var(--overlay);}.project-card img{width: 100%;aspect-ratio: 16 / 10;object-fit: cover;}.project-card-body{padding: 1.35rem 1.5rem 1.5rem;}.project-card-tags{display: flex;flex-wrap: wrap;gap: 0.4rem;margin-bottom: 0.65rem;}.project-card h3{font-size: 1.2rem;font-weight: 700;margin-bottom: 0.45rem;}.project-card p{color: var(--text-muted);font-size: 0.92rem;margin-bottom: 1rem;line-height: 1.55;}.link-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));gap: 1.25rem;}.link-card{display: flex;flex-direction: column;gap: 0.5rem;padding: 1.5rem;background: var(--bg-elevated);border: 1px solid var(--border);border-radius: var(--radius);transition: border-color 0.25s,background 0.25s,transform 0.25s var(--ease);}.link-card:hover{border-color: color-mix(in oklab,var(--cyan) 30%,transparent);background: var(--cyan-glow);transform: translateY(-2px);}.link-card-icon{width: 40px;height: 40px;display: grid;place-items: center;border-radius: var(--radius-sm);background: var(--cyan-soft);color: var(--cyan);margin-bottom: 0.35rem;}.link-card h3{font-size: 1.05rem;font-weight: 600;}.link-card p{color: var(--text-muted);font-size: 0.88rem;}.link-card-arrow{margin-top: auto;color: var(--cyan);font-size: 0.85rem;font-weight: 600;}.tool-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,280px),1fr));gap: 1.25rem;}.tool-card{display: flex;flex-direction: column;padding: 1.5rem;background: var(--bg-elevated);border: 1px solid var(--border);border-radius: var(--radius-lg);transition: border-color 0.25s,transform 0.25s var(--ease);}.tool-card:hover{border-color: color-mix(in oklab,var(--cyan) 30%,transparent);transform: translateY(-2px);}.tool-card.wide{grid-column: 1 / -1;flex-direction: row;align-items: center;gap: 1.5rem;opacity: 0.65;}.tool-card-label{font-size: 0.68rem;letter-spacing: 0.12em;text-transform: uppercase;color: var(--cyan);font-weight: 600;margin-bottom: 0.5rem;}.tool-card h3{font-size: 1.15rem;font-weight: 700;margin-bottom: 0.45rem;}.tool-card p{color: var(--text-muted);font-size: 0.9rem;flex: 1;margin-bottom: 1.25rem;}.tool-card-link{display: inline-flex;align-items: center;gap: 0.35rem;color: var(--cyan);font-weight: 600;font-size: 0.9rem;margin-top: auto;transition: gap 0.25s var(--ease);}.tool-card:hover .tool-card-link{gap: 0.6rem;}.app-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr));gap: 1.5rem;}.app-card{background: var(--bg-elevated);border: 1px solid var(--border);border-radius: var(--radius-lg);overflow: hidden;transition: border-color 0.25s,transform 0.25s var(--ease);}.app-card:hover{border-color: color-mix(in oklab,var(--cyan) 30%,transparent);transform: translateY(-2px);}.app-card-preview{aspect-ratio: 16 / 9;background: var(--bg-muted);display: grid;place-items: center;color: var(--text-dim);font-size: 0.85rem;overflow: hidden;}.app-card-preview img{width: 100%;height: 100%;object-fit: cover;}.app-card-body{padding: 1.35rem 1.5rem;}.app-card-body h3{font-size: 1.15rem;font-weight: 700;margin-bottom: 0.4rem;}.app-card-body p{color: var(--text-muted);font-size: 0.9rem;margin-bottom: 1rem;}.tool-page-hero{padding: clamp(2.5rem,5vw,3.5rem) 0 2rem;}.tool-page-hero h1{font-size: clamp(1.75rem,4vw,2.5rem);font-weight: 800;letter-spacing: -0.02em;margin-bottom: 0.65rem;}.tool-page-hero p{color: var(--text-muted);max-width: 60ch;}.tool-workspace{display: grid;grid-template-columns: 1fr 320px;gap: 1.5rem;margin-bottom: 2rem;}.tool-canvas-zone{position: relative;min-height: 420px;background: var(--bg-elevated);border: 2px dashed color-mix(in oklab,var(--cyan) 25%,transparent);border-radius: var(--radius-lg);display: grid;place-items: center;overflow: hidden;cursor: pointer;transition: border-color 0.2s,background 0.2s;}.tool-canvas-zone:hover,.tool-canvas-zone.dragover{border-color: var(--cyan);background: var(--cyan-glow);}.tool-canvas-zone.has-image{border-style: solid;border-color: var(--border);cursor: default;}.tool-drop-hint{text-align: center;color: var(--text-dim);pointer-events: none;}.tool-drop-hint svg{margin: 0 auto 0.75rem;opacity: 0.5;}.tool-drop-hint p{font-size: 0.95rem;}.tool-drop-hint span{display: block;font-size: 0.8rem;margin-top: 0.35rem;color: var(--text-dim);}.tool-canvas-zone canvas{max-width: 100%;max-height: 500px;display: block;}.tool-settings{background: var(--bg-elevated);border: 1px solid var(--border);border-radius: var(--radius-lg);padding: 1.5rem;display: flex;flex-direction: column;gap: 1.25rem;}.tool-settings h2{font-size: 0.75rem;letter-spacing: 0.12em;text-transform: uppercase;color: var(--text-dim);font-weight: 600;}.setting-row label{display: flex;justify-content: space-between;align-items: center;font-size: 0.82rem;color: var(--text-muted);margin-bottom: 0.5rem;}.setting-row label output{font-family: var(--font-mono);font-size: 0.78rem;color: var(--cyan);}.setting-row input[type='range']{width: 100%;accent-color: var(--cyan);cursor: pointer;}.ratio-toggles{display: flex;gap: 0.5rem;}.ratio-btn{flex: 1;padding: 0.55rem;border-radius: var(--radius-sm);border: 1px solid var(--border-strong);background: transparent;font-size: 0.82rem;font-weight: 600;cursor: pointer;transition: border-color 0.2s,background 0.2s,color 0.2s;}.ratio-btn:hover{border-color: color-mix(in oklab,var(--cyan) 40%,transparent);}.ratio-btn.active{border-color: var(--cyan);background: var(--cyan-soft);color: var(--cyan);}.tool-file-input{position: absolute;width: 0;height: 0;opacity: 0;pointer-events: none;}.tool-content{padding: 2rem 0 4rem;}.tool-content-grid{display: grid;grid-template-columns: 1fr 280px;gap: 2rem;}.tool-content-main{display: flex;flex-direction: column;gap: 2.5rem;}.content-block h2{font-size: 1.5rem;font-weight: 700;margin-bottom: 1rem;letter-spacing: -0.01em;}.content-block p,.content-block li{color: var(--text-muted);line-height: 1.7;margin-bottom: 0.85rem;}.content-block ol,.content-block ul{padding-left: 1.25rem;margin-bottom: 1rem;}.content-block ol{list-style: decimal;}.content-block ul{list-style: disc;}.content-block li{margin-bottom: 0.5rem;}.faq-list{display: flex;flex-direction: column;gap: 1rem;}.faq-item{background: var(--bg-elevated);border: 1px solid var(--border);border-radius: var(--radius);padding: 1.25rem 1.5rem;}.faq-item h3{font-size: 1rem;font-weight: 600;margin-bottom: 0.5rem;color: var(--text);}.faq-item p{margin-bottom: 0;font-size: 0.92rem;}.ad-slot{background: var(--bg-muted);border: 1px dashed var(--border-strong);border-radius: var(--radius);padding: 2rem;text-align: center;color: var(--text-dim);font-family: var(--font-mono);font-size: 0.75rem;letter-spacing: 0.08em;text-transform: uppercase;min-height: 90px;display: grid;place-items: center;}.ad-slot.sidebar{min-height: 600px;position: sticky;top: calc(var(--header-h) + 1.5rem);}.ad-slot.banner{margin: 2rem 0;}.color-inputs{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;}.color-field{display: flex;flex-direction: column;gap: 0.5rem;}.color-field input[type='color']{width: 100%;height: 48px;border: 1px solid var(--border-strong);border-radius: var(--radius-sm);background: transparent;cursor: pointer;padding: 4px;}.contrast-result{text-align: center;padding: 1.5rem;background: var(--bg-muted);border-radius: var(--radius);margin-top: 1rem;}.contrast-ratio{font-size: 2.5rem;font-weight: 800;font-family: var(--font-mono);color: var(--cyan);line-height: 1;margin-bottom: 0.5rem;}.contrast-label{font-size: 0.9rem;color: var(--text-muted);}.contrast-preview{display: grid;grid-template-columns: 1fr 1fr;gap: 0;border-radius: var(--radius);overflow: hidden;margin-top: 1rem;min-height: 80px;}.contrast-preview span{display: grid;place-items: center;font-weight: 600;font-size: 0.95rem;padding: 1rem;}.slice-preview{display: flex;gap: 6px;overflow-x: auto;padding: 1rem 0;min-height: 120px;align-items: flex-start;}.slice-preview .slice{flex: 0 0 auto;height: 140px;width: auto;max-width: none;display: block;background: var(--bg-muted);border-radius: 4px;border: 1px solid var(--border);object-fit: contain;}.slice-preview .slice-empty{width: 72px;height: 140px;}.dev-footer{border-top: 1px solid var(--border);padding: 1.75rem 0;margin-top: auto;}.dev-footer .container{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 1rem;}.dev-footer-copy{font-family: var(--font-mono);font-size: 0.78rem;color: var(--text-dim);}.dev-footer-links{display: flex;flex-wrap: wrap;gap: 1.25rem;}.dev-footer-links a{font-family: var(--font-mono);font-size: 0.78rem;color: var(--text-dim);transition: color 0.2s;}.dev-footer-links a:hover{color: var(--cyan);}.dev-breadcrumb{font-size: 0.82rem;color: var(--text-dim);margin-bottom: 1rem;}.dev-breadcrumb a{transition: color 0.2s;}.dev-breadcrumb a:hover{color: var(--cyan);}@media (max-width: 900px){.tool-workspace{grid-template-columns: 1fr;}.tool-content-grid{grid-template-columns: 1fr;}.ad-slot.sidebar{display: none;}}@media (max-width: 768px){.dev-menu-toggle,.dev-menu-toggle.mobile-toggle{display: grid !important;}.dev-nav{display: none;}.dev-header-actions .btn-outline-cyan{display: none;}.tool-card.wide{flex-direction: column;align-items: flex-start;}.color-inputs{grid-template-columns: 1fr;}}