@charset "UTF-8";
/* Shared presentation layer. Content, controls and stored records stay in their original pages. */
:root {
  --paper: #fffaf0;
  --ink: #493326;
  --muted: #78604d;
  --accent: #d44838;
  --line: #dcc9a8;
  --serif: "Microsoft YaHei", "PingFang SC", sans-serif;
  --yellow: #ffe28b;
  --mint: #dcedce;
  --blue: #dceef5;
  --outline: #63452f;
}
body {
  background-color: var(--paper);
  background-image: radial-gradient(#d9ba7c30 .9px, transparent .9px);
  background-size: 19px 19px;
}
::selection { background: #ffdd82; color: var(--ink); }
h1, h2, h3 { font-weight: 700; letter-spacing: .5px; }
h1 em { color: var(--accent); }
.eyebrow, .section-kicker { color: #977044; font-weight: 600; }
.section-kicker { letter-spacing: 1.6px; }
.site-header {
  height: auto; min-height: 96px; padding: 18px 5.3%; gap: 24px;
  background: #fff3bc; border-bottom: 2px solid var(--outline);
}
.brand { font-weight: 800; color: var(--ink); gap: 10px; }
.brand img { filter: sepia(.7) saturate(2.2); }
.brand-en { color: #977044; font-weight: 500; }
.site-header nav.global-nav { gap: 10px; }
.site-header nav.global-nav a, .site-header nav.global-nav .settings-trigger {
  font-size: 12px; font-weight: 600; color: #694b36;
  padding: 8px 13px; border: 2px solid transparent; border-radius: 25px;
}
.site-header nav.global-nav a.active {
  background: #e65b45; color: white; border-color: var(--outline);
  box-shadow: 2px 3px 0 var(--outline);
}
.site-header nav a.active::after { display: none; }
.site-header nav.global-nav a:hover:not(.active), .settings-trigger:hover { background: #ffe294; }
.header-note { color: #89623f; }
.header-note i { background: #e65b45; }
.button {
  border: 2px solid var(--outline); border-radius: 13px;
  padding: 12px 20px; font-weight: 600; box-shadow: 3px 4px 0 var(--outline);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.button-dark { background: #e65b45; color: #fffdf8; }
.button-dark:hover { background: #d64b37; transform: translateY(-2px); box-shadow: 3px 6px 0 var(--outline); }
.text-button { color: #9d4b35; border-color: #c69261; font-weight: 600; }
.note-composer .button, .letter-controls .button { border: 2px solid var(--outline); }
.welcome.section-wrap {
  max-width: 1280px; width: 88%; margin: 38px auto 60px; padding: 0;
  text-align: left; border: 3px solid var(--outline); border-radius: 26px;
  box-shadow: 7px 8px 0 #e6bf73; overflow: hidden; background: #fff3bc;
}
.welcome-stage { position: relative; }
.welcome-cover { display: block; width: 100%; height: auto; }
.welcome-copy {
  position: absolute; left: 4%; top: 10%; width: 44%; padding: 30px;
  background: #fffaf0f2; border: 2px solid #a17a4b; border-radius: 23px 27px 24px 16px;
  box-shadow: 4px 5px 0 #b79b5b35;
}
.welcome .eyebrow { font-size: 10px; letter-spacing: 1px; line-height: 1.8; margin-bottom: 16px; }
.welcome h1 { font-size: clamp(36px, 3.6vw, 51px); line-height: 1.55; margin-bottom: 14px; letter-spacing: 1px; }
.welcome h1 em { display: block; color: var(--accent); }
.welcome-identity { color: #775332; font-size: 12px; letter-spacing: 0; }
.welcome-identity > span { padding: 0 7px; color: #c88c4a; }
.welcome-description { color: #80664d; font-size: 13px; line-height: 2.1; margin-top: 17px; }
.welcome-flower { justify-content: flex-start; gap: 13px; margin-top: 20px; }
.welcome-flower > span { width: 40px; background: #d1ad6b; height: 2px; }
.welcome-flower img { opacity: 1; filter: sepia(1) saturate(2.2); }
.home-portals { padding-top: 0; padding-bottom: 62px; }
.portal-intro { margin-bottom: 27px; }
.portal-intro h2 { color: var(--ink); font-size: 24px; }
.portal-intro > span { color: #92714e; font-size: 11px; }
.portal-grid { gap: 30px; }
.portal-card {
  border: 2px solid var(--outline); border-radius: 22px; padding: 30px 33px 25px;
  background: #ffedb4; box-shadow: 5px 6px 0 #ead6a6;
}
.portal-card:hover { transform: translateY(-4px); box-shadow: 5px 10px 0 #ead6a6; }
.portal-life { background: #e5efda; border-color: var(--outline); }
.portal-top, .portal-life .portal-top { color: #8a613d; font-weight: 600; }
.portal-arrow, .portal-life .portal-arrow {
  width: 34px; height: 34px; border: 2px solid var(--outline); background: #fffaf0; color: var(--ink);
}
.portal-card h3 { font-weight: 700; color: var(--ink); font-size: 32px; }
.portal-card > p { color: #7b614b; font-size: 13px; }
.portal-work-note, .portal-work-note .portal-role { color: #8a5b32; }
.portal-work-note .portal-role { font-weight: 700; }
.portal-life-note img { border: 5px solid #fffdf8; border-radius: 7px; box-shadow: 2px 3px 0 #97ac7f; }
.portal-life-note > span { color: #617747; font-weight: 600; }
.portal-bottom, .portal-life .portal-bottom { color: #7d6047; border-color: #bfa47780; }
.portal-bottom > span:last-child, .portal-life .portal-bottom > span:last-child { color: #ac5135; font-weight: 600; }
.journal { border-top: 2px dashed #d8bb86; padding-top: 55px; }
.section-heading .eyebrow, .journal-count, .journal-storage p { color: #8a6a4d; }
.journal-count strong { color: #d85a3f; font-weight: 700; }
.journal-layout { gap: 34px; }
.note-composer { background: #fff0be; border: 2px solid var(--outline); border-radius: 20px; box-shadow: 4px 5px 0 #e7d5a5; }
.composer-title { font-weight: 700; }
.composer-title > span:last-child { color: #d7563e; }
.field-label, .note-meta label { color: #805d3f; }
textarea, .note-meta input, .note-meta select {
  background: #fffef9; border: 1.5px solid #ba9971; border-radius: 9px;
}
textarea::placeholder { color: #a28b74; }
textarea:focus, input:focus, select:focus { outline-color: #d68d44; }
input[type="checkbox"] { accent-color: #d85039; }
.save-status { color: #8b704e; }
.note-filters { gap: 8px; }
.note-filters button { color: #866345; border: 1.5px solid transparent; border-radius: 20px; }
.note-filters button.selected { background: #e56b4e; color: #fff; border-color: var(--outline); }
.note-filters button:hover:not(.selected) { background: #ffedbd; }
.notes-empty { background: #fffdf4; border: 2px dashed #c5a577; border-radius: 20px; }
.notes-empty h3 { color: #8b603b; }
.notes-empty p { color: #957958; }
.note-entry { border: 1.5px solid #bd9e74; border-radius: 15px; box-shadow: 3px 4px 0 #eadfca; }
.note-entry p { color: #684d36; }
.note-entry-header, .note-tag, .note-entry-footer, .delete-note { color: #896c4d; }
.note-entry[data-type="家人"] { background: #ffede3; }
.note-entry[data-type="旅行"] { background: #e9f3f7; }
.note-entry[data-type="运动"] { background: #eef4dd; }
.note-entry[data-type="梦想"] { background: #fff2c5; }
.letter-paper { background: #fff1cc; border: 2px solid var(--outline); border-radius: 23px; box-shadow: 5px 6px 0 #e7d5a5; }
.letter-stamp { background: #fffaf0; border: 2px dashed #b98652; color: #a77741; border-radius: 4px; }
.letter-intro h2 { color: var(--ink); font-weight: 700; }
.letter-intro p, .letter-signoff { color: #967044; }
.letter-layout textarea { color: #63452f; border-radius: 0; }
.home-closing p { color: #a66b3e; font-weight: 600; }
.home-closing > span { color: #9b7b51; }
.site-dock { border: 2px solid var(--outline); border-radius: 25px; background: #fff6cf; box-shadow: 3px 3px 0 #c8a56b; }
.site-dock a, .site-dock button { color: #785035; font-weight: 600; }
.site-dock a { border-color: #d0b385; }
.site-dock a:hover, .site-dock button:hover { background: #ffe6a0; }
dialog { border: 2px solid var(--outline); border-radius: 20px; background: #fffaf0; }
dialog::backdrop { background: #3b2e26b8; backdrop-filter: blur(4px); }
.settings-dialog { border: 2px solid var(--outline); }
.settings-dialog .dialog-toolbar h2 { font-weight: 700; color: var(--ink); }
.settings-description, .settings-local-note, .settings-option small, .settings-status { color: #896a4b; }
.settings-home-link, .settings-work-link, .settings-life-link { border: 1.5px solid #c8a571; border-radius: 12px; color: #63462f; }
.settings-home-link { background: #ffedb4; }
.settings-work-link { background: #e2eef4; }
.settings-life-link { background: #e5efda; }
.settings-option { border-color: #ddc5a1; }
footer { border-top: 2px dashed #d8bb86; color: #91704e; }
.footer-brand { color: #6e4b31; font-weight: 700; }
.footer-brand span { color: #94734f; font-weight: 400; }
/* Work profile and life pages share the same colors, outlines and paper shapes. */
.profile-hero { gap: 85px; }
.profile-opening { color: #845734; font-weight: 600; }
.profile-description, .profile-description strong { color: #7e624a; }
.profile-namecard { background: #dfeef3; border: 2px solid var(--outline); border-radius: 22px; box-shadow: 7px 8px 0 #c9dce0; transform: rotate(1.5deg); }
.namecard-name, .namecard-job { color: #4e5142; font-weight: 700; }
.namecard-top, .namecard-english, .namecard-company, .namecard-note { color: #72816d; }
.namecard-rule { background: #adc0b4; }
.namecard-tags span { background: #fffaf0; border: 1px solid #9eb39e; border-radius: 20px; color: #60714e; }
.profile-ribbon, .life-ribbon { background: #ffedb4; border-top: 2px solid var(--outline); border-bottom: 2px solid var(--outline); color: #805632; font-weight: 600; }
.profile-ribbon i, .life-ribbon i { color: #e46143; }
.profile-heading > p, .profile-section-intro, .profile-attitude > div > p, .profile-closing p { color: #896d51; }
.profile-focus-grid article { background: #ffedb4; border: 2px solid var(--outline); border-radius: 18px; box-shadow: 3px 4px 0 #e7d5a5; }
.profile-focus-grid article:nth-child(2) { background: #e5efda; }
.profile-focus-grid article:nth-child(3) { background: #dfeef3; }
.profile-focus-grid article:nth-child(4) { background: #ffe8dc; }
.profile-focus-grid h3 { font-weight: 700; font-size: 23px; }
.focus-number { color: #d76b42; font-weight: 800; }
.focus-label, .focus-tags { color: #9b7048; }
.profile-focus-grid p { color: #7d624b; font-size: 12px; }
.profile-flow li { border-top: 2px solid #d4b077; }
.profile-flow li > span { color: #d26741; font-weight: 700; }
.profile-flow h3, .profile-principles h3 { font-weight: 600; }
.profile-flow p, .profile-principles p { color: #896d51; }
.profile-principles article { border-color: #ddc5a1; }
.profile-principles article > span, .profile-signature { color: #b47e40; }
.profile-closing, .profile-flow-section { border-color: #dcc49b; }
.hero-description, .hero-footnote, .about-text p { color: #886b4f; }
.picture-frame, .gallery-image { border: 2px solid var(--outline); border-radius: 18px; box-shadow: 5px 6px 0 #ead6a6; overflow: hidden; }
.picture-frame img, .gallery-image img { border-radius: 8px; }
.orbit-word, .handwritten { color: #b6783f; }
.art-caption, .closing > span, .signature { color: #94704a; }
.image-open, .gallery-pill { color: #875032; background: #fff4cded; border-radius: 20px; }
.dream-card { background: #ffedb4; border: 2px solid var(--outline); border-radius: 20px; box-shadow: 3px 4px 0 #e7d5a5; }
.dream-card.pilates { background: #e5efda; }
.dream-card.mother { background: #ffe8dc; }
.dream-card.car { background: #dfeef3; }
.dream-card h3 { font-weight: 700; font-size: 25px; }
.dream-card p { color: #7f654c; font-size: 12px; }
.card-category, .card-bottom > span, .dream-note { color: #967049; }
.card-top svg { stroke: #9e7448; stroke-width: 2; }
.dream-card.completed { border-color: #b55535; box-shadow: 3px 4px 0 #e5a175; }
.checkmark { border-color: #ac8250; border-width: 2px; }
.dream-toggle input:checked + .checkmark { background: #d85b3f; border-color: #d85b3f; }
.progress-track { background: #eedfc2; border-radius: 6px; height: 5px; }
.progress-track > span { background: #e66a46; border-radius: 6px; }
.plan-book { background: #fffdf4; border: 2px solid var(--outline); border-radius: 20px; overflow: hidden; box-shadow: 4px 5px 0 #e7d5a5; }
.plan-tabs { border-color: #cba66f; }
.plan-tabs button { background: #fff0c4; border-color: #d7bc8b; color: #a17b4c; }
.plan-tabs button span { color: #916840; font-weight: 600; }
.plan-tabs button[aria-selected=true] { background: #e56b4e; box-shadow: none; color: #ffead2; }
.plan-tabs button[aria-selected=true] span { color: white; }
.plan-tabs button:hover:not([aria-selected=true]) { background: #ffe6a2; }
.plan-intro h3 { font-weight: 700; }
.plan-overline, .plan-intro .plan-hint, .step-description, .plan-step-count { color: #98754d; }
.plan-step-count strong { color: #d56a3f; font-weight: 700; }
.step-title { color: #715239; }
.plan-step { border-color: #e5d2b3; }
.plan-step input { accent-color: #d85b3f; }
.life-toast { background: #69482f; border-radius: 16px; }
@media (max-width: 1280px) { .header-note { display: none; } }
@media (max-width: 1100px) {
  .welcome-copy { left: 3.5%; top: 8%; width: 46%; padding: 23px; }
  .welcome h1 { font-size: 39px; }
  .welcome .eyebrow { font-size: 9px; }
  .welcome-description { font-size: 12px; }
  .profile-hero { gap: 50px; }
}
@media (max-width: 1000px) {
  .site-header, .work-profile .site-header { flex-wrap: wrap; justify-content: center; gap: 17px; padding: 18px 6%; }
  .brand { flex: 0 0 auto; }
  .site-header nav.global-nav { flex-basis: 100%; justify-content: center; gap: 10px; }
}
@media (max-width: 860px) {
  .welcome.section-wrap { width: 88%; margin-top: 30px; margin-bottom: 48px; }
  .welcome-stage { display: flex; flex-direction: column; }
  .welcome-copy { position: static; width: auto; text-align: center; border: 0; border-top: 2px solid var(--outline); border-radius: 0; padding: 32px 24px; box-shadow: none; background: #fff6d9; }
  .welcome-cover { aspect-ratio: 1672 / 941; object-fit: contain; }
  .welcome h1 { font-size: 39px; }
  .welcome h1 em { display: inline; }
  .welcome .eyebrow { font-size: 9px; margin-bottom: 14px; }
  .welcome-flower { justify-content: center; margin-top: 20px; }
}
@media (max-width: 760px) {
  .site-header, .work-profile .site-header { min-height: 136px; padding-top: 17px; padding-bottom: 16px; gap: 17px; }
  .site-header .brand, .work-profile .brand { flex: 0 0 100%; justify-content: center; }
  .site-header nav.global-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px 9px; }
  .site-header nav.global-nav a, .site-header nav.global-nav .settings-trigger { text-align: center; font-size: 11px; padding: 6px 4px; }
  .site-header nav.global-nav .letter-nav { grid-column: span 2; }
  .welcome.section-wrap { margin-top: 24px; margin-bottom: 44px; border-radius: 20px; box-shadow: 5px 6px 0 #e6bf73; }
  .welcome-copy { padding: 27px 19px; }
  .welcome h1 { font-size: 32px; line-height: 1.5; margin-bottom: 16px; }
  .welcome h1 em { display: block; }
  .welcome-identity { font-size: 11px; }
  .welcome-identity > span { padding: 0 5px; }
  .welcome-description { font-size: 12px; margin-top: 16px; }
  .welcome .eyebrow { font-size: 8px; letter-spacing: .6px; }
  .portal-intro { gap: 10px; margin-bottom: 24px; }
  .portal-intro h2 { font-size: 21px; }
  .portal-intro > span { font-size: 10px; }
  .portal-grid { gap: 25px; }
  .portal-card { border-radius: 19px; padding: 25px 23px; }
  .portal-card h3 { font-size: 29px; }
  .portal-card > p { font-size: 12px; }
  .portal-bottom { font-size: 9px; flex-wrap: wrap; }
  .home-portals { padding-bottom: 42px; }
  .journal { padding-top: 38px; }
  .journal h2 { font-size: 25px; }
  .note-composer { padding: 22px; }
  .note-filters { gap: 5px; }
  .note-filters button { padding: 6px 10px; }
  .letter-paper { padding: 23px 20px; border-radius: 19px; }
  .letter-intro h2 { font-size: 27px; }
  .site-dock { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .site-dock a, .site-dock button { padding: 10px 13px; }
  .profile-hero { gap: 38px; }
  .profile-focus-grid article { padding: 20px 17px; border-radius: 16px; }
  .profile-focus-grid h3 { font-size: 21px; }
  .profile-focus-grid p { font-size: 11px; }
  .profile-namecard { margin: 0 5px; }
  .dream-card { border-radius: 17px; padding: 21px 15px 17px; }
  .dream-card h3 { font-size: 22px; }
  .dream-card p { font-size: 11px; }
  .plan-book { border-radius: 17px; }
  .button { padding: 11px 16px; }
}
@media (max-width: 370px) {
  .site-header nav.global-nav { gap: 6px; }
  .site-header nav.global-nav a, .site-header nav.global-nav .settings-trigger { font-size: 10px; }
  .welcome-copy { padding: 24px 15px; }
  .welcome h1 { font-size: 30px; }
  .welcome-identity { font-size: 10px; }
  .portal-card { padding: 24px 20px; }
  .portal-card h3 { font-size: 27px; }
  .portal-life-note { gap: 15px; }
  .portal-life-note img { width: 135px; }
  .portal-life-note > span { font-size: 14px; }
  .note-composer { padding: 18px; }
  .note-filters button { padding: 6px 8px; }
  .dream-card { padding: 18px 12px; }
  .dream-card h3 { font-size: 20px; }
  .dream-card p { font-size: 10px; }
  .profile-focus-grid article { padding: 24px; }
  .profile-focus-grid h3 { font-size: 23px; }
}