/* Shared portfolio design: cool blue, spacious type, real product screens. */
.portfolio {
  --paper: #f4f7fc; --surface: #fff; --surface-2: #e9effa;
  --ink: #182c49; --ink-2: #586a82; --ink-3: #64758b;
  --line: #dce4ef; --line-strong: #c6d3e4;
  --teal: #2462eb; --teal-deep: #174dca; --teal-soft: #e4edff;
  --font-sans: 'Manrope', sans-serif; --container: 1240px; --header-h: 88px;
  --motion-fast: 180ms; --motion-enter: 700ms;
  --project-surface: var(--project-bg, #e6ecfa);
  --preview-halo: #ffffff35; --floating-control: #ffffffc9;
  --floating-ink: #182c49; --control-line: #182c4920;
  --device-frame: #202b3c; --device-edge: #5d6c82;
  --device-shadow: #17335b66; --stage-glow: #a4caff70;
  --primary-ink: #ffffff; --primary-hover: #174dca; --gallery-scrollbar: #182c4940;
}
html[data-theme="dark"] .portfolio {
  --paper: #080808; --surface: #141414; --surface-2: #101010;
  --ink: #f4f4f5; --ink-2: #aaaab0; --ink-3: #94949c;
  --line: #282828; --line-strong: #424242;
  --teal: #8babff; --teal-deep: #b0c5ff; --teal-soft: #192137;
  --project-surface: color-mix(in srgb, var(--project-bg, #e6ecfa) 4%, #171717);
  --preview-halo: #ffffff04; --floating-control: #292929;
  --floating-ink: #f4f4f5; --control-line: #444444;
  --device-frame: #121212; --device-edge: #454545;
  --device-shadow: #000000b3; --stage-glow: #ffffff08;
  --primary-ink: #080808; --primary-hover: #b0c5ff; --gallery-scrollbar: #5a5a5a;
}
.portfolio .mono, .portfolio .nav a, .portfolio .copy-btn, .portfolio .form-group label, .portfolio .footer-bottom { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
.portfolio .site-header { border: 0; }
.portfolio .header-inner { gap: 32px; }
.portfolio .brand { align-items: center; font-size: 16px; font-weight: 800; gap: 12px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; background: var(--teal); color: var(--primary-ink); font-size: 22px; letter-spacing: -2px; border-radius: 13px; padding-right: 3px; }
.portfolio .nav { margin-left: auto; gap: 34px; }
.portfolio .nav a { font-size: 13px; font-weight: 600; }
.portfolio .icon-btn { border-color: transparent; background: var(--surface); width: 42px; height: 42px; }
.portfolio .hero { padding: calc(var(--header-h) + 64px) 0 0; overflow: hidden; position: relative; }
.portfolio .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 32px; min-height: 580px; }
.hero-copy { position: relative; z-index: 2; }
.hero-intro { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; margin-bottom: 28px; }
.hero-intro span { color: var(--teal); font-size: 24px; }
.portfolio .hero h1 { font-size: clamp(44px, 5.2vw, 72px); max-width: none; line-height: 1.08; letter-spacing: -.065em; font-weight: 800; }
.portfolio .hero-lead { max-width: 390px; margin-top: 26px; font-size: 16px; line-height: 1.8; color: var(--ink-2); }
.portfolio .hero-actions { margin-top: 32px; gap: 25px; display: flex; flex-wrap: wrap; align-items: center; }
.portfolio .btn { padding: 15px 23px; font-size: 13px; gap: 20px; border-radius: 12px; }
.portfolio .btn-primary { background: var(--teal); color: var(--primary-ink); box-shadow: 0 8px 22px -12px #2462eb; }
.portfolio .btn-primary:hover { background: var(--primary-hover); color: var(--primary-ink); }
.portfolio .btn-primary > span[aria-hidden] { font-size: 20px; line-height: 1; }
.hero-contact { font-weight: 700; font-size: 13px; padding: 12px 0; border-bottom: 1px solid var(--line-strong); }
.hero-platforms { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--ink-2); margin-top: 43px; }
.platform-symbol { font-size: 19px; }
.platform-divider { width: 1px; height: 12px; background: var(--line-strong); margin: 0 4px; }
.app-stage { position: relative; height: 560px; isolation: isolate; perspective: 1100px; }
.app-stage::before { content: ''; position: absolute; inset: 20px -60px 0; z-index: -1; background: radial-gradient(ellipse at center, var(--stage-glow), transparent 68%); }
.stage-orbit { position: absolute; width: 510px; height: 510px; border: 1px solid color-mix(in srgb, var(--teal) 12%, transparent); border-radius: 50%; left: 50%; top: 46%; transform: translate(-50%, -50%); }
.orbit-two { width: 390px; height: 390px; }
.stage-phone { position: absolute; width: 210px; padding: 6px; background: var(--device-frame); border: 1px solid var(--device-edge); border-radius: 32px; box-shadow: 0 30px 50px -22px var(--device-shadow), inset 0 0 0 2px #ffffff20; overflow: hidden; transition: transform .6s var(--ease-out-apple), box-shadow .4s; }
.stage-phone img { width: 100%; height: 424px; object-fit: cover; object-position: top; border-radius: 25px; }
.phone-main { left: calc(50% - 105px); top: 32px; z-index: 3; transform: rotate(-5deg); animation: phone-arrive 1.1s var(--ease-out-apple); }
.phone-left { left: calc(50% - 240px); top: 85px; z-index: 1; transform: rotate(-16deg) scale(.88); }
.phone-right { left: calc(50% + 30px); top: 65px; z-index: 2; transform: rotate(14deg) scale(.9); }
.phone-main:hover, .phone-main:focus-visible { transform: translateY(-12px) rotate(0deg); }
.phone-left:hover, .phone-left:focus-visible { transform: translate(-15px, -12px) rotate(-12deg) scale(.9); z-index: 4; }
.phone-right:hover, .phone-right:focus-visible { transform: translate(15px, -12px) rotate(10deg) scale(.94); z-index: 4; }
.stage-spark { position: absolute; right: 20px; top: 4px; color: var(--teal); font-size: 68px; line-height: 1; }
.stage-label { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 700; box-shadow: 0 10px 35px -20px var(--device-shadow); z-index: 5; }
.label-dot { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; }
.hero-bottom { padding: 24px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); }
.hero-bottom a { display: flex; gap: 20px; }
.portfolio .section { padding: 90px 0; }
.project-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; margin-bottom: 36px; }
.portfolio .section-head { margin: 0; }
.portfolio h2 { font-size: clamp(32px, 3.5vw, 46px); font-weight: 800; letter-spacing: -.055em; line-height: 1.15; }
.portfolio .section-head p { font-size: 14px; margin-top: 12px; }
.project-count { font-size: 12px; color: var(--ink-2); white-space: nowrap; padding-bottom: 3px; }
.portfolio .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.portfolio .app-card { display: block; min-width: 0; padding: 0 0 22px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: hidden; transition: border-color var(--motion-fast) ease; }
.portfolio .app-card:hover { transform: none; border-color: var(--teal); box-shadow: none; }
.portfolio .app-card-preview { display: block; aspect-ratio: auto; min-width: 0; height: 320px; border-radius: 20px; background: var(--project-surface); overflow: hidden; position: relative; margin: 0; border: 0; }
.portfolio .app-card-preview::before { content: ''; position: absolute; width: 250px; height: 250px; border-radius: 50%; background: var(--preview-halo); top: 30px; left: calc(50% - 125px); }
.portfolio .app-card-preview img { position: relative; margin: 32px auto 0; width: 174px; height: auto; min-height: 260px; object-fit: cover; object-position: top; border: 5px solid var(--device-frame); border-radius: 23px; box-shadow: 0 22px 35px -17px var(--device-shadow); transform: rotate(-6deg); transition: transform .65s var(--ease-out-apple); }
.portfolio .app-card-preview:hover img, .portfolio .app-card-preview:focus-visible img { transform: translateY(-14px) rotate(0deg); }
.portfolio .app-card-preview img.is-icon { width: 120px; height: 120px; min-height: 0; border: 0; border-radius: 27px; margin-top: 85px; }
.project-open { position: absolute; right: 17px; bottom: 17px; width: 35px; height: 35px; border-radius: 50%; background: var(--floating-control); color: var(--floating-ink); border: 1px solid var(--control-line); display: grid; place-items: center; font-size: 19px; }
.project-info { display: flex; align-items: center; gap: 12px; padding: 20px 0 0; }
.portfolio .app-icon { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.portfolio .app-card h3 { font-size: 16px; letter-spacing: -.025em; }
.portfolio .app-desc { color: var(--ink-2); font-size: 12px; margin-top: 4px; line-height: 1.5; }
.project-info .status-tag { margin-left: auto; padding: 0; background: none; border: 0; font: inherit; font-size: 10px; white-space: nowrap; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.projects-more { display: flex; justify-content: center; margin-top: 40px; }
.portfolio .craft { background: var(--surface-2); border: 0; }
.about-layout { display: grid; grid-template-columns: .8fr 1fr; gap: 100px; align-items: center; }
.about-monogram { font-size: clamp(120px, 17vw, 210px); letter-spacing: -.11em; font-weight: 800; line-height: 1; text-align: center; color: var(--teal); transform: rotate(-9deg); }
.about-monogram span { color: var(--ink); }
.about-copy p { max-width: 420px; font-size: 14px; color: var(--ink-2); line-height: 1.9; margin-top: 22px; }
.about-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.about-skills span { font-size: 11px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; }
.portfolio .contact-grid { gap: 80px; grid-template-columns: 1fr 1fr; align-items: start; }
.portfolio .contact-form { padding: 30px; border-radius: 20px; box-shadow: 0 18px 50px -35px var(--device-shadow); }
.portfolio .channel-label { min-width: 0; }
.portfolio .channel-label a { font-size: 14px; overflow-wrap: anywhere; }
.portfolio .channel-label .mono { font-size: 11px; }
.portfolio .channel { padding: 20px 0; }
.portfolio .copy-btn { font-size: 11px; padding: 8px 12px; }
.portfolio .form-group label { font-size: 12px; font-weight: 600; }
.portfolio .form-group input, .portfolio .form-group textarea { font-size: 13px; background: var(--paper); border-color: var(--line); border-radius: 9px; }
.portfolio .footer { padding: 0; }
.footer-simple { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 30px 0; }
.footer-links { display: flex; gap: 24px; font-size: 11px; color: var(--ink-2); }
.portfolio .footer-bottom { font-size: 10px; padding: 18px 0; }
.portfolio .reveal { opacity: 1; transform: none; }
.portfolio .reveal.reveal-ready:not(.visible) { opacity: 0; transform: translateY(18px); }
.portfolio .reveal.reveal-ready { transition: opacity var(--motion-enter) var(--ease-out-apple), transform var(--motion-enter) var(--ease-out-apple); }
.portfolio .word-mask > span { transform: none; transition: none; }
@keyframes phone-arrive { from { opacity: 0; translate: 0 45px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 1100px) {
  .portfolio .hero h1 { font-size: 54px; }
  .portfolio .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stage-phone { width: 180px; }
  .stage-phone img { height: 366px; }
  .phone-main { left: calc(50% - 90px); top: 60px; }
  .phone-left { left: calc(50% - 205px); top: 110px; }
  .phone-right { left: calc(50% + 25px); top: 95px; }
  .portfolio .contact-grid { gap: 35px; }
}
@media (max-width: 780px) {
  .portfolio { --header-h: 74px; }
  .portfolio .nav { margin: 0; }
  .portfolio .nav a { font-size: 28px; }
  .portfolio .hero { padding-top: 120px; }
  .portfolio .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .portfolio .hero-copy { text-align: center; }
  .hero-intro, .portfolio .hero-actions, .hero-platforms { justify-content: center; }
  .portfolio .hero h1 { font-size: clamp(42px, 7.5vw, 64px); }
  .portfolio .hero-lead { margin-inline: auto; }
  .hero-platforms { margin-top: 28px; }
  .app-stage { height: 480px; width: 100%; max-width: 550px; margin: auto; }
  .stage-label { bottom: 10px; }
  .stage-spark { right: 45px; top: 20px; font-size: 50px; }
  .portfolio .section { padding: 65px 0; }
  .portfolio .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .about-layout { grid-template-columns: .5fr 1fr; gap: 35px; }
  .portfolio .contact-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 480px) {
  .portfolio .container { width: calc(100% - 36px); }
  .portfolio .brand { font-size: 14px; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; font-size: 19px; border-radius: 10px; }
  .portfolio .header-inner { gap: 12px; }
  .hero-intro { font-size: 13px; margin-bottom: 20px; }
  .portfolio .hero h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .portfolio .hero-lead { font-size: 14px; max-width: 290px; margin-top: 20px; }
  .portfolio .hero-actions { gap: 18px; margin-top: 25px; }
  .portfolio .btn { padding: 13px 17px; font-size: 12px; gap: 14px; }
  .hero-contact { font-size: 12px; }
  .hero-platforms { font-size: 10px; }
  .app-stage { height: 430px; }
  .stage-phone { width: 157px; padding: 5px; border-radius: 25px; }
  .stage-phone img { height: 322px; border-radius: 20px; }
  .phone-main { left: calc(50% - 78px); top: 35px; }
  .phone-left { left: calc(50% - 161px); top: 70px; }
  .phone-right { left: calc(50% + 3px); top: 65px; }
  .stage-orbit { width: 370px; height: 370px; }
  .orbit-two { width: 280px; height: 280px; }
  .stage-spark { right: 5px; top: 10px; font-size: 38px; }
  .hero-bottom { font-size: 9px; }
  .project-heading { align-items: flex-start; }
  .project-count { padding-top: 12px; font-size: 10px; }
  .portfolio .section-head p { font-size: 12px; max-width: 230px; }
  .portfolio .apps-grid { grid-template-columns: 1fr; gap: 32px; }
  .portfolio .app-card-preview { height: 300px; }
  .portfolio .app-card-preview img { width: 170px; }
  .about-layout { grid-template-columns: 1fr; gap: 30px; }
  .about-monogram { text-align: left; font-size: 105px; padding-left: 10px; }
  .about-copy p { font-size: 13px; }
  .portfolio .contact-form { padding: 22px; }
  .portfolio .channel { gap: 8px; }
  .portfolio .channel-label { min-width: 0; }
.portfolio .channel-label a { font-size: 12px; }
  .footer-simple { align-items: flex-start; flex-direction: column; gap: 20px; }
  .footer-links { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio *, .portfolio *::before, .portfolio *::after { animation: none !important; transition: none !important; }
}

/* Project pages share the homepage shell, spacing and device treatments. */
.project-detail .detail-hero { padding: calc(var(--header-h) + 48px) 0 60px; overflow: hidden; }
.project-detail .back-link { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; gap: 12px; margin-bottom: 20px; }
.project-detail .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; min-height: 500px; }
.project-identity { display: flex; align-items: center; gap: 14px; color: var(--ink-2); font-size: 12px; margin-bottom: 24px; }
.project-identity img { border-radius: 13px; }
.project-detail .detail-copy h1 { font-size: clamp(44px, 5.2vw, 72px); letter-spacing: -.065em; font-weight: 800; overflow-wrap: anywhere; }
.project-detail .detail-copy .detail-lead { color: var(--ink-2); font-size: 16px; font-weight: 400; line-height: 1.8; max-width: 400px; margin-top: 24px; }
.project-detail .detail-status { gap: 16px; margin-top: 24px; }
.project-detail .status-tag { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0; text-transform: none; padding: 6px 10px; }
.project-detail .status-tag.available { color: var(--teal-deep); }
.project-stack { color: var(--ink-2); font-size: 11px; }
.project-detail .store-badges { margin-top: 30px; }
.project-release-note { font-size: 12px; color: var(--ink-2); margin-top: 24px; }
.project-stage { height: 500px; position: relative; isolation: isolate; }
.project-stage-disc { width: 450px; height: 450px; border-radius: 50%; position: absolute; top: 25px; left: calc(50% - 225px); background: var(--project-surface); z-index: -1; }
.project-stage-disc::after { content: ''; position: absolute; inset: -24px; border: 1px solid color-mix(in srgb, var(--teal) 12%, transparent); border-radius: 50%; }
.project-stage .stage-spark { top: 5px; right: 15px; font-size: 56px; }
.project-phone-front { left: calc(50% - 140px); top: 20px; z-index: 2; transform: rotate(-7deg); animation: phone-arrive 1.1s var(--ease-out-apple); }
.project-phone-back { left: calc(50% + 15px); top: 60px; transform: rotate(12deg) scale(.9); }
.project-phone-front:hover, .project-phone-front:focus-visible { transform: translateY(-10px) rotate(-2deg); }
.project-phone-back:hover, .project-phone-back:focus-visible { transform: translate(10px, -10px) rotate(8deg) scale(.92); }
.project-icon-display { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.project-icon-display img { width: 140px; height: 140px; border-radius: 34px; box-shadow: 0 25px 45px -20px var(--device-shadow); transform: rotate(-8deg); animation: phone-arrive 1.1s var(--ease-out-apple); }
.project-icon-display span { font-size: 12px; color: var(--floating-ink); padding: 10px 16px; background: var(--floating-control); border: 1px solid var(--control-line); border-radius: 10px; }
.project-detail .project-features { background: var(--surface-2); padding: 65px 0; }
.project-features-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 60px; }
.project-features-layout h2 { font-size: clamp(28px, 3vw, 40px); }
.project-detail .feature-grid { background: none; border: 0; border-radius: 0; gap: 18px 30px; overflow: visible; }
.project-detail .feature-item { padding: 0; border: 0; gap: 12px; }
.project-detail .feature-item p { font-size: 13px; line-height: 1.8; color: var(--ink-2); font-weight: 500; }
.project-detail .feature-item svg { width: 16px; height: 16px; margin-top: 4px; }
.project-detail .gallery-surface { border-radius: 24px; background: var(--project-surface); padding: 28px 24px; }
.project-detail .shots-carousel { gap: 16px; }
.project-detail .shots-grid { gap: 25px; padding: 14px 5px 28px; scrollbar-color: var(--gallery-scrollbar) transparent; }
.project-detail .shot { flex-basis: clamp(185px, 20vw, 240px); padding: 6px; border-color: var(--device-edge); background: var(--device-frame); border-radius: 30px; box-shadow: 0 24px 35px -25px var(--device-shadow); }
.project-detail .shot img { height: auto; aspect-ratio: auto; border-radius: 23px; }
.project-detail .shot-nav { background: var(--floating-control); color: var(--floating-ink); border-color: var(--control-line); width: 40px; height: 40px; font-size: 18px; }
.project-detail .shot-nav:hover:not(:disabled) { background: var(--floating-control); color: var(--teal-deep); border-color: var(--teal); }
.project-detail .detail-cta { border-top: 1px solid var(--line); }
.project-detail .detail-cta-inner { padding: 32px 0; }
.project-detail .next-app img { border-radius: 12px; }
.project-detail .next-app .mono { display: block; font-size: 11px; margin-bottom: 5px; }
.project-detail .next-name { font-size: 17px; }
@media (max-width: 1100px) {
  .project-detail .detail-grid { gap: 30px; }
  .project-phone-front { left: calc(50% - 115px); top: 55px; }
  .project-phone-back { left: calc(50% + 10px); top: 80px; }
  .project-stage-disc { width: 380px; height: 380px; left: calc(50% - 190px); top: 60px; }
  .project-features-layout { gap: 35px; }
}
@media (max-width: 780px) {
  .project-detail .detail-hero { padding-top: calc(var(--header-h) + 30px); padding-bottom: 30px; }
  .project-detail .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .project-detail .detail-copy { max-width: 550px; }
  .project-detail .detail-copy h1 { font-size: 54px; }
  .project-stage { max-width: 520px; width: 100%; height: 460px; margin: auto; }
  .project-features-layout { grid-template-columns: 1fr; gap: 30px; }
  .project-detail .gallery-surface { padding: 18px 12px; }
  .project-detail .shots-carousel { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; }
  .project-detail .shots-carousel:not(.is-scrollable) { grid-template-columns: minmax(0, 1fr); }
  .project-detail .shot-nav { width: 34px; height: 34px; }
}
@media (max-width: 480px) {
  .project-detail .detail-copy h1 { font-size: 44px; }
  .project-detail .detail-copy .detail-lead { font-size: 14px; margin-top: 18px; }
  .project-identity { margin-bottom: 18px; }
  .project-stage { height: 390px; }
  .project-phone-front { left: calc(50% - 104px); top: 20px; }
  .project-phone-back { left: calc(50% + 3px); top: 45px; }
  .project-stage-disc { width: 300px; height: 300px; left: calc(50% - 150px); top: 40px; }
  .project-stage .stage-spark { font-size: 40px; top: 0; }
  .project-detail .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .project-detail .feature-item { border: 0; }
  .project-detail .gallery-surface { margin-inline: -5px; padding: 15px 8px; border-radius: 18px; }
  .project-detail .shots-carousel { gap: 5px; grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .project-detail .shot-nav { width: 30px; height: 30px; }
  .project-detail .shot { flex-basis: min(54vw, 210px); }
  .project-detail .shots-grid { gap: 16px; }
  .project-detail .detail-cta-inner { flex-direction: row; align-items: center; gap: 20px; }
  .project-detail .next-name { font-size: 14px; }
  .project-detail .next-app { gap: 10px; }
  .project-detail .next-app img { width: 34px; height: 34px; border-radius: 9px; }
  .project-detail .next-app .mono { font-size: 10px; }
}

/* Resolve project colors on each card, where its individual tint is defined. */
.portfolio .app-card { --project-surface: var(--project-bg, #e6ecfa); }
html[data-theme="dark"] .portfolio .app-card {
  --project-surface: color-mix(in srgb, var(--project-bg, #e6ecfa) 4%, #171717);
}
.portfolio .btn-ghost:hover { background: var(--surface); }
.portfolio .site-header.scrolled { border-bottom: 1px solid var(--line); }
.portfolio .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .portfolio .i-sun { display: block; }
html[data-theme="dark"] .portfolio .i-moon { display: none; }
.portfolio .project-open { transition: background .2s ease, color .2s ease, transform .3s ease; }
.portfolio .app-card-preview:is(:hover, :focus-visible) .project-open { background: var(--floating-control); color: var(--teal-deep); border-color: var(--teal); transform: rotate(6deg); }
.portfolio .form-group input:hover, .portfolio .form-group textarea:hover { border-color: var(--line-strong); }
.portfolio .form-group input:focus, .portfolio .form-group textarea:focus { border-color: var(--teal); }
.portfolio .btn:disabled { opacity: .6; cursor: wait; }
.portfolio .btn[hidden] { display: none; }
.portfolio .legal-hero { padding-top: calc(var(--header-h) + 50px); }
.portfolio .legal-hero h1 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; letter-spacing: -.055em; }
.portfolio .legal-updated { font-family: var(--font-sans); font-size: 12px !important; text-transform: none; letter-spacing: 0; }
.portfolio .legal-content { max-width: 760px; }
.portfolio .legal-content h2 { font-size: 22px; margin-top: 32px; letter-spacing: -.025em; }
.portfolio .legal-content p, .portfolio .legal-list { font-size: 14px; line-height: 1.9; }
@media (max-width: 780px) {
  .portfolio .nav { visibility: hidden; transition: transform .3s ease, visibility .3s; }
  .portfolio .nav.active { visibility: visible; }
}