@charset "UTF-8";

/* A readable, consistent sans-serif scale on a colored-pencil stage. */
:root {
  --sans: "Microsoft YaHei", "PingFang SC", "Heiti SC", SimHei, Arial, sans-serif;
  --serif: var(--sans);
  --hand: var(--sans);
  --muted: #53644e;
  --frame-safe: clamp(70px, 9vw, 130px);
  --pencil-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.14'/%3E%3C/svg%3E");
}
html { scroll-padding-top: 82px; }
body { font-size: 18px; line-height: 1.85; }
body * { font-family: var(--sans) !important; font-style: normal !important; }
body::after { opacity: .085; }
body, button, input, textarea, select, h1, h2, h3, h4, p, span, a, b, i, small, strong, figcaption, li,
.brand, .year-value, .folder-number, .note-index, .contact-value, .footer-line b,
.welcome-sticker, .portrait-tag, .mini-clipboard i, .dialog-features li > span:first-child {
  font-family: var(--sans); font-style: normal;
}
.section-inner { width: min(1180px, calc(100% - 112px)); }
body.curtain-pinned .section-inner { width: min(1180px, calc(100% - var(--frame-safe) * 2)); }
.page-section { padding-block: 88px 96px; }
.section-topline, .section-topline > span:last-child:not(:first-child) {
  font-size: 13px; letter-spacing: .06em; line-height: 1.6;
}
.section-topline { margin-bottom: 32px; }
.section-heading { margin-bottom: 38px; align-items: center; }
.section-heading h2, .tools-section .section-heading h2 {
  font-size: clamp(32px, 3.4vw, 42px); font-weight: 700; line-height: 1.4; letter-spacing: .015em;
}
.section-heading > p { font-size: 17px; line-height: 1.9; max-width: 28em; }
.site-header { padding: 35px max(56px, var(--frame-safe)); }
body.curtain-pinned .site-header { padding-top: 92px; }
.brand { font-size: 27px; font-weight: 700; letter-spacing: 0; }
.replay-curtain { font-size: 14px; min-height: 44px; }
.sketch-button, .simple-link { font-size: 16px; min-height: 52px; }
.sketch-button { padding: 13px 23px; }
.simple-link { gap: 16px; }
.home-section { padding-top: 164px; min-height: 100svh; padding-bottom: 110px; }
body.curtain-pinned .home-section { padding-top: 202px; }
.home-layout { gap: 50px; grid-template-columns: 1.1fr 1fr; min-height: 470px; }
.eyebrow { font-size: 14px; letter-spacing: .06em; }
.hello-note { font-size: 21px; margin: 27px 0 15px; transform: none; }
.home-copy h1 { font-size: clamp(36px, 4.1vw, 56px); font-weight: 700; line-height: 1.42; letter-spacing: .015em; }
#home-title:focus { outline: none; }
.home-intro { font-size: 18px; max-width: 26em; line-height: 1.95; margin-top: 24px; }
.home-actions { gap: 26px; flex-wrap: wrap; margin-top: 27px; }
.home-footnote { font-size: 13px; line-height: 1.8; letter-spacing: .02em; margin-top: 28px; }
.illustration-arch { border: 2px solid #9eae87; box-shadow: 5px 7px 0 #c4d09b55; }
.illustration-arch img { height: 440px; }
.scroll-note { font-size: 13px; bottom: -66px; letter-spacing: .04em; }

.about-section { background: #e8eedc; }
.scrapbook { grid-template-columns: 1.42fr 1fr; min-height: 520px; border: 2px solid #a5b78f; }
.scrapbook-seam { left: 58.7%; }
.about-copy { padding: 42px 38px; }
.about-copy h2 { font-size: 40px; font-weight: 700; transform: none; margin: 0 0 23px; }
.hello-sticker { font-size: 21px; padding: 8px 14px; }
.about-intro[data-bind=eyebrow] { font-size: 13px; line-height: 1.7; letter-spacing: .02em; margin-top: 26px; }
.about-body { margin-top: 20px; max-width: none; }
.about-body p { font-size: 18px; line-height: 1.95; margin-top: 16px; }
.portrait-stage { min-height: 520px; padding-bottom: 110px; align-items: end; }
.portrait-cutout { width: 255px; height: 320px; max-width: 80%; }
.portrait-blue-paper { inset: 85px 30px 113px; border: 2px solid #7aa0ac; }
.portrait-rays { inset: 38px 20px; }
.portrait-flower { width: 58px; height: 58px; top: 79px; left: 18px; }
.portrait-stage figcaption { bottom: 70px; }
.name-sticker { font-size: 29px; padding: 3px 20px; }
.welcome-sticker { font-size: 20px; line-height: 1.5; }

.timeline-section { padding-block: 88px 96px; background-color: #eaf1e8; background-image: var(--pencil-grain); }
.garden-timeline { padding-top: 28px; --year-min: 125px; }
.year-nodes { gap: 22px; }
.year-node > svg { width: 86px; height: 80px; opacity: .3; transform: rotate(-7deg) scale(.9); transition: opacity .25s, transform .25s, filter .25s; }
.year-node:nth-child(even) > svg { transform: rotate(7deg) scale(.9); }
.year-node:hover > svg { opacity: .65; }
.year-node[aria-selected=true] > svg { opacity: 1; transform: rotate(0) scale(1.22); filter: drop-shadow(0 0 7px #efbb36a6) drop-shadow(2px 3px 0 #476c3d55); }
.year-node:before { width: 16px; height: 16px; top: 68px; left: calc(50% - 8px); opacity: .4; }
.year-node:nth-child(even):before { top: 86px; }
.year-node[aria-selected=true]:before { opacity: 1; box-shadow: 0 0 0 6px #efbb3633; }
.year-value { font-size: 36px; font-weight: 600; margin-top: 49px; color: #75856d; }
.year-node[aria-selected=true] .year-value { font-weight: 800; color: #2b4d31; }
.year-label { font-size: 13px; line-height: 1.7; letter-spacing: .02em; margin-top: 10px; }
.year-node[aria-selected=true] .year-label { background: #f1dc8c; color: #2b4d31; border-radius: 3px 7px 4px 5px; width: fit-content; margin-inline: auto; padding-inline: 10px; }
.timeline-details { gap: 24px; margin-top: 30px; min-height: 280px; }
.timeline-card { padding: 29px 30px; border: 1.5px solid #a3bb91; background-image: var(--pencil-grain); }
.timeline-card:only-child { width: 85%; max-width: 900px; }
.timeline-card-top { font-size: 14px; flex-wrap: wrap; gap: 8px 20px; line-height: 1.7; }
.timeline-card h3 { font-size: 25px; line-height: 1.5; font-weight: 700; }
.timeline-place { font-size: 17px; line-height: 1.7; }
.timeline-card-description { font-size: 18px; line-height: 1.9; }
.timeline-highlights { gap: 8px; }
.timeline-highlights > span { font-size: 14px; padding: 3px 10px; }

.folder-grid { gap: 44px; margin-top: 72px; }
.folder-cover { min-height: 340px; }
.folder-tab { font-size: 12px; letter-spacing: .02em; width: 57%; height: 34px; top: -28px; }
.folder-sheet > span { font-size: 12px; letter-spacing: .02em; }
.folder-sheet strong { font-size: 20px; font-weight: 600; }
.folder-front { background-image: var(--pencil-grain); padding: 26px; }
.folder-front::after { opacity: .15; }
.folder-number { font-size: 38px; font-weight: 700; }
.folder-title { font-size: 27px; font-weight: 700; max-width: 100%; }
.folder-category { font-size: 12px; line-height: 1.7; letter-spacing: .015em; margin-top: 9px; }
.folder-sticker { font-size: 12px; bottom: auto; top: 32px; right: 80px; }
.folder-project-mark { display: flex; align-items: center; gap: 15px; }
.folder-app-icon { display: block; width: 62px; height: 62px; object-fit: contain; border-radius: 15px; border: 1px solid #f6f3e899; box-shadow: 2px 3px 0 #36523020; }
.folder-app-icon[hidden] { display: none; }
.folder-project-mark .folder-number { font-size: 26px; opacity: .3; }
.folder-description { font-size: 18px; line-height: 1.9; max-width: 100%; }
.folder-details, .folder-direct { font-size: 16px; min-height: 44px; }
.folder-direct svg { width: 18px; height: 18px; }
.mini-clipboard > div, .mini-calendar { font-size: 12px; }

.tools-section .section-heading { display: flex; align-items: center; }
.notes-controls { gap: 12px; padding: 0; }
.notes-controls button { width: 44px; height: 44px; }
.notes-controls button:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ink); }
.notes-viewport { position: relative; }
.tool-notes { gap: 28px; padding: 24px 10px 32px; cursor: grab; scroll-snap-type: none; scroll-padding: 10px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.tool-notes.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.tool-note { flex-basis: 30%; min-height: 350px; padding: 37px 26px 28px; background-image: var(--pencil-grain); border: 1.5px solid #cecfb7; box-shadow: 3px 5px 0 #aab49426; }
.note-index { font-size: 14px; font-weight: 600; color: #6d8059; }
.tool-note h3 { font-size: 25px; font-weight: 700; transform: none; }
.tool-note > p { font-size: 16px; line-height: 1.8; margin-top: 13px; }
.tool-note li { font-size: 18px; line-height: 1.6; }
.tool-note ul { gap: 10px 16px; margin-top: 23px; }
.notes-edge-arrow { position: absolute; z-index: 5; top: 47%; right: -10px; width: 46px; height: 46px; border: 1.5px solid #6d8a51; background: #f3e884; box-shadow: 3px 4px 0 #91a77655; border-radius: 50%; font-size: 24px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.has-more .notes-edge-arrow { opacity: 1; pointer-events: auto; }
.notes-hint { font-size: 14px; color: var(--muted); margin-top: 4px; }
.notes-hint > span { font-size: 20px; color: var(--olive); margin-right: 8px; }
.tool-extra { padding-top: 23px; margin-top: 26px; }
.tool-extra > p { font-size: 17px; line-height: 1.9; max-width: 100%; }

.contact-section { padding: 88px 0 140px; background-image: var(--pencil-grain); }
.contact-section .section-topline { font-size: 13px; }
.contact-layout { gap: 60px; }
.contact-layout h2 { font-size: 36px; font-weight: 700; line-height: 1.6; margin-top: 0; }
.contact-description { font-size: 18px; line-height: 1.9; margin-top: 23px; color: #d8e2c9; }
.contact-label { font-size: 14px; letter-spacing: .04em; color: #d8e2c9; }
.contact-value, .phone-copy .contact-value { font-size: 30px; font-weight: 600; line-height: 1.5; margin-top: 9px; }
.phone-note { font-size: 14px; line-height: 1.8; color: #d2ddbf; }
.contact-download { font-size: 16px; min-height: 44px; align-items: center; }
.footer-line { font-size: 13px; line-height: 1.8; flex-wrap: wrap; gap: 16px 24px; }
.footer-line b { font-size: 18px; font-weight: 700; }
.footer-line > span:last-child { font-size: 13px; }
.floating-nav { z-index: 90; bottom: 22px; padding: 7px 9px; }
.floating-nav a, .floating-nav .nav-download { font-size: 14px; padding: 10px 18px; min-height: 44px; }
.toast { font-size: 16px; }

/* Project detail follows the reading order of an application store. */
.project-dialog { width: min(880px, calc(100% - 48px)); max-height: 90dvh; }
.project-dialog-inner { padding: 48px; }
.dialog-close { position: sticky; float: right; top: 0; margin: -28px -26px 0 0; z-index: 3; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-light); font-size: 30px; }
.dialog-index { font-size: 13px; letter-spacing: .04em; }
.project-dialog h2 { font-size: 32px; font-weight: 700; line-height: 1.5; margin-top: 20px; }
.dialog-status { font-size: 14px; margin-top: 12px; padding: 3px 10px; }
.dialog-app-header { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.dialog-app-icon { width: 88px; height: 88px; flex-shrink: 0; object-fit: contain; border-radius: 21px; box-shadow: 3px 4px 0 #839b7624; }
.dialog-app-identity { min-width: 0; }
.dialog-app-header h2 { margin-top: 0; }
.dialog-description { font-size: 18px; line-height: 1.9; margin-top: 23px; }
.dialog-gallery-section, .dialog-details-section { margin-top: 32px; }
.project-dialog h3 { font-size: 22px; font-weight: 700; margin-bottom: 15px; }
.gallery-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.gallery-heading h3 { margin-bottom: 0; }
.gallery-controls { display: flex; gap: 8px; }
.gallery-controls button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #94aa7e; background: #edf0dd; font-size: 21px; }
.gallery-controls button:disabled { opacity: .35; cursor: default; }
.gallery-hint { font-size: 14px; color: var(--muted); margin: 7px 0 13px; }
.dialog-gallery { --shot-height: 360px; display: flex; gap: 18px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: none; scrollbar-width: thin; scrollbar-color: #8aa876 transparent; overscroll-behavior-x: contain; }
.project-screenshot { flex: 0 0 auto; width: calc(var(--shot-height) * var(--screenshot-ratio, .65)); min-width: 0; max-width: 100%; }
.project-screenshot img { width: 100%; height: var(--shot-height); object-fit: contain; background: #edf1e7; border: 1px solid #bbc8aa; border-radius: 12px; }
.project-screenshot figcaption { font-size: 13px; color: var(--muted); text-align: center; padding-top: 7px; }
.dialog-details-copy { font-size: 18px; line-height: 1.9; }
.dialog-details-copy p + p { margin-top: 16px; }
.dialog-features li { font-size: 17px; gap: 16px; }
.dialog-features li > span:first-child { font-size: 18px; font-weight: 700; line-height: 1.8; }
.dialog-project-link, .dialog-pending { font-size: 16px; }
.dialog-project-link { margin-top: 4px; }

/* Keep the intro readable in the same type family. */
.gate-title h1 { font-size: clamp(34px, 4.2vw, 58px); font-weight: 700; letter-spacing: .035em; }
.gate-edition { font-size: 13px; letter-spacing: .06em; }
.gate-subtitle { font-size: 18px; line-height: 1.8; letter-spacing: .02em; }
.load-label, #cord-hint small, .gate-skip { font-size: 14px; letter-spacing: .025em; }
.gate-footer { display: none; }
#cord-hint { font-size: 21px; }

@media (max-width: 1050px) {
  .section-inner { width: calc(100% - 80px); }
  .home-layout { gap: 30px; }
  .illustration-arch img { height: 390px; }
  .scrapbook { grid-template-columns: 1.35fr 1fr; }
  .scrapbook-seam { left: 57.5%; }
  .about-copy { padding: 34px 28px; }
  .about-body p { font-size: 17px; }
  .portrait-cutout { height: 290px; width: 230px; }
  .portrait-blue-paper { inset: 110px 20px 113px; }
  .portrait-flower { top: 100px; left: 8px; }
  .folder-tab { width: 65%; font-size: 11px; padding-inline: 14px; }
  .folder-title { font-size: 24px; }
  .folder-category { font-size: 11px; }
  .folder-front { padding: 24px 22px; }
  .folder-sticker { right: 65px; font-size: 11px; }
  .tool-note { flex-basis: 43%; }
  .contact-layout { gap: 38px; }
  .contact-layout h2 { font-size: 32px; }
  .contact-value, .phone-copy .contact-value { font-size: 27px; }
}
@media (max-width: 760px) {
  :root { --frame-safe: 42px; }
  body { font-size: 17px; }
  .section-inner { width: calc(100% - 48px); }
  .page-section { padding-block: 72px 80px; }
  .site-header { padding: 26px 30px; }
  body.curtain-pinned .site-header { padding-top: 65px; }
  .home-section { padding-top: 122px; min-height: auto; padding-bottom: 110px; }
  body.curtain-pinned .home-section { padding-top: 154px; }
  .home-layout { grid-template-columns: 1fr; gap: 48px; }
  .home-copy h1 { font-size: 43px; }
  .home-intro { max-width: 31em; }
  .hero-illustration { width: min(430px, 94%); margin-inline: auto; }
  .illustration-arch img { height: 370px; }
  .scroll-note { bottom: -65px; }
  .scrapbook { display: flex; flex-direction: column; }
  .scrapbook-seam { display: none; }
  .about-copy h2 { font-size: 34px; }
  .portrait-stage { min-height: 400px; height: 400px; padding-bottom: 94px; margin-top: -4px; }
  .portrait-cutout { height: 274px; width: 225px; max-width: 75%; }
  .portrait-blue-paper { inset: 32px max(28px, calc(50% - 140px)) 89px; }
  .portrait-rays { inset: 10px 20px; }
  .portrait-flower { top: 20px; left: max(20px, calc(50% - 160px)); width: 50px; height: 50px; }
  .portrait-stage figcaption { bottom: 40px; gap: 7px; }
  .name-sticker { font-size: 27px; }
  .welcome-sticker { font-size: 18px; }
  .section-heading { display: block; }
  .section-heading > p { font-size: 16px; margin-top: 14px; }
  .section-heading > p br { display: none; }
  .garden-timeline { --year-min: 95px; padding-top: 25px; }
  .year-nodes { gap: 7px; }
  .year-node > svg { width: 64px; height: 64px; }
  .year-node:before { top: 56px; }
  .year-node:nth-child(even):before { top: 74px; }
  .year-value { font-size: 28px; margin-top: 45px; }
  .year-label { font-size: 12px; letter-spacing: 0; }
  .vine-line { top: 33px; height: 120px; left: 0; width: 100%; }
  .timeline-details { grid-template-columns: 1fr; min-height: 0; }
  .timeline-card:only-child { width: 100%; }
  .timeline-card { padding: 25px; }
  .timeline-card h3 { font-size: 23px; }
  .timeline-card-description { font-size: 17px; }
  .folder-grid { grid-template-columns: 1fr; gap: 65px; margin-top: 65px; }
  .folder-cover { min-height: 340px; }
  .folder-title { font-size: 26px; }
  .folder-category, .folder-tab { font-size: 12px; }
  .folder-tab { width: 58%; }
  .folder-description { font-size: 17px; }
  .folder-sticker { font-size: 12px; right: 76px; }
  .tool-note { flex-basis: 78%; padding: 35px 25px; min-height: 355px; }
  .tool-note h3 { font-size: 25px; }
  .tool-note > p { font-size: 16px; }
  .tool-note li { font-size: 18px; }
  .tool-extra > p { font-size: 16px; }
  .contact-section { padding: 72px 0 132px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-layout h2 { font-size: 32px; }
  .contact-description { font-size: 17px; }
  .contact-info { padding-top: 0; }
  .contact-value, .phone-copy .contact-value { font-size: 28px; }
  .footer-line { margin-top: 34px; }
  .floating-nav { width: calc(100% - 26px); max-width: 560px; gap: 0; justify-content: space-between; bottom: 14px; }
  .floating-nav a, .floating-nav .nav-download { font-size: 13px; padding: 8px 12px; }
  .floating-nav .nav-home { padding-inline: 10px; }
  .floating-nav .nav-home > span { display: none; }
  .floating-nav .nav-download { margin-left: 3px; gap: 8px; }
  .project-dialog { width: calc(100% - 28px); }
  .project-dialog-inner { padding: 34px 24px; }
  .dialog-close { margin: -19px -10px 0 0; }
  .project-dialog h2 { font-size: 27px; }
  .dialog-description, .dialog-details-copy { font-size: 17px; }
  .dialog-app-header { gap: 16px; margin-top: 20px; }
  .dialog-app-icon { width: 70px; height: 70px; border-radius: 17px; }
  .dialog-app-header h2 { font-size: 25px; }
  .dialog-app-header .dialog-status { font-size: 13px; margin-top: 8px; }
  .dialog-gallery { --shot-height: 370px; }
  .gallery-hint { font-size: 13px; }
  .gate-title { width: 68%; left: 43%; }
  .gate-title h1 { font-size: 36px; }
  .gate-edition { font-size: 11px; }
  .gate-subtitle { font-size: 16px; }
  .cord-rig { right: 0; width: 78px; }
  #cord-hint { font-size: 17px; }
  #cord-hint small { font-size: 11px; }
}
@media (max-width: 420px) {
  :root { --frame-safe: 30px; }
  body.curtain-pinned .section-inner { width: calc(100% - 60px); }
  .home-copy h1 { font-size: 36px; }
  .hello-note { font-size: 18px; }
  .home-intro { font-size: 17px; }
  .home-actions { gap: 16px 20px; }
  .sketch-button, .simple-link { font-size: 15px; }
  .section-heading h2, .tools-section .section-heading h2 { font-size: 29px; }
  .about-copy { padding: 28px 20px; }
  .about-copy h2 { font-size: 31px; }
  .hello-sticker { font-size: 19px; }
  .folder-title { font-size: 23px; }
  .folder-front { padding: 22px 18px; }
  .folder-tab { width: 70%; }
  .folder-sticker { right: 60px; top: 30px; font-size: 11px; }
  .folder-project-mark .folder-number { display: none; }
  .folder-category { font-size: 11px; }
  .tools-section .section-heading { align-items: end; gap: 10px; }
  .notes-controls { gap: 6px; }
  .notes-controls button { width: 36px; height: 36px; }
  .tool-note { flex-basis: 85%; padding: 32px 22px; }
  .notes-hint { font-size: 13px; }
  .contact-layout h2 { font-size: 29px; }
  .contact-value, .phone-copy .contact-value { font-size: 25px; }
  .floating-nav a, .floating-nav .nav-download { font-size: 12px; padding-inline: 8px; }
  .floating-nav .nav-home { padding-inline: 6px; }
  .gate-title h1 { font-size: 30px; }
  .gate-subtitle { font-size: 15px; }
  .gate-title { left: 42%; width: 67%; }
}