/* NTMF project artwork studies. Demo content, source-referenced native app styling. */
.options-page { background:#f6f8fc; color:#142b52; }
.options-header { display:flex; justify-content:space-between; align-items:center; max-width:1440px; padding:30px 48px; margin:auto; border-bottom:1px solid #dce3ee; font-size:14px }
.options-header>a:first-child { font:600 24px var(--heading); letter-spacing:-1px }
.options-header>a:last-child { text-decoration:underline; text-underline-offset:5px }
.options-main { max-width:1440px; margin:auto; padding:54px 48px 65px }
.options-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:36px }
.options-heading h1 { font-size:42px; letter-spacing:-2px; line-height:1.2 }
.options-heading p { max-width:400px; font-size:15px; line-height:1.7; color:#66768e }
.options-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.option-art { display:block; border-radius:4px; overflow:hidden }
.option-art:focus-visible { outline-offset:6px }
.option-card h2 { font:500 23px var(--heading); letter-spacing:-.7px; margin-top:23px }
.option-card>p { font-size:14px; color:#66768e; margin-top:10px; max-width:330px }
.option-card>.text-link { margin-top:17px; font-size:13px }
.options-note { font-size:12px; color:#66768e; border-top:1px solid #dce3ee; padding-top:23px; margin-top:48px; line-height:1.7 }
.ntmf-art { position:relative; width:100%; aspect-ratio:1.07; overflow:hidden; container-type:inline-size; padding:0; color:#171917; border-radius:3px; isolation:isolate; }
.ntmf-brand { position:absolute; z-index:3; left:7.8%; top:8%; display:flex; flex-direction:column; align-items:start; gap:4.2cqw; pointer-events:none }
.ntmf-brand>img { width:11cqw; aspect-ratio:1; border-radius:2.4cqw; box-shadow:0 1cqw 2cqw #00000012 }
.ntmf-brand>span { font:600 6.7cqw/1.02 var(--heading); letter-spacing:-.35cqw; text-align:left }
.phone-composition { position:absolute; inset:0; perspective:1000px }
.phone-device { position:absolute; width:46%; aspect-ratio:390/844; border:1px solid #8d8e8c; border-radius:7.5cqw; padding:1.1cqw; background:linear-gradient(110deg,#c9cbc9,#555854 20%,#222421 65%,#a0a39e); box-shadow:1.4cqw 3.7cqw 5.5cqw #16181533,.2cqw .5cqw 1cqw #0005; transform-origin:50% 60%; pointer-events:none }
.phone-screen { position:absolute; inset:1.05cqw; background:#050505; border:1px solid #151515; border-radius:6.5cqw; overflow:hidden; container-type:inline-size }
.phone-island { position:absolute; top:3.2cqw; left:34%; width:32%; height:3.9cqw; border-radius:3cqw; background:#050505; box-shadow:inset 0 0 0 1px #1b1b1b; z-index:5 }
.phone-island:after { content:''; position:absolute; right:13%; top:35%; width:.6cqw; height:.6cqw; border-radius:50%; background:#1b2431; box-shadow:0 0 0 .15cqw #101214 }
.phone-volume { position:absolute; left:-.5cqw; top:22%; width:.5cqw; height:9%; border-radius:1cqw; background:#60645e; box-shadow:0 11cqw 0 #60645e }
.app-screen { width:100%; height:100%; background:var(--app-bg); color:var(--app-text); font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; text-align:left; position:relative; overflow:hidden }
.screen-light { --app-bg:#f5f6f8;--app-card:#fff;--app-line:#d8dce1;--app-text:#111;--app-muted:#5f6671;--bubble:#e5e7eb;--own-bubble:#d9ebff }
.screen-dark { --app-bg:#050505;--app-card:#111214;--app-line:#222;--app-text:#f7f7f7;--app-muted:#a0a0a0;--bubble:#242528;--own-bubble:#153a66 }
.phone-status { height:12.5cqw; padding:4.8cqw 7cqw 0; display:flex; justify-content:space-between; align-items:start; font-size:3.8cqw; font-weight:600 }
.phone-status>span:last-child { display:flex; gap:1cqw }
.phone-status svg { width:4.6cqw; height:4.6cqw }
.demo-topbar { height:14cqw; display:flex; align-items:center; justify-content:center; padding:0 4cqw; border-bottom:.25cqw solid var(--app-line); position:relative; font-size:4.7cqw; font-weight:600 }
.demo-topbar>div { display:flex; gap:4cqw; position:absolute; right:4cqw; color:#4ea1ff }
.demo-topbar svg { width:5.8cqw; height:5.8cqw }
.demo-timeline { padding:3.5cqw }
.demo-date { font-size:3.5cqw; color:var(--app-muted); margin:1cqw 1cqw 5cqw; line-height:1.2 }
.demo-note { border:.25cqw solid var(--app-line); border-radius:5cqw; padding:4cqw; background:var(--app-card); margin-bottom:3.5cqw }
.demo-note-meta { display:flex; align-items:center; justify-content:space-between; gap:2cqw; font-size:3.4cqw; color:var(--app-muted); margin-bottom:4cqw }
.demo-note-meta>span:last-child { font-size:2.9cqw; white-space:nowrap }
.demo-note-meta b { font-size:3.6cqw; letter-spacing:.2cqw; margin-left:2cqw; font-weight:500 }
.demo-photo { width:100%; aspect-ratio:1.07; border-radius:2.5cqw; object-fit:cover; object-position:50% 48%; display:block }
.demo-note>p { font-size:4.4cqw; line-height:1.4; margin:4cqw 0 0; letter-spacing:-.05cqw }
.demo-actions { border-top:.2cqw solid var(--app-line); margin-top:4cqw; padding-top:4cqw; display:flex; justify-content:space-between; align-items:center; color:var(--app-muted) }
.demo-actions svg { width:5.5cqw; height:5.5cqw }
.text-note>p { margin:0; padding:1.5cqw 0 2.5cqw; font-size:4.9cqw }
.demo-tabs { position:absolute; bottom:0; left:0; right:0; height:21cqw; padding:4cqw 12cqw 8cqw; display:flex; justify-content:space-between; border-top:.2cqw solid var(--app-line); background:var(--app-bg); color:var(--app-muted) }
.demo-tabs svg { width:7cqw; height:7cqw }
.demo-tabs>span:nth-child(2) { color:#4ea1ff }
.home-indicator { position:absolute; bottom:2.3cqw; width:35%; left:32.5%; height:1.2cqw; border-radius:1cqw; background:var(--app-text); z-index:3 }
.demo-chatbar { display:flex; justify-content:space-between; align-items:center; height:14cqw; border-bottom:.25cqw solid var(--app-line); padding-inline:5cqw; font-size:4.7cqw; font-weight:600 }
.demo-chatbar svg { width:5.7cqw; height:5.7cqw; color:#4ea1ff }
.demo-chatbar>span:last-child { width:5.7cqw }
.demo-messages { padding:6cqw 4cqw }
.demo-messages>.demo-date { text-align:center; margin-bottom:8cqw; font-size:3cqw }
.demo-bubble { max-width:78%; padding:3.8cqw 4cqw; border-radius:4cqw; font-size:4.2cqw; line-height:1.4; background:var(--bubble); margin-bottom:5cqw }
.demo-bubble.outgoing { margin-left:auto; background:var(--own-bubble) }
.demo-image-bubble { width:81%; margin:0 auto 5cqw 0 }
.demo-image-bubble>img { width:100%; aspect-ratio:1.1; object-fit:cover; border-radius:4cqw }
.demo-message-input { position:absolute; bottom:9cqw; left:4cqw; right:4cqw; border:.3cqw solid var(--app-line); border-radius:6cqw; height:12cqw; display:flex; align-items:center; justify-content:space-between; padding:0 4cqw; color:var(--app-muted); background:var(--app-card); font-size:4cqw }
.demo-message-input svg { width:6cqw; height:6cqw; color:#4ea1ff }
.ntmf-porcelain { background:#ece7de }
.ntmf-porcelain .phone-main { width:48%; left:45%; top:12%; transform:rotate(7deg) }
.ntmf-porcelain .ntmf-brand { top:10%; gap:6cqw }
.ntmf-porcelain .ntmf-brand>span { font-size:6.2cqw }
.ntmf-terracotta { background:#d85b42; color:#fff3e6 }
.ntmf-terracotta:before { content:''; position:absolute; width:120%; height:44%; left:-5%; bottom:-21%; background:#ec9875; transform:rotate(-17deg); }
.ntmf-terracotta .ntmf-brand { flex-direction:row; align-items:center; top:7%; gap:3cqw }
.ntmf-terracotta .ntmf-brand>img { width:10cqw; border-radius:2.2cqw }
.ntmf-terracotta .ntmf-brand>span { font-size:5.2cqw; letter-spacing:-.2cqw }
.ntmf-terracotta .phone-main { width:54%; top:27%; left:27%; transform:rotate(-13deg); box-shadow:4cqw 5cqw 6cqw #651e1b44 }
.ntmf-charcoal { background:#181a19; color:#f0eee8 }
.ntmf-charcoal .ntmf-brand { flex-direction:row; gap:3cqw; align-items:center; top:7%; }
.ntmf-charcoal .ntmf-brand>img { width:10cqw; border-radius:2.2cqw; box-shadow:0 0 0 .2cqw #ffffff14 }
.ntmf-charcoal .ntmf-brand>span { font-size:5.2cqw; letter-spacing:-.22cqw }
.ntmf-charcoal .phone-device { width:45%; box-shadow:1cqw 3.5cqw 5cqw #0009 }
.ntmf-charcoal .phone-main { top:25%; left:42%; transform:rotate(8deg); z-index:2 }
.ntmf-charcoal .phone-back { top:28%; left:8%; transform:rotate(-9deg); }
.ntmf-art .project-open { z-index:8 }
.option-art .ntmf-art { transition:filter .25s }
.option-art:hover .ntmf-art { filter:brightness(1.035) }
.context-toolbar { position:sticky; top:0; z-index:70; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border-bottom:1px solid #dce3ee; padding:12px 4.45%; min-height:52px; font-size:13px }
.context-toolbar nav { display:flex; gap:7px; align-items:center }
.context-toolbar nav a { padding:7px 12px; border-radius:20px; border:1px solid transparent }
.context-toolbar a[aria-current=page] { border-color:#142b52 }
.options-context { scroll-behavior:auto }
.context-page .site-header { top:52px }
.context-page #notes { scroll-margin-top:52px }
@media(max-width:1000px) {
  .options-main { padding:44px 28px 50px }
  .options-header { padding:24px 28px }
  .options-grid { gap:18px }
  .options-heading { align-items:start }
  .options-heading h1 { font-size:34px; max-width:280px }
  .options-heading p { font-size:14px; max-width:280px }
  .option-card h2 { font-size:20px }
  .option-card>p { font-size:13px }
}
@media(max-width:650px) {
  .options-heading { display:block }
  .options-heading h1 { max-width:none; font-size:35px }
  .options-heading p { margin-top:18px; max-width:340px; font-size:15px }
  .options-grid { grid-template-columns:1fr; gap:42px; max-width:440px; margin:auto }
  .option-card h2 { font-size:25px; margin-top:20px }
  .option-card>p { font-size:15px }
  .option-card>.text-link { font-size:14px }
  .options-note { font-size:12px; margin-top:40px }
  .context-toolbar { padding:10px 18px; flex-wrap:wrap; justify-content:center; gap:5px; }
  .context-toolbar>a { margin-right:auto }
  .context-toolbar nav { gap:0 }
  .context-toolbar nav a { padding:7px 8px; font-size:11px }
  .context-page .site-header { top:52px }
}