:root {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d281e;
  background: #fff;
  --ink: #1d281e;
  --muted: #65705e;
  --sage: #e4efca;
  --sage-soft: #eef4df;
  --sage-border: #d7e4c4;
  --green: #608a2e;
  line-height: 1.65;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-weight: 400;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

.workspace {
  width: min(1425px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 27px 0 18px;
}

.page-heading {
  margin: 0 auto;
  padding: 20px 24px 28px;
  border: 1px solid #e3e9d8;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: #fff;
  text-align: center;
}
.brand-kicker { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.page-heading h1 { margin: 0 0 12px; color: #202a1d; font-size: clamp(38px, 3.6vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.page-heading p { max-width: 760px; margin: 0 auto; color: #5d6758; font-size: 17px; line-height: 1.75; }

.simulator-layout {
  display: grid;
  min-height: 730px;
  padding: 8px 18px 22px;
  grid-template-columns: minmax(245px, 1fr) minmax(300px, .92fr) minmax(245px, 1fr);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: center;
  max-width: 1425px;
  margin: 0 auto;
  border: 1px solid #e3e9d8;
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(32, 45, 29, .08);
}

.control-panel,
.guide-panel {
  min-width: 0;
  padding: 20px 18px;
  border: 1px solid #e3e9d8;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(32, 45, 29, .06);
}
.section-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.section-index { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid #d5e5da; border-radius: 12px; background: #e7f2eb; color: #367760; font-size: 12px; font-weight: 800; }
.guide-index { border-color: #efdfd3; background: #fff0e7; color: #a56d4f; }
.section-heading h2 { margin: 0; color: #202a1d; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.app-launchers { display: grid; gap: 10px; }
.app-launcher {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sage-border);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 15px #344c2110;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.app-launcher:hover { transform: translateY(-1px); border-color: #a8c976; background: #fff; box-shadow: 0 8px 18px #344c2118; }
#app-launchers .app-launcher:not(.is-active) { background-color: #fff; }
#app-launchers .app-launcher.is-active { border-color: #84ad48; background-color: var(--sage); box-shadow: 0 0 0 2px #84ad2f24; }
.app-launcher-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; font-size: 19px; font-weight: 750; }
.app-launcher-icon img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.launcher-copy { display: grid; gap: 2px; }
.app-launcher-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.app-launcher-copy b { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app-launcher-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.launcher-arrow { color: var(--green); font-size: 18px; }
.launcher-mint .app-launcher-icon, .mini-app-icon.mint { background: #eaf3dc; color: #527b22; }
.launcher-lilac .app-launcher-icon, .mini-app-icon.lilac { background: #eee8fa; color: #76609e; }
.launcher-peach .app-launcher-icon, .mini-app-icon.peach { background: #e8f1d6; color: #608a2e; }
.launcher-sky .app-launcher-icon, .mini-app-icon.sky { background: #e8f1d6; color: #608a2e; }
.launcher-teal .app-launcher-icon, .mini-app-icon.teal { background: #e8f1d6; color: #608a2e; }
.panel-footnote { display: flex; align-items: center; gap: 7px; margin: 14px 0 0 3px; color: var(--muted); font-size: 11px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #77bd8d; box-shadow: 0 0 0 3px #77bd8d21; }

.device-column { display: flex; min-width: 0; flex-direction: column; align-items: center; }
.device-stage { display: flex; width: 100%; justify-content: center; }
.device {
  position: relative;
  width: min(100%, 360px);
  height: 700px;
  padding: 12px;
  border: 2px solid #87908d;
  border-radius: 54px;
  background: #eceeeb;
  box-shadow: inset 0 0 0 4px #d4d7d2, 0 16px 38px rgba(25, 34, 27, .16);
}
.device::before,
.device::after { position: absolute; z-index: 2; width: 3px; border-radius: 3px; background: linear-gradient(#777b78, #d6d6d1, #777b78); content: ""; }
.device::before { top: 104px; left: -5px; height: 32px; }
.device::after { top: 151px; right: -5px; height: 54px; }
.screen { display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden; flex-direction: column; border-radius: 42px; background: #fff; }
.status-bar,
.navigation-bar { display: flex; height: 44px; flex: none; align-items: center; justify-content: space-between; padding: 0 22px; background: #fff; color: #1d241f; font-size: 11px; font-weight: 700; }
.status-bar { position: relative; }
.dynamic-island { position: absolute; top: 9px; left: 50%; width: 91px; height: 27px; border-radius: 99px; background: #080909; transform: translateX(-50%); }
.dynamic-island::after { position: absolute; top: 8px; right: 12px; width: 10px; height: 10px; border: 1px solid #182321; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #263c3a, #080a0a 70%); content: ""; }
.status-icons { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.signal-bars { color: #171a18; font-size: 12px; letter-spacing: -2px; }
.wifi-icon { width: 16px; height: 16px; fill: none; stroke: #171a18; stroke-linecap: round; stroke-width: 1.8; }
.battery-icon { position: relative; width: 20px; height: 10px; border: 1.5px solid #171a18; border-radius: 3px; }
.battery-icon::before { position: absolute; inset: 1px 3px 1px 1px; border-radius: 1px; background: #5a9070; content: ""; }
.battery-icon::after { position: absolute; top: 2px; right: -3px; width: 2px; height: 3px; border-radius: 0 2px 2px 0; background: #4d6158; content: ""; }
.phone-screen { min-height: 0; flex: 1; background: #eff5f0; color: #263c32; }
.home-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 21px 19px;
  background:
    radial-gradient(ellipse at 8% 72%, #f5c5a5 0, transparent 34%),
    radial-gradient(ellipse at 84% 38%, #b8dfd1 0, transparent 40%),
    radial-gradient(ellipse at 60% 100%, #d7d0eb 0, transparent 44%),
    linear-gradient(157deg, #fff8e9, #eaf5ee 55%, #f5ecf1);
}
.home-screen::before,
.home-screen::after { position: absolute; width: 210px; height: 210px; border-radius: 50%; content: ""; filter: blur(1px); opacity: .48; }
.home-screen::before { right: -105px; bottom: 58px; background: radial-gradient(circle, #b4d8f1, #f2d9e8 68%, transparent 70%); }
.home-screen::after { top: 155px; left: -143px; background: radial-gradient(circle, #ffd8ac, #ffd8ac88 66%, transparent 70%); }
.launcher-header,
.launcher-clock,
.home-greeting,
.home-hint { position: relative; z-index: 1; }
.launcher-header { display: flex; align-items: center; justify-content: space-between; color: #43584e; font-size: 11px; font-weight: 650; }
.weather-pill { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #ffffff96; border-radius: 99px; background: #ffffff75; font-size: 11px; }
.weather-pill span { color: #ce9152; }
.launcher-clock { margin-top: 37px; color: #324c3e; font-size: 58px; font-weight: 300; letter-spacing: -.075em; line-height: 1; }
.home-greeting { margin: 21px 0 0; color: #49675a; font-size: 16px; font-weight: 550; letter-spacing: -.035em; line-height: 1.3; }
.home-hint { position: absolute; right: 15px; bottom: 20px; left: 15px; display: flex; align-items: center; gap: 7px; padding: 11px 12px; border: 1px solid #ffffffa6; border-radius: 12px; background: #ffffff7d; color: #536b5f; font-size: 11px; backdrop-filter: blur(9px); }
.home-hint-dot { width: 7px; height: 7px; border-radius: 50%; background: #6fae86; }
.navigation-bar { height: 29px; justify-content: center; padding-bottom: 4px; background: #f8faf8; }
.navigation-bar button { display: grid; width: 90px; height: 24px; place-items: center; border: 0; background: transparent; cursor: pointer; }
.navigation-bar button span { width: 108px; height: 4px; border-radius: 9px; background: #202321; }

.notepad { overflow: hidden; border: 1px solid var(--sage-border); border-radius: 16px; background: #fff; box-shadow: 0 12px 30px #344c2110; }
.notepad-top { display: flex; height: 34px; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--sage-border); background: #f3f7e9; }
.notepad-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.notepad-dots { display: flex; gap: 4px; }
.notepad-dots i { width: 5px; height: 5px; border-radius: 50%; background: #e8d8ba; }
.notepad-dots i:nth-child(2) { background: #d6e5d5; }
.notepad-dots i:nth-child(3) { background: #e9d8d1; }
.note-content { position: relative; min-height: 365px; padding: 17px 18px 15px 26px; background-color: #fbfcf7; background-image: linear-gradient(90deg, transparent 0, transparent 17px, #dce8ca 17px, #dce8ca 18px, transparent 18px), repeating-linear-gradient(to bottom, transparent 0, transparent 28px, #e5ebdf 28px, #e5ebdf 29px); }
.note-content::before { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: repeating-linear-gradient(to bottom, #b8d28f 0 7px, transparent 7px 21px); opacity: .55; content: ""; }
.note-date { color: var(--muted); font-size: 11px; }
.note-content h3 { min-height: 47px; margin: 7px 0 0; color: var(--ink); font-family: "Poppins", system-ui, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.04em; line-height: 1.35; }
.note-rule { width: 34px; height: 2px; margin: 9px 0 13px; border-radius: 9px; background: #86ad4b; }
.writing-area { position: relative; min-height: 145px; padding-top: 0; }
.writing-area p { position: relative; z-index: 1; margin: 0; color: #4b5845; font-family: "Poppins", system-ui, sans-serif; font-size: 13px; line-height: 29px; overflow-wrap: break-word; }
.writing-pencil { position: absolute; z-index: 2; top: -5px; left: 3%; color: #b65e3b; font-size: 22px; line-height: 1; transform: rotate(-17deg); transition: left .07s linear, top .12s ease; filter: drop-shadow(1px 2px 1px #8f684944); }
.writing-pencil.pencil-resting { animation: pencil-rest 1.6s ease-in-out infinite alternate; }
@keyframes pencil-rest { from { transform: translateY(0) rotate(-17deg); } to { transform: translateY(-3px) rotate(-11deg); } }
.use-case { display: flex; gap: 9px; margin-top: 7px; padding: 10px 11px; border: 1px solid var(--sage-border); border-radius: 10px; background: #eef4df; }
.use-case-icon { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 8px; background: #dfecc5; color: var(--green); font-size: 13px; }
.use-case b { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.use-case p { margin: 2px 0 0; color: #4b5845; font-size: 12px; line-height: 1.45; }
.notepad-footer { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 13px; border-top: 1px solid var(--sage-border); background: #f8faf2; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.notepad-footer span:last-child { color: var(--green); font-size: 9px; }
.guide-footnote { display: flex; align-items: center; gap: 6px; margin: 12px 0 0 3px; color: var(--muted); font-size: 11px; }
.guide-sparkle { color: var(--green); font-size: 14px; }

.app-screen { height: 100%; overflow: hidden; padding: 17px 17px 13px; background: #fbfcf9; color: #263e33; }
.app-top { display: flex; align-items: center; gap: 8px; color: #30483b; font-size: 12px; }
.app-top strong { flex: 1; font-size: 13px; }
.app-menu { color: #7b8b80; font-size: 13px; letter-spacing: 1px; }
.mini-app-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; font-size: 14px; font-weight: 800; }
.mini-app-icon img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.app-eyebrow { margin-top: 36px; color: #829187; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.app-screen h3 { margin: 7px 0 5px; color: #2d4939; font-size: 27px; font-weight: 650; letter-spacing: -.06em; }
.app-screen > p { margin: 0; color: #7b8980; font-size: 12px; }
.counter-screen #counter-value { margin-top: 25px; font-size: 94px; font-weight: 300; }
.app-action { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 24px; border: 0; border-radius: 11px; background: #387c5b; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .18s, transform .18s; }
.app-action:hover { transform: translateY(-1px); background: #2f6d4e; }
.app-action span { font-size: 17px; line-height: 1; }
.counter-footer { display: flex; align-items: center; gap: 7px; margin-top: 15px; color: #8b978e; font-size: 11px; }
.counter-pulse { width: 7px; height: 7px; border-radius: 50%; background: #8bc09a; box-shadow: 0 0 0 4px #dff0e3; }
.note-preview { display: grid; gap: 9px; margin-top: 28px; padding: 16px; border: 1px solid #eee9f5; border-radius: 12px; background: #f7f3fc; }
.note-preview span { color: #9586ad; font-size: 11px; }
.note-preview strong { color: #5e4d78; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 600; }
.notes-screen .app-action { background: #76649a; }
.gallery-tiles { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 67px 67px; gap: 7px; margin-top: 22px; }
.gallery-tiles span { display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #ffd8b9, #f6a78e); color: #fff7ee; font-size: 25px; }
.gallery-tiles span:nth-child(2) { grid-row: span 2; background: linear-gradient(160deg, #b7d8cb, #86b5a3); }
.gallery-tiles span:nth-child(3) { background: linear-gradient(140deg, #d6c6ee, #a999d3); }
.gallery-screen .app-action { background: #b87555; }
.setting-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 11px 9px; border: 1px solid #e9eff1; border-radius: 10px; background: #fff; }
.setting-symbol { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: #eaf4fb; color: #5685a0; }
.setting-row > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.setting-row b { color: #465e51; font-size: 11px; }
.setting-row small { color: #89968e; font-size: 10px; }
.setting-row > span:last-child { color: #779084; font-size: 14px; }
.setting-row .setting-check { color: #5eaa79; font-size: 12px; }
.settings-screen .app-action { margin-top: 16px; background: #557f9d; }
.app-result { min-height: 15px; margin-top: 9px !important; color: #568367 !important; text-align: center; }
.embedded-app-screen { padding: 9px 0 0; background: #fff; }
.embedded-app-screen .app-top { padding: 0 10px; }
.embedded-app-frame { display: block; width: 100%; height: calc(100% - 35px); margin-top: 7px; border: 0; background: #fff; }

.screensaver { position: relative; display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden; border: 0; background: linear-gradient(145deg, #d8c8ed, #e9f4e4 47%, #f7d8c6); color: #fff; font: inherit; cursor: pointer; isolation: isolate; }
.screensaver::before,
.screensaver::after { position: absolute; z-index: -1; width: 260px; height: 260px; border-radius: 50%; content: ""; filter: blur(24px); animation: saver-drift 7s ease-in-out infinite alternate; }
.screensaver::before { top: -65px; left: -85px; background: #e9a7a5cc; }
.screensaver::after { right: -105px; bottom: -64px; background: #8bc6c1d9; animation-delay: -2.5s; }
.screensaver-orb { position: absolute; z-index: -1; width: 175px; height: 220px; border-radius: 50%; opacity: .75; filter: blur(19px); animation: saver-drift 8s ease-in-out infinite alternate; }
.orb-one { top: 22%; right: 8%; background: #d4c2ed; }
.orb-two { bottom: 14%; left: 3%; background: #f2c487; animation-delay: -3s; }
.orb-three { top: 48%; left: 37%; width: 120px; height: 160px; background: #b6dca5; animation-delay: -5s; }
.screensaver-date,
.screensaver-clock,
.screensaver-hint { z-index: 1; text-shadow: 0 2px 14px #4b5e5030; }
.screensaver-date { margin-bottom: 3px; font-size: 12px; font-weight: 650; }
.screensaver-clock { font-size: 69px; font-weight: 300; letter-spacing: -.07em; line-height: 1; font-variant-numeric: tabular-nums; }
.screensaver-hint { position: absolute; bottom: 25px; color: #fff; font-size: 11px; }
@keyframes saver-drift { from { transform: translate3d(-14px, 12px, 0) rotate(-9deg) scale(.95); } to { transform: translate3d(20px, -15px, 0) rotate(13deg) scale(1.12); } }

.page-footer { display: flex; justify-content: space-between; max-width: 1120px; margin: 18px auto 0; padding: 11px 3px 0; border-top: 1px solid #e7ece8; color: #687365; font-size: 11px; }
.page-footer span:last-child { font-weight: 800; letter-spacing: .14em; }

@media (max-width: 1050px) {
  .workspace { width: min(1425px, calc(100% - 36px)); }
  .simulator-layout { grid-template-columns: minmax(220px, 1fr) minmax(270px, .9fr); gap: 18px; }
  .guide-panel { grid-column: 1 / -1; width: min(100%, 580px); justify-self: center; }
  .notepad { display: grid; grid-template-columns: 1fr; }
  .note-content { min-height: 365px; }
  .device { height: 660px; }
}

@media (max-width: 640px) {
  .workspace { width: min(430px, calc(100% - 28px)); padding-top: 19px; }
  .page-heading { padding: 16px 14px 20px; border-radius: 16px 16px 0 0; }
  .page-heading h1 { margin-bottom: 6px; font-size: 34px; line-height: 1.05; }
  .page-heading p { font-size: 14px; line-height: 1.4; }
  .simulator-layout { min-height: 0; padding: 12px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .control-panel { order: 1; }
  .device-column { order: 2; }
  .guide-panel { grid-column: auto; order: 3; width: 100%; }
  .app-launchers { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .app-launcher { min-height: 66px; gap: 10px; padding: 9px 11px; }
  .app-launcher-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .app-launcher-copy b { font-size: 14px; }
  .app-launcher-copy small { font-size: 12px; }
  .launcher-arrow { display: none; }
  .panel-footnote { display: none; }
  .device { width: min(100%, 350px); height: min(76vh, 680px); min-height: 520px; padding: 9px; border-radius: 44px; }
  .screen { border-radius: 35px; }
  .control-panel, .guide-panel { padding: 16px 14px; }
  .page-footer { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}