/* Odd Bear Productions — website style selector v0.2
   Four presentations of the same HTML pages, not an emulator of any Android app.
   No remote fonts, tracking, images or third-party dependencies. */
:root {
  --head-bg: rgba(20, 21, 20, .94);
  --nav-bg: #1a1c1a;
  --alt-bg: #1a1c1a;
  --hero-background: radial-gradient(ellipse at 78% 46%, rgba(217,138,88,.12), transparent 42%), linear-gradient(145deg,#171816,#1b1b18 51%,#141514);
  --footer-bg: #111311;
  --card-bg: #222522;
  --card-copy: #c1c3bb;
  --body-copy: #c9c8bf;
  --prose-copy: #d5d4cb;
  --footer-copy: #d2d0c7;
  --footnote-copy: #a8aaa2;
  --panel-bg: linear-gradient(120deg,#343026,#242722);
  --panel-text: #d2cfc7;
  --notice-bg: #2a2a24;
  --notice-ink: #ece9e1;
  --pill-bg: #363c31;
  --pill-ink: #d1dfbc;
  --button-ink: #201915;
  --shadow: rgba(0,0,0,.18);
}
html[data-theme="lightsout"] {
  color-scheme: dark;
  --bg: #050607; --bg-2: #08090a; --surface: #0f1112; --surface-2: #17191b;
  --line: #292f30; --ink: #f7f8f6; --muted: #aab1b0; --accent: #f1a36e; --accent-light: #ffbd8e;
  --head-bg: rgba(0,0,0,.95); --nav-bg: #08090a; --alt-bg: #090a0b;
  --hero-background: radial-gradient(ellipse at 78% 40%, rgba(241,163,110,.07), transparent 52%), #050607;
  --footer-bg: #020303; --card-bg: #0d0f10; --card-copy: #bbc1c0;
  --body-copy: #b9c0c0; --prose-copy: #d2d7d5; --footer-copy: #d2d7d5; --footnote-copy: #b0b6b4;
  --panel-bg: linear-gradient(115deg,#1c1917,#0c0e0e); --panel-text: #c9cecd;
  --notice-bg: #1b1d1d; --notice-ink: #e1e5e3;
  --pill-bg: #192a22; --pill-ink: #b8e6c9; --button-ink: #1d1008;
  --radius: 15px;
}
html[data-theme="touchcontrol"] {
  color-scheme: dark;
  --bg: #171b1d; --bg-2: #1c2224; --surface: #232b2e; --surface-2: #2b3538;
  --line: #3c484c; --ink: #f4f5f3; --muted: #b7c2c1; --accent: #f39b58; --accent-light: #ffbb85;
  --head-bg: rgba(19,24,26,.96); --nav-bg: #1c2224; --alt-bg: #1b2225;
  --hero-background: radial-gradient(ellipse at 75% 50%, rgba(243,155,88,.12), transparent 45%),linear-gradient(125deg,#141b1e,#202729);
  --footer-bg: #101619; --card-bg: #242c2f; --card-copy: #c5cecb;
  --body-copy: #ccd5d2; --prose-copy: #d5ddda; --footer-copy: #d4dad7; --footnote-copy: #b5beba;
  --panel-bg: linear-gradient(115deg,#3a3029,#20282a); --panel-text: #d7d3ce;
  --notice-bg: #303537; --notice-ink: #edf1ee;
  --pill-bg: #1d4838; --pill-ink: #b7f3cf; --button-ink: #1b110a;
  --radius: 17px;
}
html[data-theme="lifeframed"] {
  color-scheme: dark;
  --bg: #12181b; --bg-2: #192023; --surface: #222b2e; --surface-2: #2c3739;
  --line: #3c494b; --ink: #f3eee6; --muted: #bec5c4; --accent: #d4a16e; --accent-light: #f2c390;
  --head-bg: rgba(16,23,26,.96); --nav-bg: #20282b; --alt-bg: #1a2326;
  --hero-background: radial-gradient(ellipse at 74% 39%, rgba(196,139,83,.16), transparent 52%), linear-gradient(140deg,#11191c,#222c30);
  --footer-bg: #101719; --card-bg: #20292c; --card-copy: #c8cecc;
  --body-copy: #c9cdca; --prose-copy: #e1ded8; --footer-copy: #d9d9d3; --footnote-copy: #bfc6c4;
  --panel-bg: linear-gradient(120deg,#35332e,#1e292c); --panel-text: #e3dcd2;
  --notice-bg: #2d3535; --notice-ink: #f0e5d8;
  --pill-bg: #304337; --pill-ink: #d4eed2; --button-ink: #191713;
  --shadow: rgba(0,0,0,.25); --radius: 24px;
}

/* Shared token-driven overrides for the original hard-coded styling. */
body { background: var(--bg); color: var(--ink); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 3px; }
.site-header { background: var(--head-bg); border-bottom: 1px solid var(--line); }
.site-nav .nav-contact, .btn-secondary { border-color: var(--line); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent-light); }
.hero { background: var(--hero-background); }
.lead { color: var(--body-copy); }
.btn-primary { color: var(--button-ink); }
.btn-primary:hover { color: var(--button-ink); }
.section-alt { background: var(--alt-bg); border-color: var(--line); }
.app-card { background: var(--card-bg); border-color: var(--line); box-shadow: 0 8px 30px var(--shadow); }
.app-card:hover { border-color: var(--accent); }
.app-card p { color: var(--card-copy); }
.status { background: var(--pill-bg); color: var(--pill-ink); }
.cta-panel { border-color: var(--line); background: var(--panel-bg); }
.cta-panel p { color: var(--panel-text); }
.site-footer { background: var(--footer-bg); border-color: var(--line); }
.footer-links { color: var(--footer-copy); }
.footer-bottom { border-color: var(--line); color: var(--footnote-copy); }
.page-hero { background: var(--hero-background); }
.prose { color: var(--prose-copy); }
.notice { background: var(--notice-bg); color: var(--notice-ink); }
.orbit-word { border-color: var(--line); }

/* The visual switcher is in the sticky desktop/mobile header on every page. */
.header-inner { gap: clamp(12px, 2vw, 27px); }
.theme-control { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.theme-label { font-size: 10px; font-weight: 800; letter-spacing: .13em; color: var(--muted); text-transform: uppercase; }
.theme-label-short { display: none; }
.theme-select-wrap { position: relative; }
.theme-select-wrap::after { content: ''; position: absolute; right: 14px; top: 47%; width: 7px; height: 7px; border-right: 2px solid var(--accent-light); border-bottom: 2px solid var(--accent-light); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.theme-control select {
  appearance: none; -webkit-appearance: none; min-width: 166px; max-width: 190px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink); padding: 11px 29px 11px 13px;
  font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; line-height: 1.35;
}
.theme-control select:hover { border-color: var(--accent); }
.theme-control option { background: var(--surface); color: var(--ink); }
.style-separator { opacity: .6; margin: 0 5px; }

/* Every style keeps all site content, navigation, privacy information and app links. */
html[data-theme="lightsout"] .hero h1 { letter-spacing: -.065em; }
html[data-theme="lightsout"] .hero h1 .accent { color: #ffb985; }
html[data-theme="lightsout"] .app-card { box-shadow: none; }
html[data-theme="touchcontrol"] .hero, html[data-theme="touchcontrol"] .page-hero { background-size: cover; }
html[data-theme="touchcontrol"] .status { border: 1px solid #366c4e; }
html[data-theme="lifeframed"] .site-header { box-shadow: 0 7px 21px rgba(0,0,0,.22); }
html[data-theme="lifeframed"] .app-card { box-shadow: 0 14px 36px rgba(0,0,0,.18); }
html[data-theme="lifeframed"] .app-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.32); }
html[data-theme="lifeframed"] .cta-panel { box-shadow: 0 15px 45px rgba(0,0,0,.15); }
html[data-theme="lifeframed"] .orbit-word { color: var(--ink); background: var(--surface); }
html[data-theme="lifeframed"] .btn-primary:hover { background: #e5b57e; }

/* Original site sculpture or a representative app-style showcase. */
.hero-scenes { min-height: 460px; width: 100%; min-width: 0; display: grid; align-items: center; }
.scene { display: none; min-width: 0; }
html:not([data-theme]) .scene-obp, html[data-theme="obp"] .scene-obp { display: grid; }
html[data-theme="lightsout"] .scene-lightsout,
html[data-theme="touchcontrol"] .scene-touchcontrol,
html[data-theme="lifeframed"] .scene-lifeframed { display: grid; }
.scene-obp { width: 100%; }
.scene-lightsout, .scene-touchcontrol, .scene-lifeframed { place-items: center; }
.demo-panel { width: min(100%, 468px); border: 1px solid var(--line); border-radius: 26px; padding: 20px; box-shadow: 0 35px 70px rgba(0,0,0,.28); }
.demo-top { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.demo-appmark { width: 32px; height: 32px; display: inline-grid; place-items: center; background: #35271e; color: #ffb985; border-radius: 9px; font-size: 20px; }
.demo-mini { font-size: 9px; color: var(--muted); margin-left: auto; letter-spacing: .1em; font-weight: 800; }
.lights-demo { color: #f7f7f7; background: #0e1010; border-color: #323737; transform: rotate(-2deg); }
.black-screen { position: relative; height: 266px; margin-top: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; border-radius: 14px; border: 1px solid #191b1c; overflow: hidden; }
.black-screen-time { font-size: clamp(53px, 7vw, 87px); letter-spacing: -.085em; font-weight: 350; line-height: 1; }
.black-screen-date { color: #888e8e; font-size: 10px; letter-spacing: .18em; margin-top: 14px; }
.floating-control { position: absolute; right: 16px; bottom: 25px; width: 46px; height: 46px; display: grid; place-items: center; color: #27170f; background: #ec995e; border: 4px solid #463526; border-radius: 50%; box-shadow: 0 0 35px #e68a4e66; font-size: 22px; }
.demo-bottom { padding: 15px 0 0; display: flex; gap: 16px; justify-content: space-between; color: #aaaead; font-size: 10px; }
.demo-bottom span:first-child { color: #cbe7d3; }
.demo-indicator { display: inline-block; width: 6px; height: 6px; background: #6ec99d; border-radius: 100%; margin-right: 5px; }
.touch-demo { background: #20282b; border: 1px solid #475156; transform: rotate(1deg); color: #f4f5f3; }
.demo-active { color: #adf1c9; border: 1px solid #3a7957; background: #234b36; border-radius: 30px; padding: 4px 8px; margin-left: auto; font-size: 10px; letter-spacing: .05em; font-weight: 800; }
.demo-intro { color: #bdc7c5; font-size: 12px; margin: 15px 0 20px; }
.touch-demo-card { border: 1px solid #f49a58; background: #3a302c; border-radius: 13px; padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.touch-demo-card div { display: grid; gap: 5px; }
.touch-demo-card small { color: #fdba8d; letter-spacing: .13em; font-size: 9px; font-weight: 800; }
.touch-demo-card strong { font-size: 17px; }
.touch-demo-dots { color: #ffc495; font-size: 16px; }
.touch-demo-sequence { background: #171e20; border: 1px solid #384247; border-radius: 13px; padding: 13px 15px; margin-top: 14px; }
.sequence-title { display: flex; justify-content: space-between; color: #e2e8e4; font-size: 12px; font-weight: 800; margin-bottom: 8px; }
.sequence-title small { font-size: 9px; color: #a9b3b0; letter-spacing: .08em; }
.sequence-row { padding: 10px 0; display: flex; gap: 12px; border-top: 1px solid #333c40; font-size: 12px; color: #d5dbd8; }
.sequence-row span:last-child { margin-left: auto; color: #a9b3b0; }
.step-index { color: #f5af77; font-weight: 900; font-size: 10px; }
.touch-demo-footer { text-transform: uppercase; color: #96a19d; text-align: center; margin-top: 20px; font-size: 9px; letter-spacing: .16em; }
.frame-demo { padding: 15px; border: 1px solid #d9c7b0; background: #fffaf3; box-shadow: 0 30px 65px #7962442b; color: #40372e; transform: rotate(2deg); border-radius: 22px; }
.frame-demo-top { display: flex; align-items: center; gap: 10px; padding: 4px 6px 15px; }
.frame-sun { font-size: 27px; color: #ad713f; }
.frame-demo-top span:nth-child(2) { display: grid; gap: 2px; }
.frame-demo-top strong { font-size: 15px; line-height: 1.1; }
.frame-demo-top small { color: #746558; font-size: 10px; }
.frame-counter { margin-left: auto; color: #867664; font-weight: 700; font-size: 11px; }
.memory-frame { border: 7px solid #c18d5f; border-radius: 7px; height: 252px; padding: 5px; background: #604b3e; box-shadow: inset 0 2px 8px #0003, 0 12px 22px #5c41311c; }
.memory-photo { position: relative; height: 100%; overflow: hidden; background: linear-gradient(180deg,#9ab7bf 0%,#e4cab0 60%,#e8d09f 65%,#9ba99a 100%); }
.photo-sun { position: absolute; width: 55px; height: 55px; border-radius: 50%; background: #f5e3b1; right: 16%; top: 17%; box-shadow: 0 0 37px #fae6b0; }
.photo-hill { position: absolute; width: 120%; height: 110%; border-radius: 45% 45% 0 0; transform: rotate(-12deg); }
.photo-hill.back { background: #708e80; left: 23%; top: 66%; }
.photo-hill.front { background: #476d60; left: -40%; top: 77%; transform: rotate(11deg); }
.frame-demo-bottom { padding: 16px 7px 4px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.frame-demo-bottom div { display: grid; gap: 4px; }
.frame-demo-bottom strong { font-size: 13px; }
.frame-demo-bottom div span { font-size: 10px; color: #74675a; }
.frame-heart { color: #9b592c; font-size: 30px; line-height: 1; }

@media (max-width: 1050px) {
  .site-nav { gap: 16px; }
  .theme-label { display: none; }
  .theme-control select { min-width: 147px; }
}
@media (max-width: 700px) {
  .header-inner { gap: 9px; }
  .site-nav { background: var(--nav-bg); top: 70px; }
  .theme-control { margin-left: auto; }
  .theme-control select { min-width: 128px; max-width: 134px; font-size: 11px; padding: 10px 22px 10px 10px; }
  .theme-select-wrap::after { right: 11px; width: 6px; height: 6px; }
  .hero-scenes { min-height: 310px; }
  .hero-scenes .hero-art { min-height: 290px; }
  .scene-lightsout, .scene-touchcontrol, .scene-lifeframed { padding: 8px 0 14px; }
  .demo-panel { width: min(100%, 400px); padding: 13px; transform: none; }
  .black-screen { height: 220px; }
  .memory-frame { height: 220px; }
  .hero-art::before { width: min(94%,310px); }
  .hero-art::after { width: min(70%,240px); }
  .site-nav.is-open { display: flex; }
}
@media (max-width: 410px) {
  .brand { gap: 7px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 12px; }
  .brand-name small { display: none; }
  .menu-toggle { width: 38px; height: 39px; flex-shrink: 0; }
  .theme-control select { min-width: 123px; max-width: 123px; font-size: 10.5px; }
  .demo-mini { display: none; }
  .demo-bottom { flex-direction: column; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-card { transition: none; }
}

/* v0.3 product-icon representations are the submitted app icons, not placeholder glyphs. */
.demo-appmark { overflow: hidden; padding: 0; background: transparent; border-radius: 8px; width: 34px; height: 34px; flex-shrink: 0; }
.demo-appmark img { display: block; width: 34px; height: 34px; object-fit: contain; }
.frame-sun { display: inline-flex; width: 42px; height: 42px; flex-shrink: 0; }
.frame-sun img { display: block; width: 42px; height: 42px; object-fit: contain; }
html[data-theme="lifeframed"] .brand-name { color: #f3eee6; }

/* LifeFramed app-style preview follows the selected dark site theme. */
html[data-theme="lifeframed"] .frame-demo { background: #253035; border-color: #485557; color: #f1e7d8; box-shadow: 0 27px 60px #0007; }
html[data-theme="lifeframed"] .frame-demo-top small,
html[data-theme="lifeframed"] .frame-counter,
html[data-theme="lifeframed"] .frame-demo-bottom div span { color: #c4c5bd; }
html[data-theme="lifeframed"] .frame-sun,html[data-theme="lifeframed"] .frame-heart { color: #e4aa72; }