@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: #111; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
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; }
button, input, select { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.055em; }
h1 { margin: 0; font-size: clamp(70px, 7.8vw, 140px); line-height: .86; white-space: nowrap; }
h1 em, h2 em { font-weight: 400; }
.hero { height: clamp(480px, 39vw, 620px); 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: 24px; min-width: 0; padding: 35px 3.4vw; }
.hero-copy p { margin: 0; font-size: clamp(16px, 1.4vw, 21px); }
.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(95px, 9vw, 160px); letter-spacing: -.09em; }.time-mark small { font-family: 'DM Sans', Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; margin-left: 8px; }
.paper { position: absolute; z-index: 2; width: min(60%, 350px); height: 68%; left: 13%; bottom: -11%; background: #fff; color: var(--ink); box-shadow: 16px 17px 0 #555; transform: rotate(-9deg); padding: 27px; }
.paper-writing { margin-top: clamp(35px, 4vw, 70px); font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(24px, 2.45vw, 40px); 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); }
.download-button { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 100px; background: #111; color: #fff; font-size: 16px; font-weight: 600; transition: background .2s, color .2s; }
.download-button:hover { background: #393939; }
.apple-mark { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.2em; line-height: 1; }
.experience { background: #fff; padding: 68px clamp(20px, 3.4vw, 90px) 78px; }
.experience-heading { max-width: 1180px; margin: 0 auto 38px; }
.experience-heading h2 { margin: 0; font-size: clamp(60px, 5.6vw, 100px); line-height: .9; }
.experience-heading p { margin: 12px 0 0; font-size: clamp(15px, 1.2vw, 18px); }
.app-preview { position: relative; width: 100%; max-width: 1180px; aspect-ratio: 16 / 9; margin: auto; container-type: inline-size; overflow: hidden; border: 2px solid #484848; border-radius: clamp(12px, 1.2vw, 20px); background: #1f1f1f; color: #dedede; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 2px 3px #0005; }
.traffic-lights { position: absolute; top: 1.05cqw; left: 1.05cqw; display: flex; gap: .8cqw; }
.traffic-lights span { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ff5f57; }
.traffic-lights span:nth-child(2) { background: #febc2e; }.traffic-lights span:nth-child(3) { background: #28c840; }
.window-toolbar { position: relative; display: flex; align-items: center; gap: 1.6cqw; height: 7.8cqw; padding: 1.1cqw 4.5cqw 0; font-size: 1.55cqw; font-weight: 600; white-space: nowrap; }
.demo-control { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8cqw; padding: .2cqw .25cqw; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.demo-control:hover, .demo-control[aria-expanded="true"] { background: #383838; }
.font-choice { gap: .45cqw; }.aa { font-size: 1.2cqw; font-weight: 400; }.chevron { font-size: 1.35cqw; font-weight: 400; }.bold-tool { font-size: 1.9cqw; font-weight: 800; }.italic-tool { font: italic 2cqw Georgia, serif; }
.highlight-tool svg { width: 2cqw; height: 2cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.color-tool { margin-left: -.9cqw; }.color-tool span { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ffcc47; }.toolbar-spacer { flex: 1; min-width: 1cqw; }
.daily-control span { margin-left: .55cqw; color: #979797; }
.window-page { height: calc(100% - 7.8cqw); overflow: auto; padding: 1.1cqw 4.55cqw 4.55cqw; }
.demo-editor { min-height: 100%; outline: none; color: #eee; font: 2.1cqw/1.5 Georgia, serif; overflow-wrap: anywhere; caret-color: #fff; }
.demo-editor:empty::before { content: attr(data-placeholder); color: #969696; font-weight: 600; pointer-events: none; }
.demo-editor p { margin: 0 0 1.2em; }.demo-editor span[style*="background"] { color: #111; }
.demo-popover { position: absolute; z-index: 5; top: 7cqw; padding: 10px; border: 1px solid #666; border-radius: 8px; background: #292929; color: #fff; box-shadow: 0 16px 35px #0008; font: 13px Arial, Helvetica, sans-serif; }
.font-popover { left: 4.5cqw; min-width: 180px; }.demo-popover button { cursor: pointer; }.font-popover button { display: block; width: 100%; padding: 9px; border: 0; background: transparent; color: #fff; text-align: left; }.font-popover button:hover { background: #464646; }
.color-popover { left: 22cqw; display: flex; gap: 8px; }.color-popover button { width: 26px; height: 26px; border: 1px solid #fff6; border-radius: 50%; background: #ffcc47; }.color-popover button[data-color="Sage"] { background: #7ad98a; }.color-popover button[data-color="Blush"] { background: #ff8fa3; }.color-popover button[data-color="Sky"] { background: #6db5ff; }.color-popover button[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 3px; }
.daily-popover { right: 4.5cqw; width: min(290px, 80%); }.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; }.daily-popover p { margin: 15px 0 0; color: #bbb; font-size: 11px; line-height: 1.4; }
.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 h2 { 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; }.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; cursor: pointer; }.dialog-actions button:last-child { background: #fff; color: #000; }.dialog-actions button:hover { border-color: #fff; }
.files-list { max-height: 300px; 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; 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; }
.site-footer { border-top: 1px solid #e5e5e5; padding: 25px clamp(20px, 3.4vw, 90px); }
.footer-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -.06em; }
.footer-brand img { display: block; width: 26px; height: 26px; object-fit: cover; mix-blend-mode: multiply; }
.site-footer p { margin: 0; color: #777; font-size: 14px; }
.site-footer p a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .hero { display: flex; flex-direction: column; height: auto; }.hero-copy { min-height: 320px; padding: 34px 20px; gap: 20px; }.hero h1 { font-size: clamp(64px, 12vw, 95px); }.hero-art { height: 380px; }.time-mark { top: 14%; right: 11%; }.time-mark span { font-size: clamp(95px, 23vw, 150px); }.paper { width: 60%; max-width: 270px; height: 70%; left: 13%; padding: 20px; }.paper-writing { font-size: clamp(23px, 5vw, 33px); margin-top: 35px; }.experience { padding: 48px 20px 58px; }.experience-heading { margin-bottom: 28px; }.experience-heading h2 { font-size: clamp(52px, 10vw, 78px); }.app-preview { height: 440px; aspect-ratio: auto; border-radius: 12px; }.traffic-lights { top: 13px; left: 14px; gap: 7px; }.traffic-lights span { width: 12px; height: 12px; }.window-toolbar { height: 78px; gap: clamp(5px, 1.7vw, 12px); padding: 17px 15px 0; font-size: clamp(11px, 2.5vw, 15px); }.demo-control { min-height: 30px; padding: 2px; }.font-choice { gap: 3px; }.aa, .chevron { font-size: 11px; }.bold-tool, .italic-tool { font-size: 18px; }.highlight-tool svg { width: 18px; height: 18px; }.color-tool { margin-left: -5px; }.color-tool span { width: 11px; height: 11px; }.window-page { height: calc(100% - 78px); padding: 18px 24px 30px; }.demo-editor { font-size: 23px; }.demo-popover { top: 75px; }.font-popover { left: 15px; }.color-popover { left: 130px; }.daily-popover { right: 15px; } }
@media (max-width: 480px) { .hero-copy { min-height: 300px; }.hero-art { height: 340px; }.paper { width: 68%; height: 68%; left: 10%; }.paper-writing { font-size: 23px; margin-top: 32px; }.time-mark { top: 19%; right: 4%; }.time-mark span { font-size: 95px; }.experience { padding-top: 44px; }.experience-heading h2 { font-size: 11vw; }.app-preview { height: 400px; } }
@media (max-width: 480px) { .window-toolbar { gap: 5px; font-size: 11px; }.window-toolbar #font-label { display: none; }.daily-control span { margin-left: 2px; }.window-page { padding: 18px 22px; }.demo-editor { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0s !important; } }