/* Personal-first homepage. Shared by the preview and release candidate. */
.quiet-preview { --paper: #faf9f5; --ink: #252a31; --accent: #dceafa; --line: #dedfdc; background: var(--paper); color: var(--ink); font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; }
.quiet-preview a:focus-visible, .quiet-preview button:focus-visible, .quiet-preview summary:focus-visible { outline: 3px solid #4379ae; outline-offset: 5px; }
.quiet-header, .quiet-hero, .selected-section, .more-section, .quiet-footer { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.quiet-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.quiet-logo { font: 800 25px/1 "Trebuchet MS", sans-serif; letter-spacing: -1.4px; }
.quiet-logo span { color: #527da8; }
.quiet-header nav { display: flex; gap: 32px; font-size: 13px; }
.quiet-header nav a { display: flex; align-items: center; min-height: 44px; }
.quiet-header nav a:hover { color: #386b9a; }
.quiet-hero { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; padding-block: 68px 76px; }
.identity { display: flex; align-items: center; gap: 14px; margin-bottom: 27px; }
.identity img { width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; object-position: 50% 24%; }
.identity p { margin: 0; font-size: 19px; font-weight: 650; }
.identity p span { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: #747a80; }
.quiet-intro h1 { margin: 0; font: 700 clamp(42px, 4.7vw, 66px)/1.04 "Trebuchet MS", sans-serif; letter-spacing: -3px; }
.quiet-intro h1 em { font-style: normal; color: #567da2; }
.intro-line { font-size: 17px; line-height: 1.9; margin: 24px 0 28px; color: #62686d; }
.quiet-actions { display: flex; align-items: center; gap: 13px; }
.quiet-actions a { display: inline-flex; align-items: center; gap: 24px; min-height: 46px; border: 1px solid var(--line); border-radius: 6px; padding: 11px 20px; font-size: 14px; }
.quiet-actions .action-main { background: var(--ink); border-color: var(--ink); color: white; }
.quiet-actions a:hover { border-color: #567da2; background: var(--accent); color: var(--ink); }
.signature { margin: 30px 0 0; font: 10px/1.5 Consolas, monospace; letter-spacing: .045em; color: #777d81; }
.hero-project { display: block; border: 1px solid #bdcad2; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 12px 36px #2437470b; transition: border-color .2s, transform .2s; }
.hero-project:hover { border-color: #567da2; transform: translateY(-3px); }
.window-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; background: #eaf0f5; padding: 0 16px; font: 10px/1 Consolas, monospace; color: #617789; border-bottom: 1px solid #d6dfe5; }
.window-dots { color: #9baebb; font-size: 8px; letter-spacing: 2px; }
.hero-product-image { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; }
.hero-project-label { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 19px 24px; border-top: 1px solid var(--line); }
.eyebrow { font: 11px/1.5 Consolas, "Microsoft YaHei UI", monospace; letter-spacing: .06em; color: #72797e; }
.hero-project-label h2 { font: 700 25px/1.1 "Trebuchet MS", sans-serif; letter-spacing: -.8px; margin: 5px 0 0; }
.open-project { font-size: 12px; color: #496c8c; white-space: nowrap; }
.selected-section { padding-block: 39px 58px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.selected-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 29px; }
.selected-heading .eyebrow { margin: 0 0 12px; }
.selected-heading h2 { font: 700 34px/1.1 "Trebuchet MS", sans-serif; letter-spacing: -1.3px; margin: 0; }
.selected-heading h2 span { color: #6d93b8; }
.selected-heading > p { margin: 0; color: #747a80; font-size: 13px; }
.selected-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.selected-card { min-width: 0; display: block; }
.selected-image { height: 225px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #f0f1ed; display: grid; align-items: center; transition: border-color .2s, transform .2s; }
.selected-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.selected-card:hover .selected-image { border-color: #567da2; transform: translateY(-3px); }
.card-meta { display: flex; justify-content: space-between; gap: 8px; color: #6e767c; font-size: 10px; margin: 18px 0 10px; }
.selected-card h3 { display: flex; align-items: center; justify-content: space-between; font: 700 25px/1.2 "Trebuchet MS", sans-serif; letter-spacing: -.6px; margin: 0 0 10px; }
.selected-card h3 span { font-size: 18px; font-weight: 400; color: #6886a0; }
.selected-card > p { font-size: 13px; line-height: 1.8; margin: 0; color: #656c72; }
.preview-note { font-size: 11px; line-height: 1.7; color: #7a7f83; margin: 26px 0 0; }
.more-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more-section summary { cursor: pointer; padding-block: 27px; display: flex; justify-content: space-between; gap: 20px; font: 20px/1.4 "Trebuchet MS", sans-serif; }
.more-section summary::-webkit-details-marker { display: none; }
.details-hint { font: 12px/1.5 "Microsoft YaHei UI", sans-serif; align-self: center; color: #697580; }
.more-links { display: flex; flex-wrap: wrap; gap: 16px; padding-block: 10px 28px; }
.more-links a { padding: 12px 16px; border: 1px solid var(--line); border-radius: 5px; font-size: 14px; }
.quiet-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 11px; color: #737a80; padding-block: 27px 40px; }
.quiet-preview .project-dialog { border: 1px solid #9cacb9; border-radius: 10px; background: var(--paper); box-shadow: 0 20px 70px #1113; }
.quiet-preview .project-dialog-bar { background: #eaf0f5; border-bottom: 1px solid var(--line); }
.quiet-preview .project-close { background: transparent; border: 0; border-radius: 5px; }
.quiet-preview .project-close:hover { background: var(--accent); }
.quiet-preview .project-preview { border-right: 1px solid var(--line); background: #f1f3f1; }
.quiet-preview .project-preview figcaption { background: var(--paper); border-top: 1px solid var(--line); }
.quiet-preview .project-destinations a { border: 1px solid #aab9c5; box-shadow: none; border-radius: 5px; }
.quiet-preview .project-demo { background: #dceafa; color: #243e56; }
.quiet-preview .toy-body > header, .quiet-preview .toy-body > a { color: #252a31; }
.quiet-preview .toy-card > a { font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.quiet-preview .toy-shelf, .quiet-preview .about { margin-bottom: 25px; }
.quiet-preview .toy-shelf { grid-template-columns: 230px 1fr; }
.quiet-preview .toy-heading { padding: 35px 20px; }
.quiet-preview .toy-heading h2 { font-size: 44px; }
.quiet-preview .toy-grid { padding: 24px; }
.quiet-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); min-height: 540px; gap: 40px; }
.hello-label { font: 12px/1.5 Consolas, monospace; letter-spacing: .14em; color: #6e7e8c; margin: 0 0 22px; }
.hello-label span { letter-spacing: 0; margin-left: 8px; }
.quiet-intro h1 { font: 750 clamp(64px, 6.5vw, 88px)/1.12 "Microsoft YaHei UI", sans-serif; letter-spacing: -.055em; }
.name-dot { color: #6e98bf; }
.personal-role { font: 600 clamp(20px, 2.2vw, 29px)/1.4 "Trebuchet MS", sans-serif; color: #567da2; margin: 20px 0 26px; }
.career-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; line-height: 1.8; color: #424f5b; margin: 0 0 28px; }
.career-path span, .career-path strong { white-space: nowrap; }
.career-path i { font-style: normal; color: #748a9c; }
.career-path strong { font-weight: 650; color: #365c7f; }
.personal-portrait { margin: 0; position: relative; justify-self: center; width: min(100%, 360px); }
.personal-portrait img { display: block; width: 100%; height: auto; border-radius: 48% 48% 42% 42%; }
.personal-portrait figcaption { text-align: right; margin-top: 16px; font: 11px/1.5 Consolas, monospace; letter-spacing: .1em; color: #6e879c; }
.personal-portrait figcaption span { margin-left: 8px; }
@media (max-width: 1050px) {
  .quiet-header, .quiet-hero, .selected-section, .more-section, .quiet-footer { width: calc(100% - 56px); }
  .quiet-hero { gap: 30px; grid-template-columns: 1.4fr 1fr; }
  .quiet-intro h1 { font-size: 64px; }
  .selected-grid { gap: 18px; }
  .selected-image { height: 180px; }
  .quiet-preview .toy-shelf { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .quiet-header, .quiet-hero, .selected-section, .more-section, .quiet-footer { width: calc(100% - 40px); }
  .quiet-header { min-height: 72px; }
  .quiet-logo { font-size: 22px; }
  .quiet-header nav { gap: 15px; font-size: 11px; }
  .quiet-header nav a:last-child { display: none; }
  .quiet-hero { grid-template-columns: minmax(0, 1fr); padding-block: 34px 40px; gap: 34px; }
  .personal-portrait { width: 180px; }
  .personal-portrait figcaption { margin-top: 8px; }
  .career-path { font-size: 16px; gap: 7px; }
  .identity { margin-bottom: 21px; }
  .identity img { width: 44px; height: 44px; }
  .identity p { font-size: 16px; }
  .quiet-intro h1 { font-size: clamp(40px, 11vw, 56px); letter-spacing: -2px; }
  .intro-line { font-size: 15px; margin: 18px 0 23px; }
  .intro-line br { display: none; }
  .quiet-actions a { gap: 18px; padding-inline: 17px; }
  .signature { font-size: 9px; margin-top: 22px; }
  .hero-project-label { padding: 15px 17px; }
  .hero-project-label h2 { font-size: 22px; }
  .selected-heading { align-items: start; flex-direction: column; gap: 12px; }
  .selected-heading h2 { font-size: 29px; }
  .selected-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .selected-image { height: auto; aspect-ratio: 16/10; }
  .card-meta { font-size: 11px; margin-top: 14px; }
  .selected-card > p { font-size: 14px; }
  .more-section summary { font-size: 17px; flex-wrap: wrap; gap: 8px; }
  .quiet-preview .project-preview { border-right: 0; }
  .quiet-preview .toy-grid { padding: 16px; grid-template-columns: minmax(0, 1fr); }
  .quiet-preview .toy-card { padding-inline: 18px; }
}