/* Code-native gallery studies. Load after creative.css. All artwork is static. */
.interface-preview,
.app-preview { min-width: 0; scroll-snap-align: start; }
.interface-preview .interface-preview-stage,
.app-preview .app-preview-stage { aspect-ratio: 16 / 10; container-type: inline-size; isolation: isolate; overflow: hidden; font-family: Arial, Helvetica, sans-serif; line-height: 1.25; color-scheme: light; }
.interface-preview-stage *,
.app-preview-stage * { box-sizing: border-box; }
.interface-preview .interface-preview-stage { background: #c7d2be; color: #173c2d; }
.interface-preview .interface-preview-browser { position: absolute; inset: 6% 6% 12%; overflow: hidden; border: 1px solid #39544338; border-radius: 1cqw; background: #f5f3e9; box-shadow: 0 2.5cqw 5cqw #1c382c26; transform: rotate(-1deg); }
.interface-preview .interface-preview-chrome { height: 3.3cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 1.6cqw; border-bottom: 1px solid #163e2d24; font-size: .8cqw; color: #516555; }
.interface-preview-dots { display: flex; gap: .4cqw; }
.interface-preview-dots i { width: .55cqw; height: .55cqw; border: 1px solid #698272; border-radius: 50%; }
.interface-preview .interface-preview-page { padding: 0 3.1cqw; }
.interface-preview .interface-preview-nav { height: 6cqw; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; border-bottom: 1px solid #163e2d35; font-size: .95cqw; }
.interface-preview-nav strong { font-size: 1.6cqw; letter-spacing: -.06em; }
.interface-preview-menu { border-bottom: 1px solid #173c2d; padding-bottom: .4cqw; }
.interface-preview-menu b { margin-left: 1cqw; }
.interface-preview .interface-preview-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; padding: 3cqw 0 2.5cqw; }
.interface-preview-kicker { display: block; font-size: .75cqw; letter-spacing: .07em; margin-bottom: 1.5cqw; }
.interface-preview .interface-preview-headline { font-size: 7.6cqw; line-height: .88; letter-spacing: -.075em; font-weight: 700; }
.interface-preview .interface-preview-headline em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #173c2d; }
.interface-preview .interface-preview-copy p { margin: 1.6cqw 0 1.4cqw; color: #3c5648; font-size: 1cqw; line-height: 1.5; }
.interface-preview-link { display: inline-flex; gap: 3cqw; border-bottom: 1px solid #173c2d; padding-bottom: .5cqw; font-size: .95cqw; }
.interface-preview-art { position: relative; min-width: 0; overflow: hidden; background: #dce69b; border-radius: 15cqw 15cqw .2cqw .2cqw; }
.interface-preview-orbit { position: absolute; width: 31cqw; height: 31cqw; border: 1px solid #355b3e55; border-radius: 50%; top: 2cqw; left: 2cqw; }
.interface-preview-petal { position: absolute; width: 19cqw; height: 28cqw; background: #194c36; border-radius: 100% 0 100% 0; transform-origin: bottom right; }
.interface-preview-petal-one { left: 0; top: 1cqw; transform: rotate(-27deg); background: linear-gradient(135deg, #568557, #103c2a); }
.interface-preview-petal-two { right: -1cqw; top: 4cqw; transform: rotate(24deg); background: linear-gradient(145deg, #2d6844, #062d22); }
.interface-preview-disc { position: absolute; width: 12cqw; height: 12cqw; left: 12cqw; top: 14cqw; border-radius: 50%; background: #e9efc4; box-shadow: inset -1cqw -1cqw 2cqw #97b467; }
.interface-preview-art-note { position: absolute; left: 1.8cqw; bottom: 3.8cqw; font-size: .85cqw; letter-spacing: .06em; color: #f5f3e9; }
.interface-preview-art-index { position: absolute; bottom: 1.3cqw; right: 1.5cqw; font-size: .65cqw; color: #f5f3e9; }
.interface-preview .interface-preview-bottom { display: flex; align-items: center; gap: 3cqw; padding-top: 1.6cqw; border-top: 1px solid #163e2d35; }
.interface-preview-bottom > span:first-child { font-size: .75cqw; letter-spacing: .07em; }
.interface-preview-bottom strong { font-size: 1.7cqw; line-height: 1.1; letter-spacing: -.035em; }
.interface-preview-bottom-arrow { margin-left: auto; font-size: 2.3cqw; }
.interface-preview-thumbnail { width: 13cqw; height: 5cqw; background: repeating-linear-gradient(135deg, #153e2d 0 1cqw, #ccd7b0 1cqw 1.3cqw); }
.interface-preview .interface-preview-stage > .interface-preview-label,
.app-preview .app-preview-stage > .app-preview-label { position: absolute; left: 3cqw; bottom: 2cqw; margin: 0; padding: .65cqw 1cqw; border: 1px solid #ffffff45; border-radius: .3cqw; background: #15382c; color: #fff; font-size: clamp(9px, 1.05cqw, 13px); line-height: 1.4; letter-spacing: .07em; }
.app-preview .app-preview-stage { background: radial-gradient(ellipse at 75% 20%, #c3b5f6, transparent 52%), linear-gradient(125deg, #c6dafd, #e7e8fc 55%, #b4bbec); color: #24254b; }
.app-preview-scene { position: absolute; inset: 0; }
.app-preview-halo { position: absolute; width: 71cqw; height: 71cqw; right: -9cqw; top: -12cqw; border: 1px solid #ffffffa6; border-radius: 50%; box-shadow: 0 0 0 5cqw #ffffff14, 0 0 0 10cqw #ffffff18; }
.app-preview-background-word { position: absolute; top: 5cqw; left: 5cqw; font-size: 7cqw; line-height: .9; font-weight: 700; letter-spacing: -.07em; color: #3b408c; width: 24cqw; }
.app-preview-margin-note { position: absolute; left: 5cqw; top: 23cqw; font-size: .85cqw; line-height: 1.6; letter-spacing: .12em; color: #474a81; }
.app-preview .app-preview-phone { position: absolute; width: 25.5cqw; height: 49cqw; padding: .65cqw; border-radius: 3.7cqw; border: 1px solid #62678c; background: #20233f; box-shadow: 1.3cqw 2.8cqw 4cqw #38396a38, inset 0 0 0 .25cqw #8188ab; overflow: hidden; }
.app-preview-phone-dashboard { left: 28cqw; top: 6cqw; transform: rotate(-7deg); }
.app-preview-phone-tasks { left: 58cqw; top: 9cqw; transform: rotate(7deg); }
.app-preview-island { position: absolute; z-index: 2; top: 1.35cqw; left: 50%; transform: translateX(-50%); width: 7cqw; height: 1.6cqw; background: #20233f; border-radius: 2cqw; }
.app-preview-status { display: flex; justify-content: space-between; padding: 1.2cqw 1.6cqw 1cqw; border-radius: 3cqw 3cqw 0 0; background: #f8f9ff; font-size: .85cqw; font-weight: 700; }
.app-preview-signal { font-size: .65cqw; }
.app-preview .app-preview-screen { position: relative; height: calc(100% - 3.2cqw); padding: .8cqw 1.6cqw 4cqw; background: #f8f9ff; border-radius: 0 0 3cqw 3cqw; overflow: hidden; }
.app-preview-topbar { display: flex; justify-content: space-between; align-items: center; height: 3cqw; font-size: 1cqw; margin-bottom: 1.7cqw; }
.app-preview-topbar > strong { font-size: 1.25cqw; letter-spacing: -.04em; }
.app-preview-avatar { display: grid; place-items: center; width: 2.7cqw; height: 2.7cqw; border-radius: 50%; background: #e1dcff; color: #51429c; font-size: 1cqw; }
.app-preview-overline { display: block; font-size: .65cqw; letter-spacing: .08em; color: #646585; margin-bottom: .7cqw; }
.app-preview-greeting { font-size: 2.9cqw; font-weight: 700; letter-spacing: -.065em; line-height: 1.03; margin-bottom: 1.7cqw; }
.app-preview-focus-card { position: relative; overflow: hidden; padding: 1.5cqw; height: 14.7cqw; border-radius: 1.6cqw; color: #fff; background: linear-gradient(125deg, #4645b7, #6e54cd); }
.app-preview-focus-card > span:first-child { font-size: .65cqw; letter-spacing: .1em; }
.app-preview-focus-card > strong { position: relative; z-index: 1; display: block; font-size: 2.4cqw; line-height: 1.1; margin-top: 1cqw; letter-spacing: -.045em; }
.app-preview-focus-orbit { position: absolute; width: 10cqw; height: 10cqw; right: -1cqw; top: 1cqw; border: 1.4cqw solid #c1b8ff77; border-radius: 50%; box-shadow: 0 0 0 1cqw #c1b8ff22; }
.app-preview-focus-pill { position: absolute; bottom: 1.3cqw; left: 1.5cqw; right: 1.5cqw; padding: .7cqw 1cqw; border-radius: 2cqw; font-size: .85cqw; background: #ffffff20; border: 1px solid #ffffff40; }
.app-preview-section-title { display: flex; justify-content: space-between; align-items: center; font-size: 1.05cqw; font-weight: 700; margin: 1.7cqw 0 1cqw; }
.app-preview-section-title > span { color: #61569c; font-size: .8cqw; font-weight: 400; }
.app-preview-space { display: flex; gap: .8cqw; align-items: center; padding: 1cqw 0; border-bottom: 1px solid #dfdfed; }
.app-preview-space-icon { display: grid; place-items: center; width: 3.3cqw; height: 3.3cqw; border-radius: 1cqw; background: #e6e1ff; color: #5848a1; font-size: 1.8cqw; flex-shrink: 0; }
.app-preview-space-icon-soft { background: #dcecff; color: #3d5d98; }
.app-preview-space strong,
.app-preview-tasks strong { display: block; font-size: .95cqw; font-weight: 600; }
.app-preview-space small,
.app-preview-tasks small { display: block; margin-top: .4cqw; font-size: .75cqw; color: #696a83; }
.app-preview-space > b { margin-left: auto; font-size: 1.1cqw; font-weight: 400; }
.app-preview-tabbar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 1.1cqw 1cqw 1.5cqw; border-top: 1px solid #e0e1ef; background: #f8f9ff; color: #686b83; font-size: .85cqw; }
.app-preview-tabbar .app-preview-tab-active { color: #493ca4; font-weight: 700; }
.app-preview-more { font-weight: 700; font-size: 1.6cqw; }
.app-preview-filters { display: flex; justify-content: space-between; gap: .5cqw; font-size: .9cqw; margin: 2cqw 0; color: #66677e; }
.app-preview-filters > span { padding: .7cqw .9cqw; border-radius: 2cqw; }
.app-preview-filter-active { color: #fff; background: #5244b3; }
.app-preview .app-preview-tasks { list-style: none; padding: 0; margin: 0; }
.app-preview .app-preview-tasks li { display: flex; align-items: center; gap: .8cqw; padding: 1.5cqw 0; margin: 0; border-bottom: 1px solid #e0e1ee; }
.app-preview-check { display: grid; place-items: center; width: 1.5cqw; height: 1.5cqw; border: 1px solid #b4b5cd; border-radius: .5cqw; flex: none; font-size: 1cqw; }
.app-preview-task-dot { width: .5cqw; height: .5cqw; border-radius: 50%; background: #9672ce; margin-left: auto; flex: none; }
.app-preview-task-dot-blue { background: #527ed3; }
.app-preview-task-done .app-preview-check { background: #e5e0fa; border-color: #e5e0fa; color: #6554ad; }
.app-preview-task-done strong { text-decoration: line-through; color: #6f7189; }
.app-preview-add { margin-top: 1.5cqw; padding: 1cqw; border: 1px dashed #b4b1d6; border-radius: .8cqw; color: #61549a; font-size: .9cqw; }
.app-preview .app-preview-stage > .app-preview-label { background: #393477; }
@media (max-width: 480px) {
  .interface-preview .interface-preview-stage,
  .app-preview .app-preview-stage { aspect-ratio: 4 / 3; }
  .interface-preview .interface-preview-browser { inset: 8% 3% 13%; }
  .interface-preview .interface-preview-hero { padding-top: 4cqw; padding-bottom: 4cqw; }
  .interface-preview .interface-preview-headline { font-size: 9.2cqw; }
  .interface-preview .interface-preview-copy p { font-size: 1.3cqw; }
  .interface-preview-art { min-height: 38cqw; }
  .interface-preview-petal { height: 36cqw; width: 23cqw; }
  .interface-preview-disc { top: 18cqw; }
  .interface-preview-kicker { max-width: 32cqw; font-size: 1cqw; }
  .interface-preview .interface-preview-nav { font-size: 1.15cqw; }
  .interface-preview-nav strong { font-size: 1.9cqw; }
  .interface-preview-menu { display: none; }
  .app-preview-background-word { top: 3cqw; left: 5cqw; width: auto; font-size: 5.5cqw; }
  .app-preview-margin-note { display: none; }
  .app-preview .app-preview-phone { width: 30cqw; height: 57cqw; }
  .app-preview-phone-dashboard { left: 16cqw; top: 10cqw; }
  .app-preview-phone-tasks { left: 53cqw; top: 12cqw; }
  .app-preview-greeting { font-size: 3.6cqw; }
  .app-preview-topbar { margin-bottom: 2.3cqw; font-size: 1.3cqw; }
  .app-preview-topbar > strong { font-size: 1.5cqw; }
  .app-preview-overline { font-size: .85cqw; }
  .app-preview-focus-card { height: 18cqw; }
  .app-preview-focus-card > strong { font-size: 3.1cqw; }
  .app-preview-focus-card > span:first-child { font-size: .85cqw; }
  .app-preview-focus-pill { font-size: 1.1cqw; }
  .app-preview-section-title { font-size: 1.3cqw; }
  .app-preview-section-title > span { font-size: 1cqw; }
  .app-preview-space strong,
  .app-preview-tasks strong { font-size: 1.2cqw; }
  .app-preview-space small,
  .app-preview-tasks small { font-size: 1cqw; }
  .app-preview .app-preview-tasks li { padding-block: 2cqw; }
  .app-preview-filters { font-size: 1.15cqw; }
  .app-preview-add,
  .app-preview-tabbar { font-size: 1.15cqw; }
}

/* Art direction stays inside the two illustrative gallery studies. */
.interface-preview .interface-preview-stage {
  background: radial-gradient(ellipse at 85% 10%, #258ce4 0, transparent 55%),
    radial-gradient(ellipse at 5% 95%, #18b8db55, transparent 50%), #071f51;
  color: #112956;
}
.interface-preview-stage::before,
.app-preview-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#b7dfff0b 1px, transparent 1px), linear-gradient(90deg, #b7dfff0b 1px, transparent 1px);
  background-size: 5cqw 5cqw;
}
.interface-preview .interface-preview-browser {
  inset: 5% 5% 12%; border: 1px solid #c0e4ff80; border-radius: 1.2cqw;
  background: #f2f7fc; transform: perspective(150cqw) rotateY(-3deg) rotateZ(-1.5deg);
  box-shadow: 0 .3cqw 0 #a5c8e3, 0 .8cqw 0 #163961, 0 3cqw 4cqw #010d2c80, 0 7cqw 9cqw #010d2c66;
}
.interface-preview .interface-preview-chrome {
  height: 3.8cqw; background: #dfebf6; color: #4f6683; border-color: #bed0e4;
}
.interface-preview-dots i { background: #a4b9d0; border: 0; }
.interface-preview-dots i:first-child { background: #5a83c4; }
.interface-preview-dots i:last-child { background: #57bbc9; }
.interface-preview-address { padding: .4cqw 9cqw; border: 1px solid #c8d8e8; background: #f4f8fc; border-radius: .4cqw; }
.interface-preview .interface-preview-nav { height: 5.5cqw; border-color: #cedbe9; }
.interface-preview-nav strong { color: #113b92; letter-spacing: -.07em; }
.interface-preview-menu { color: #164be1; border-color: #164be1; }
.interface-preview .interface-preview-hero { grid-template-columns: 1fr 1.05fr; gap: 2.5cqw; padding: 2.5cqw 0 2cqw; }
.interface-preview-kicker { font-size: .68cqw; font-weight: 700; letter-spacing: .09em; color: #36547c; margin-bottom: 1.4cqw; }
.interface-preview-kicker i { display: inline-block; width: .5cqw; height: .5cqw; margin-right: .4cqw; border-radius: 50%; background: #2461e9; }
.interface-preview .interface-preview-headline { font-size: 7cqw; font-weight: 600; line-height: .91; color: #112956; }
.interface-preview .interface-preview-headline em { color: #2459e9; font-weight: 400; letter-spacing: -.08em; }
.netens-site .interface-preview .interface-preview-page .interface-preview-copy p {
  font-size: .95cqw; line-height: 1.5; color: #4d6380; margin: 1.4cqw 0 1.3cqw;
}
.interface-preview-link { background: #204edc; border: 0; border-radius: .35cqw; color: #fff; padding: .9cqw 1.2cqw; font-size: .85cqw; }
.interface-preview-link b { font-size: 1.2cqw; line-height: 1; font-weight: 400; }
.interface-preview-tags { display: flex; flex-wrap: wrap; gap: .5cqw; margin-top: 1.3cqw; }
.interface-preview-tags span { border: 1px solid #c6d5e8; border-radius: 2cqw; padding: .35cqw .65cqw; font-size: .65cqw; color: #4f6683; }
.interface-preview-art {
  border-radius: .5cqw; background: radial-gradient(ellipse at 70% 25%, #2b74ff, transparent 65%), #123dc0;
  box-shadow: inset 0 0 0 1px #ffffff22; min-height: 32cqw;
}
.interface-preview-art::after { content: ""; position: absolute; left: 5cqw; right: 4cqw; bottom: 4cqw; height: 3cqw; background: #001d6266; filter: blur(1.4cqw); border-radius: 50%; }
.interface-preview-art-topline { position: absolute; top: 1.5cqw; left: 1.7cqw; right: 1.7cqw; display: flex; justify-content: space-between; color: #cae8ff; font-size: .65cqw; letter-spacing: .13em; }
.interface-preview-art-topline b { font-size: 1.6cqw; font-weight: 400; }
.interface-preview-orbit { width: 32cqw; height: 32cqw; top: 3cqw; left: 2cqw; border-color: #b0edff40; box-shadow: 0 0 0 3cqw #a3daff0a, inset 0 0 0 3cqw #a3daff0a; transform: rotate(-35deg) scaleY(.68); }
.interface-preview-petal { width: 20cqw; height: 23cqw; border-radius: 50%; transform-origin: center; border: 1px solid #a2f7ff80; }
.interface-preview-petal-one { left: 1cqw; top: 5cqw; transform: rotate(-35deg) scaleX(.72); background: linear-gradient(115deg, #efffff, #53e1f2 22%, #1594c5 48%, #06267e 71%, #49d8ef 96%); box-shadow: inset .7cqw .3cqw 1cqw #d2ffff99, 1cqw 2cqw 2cqw #00135466; }
.interface-preview-petal-two { right: 1cqw; top: 5cqw; transform: rotate(35deg) scaleX(.72); background: linear-gradient(75deg, #072c8e, #2f99e3 30%, #a4ffff 57%, #2dcadf 76%, #084e9d); box-shadow: inset -.5cqw .4cqw 1cqw #caffff99, -.7cqw 2cqw 2cqw #00135466; }
.interface-preview-disc { z-index: 1; width: 12cqw; height: 12cqw; left: 12cqw; top: 12cqw; border: 1px solid #dcffffaa; background: radial-gradient(circle at 30% 23%, #f0ffff, #a6efff 24%, #32acd7 53%, #0b3988 82%); box-shadow: inset -.7cqw -1cqw 1.2cqw #03246799, .5cqw 1.6cqw 2cqw #001d6c66; }
.interface-preview-art-note { z-index: 2; bottom: 3.2cqw; font-size: .8cqw; color: #f1fcff; line-height: 1.5; }
.interface-preview-art-index { z-index: 2; bottom: 1.2cqw; color: #bcdfff; font-size: .6cqw; }
.interface-preview .interface-preview-bottom { gap: 2.2cqw; border-color: #cedbe9; padding-top: 1.3cqw; }
.interface-preview-bottom > span:first-child { color: #315d9e; font-weight: 700; font-size: .65cqw; }
.interface-preview-bottom small { display: block; margin-top: .55cqw; color: #647997; font-size: .65cqw; font-weight: 400; letter-spacing: 0; }
.interface-preview-bottom strong { font-family: Georgia, 'Times New Roman', serif; font-size: 1.7cqw; font-weight: 400; }
.interface-preview-bottom-arrow { color: #2459e9; }
.interface-preview-thumbnail { border-radius: .3cqw; background: radial-gradient(ellipse at 65% 100%, #9af4ff 0 20%, transparent 21%), repeating-radial-gradient(ellipse at 15% 110%, #2d69e1 0 .6cqw, #a6ddff .65cqw .85cqw, #122d82 .9cqw 1.8cqw); }
.interface-preview .interface-preview-stage > .interface-preview-label,
.app-preview .app-preview-stage > .app-preview-label { background: #081f43e6; border-color: #b0d4ff55; border-radius: 2cqw; letter-spacing: .04em; }

.app-preview .app-preview-stage {
  background: radial-gradient(ellipse at 64% 24%, #0e6497 0, transparent 55%),
    radial-gradient(ellipse at 90% 90%, #1546a2 0, transparent 60%), #07172f; color: #132c51;
}
.app-preview-scene::after { content: ""; position: absolute; left: 27cqw; right: 10cqw; bottom: 6cqw; height: 3cqw; background: #000d25; filter: blur(2cqw); border-radius: 50%; z-index: -1; }
.app-preview-halo { width: 66cqw; height: 66cqw; right: -5cqw; top: -8cqw; border-color: #62d9ff33; box-shadow: 0 0 0 7cqw #81ceff06, 0 0 0 14cqw #81ceff05; }
.app-preview-background-word { top: 8cqw; left: 4cqw; font-size: 6.3cqw; line-height: .98; font-weight: 500; color: #f0f8ff; letter-spacing: -.06em; }
.app-preview-background-word em { color: #7ce5f5; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.app-preview-margin-note { left: 4.3cqw; top: 24cqw; color: #85b3d1; font-size: .7cqw; letter-spacing: .12em; }
.app-preview-margin-note b { display: block; margin-top: 1.2cqw; color: #d8edff; font-size: 1.4cqw; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; }
.app-preview-margin-note > span { display: block; margin-top: 3cqw; padding-top: 1.2cqw; border-top: 1px solid #64a3ca55; font-size: .6cqw; }
.app-preview .app-preview-phone {
  width: 26cqw; height: 50cqw; padding: .65cqw; border-radius: 3.8cqw; border-color: #bedfff;
  background: linear-gradient(110deg, #e0edfa, #516d8b 8%, #07142a 14% 85%, #8aa8c3 96%, #daeaff);
  box-shadow: .3cqw .3cqw 0 #64809d, .7cqw .7cqw 0 #112b49, 1.5cqw 3cqw 3cqw #000b2380, inset 0 0 0 .25cqw #aecbe499;
}
.app-preview-phone-dashboard { left: 29cqw; top: 5cqw; transform: rotate(-8deg); z-index: 1; }
.app-preview-phone-tasks { left: 60cqw; top: 8cqw; transform: rotate(9deg); }
.app-preview-island { background: #030c1b; box-shadow: inset 0 0 0 1px #ffffff18; }
.app-preview-island::after { content: ""; position: absolute; right: .7cqw; top: .5cqw; width: .6cqw; height: .6cqw; background: radial-gradient(circle at 35% 35%, #2b6b9e, #0b172b 65%); border-radius: 50%; }
.app-preview-status { background: #edf5fc; color: #183652; }
.app-preview .app-preview-screen { background: #edf5fc; }
.app-preview-topbar > strong { font-weight: 600; letter-spacing: -.07em; }
.app-preview-avatar { background: #1745ac; color: #d5faff; border: 1px solid #5a8ce1; }
.app-preview-overline { color: #5e7591; font-size: .62cqw; letter-spacing: .1em; }
.app-preview-greeting { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 3.1cqw; letter-spacing: -.055em; }
.app-preview-focus-card { height: 15.4cqw; border-radius: 1.3cqw; background: radial-gradient(ellipse at 100% 0, #2897cd, transparent 70%), #1946bc; box-shadow: 0 .8cqw 2cqw #003b9826, inset 0 0 0 1px #95d8ff44; }
.app-preview-focus-card > strong { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 2.6cqw; }
.app-preview-focus-orbit { right: -1.5cqw; top: 1cqw; width: 11cqw; height: 11cqw; border: 1.5cqw solid #80ebf0; transform: rotate(-35deg) scaleX(.7); box-shadow: inset .5cqw .3cqw .7cqw #fff8, .4cqw .6cqw 1cqw #05267399, 0 0 0 .7cqw #7ee6f01a; }
.app-preview-focus-pill { border-radius: .6cqw; background: #052b7580; border-color: #a7eaff55; }
.app-preview-section-title > span { color: #2e69a4; }
.app-preview-space { border-color: #ccdaea; }
.app-preview-space-icon { background: #d4e6fa; color: #235bb5; border: 1px solid #bfd6f1; }
.app-preview-space-icon-soft { background: #d0eeee; color: #197d8b; border-color: #b0dfe1; }
.app-preview-space small,
.app-preview-tasks small { color: #59718b; }
.app-preview-tabbar { background: #edf5fc; color: #657d98; border-color: #c7d9eb; font-size: .8cqw; padding-top: .8cqw; }
.app-preview-tabbar > span::before { content: ""; display: block; width: 1cqw; height: 1cqw; border: 1px solid currentColor; border-radius: .3cqw; margin: 0 auto .4cqw; }
.app-preview-tabbar > span:nth-child(2)::before { border-radius: 50%; }
.app-preview-tabbar .app-preview-tab-active { color: #1955bf; }
.app-preview-tabbar .app-preview-tab-active::before { background: currentColor; box-shadow: inset 0 0 0 .25cqw #edf5fc; }
.app-preview-filter-active { background: #2155c3; box-shadow: 0 .3cqw .7cqw #2155c333; }
.app-preview-filters { color: #59718b; margin: 1.5cqw 0; }
.app-preview .app-preview-tasks li { padding-block: 1.25cqw; border-color: #ccdaea; }
.app-preview-check { border-color: #9bb6d3; border-radius: 50%; }
.app-preview-task-dot { background: #3175e3; }
.app-preview-task-dot-blue { background: #119da6; }
.app-preview-task-done .app-preview-check { background: #c5e8e9; border-color: #a4d8db; color: #157783; }
.app-preview-task-done strong { color: #69839b; }
.app-preview-add { border-color: #a3c3df; color: #2e629e; background: #e1edf9; }
.app-preview-reflection { position: relative; overflow: hidden; margin-top: 1.2cqw; padding: 1.2cqw; border-radius: .7cqw; background: #d4e9ee; }
.app-preview-reflection > span { display: block; color: #397180; font-size: .55cqw; letter-spacing: .1em; }
.app-preview-reflection > strong { position: relative; z-index: 1; display: block; max-width: 13cqw; margin-top: .5cqw; font-family: Georgia, 'Times New Roman', serif; font-size: 1.3cqw; font-weight: 400; }
.app-preview-reflection i { position: absolute; right: -.5cqw; top: 1cqw; width: 6cqw; height: 6cqw; border: .8cqw solid #79bbc6; border-radius: 50%; }
.app-preview-phone-dashboard .app-preview-status,
.app-preview .app-preview-phone-dashboard .app-preview-screen { background: #0c2442; color: #e5f3ff; }
.app-preview-phone-dashboard .app-preview-overline { color: #8eacc9; }
.app-preview-phone-dashboard .app-preview-section-title > span { color: #8bd8ed; }
.app-preview-phone-dashboard .app-preview-space { border-color: #25405d; }
.app-preview-phone-dashboard .app-preview-space-icon { color: #95e9f1; background: #1c4961; border-color: #35657a; }
.app-preview-phone-dashboard .app-preview-space-icon-soft { color: #a0beff; background: #223d6e; border-color: #385480; }
.app-preview-phone-dashboard .app-preview-space small { color: #93aec8; }
.app-preview-phone-dashboard .app-preview-tabbar { background: #0c2442; border-color: #25405d; color: #8eacc9; }
.app-preview-phone-dashboard .app-preview-tab-active { color: #83e6f1; }
.app-preview-phone-dashboard .app-preview-tab-active::before { box-shadow: inset 0 0 0 .25cqw #0c2442; }

@media (max-width: 480px) {
  .interface-preview .interface-preview-browser { inset: 7% 4% 13%; transform: rotate(-1.5deg); }
  .interface-preview .interface-preview-hero { padding-block: 3cqw; gap: 2cqw; }
  .interface-preview .interface-preview-headline { font-size: 9.2cqw; }
  .interface-preview-kicker { max-width: 34cqw; font-size: .95cqw; line-height: 1.5; }
  .netens-site .interface-preview .interface-preview-page .interface-preview-copy p { font-size: 1.25cqw; margin-block: 1.6cqw; }
  .interface-preview-link { padding: 1.1cqw 1.4cqw; font-size: 1.1cqw; }
  .interface-preview-tags { margin-top: 1.6cqw; gap: .6cqw; }
  .interface-preview-tags span { font-size: .85cqw; }
  .interface-preview-art { min-height: 42cqw; }
  .interface-preview-art-topline { font-size: .85cqw; }
  .interface-preview-petal { top: 8cqw; width: 24cqw; height: 28cqw; }
  .interface-preview-disc { top: 18cqw; left: 13cqw; width: 13cqw; height: 13cqw; }
  .interface-preview-art-note { bottom: 4cqw; font-size: 1cqw; }
  .interface-preview-art-index { font-size: .75cqw; }
  .interface-preview-bottom > span:first-child,
  .interface-preview-bottom small { font-size: .85cqw; }
  .interface-preview-bottom strong { font-size: 2cqw; }
  .app-preview-background-word { top: 3cqw; left: 6cqw; width: auto; font-size: 5.5cqw; }
  .app-preview-background-word br { display: none; }
  .app-preview .app-preview-phone { width: 33cqw; height: 59cqw; }
  .app-preview-phone-dashboard { left: 12cqw; top: 10cqw; transform: rotate(-6deg); }
  .app-preview-phone-tasks { left: 54cqw; top: 11cqw; transform: rotate(6deg); }
  .app-preview-greeting { font-size: 3.7cqw; }
  .app-preview-overline { font-size: .85cqw; }
  .app-preview-focus-card { height: 18cqw; }
  .app-preview-focus-card > strong { font-size: 3.1cqw; }
  .app-preview-focus-orbit { right: -.5cqw; top: 2cqw; width: 13cqw; height: 13cqw; }
  .app-preview-focus-pill { font-size: 1.1cqw; }
  .app-preview-tabbar { font-size: 1.05cqw; }
  .app-preview .app-preview-tasks li { padding-block: 1.8cqw; }
  .app-preview-reflection > span { font-size: .75cqw; }
  .app-preview-reflection > strong { max-width: 19cqw; font-size: 1.6cqw; }
}