@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root { color-scheme: light; --ink: #000; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.page-shell { max-width: 1920px; margin: auto; }
.site-header { height: 88px; padding: 0 3.4vw; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; }
.brand { display: inline-flex; gap: 7px; align-items: center; font-size: 21px; font-weight: 700; letter-spacing: -.08em; }
.brand img { display: block; width: 32px; height: 32px; object-fit: cover; mix-blend-mode: multiply; }
.brand-period { color: var(--ink); }
.header-note { font-size: 14px; font-weight: 600; }
.header-link span { display: inline-block; margin-left: 12px; transition: transform .2s ease; }
.header-link:hover span { transform: translate(3px, -3px); }
.hero { min-height: min(780px, calc(100svh - 88px)); display: grid; grid-template-columns: 53% 47%; border-bottom: 1px solid #ddd; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 55px; min-width: 0; padding: 45px 3.4vw; }
.download-button { display: inline-flex; align-items: center; gap: 14px; padding: 18px 27px; border: 1px solid #000; border-radius: 100px; background: #000; color: #fff; font-size: clamp(16px, 1.4vw, 21px); font-weight: 600; white-space: nowrap; transition: background .2s ease, color .2s ease; }.download-button:hover { background: #fff; color: #000; }.download-button:focus-visible { outline: 2px solid #000; outline-offset: 4px; }.apple-mark { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.25em; line-height: 1; }
h1, h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.055em; }
h1 { margin: 0; font-size: clamp(80px, 9.9vw, 190px); line-height: .83; white-space: nowrap; }
h1 em, h2 em { font-weight: 400; color: var(--ink); }
.hero-art { position: relative; min-width: 0; overflow: hidden; background: #000; color: #fff; isolation: isolate; }
.hero-art::before { content: ''; position: absolute; inset: 0; opacity: .28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode: multiply; pointer-events: none; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.54); border-radius: 50%; aspect-ratio: 1; left: 50%; top: 51%; transform: translate(-50%,-50%); }
.orbit-one { width: 115%; }.orbit-two { width: 76%; border-style: dashed; opacity: .65; }
.time-mark { position: absolute; z-index: 3; top: 17%; right: 11%; display: flex; align-items: baseline; transform: rotate(10deg); font-family: 'Instrument Serif', Georgia, serif; line-height: .8; }
.time-mark span { font-size: clamp(100px, 12vw, 210px); letter-spacing: -.09em; }.time-mark small { font-family: 'DM Sans', Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em; margin-left: 8px; }
.paper { position: absolute; z-index: 2; width: min(63%, 425px); height: 64%; left: 11%; bottom: -9%; background: #fff; color: var(--ink); box-shadow: 19px 20px 0 #555; transform: rotate(-9deg); padding: 35px 34px; }
.paper-writing { margin-top: clamp(44px, 6vw, 95px); font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(27px, 3vw, 52px); line-height: 1.08; letter-spacing: -.035em; }
.paper-writing span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.paper-cursor { width: 1px; height: 31px; margin-top: 20px; background: var(--ink); }
.space-section { padding: 110px 3.4vw 130px; }
h2 { margin: 0 0 65px; font-size: clamp(70px, 8vw, 150px); line-height: .87; }
.app-preview { position: relative; width: 100%; aspect-ratio: 2056 / 1378; container-type: inline-size; border-radius: 16px; background: #1f1f1f; color: #ddd; overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
.window-toolbar { display: flex; align-items: center; gap: 2.3cqw; height: 7cqw; padding: 0 4.5cqw; font-size: 1.37cqw; font-weight: 600; white-space: nowrap; }
.font-choice { display: inline-flex; align-items: baseline; gap: .5cqw; }.aa { font-size: 1.13cqw; font-weight: 400; }.chevron { font-size: 1.2cqw; font-weight: 400; }.heading-tool { font-size: 1.85cqw; font-weight: 400; letter-spacing: -.09em; }.bold-tool { font-size: 1.8cqw; font-weight: 800; }.italic-tool { font: italic 1.85cqw Georgia, serif; }.highlight-tool { display: inline-flex; align-items: center; gap: .25cqw; }.highlight-tool svg { width: 1.85cqw; height: 1.85cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.toolbar-spacer { flex: 1; }
.demo-control { display: inline-flex; align-items: center; justify-content: center; padding: .35cqw .12cqw; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.demo-control:hover, .demo-control[aria-expanded="true"] { background: #383838; }
.demo-control:focus-visible, .demo-popover button:focus-visible, .demo-clue button:focus-visible, .clue-reopen:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.window-page { height: calc(100% - 7cqw); padding: 4.55cqw; overflow: auto; }
.demo-editor { min-height: 100%; outline: none; color: #eee; font: 2cqw/1.5 Georgia, serif; overflow-wrap: anywhere; caret-color: #fff; }
.demo-editor p { margin: 0 0 1.2em; }
.demo-editor:empty::before { content: attr(data-placeholder); color: #969696; font-weight: 600; pointer-events: none; }
.demo-editor h2 { margin: .4em 0; color: #fff; font-family: inherit; font-size: 1.5em; font-weight: 700; line-height: 1.2; letter-spacing: normal; }
.demo-editor span[style*="background"] { color: #000; }
.demo-popover { position: absolute; z-index: 5; top: 6.6cqw; padding: 12px; border: 1px solid #666; border-radius: 8px; background: #292929; box-shadow: 0 16px 35px #0008; font: 13px Arial, Helvetica, sans-serif; }
.font-popover { left: 4.5cqw; min-width: 180px; }.demo-popover button { display: block; width: 100%; padding: 9px; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; }.demo-popover button:hover { background: #464646; }
.daily-popover { right: 5cqw; width: min(290px, 80%); color: #fff; }.daily-popover strong { display: block; margin: 2px 0 15px; }.daily-popover label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }.daily-popover input, .daily-popover select { width: 115px; padding: 6px; border: 1px solid #888; border-radius: 4px; background: #fff; color: #000; font: inherit; }.daily-popover p { margin: 15px 0 0; color: #bbb; font-size: 11px; }
.demo-clue { position: absolute; z-index: 4; left: 4.5cqw; bottom: 4.5cqw; display: flex; align-items: center; gap: 20px; max-width: min(390px, 78%); padding: 13px 14px; border: 1px solid #777; border-radius: 7px; background: #292929; color: #fff; font: 13px/1.4 Arial, Helvetica, sans-serif; box-shadow: 0 10px 30px #0005; }.demo-clue button { margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 20px; cursor: pointer; }.clue-reopen { position: absolute; right: 4.5cqw; bottom: 4.5cqw; width: 30px; height: 30px; border: 1px solid #888; border-radius: 50%; background: #292929; color: #fff; cursor: pointer; }
[hidden] { display: none !important; }
.demo-dialog { width: min(430px, calc(100vw - 32px)); padding: 24px; border: 1px solid #888; border-radius: 9px; background: #242424; color: #fff; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 30px 80px #0008; }.demo-dialog::backdrop { background: #0009; }.demo-dialog h3 { margin: 0 0 12px; font-size: 20px; }.demo-dialog p { margin: 0 0 15px; color: #ccc; }.demo-dialog input[type="text"] { display: block; width: 100%; padding: 11px; border: 1px solid #999; border-radius: 5px; background: #fff; color: #000; font: inherit; }.demo-dialog small { display: block; margin-top: 11px; color: #aaa; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 23px; }.dialog-actions button { padding: 9px 13px; border: 1px solid #888; border-radius: 5px; background: transparent; color: #fff; font: inherit; cursor: pointer; }.dialog-actions button:last-child { background: #fff; color: #000; }.dialog-actions button:hover { border-color: #fff; }
.files-list { max-height: 240px; overflow: auto; }.files-list button { display: flex; justify-content: space-between; gap: 15px; width: 100%; padding: 13px 8px; border: 0; border-bottom: 1px solid #555; background: transparent; color: #fff; text-align: left; font: inherit; cursor: pointer; }.files-list button:hover { background: #383838; }.files-list time { color: #aaa; font-size: 12px; white-space: nowrap; }.files-empty { padding: 18px 3px; color: #aaa; }
@media (max-width: 1150px) { .hero { min-height: 650px; }.hero-copy { padding-right: 3vw; }h1 { font-size: clamp(80px, 9.8vw, 130px); }.paper { width: 70%; left: 9%; } }
@media (max-width: 760px) { .site-header { height: 70px; padding: 0 20px; }.hero { display: flex; flex-direction: column; min-height: 0; }.hero-copy { min-height: 430px; gap: 35px; padding: 27px 20px; }h1 { font-size: clamp(76px, 16vw, 130px); }.hero-art { height: 540px; }.time-mark { top: 14%; right: 11%; }.time-mark span { font-size: clamp(130px, 29vw, 210px); }.paper { width: 61%; max-width: 330px; height: 65%; left: 13%; padding: 24px; }.paper-writing { font-size: clamp(29px, 5.8vw, 42px); margin-top: 55px; }.space-section { padding: 80px 20px 100px; }h2 { font-size: clamp(68px, 13vw, 105px); margin-bottom: 45px; }.app-preview { border-radius: 8px; } }
@media (max-width: 480px) { .brand { font-size: 19px; }.brand img { width: 29px; height: 29px; }.hero-copy { min-height: 390px; }.hero-art { height: 460px; }.paper { width: 72%; height: 66%; left: 10%; }.paper-writing { font-size: 29px; margin-top: 42px; }.time-mark { top: 19%; right: 4%; }.time-mark span { font-size: 120px; }.space-section { padding-top: 65px; }h2 { font-size: 14vw; }.app-preview { border-radius: 6px; } }
@media (max-width: 760px) { .app-preview { min-height: 480px; aspect-ratio: auto; }.window-toolbar { height: 60px; gap: clamp(6px, 1.5vw, 12px); padding: 0 16px; font-size: clamp(10px, 2vw, 14px); }.demo-control { padding: 10px 1px; }.font-choice { gap: 2px; }#font-label, .daily-prefix { display: none; }.aa, .chevron { font-size: 12px; }.heading-tool, .bold-tool, .italic-tool { font-size: 17px; }.highlight-tool svg { width: 18px; height: 18px; }.window-page { height: calc(100% - 60px); padding: 37px 25px; }.demo-editor { font-size: 21px; }.demo-popover { top: 58px; }.font-popover { left: 15px; }.daily-popover { right: 15px; }.demo-clue { left: 20px; bottom: 20px; }.clue-reopen { right: 20px; bottom: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0s !important; } }