/* Original product artwork, derived from Evernote's official editor references. */
.ui-icon { width:18px; height:18px; flex-shrink:0; vertical-align:middle; }
/* Original Apple PNG hardware; screen apertures measured from the supplied assets. */
.sync-demo { max-width:1180px; margin-top:28px; }
.h-scene { container-type:inline-size; aspect-ratio:1180/455; height:auto; overflow:visible; }
.h-device { position:absolute; container-type:inline-size; color:#252525; font-family:Inter,Arial,sans-serif; }
.h-laptop { width:49.322%; aspect-ratio:3400/2240; left:0; bottom:0; top:auto; z-index:1; }
.h-tablet { width:38.305%; aspect-ratio:2620/1900; left:49.83%; bottom:2.3%; z-index:1; }
.h-phone { width:11.356%; aspect-ratio:1350/2760; right:0; bottom:2.3%; z-index:1; }
.device-frame { position:relative; display:block; width:100%; height:auto; z-index:2; pointer-events:none; user-select:none; }
.h-screen { position:absolute; z-index:1; display:flex; flex-direction:column; background:#fff; overflow:hidden; border:0; border-radius:0; }
.h-laptop .h-screen { left:12.35294%; top:12.85714%; width:75.29412%; height:74.28571%; border:0; border-radius:0; }
.h-tablet .h-screen { left:4.96183%; top:6.84211%; width:90.07634%; height:86.31579%; border:0; border-radius:1.1cqw; }
.h-phone .h-screen { left:5.33333%; top:2.5%; width:89.33333%; height:95%; border:0; border-radius:12cqw; }
.h-tabs { display:flex; align-items:center; gap:1.5cqw; height:5.5cqw; min-height:5.5cqw; padding:0 1.7cqw; background:#f5f4f3; color:#747471; font-size:1.8cqw; }
.h-tabs .ui-icon { width:2.2cqw; height:2.2cqw; }
.h-window-dots { display:flex; gap:.65cqw; margin-right:.6cqw; }.h-window-dots i { width:1.05cqw; height:1.05cqw; border-radius:50%; background:#ff6058; }.h-window-dots i:nth-child(2){background:#febc2e}.h-window-dots i:nth-child(3){background:#29c840}
.h-tab-active { border-radius:4cqw; background:white; padding:.8cqw 2cqw; color:#484846; min-width:23cqw; }.h-tab-next { margin-left:1cqw; color:#8b8b86; }
.h-app { display:flex; flex:1; min-height:0; background:#f6f5f4; }
.h-rail { width:8.8cqw; display:flex; flex-direction:column; align-items:center; flex-shrink:0; gap:1.5cqw; padding-top:3cqw; color:#6f706c; }
.h-rail>span { width:4.5cqw; height:4.5cqw; display:grid; place-items:center; border-radius:50%; }.h-rail .ui-icon { width:2.65cqw; height:2.65cqw; }.h-rail .rail-search { background:#eae9e7; }.h-rail .rail-new { background:#00aa2a; color:#fff; margin-top:.6cqw; }
.h-editor { flex:1; min-width:0; background:#fff; border-radius:1.3cqw 0 0 0; margin-top:.5cqw; border:1px solid #e6e5e3; border-right:0; border-bottom:0; }
.h-breadcrumb { display:flex; gap:1.4cqw; align-items:center; color:#797975; font-size:1.6cqw; height:6cqw; padding:0 3cqw; white-space:nowrap; }
.h-breadcrumb .ui-icon { width:2.2cqw; height:2.2cqw; }.h-breadcrumb .ui-icon:nth-child(3){width:1.7cqw}.h-breadcrumb .ui-icon:last-child { margin-left:auto; }
.h-note { padding:1.8cqw 5cqw 2.5cqw; text-align:left; }
.h-notebook { display:flex; align-items:center; gap:.8cqw; font-size:1.75cqw; color:#83837e; margin-bottom:1.3cqw; }.h-notebook .ui-icon { width:1.9cqw; height:1.9cqw; }.h-tag { margin-left:auto; font-size:1.5cqw; background:#f1f1ef; padding:.2cqw .9cqw; border-radius:.3cqw; }
.h-note h3 { font-size:4.5cqw; line-height:1.2; font-weight:600; letter-spacing:-.025em; margin:0 0 1.8cqw; }
.h-note-intro { font-size:1.9cqw; color:#595955; margin-bottom:1.2cqw; }
.h-callout { display:flex; align-items:center; gap:1.9cqw; max-width:62cqw; background:#f5f1e9; padding:1.6cqw 2cqw; border-radius:.55cqw; margin-bottom:2.4cqw; }
.h-callout-marker { width:.6cqw; align-self:stretch; background:#c4b294; border-radius:2px; }.h-callout p { font-size:2.05cqw; line-height:1.5; color:#44443f; }
.h-note h4 { font-size:1.9cqw; font-weight:600; margin-bottom:.8cqw; }
.h-note .note-agenda { font-size:2.15cqw; margin:0; padding:.6cqw .8cqw; gap:1.7cqw; max-width:62cqw; background:#fff; border-radius:.45cqw; }
.h-note .time-value { font-size:inherit; min-width:6cqw; font-weight:500; }
.h-detail { display:flex; gap:1cqw; margin:.8cqw 0 1.7cqw; color:#777772; font-size:1.75cqw; }.h-detail>span+span:before { content:'·'; margin-right:1cqw; }
.h-note .hero-note-task { margin:0; gap:1.2cqw; font-size:1.95cqw; line-height:1.5; min-height:3.4cqw; }
.h-note .hero-check { width:2.4cqw; height:2.4cqw; border-width:.18cqw; font-size:1.6cqw; }
.h-file { display:flex; gap:1cqw; align-items:center; border:1px solid #e9e8e5; width:37cqw; padding:1.1cqw 1.5cqw; border-radius:.6cqw; font-size:1.7cqw; color:#62625d; margin-top:2.2cqw; }
.h-file .ui-icon { width:2.1cqw; height:2.1cqw; }.h-file small { margin-left:auto; font-size:1.25cqw; color:#9b9b95; }
.h-footer { margin-top:auto; display:flex; justify-content:space-between; padding:.65cqw 2.5cqw; color:#8c8c86; font-size:1.35cqw; min-height:3.2cqw; background:#fff; }
.h-status { display:flex; justify-content:space-between; padding:1.8cqw 3cqw .9cqw; font-size:1.7cqw; color:#262626; line-height:1.3; }
.h-signal { display:flex; gap:.7cqw; align-items:center; }.h-signal .ui-icon { width:2cqw; height:2cqw; }.h-signal i { width:3.5cqw; height:1.7cqw; border:1px solid #454545; border-radius:.4cqw; background:linear-gradient(90deg,#454545 80%,#fff 80%); }
.h-mobile-tools { display:flex; gap:2cqw; align-items:center; padding:1cqw 3cqw 1.8cqw; color:#797975; }.h-mobile-tools .ui-icon { width:2.8cqw; height:2.8cqw; }.h-mobile-tools .ui-icon:first-child { color:#7b67e6; }.h-mobile-tools .ui-icon:nth-child(3) { opacity:.35; }.h-mobile-tools>span { flex:1; }
.h-tablet .h-rail { width:9cqw; gap:1.4cqw; padding-top:.8cqw; }
.h-tablet .h-editor { margin:0; border-radius:0; border:0; }.h-tablet .h-note { padding:1cqw 4cqw; }.h-tablet .h-note h3 { font-size:4.65cqw; }.h-tablet .h-notebook { font-size:2cqw; margin-bottom:1.5cqw; }.h-tablet .h-callout p { font-size:2.4cqw; }.h-tablet .h-note-intro { font-size:2.1cqw; }.h-tablet .h-note .note-agenda { font-size:2.45cqw; }.h-tablet .h-detail { font-size:2cqw; }.h-tablet .h-note .hero-note-task { font-size:2.35cqw; }.h-tablet .h-note .hero-check { width:2.8cqw; height:2.8cqw; }.h-tablet .h-file { font-size:2cqw; width:43cqw; }.h-tablet .h-footer { font-size:1.6cqw; padding:.8cqw 4cqw 1.3cqw; }
.h-phone .h-status { padding:5cqw 6cqw 3cqw; min-height:15cqw; font-size:4.5cqw; }.h-phone .h-signal { gap:1cqw; font-size:3.7cqw; }.h-phone .h-signal .ui-icon { width:4cqw; height:4cqw; }.h-phone .h-signal i { width:7cqw; height:3.5cqw; border-radius:1cqw; }
.h-phone .h-mobile-tools { gap:5cqw; padding:4cqw 5cqw 5cqw; }.h-phone .h-mobile-tools .ui-icon { width:7cqw; height:7cqw; }.h-phone .h-mobile-tools .ui-icon:nth-child(3) { display:none; }
.h-phone .h-note { padding:4cqw 7cqw; }.h-phone .h-notebook { font-size:4.4cqw; gap:2cqw; margin-bottom:4cqw; }.h-phone .h-notebook .ui-icon { width:4.6cqw; height:4.6cqw; }.h-phone .h-tag { display:none; }
.h-phone .h-note h3 { font-size:11.4cqw; margin-bottom:4cqw; }.h-phone .h-note-intro { font-size:5.1cqw; margin-bottom:3cqw; }
.h-phone .h-callout { max-width:none; padding:3cqw 3.5cqw; gap:3cqw; margin-bottom:5cqw; border-radius:1.2cqw; }.h-phone .h-callout p { font-size:5.3cqw; line-height:1.5; }.h-phone .h-callout-marker { width:1cqw; }
.h-phone .h-note h4 { font-size:5.2cqw; margin-bottom:2cqw; }.h-phone .h-note .note-agenda { display:block; font-size:5.6cqw; max-width:none; padding:1cqw; }.h-phone .time-value { display:block; font-size:6cqw; font-weight:500; }
.h-phone .h-detail { display:block; font-size:4.9cqw; margin:2cqw 0 4cqw; }.h-phone .h-detail>span { display:block; }.h-phone .h-detail>span+span:before { content:none; }
.h-phone .h-note .hero-note-task { font-size:5cqw; gap:2cqw; align-items:center; }.h-phone .h-note .hero-check { width:5.5cqw; height:5.5cqw; font-size:3.8cqw; }
.h-phone .h-file { display:none; }.h-phone .h-footer { font-size:3.2cqw; padding:2cqw 7cqw 8cqw; min-height:12cqw; }.h-phone .h-footer:after { content:''; position:absolute; height:2.2cqw; width:34cqw; bottom:2.8cqw; left:calc(50% - 17cqw); border-radius:2cqw; background:#292928; }
.h-device .is-editing { background:#e5eaf9!important; }
.h-device .hero-location.is-editing:after,.h-device .time-value.is-editing:after { color:#506dc9; }
.h-device .device-sync-state { transition:color .2s; }.h-device.is-saving .device-sync-state { color:#477152; }

/* A human moment and a readable, platform-informed note fragment. */
.chapter-offline { background:#f4eee5; }
.chapter-offline .offline-scene { height:490px; }
.chapter-offline .offline-photo { height:408px; width:81%; }
.chapter-offline .offline-document { top:172px; width:72%; padding:23px; border-radius:12px; box-shadow:0 22px 42px #42352214,0 3px 9px #4235220b; }
.document-crumb { display:flex; align-items:center; gap:7px; }.document-crumb .ui-icon { width:13px; height:13px; }.document-crumb .ui-icon:last-child { margin-left:auto; }
.chapter-offline .offline-document .document-crumb { margin-bottom:16px; font-size:11px; }
.chapter-offline .offline-document h3 { font-size:25px; font-weight:600; letter-spacing:-.025em; margin-bottom:17px; }
.offline-note-viewport { height:139px; overflow:hidden; position:relative; }
.offline-note-content { will-change:transform; }
.offline-extra { padding-top:20px; }.offline-extra h4 { font-size:13px; margin-bottom:7px; font-weight:600; }.offline-extra p { font-size:12px; color:#686861; line-height:1.6; }
.chapter-offline .offline-note-line { font-size:13px; }.chapter-offline .offline-address { font-size:13px; background:#faf9f6; padding:10px 12px; }.chapter-offline .offline-address span { font-size:12px; }
.chapter-offline .offline-ready { background:#edf8ed; color:#387743; display:inline-flex; padding:5px 9px; border-radius:5px; font-size:11px; min-height:29px; margin-top:15px; gap:6px; }
.chapter-offline .offline-ready>span:first-child { font-size:14px; }
.connection-control { border-radius:10px; box-shadow:0 10px 24px #41362012; }
#connection-toggle { background:#00a82d; }
.chapter-copy .chapter-try { padding:12px 20px; border-color:#b9b5ae; font-size:15px; min-height:45px; }

/* Search follows the app's neutral chrome; color highlights evidence in the source. */
.chapter-search { background:#f7edf4; }
.chapter-search .search-scene { height:500px; }
.chapter-search .search-window { width:96%; height:345px; padding:0 24px 24px; border-radius:12px; box-shadow:0 18px 35px #44313c12,0 2px 6px #44313c08; }
.search-chrome { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; font-size:12px; color:#62625f; }
.search-chrome>span:first-child { display:flex; gap:6px; align-items:center; }.search-chrome .ui-icon { width:15px; height:15px; }
.search-modes { display:flex; align-items:center; gap:2px; padding:3px; background:#f4f4f2; border-radius:6px; font-size:10px; }
.search-modes>span,.search-modes>strong { padding:4px 9px; font-weight:400; }.search-modes>strong { background:#fff; border-radius:4px; box-shadow:0 1px 3px #0000000e; color:#30302e; }
.chapter-search .search-input { background:#fafaf8; border:1px solid #e6e6e2; border-radius:6px; min-height:57px; font-size:14px; padding:11px 12px; gap:9px; }
.chapter-search .search-input>.ui-icon { width:17px; height:17px; color:#777771; }
.chapter-search .search-meta { min-height:19px; margin:15px 0 13px; font-size:10px; align-items:center; }
.search-processing { display:flex; gap:3px; align-items:center; opacity:0; }.search-processing i { width:4px; height:4px; border-radius:100%; background:#898981; }
.chapter-search .search-result h4 { font-size:27px; letter-spacing:-.025em; margin:0 0 10px; }
.chapter-search .search-result p { font-size:13px; line-height:1.6; max-width:350px; }
.chapter-search .source-note { display:inline-flex; align-items:center; gap:6px; background:#f5f5f2; color:#595954; font-size:10px; border-radius:4px; padding:6px 8px; margin-top:17px; max-width:100%; }
.source-note .ui-icon { width:12px; height:12px; }.source-note .ui-icon:last-child { width:10px; margin-left:5px; }
.search-note-preview { width:72%; height:196px; padding:21px 23px; border-radius:11px; box-shadow:0 18px 35px #44313c12,0 2px 6px #44313c08; }
.search-note-preview .document-crumb { font-size:10px; margin-bottom:12px; }.search-note-preview .document-crumb .ui-icon { width:12px; height:12px; }
.search-note-preview h4 { font-size:21px; font-weight:600; letter-spacing:-.025em; margin-bottom:10px; }.search-note-preview .study-topic { font-size:12px; margin-bottom:13px; }
.study-details { font-size:11px; line-height:1.75; }.study-details>div { margin-top:4px; }
.study-details mark { color:inherit; padding:2px 3px; margin:0 -3px; background:linear-gradient(#fff0a9,#fff0a9) left center/0% 100% no-repeat; border-radius:2px; }
@media(max-width:1100px) {
 .chapter-offline .offline-document { width:87%; padding:21px; }.chapter-offline .offline-photo { width:92%; }.chapter-offline .offline-document h3 { font-size:23px; }
 .chapter-search .search-window { width:100%; padding:0 19px 19px; height:360px; }.search-chrome>span:first-child { display:none; }.search-modes { margin-left:auto; }.chapter-search .search-input { font-size:12px; }.chapter-search .search-result p { font-size:12px; }.chapter-search .search-result h4 { font-size:25px; }.search-note-preview { width:85%; padding:20px; }
}
@media(max-width:820px) {
 .h-tablet { display:none; }.h-scene { aspect-ratio:740/415; }.h-laptop { width:82%; left:1%; top:0; }.h-phone { width:21.5%; right:0; bottom:0; }
 .feature-chapter { gap:26px; padding:29px; }.chapter-offline .offline-document { width:98%; top:190px; padding:18px; }.chapter-offline .offline-photo { width:100%; height:362px; }.chapter-offline .offline-document h3 { font-size:21px; }.chapter-offline .offline-document .document-crumb { font-size:10px; }.chapter-offline .offline-note-line { font-size:12px; }.chapter-offline .offline-address { font-size:12px; }.chapter-offline .offline-address span { font-size:11px; }
 .chapter-search .search-window { padding:0 17px 17px; }.chapter-search .search-result h4 { font-size:23px; }.chapter-search .source-note { font-size:9px; gap:4px; padding:5px; }.source-note .ui-icon:last-child { margin-left:0; }.search-note-preview { width:94%; padding:18px; }.search-note-preview .study-topic { font-size:11px; }.study-details { font-size:10px; }
}
@media(max-width:680px) {
 .sync-demo { margin-top:30px; }.h-scene { aspect-ratio:307/335; height:auto; }.h-laptop { width:95%; left:0; top:4%; }.h-phone { width:41%; right:0; bottom:3%; }
 .h-laptop .h-note { padding:2cqw 4cqw; }.h-laptop .h-note h3 { font-size:5.5cqw; }.h-laptop .h-note-intro { font-size:2.5cqw; }.h-laptop .h-callout p { font-size:2.6cqw; }.h-laptop .h-note h4 { font-size:2.4cqw; }.h-laptop .h-note .note-agenda { font-size:2.6cqw; }.h-laptop .h-detail { font-size:2.1cqw; }.h-laptop .h-note .hero-note-task { font-size:2.4cqw; }.h-laptop .h-file { display:none; }.h-laptop .h-footer { font-size:1.8cqw; }.h-laptop .h-breadcrumb { font-size:2cqw; }
 .chapter-offline .offline-scene { height:490px; }.chapter-offline .offline-photo { width:94%; height:355px; }.chapter-offline .offline-document { width:90%; top:179px; padding:20px; }.chapter-offline .offline-document h3 { font-size:23px; }.chapter-offline .offline-note-viewport { height:147px; }.chapter-offline .offline-ready { font-size:10px; }
 .chapter-search .search-scene { height:510px; }.chapter-search .search-window { height:360px; padding:0 19px 19px; }.search-chrome>span:first-child { display:flex; }.search-modes { font-size:9px; }.search-modes>span,.search-modes>strong { padding:4px 6px; }.chapter-search .search-input { font-size:13px; }.chapter-search .search-result p { font-size:12px; }.chapter-search .search-result h4 { font-size:26px; }.chapter-search .source-note { font-size:10px; }.search-note-preview { width:91%; height:195px; padding:21px; }.search-note-preview .study-topic { font-size:12px; }.study-details { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .offline-note-content { will-change:auto; } }



#connection-toggle[aria-checked="false"] { background:#92968e; }

@media(max-width:680px) {
 .h-laptop .h-notebook,.h-laptop .h-note-intro { display:none; }
 .h-laptop .h-breadcrumb { height:5cqw; }
 .h-laptop .h-callout { margin-bottom:1.8cqw; }
}



@media(max-width:680px) {
 .chapter-offline .offline-document { top:165px; }
 .chapter-offline .offline-document h3 { font-size:clamp(19px,6vw,23px); }
}
@media(max-width:360px) {
 .search-note-preview { height:215px; }
 .chapter-search .search-scene { height:530px; }
 .chapter-search .source-note { font-size:9px; }
 .search-chrome>span:first-child { display:none; }
}

/* Hardware stays stationary, complete and unobstructed. */
.h-laptop .h-tabs { height:4.4cqw; min-height:4.4cqw; font-size:1.4cqw; gap:1cqw; }
.h-laptop .h-rail { width:6.5cqw; gap:1cqw; padding-top:2cqw; }
.h-laptop .h-rail>span { width:3.4cqw; height:3.4cqw; }
.h-laptop .h-rail .ui-icon { width:2cqw; height:2cqw; }
.h-laptop .h-breadcrumb { height:4.5cqw; padding:0 2cqw; font-size:1.4cqw; }
.h-laptop .h-note { padding:1.2cqw 3cqw; }
.h-laptop .h-notebook { font-size:1.45cqw; margin-bottom:1cqw; }
.h-laptop .h-note h3 { font-size:3.6cqw; margin-bottom:1.3cqw; }
.h-laptop .h-note-intro { font-size:1.65cqw; margin-bottom:.8cqw; }
.h-laptop .h-callout { padding:1cqw 1.4cqw; margin-bottom:1.5cqw; }
.h-laptop .h-callout p { font-size:1.75cqw; }
.h-laptop .h-note h4 { font-size:1.7cqw; }
.h-laptop .h-note .note-agenda { font-size:1.9cqw; }
.h-laptop .h-detail { margin:.5cqw 0 1cqw; font-size:1.55cqw; }
.h-laptop .h-note .hero-note-task { font-size:1.7cqw; }
.h-laptop .h-file { display:none; }
@media(max-width:820px) {
 .h-scene { aspect-ratio:740/470; }
 .h-laptop { width:80%; left:0; top:auto; bottom:0; }
 .h-phone { width:20%; right:0; bottom:2.1%; }
 .h-tablet { display:none; }
}
@media(max-width:680px) {
 .h-scene { aspect-ratio:320/425; }
 .h-laptop { width:100%; left:0; top:0; bottom:auto; }
 .h-phone { width:32%; right:3%; bottom:1%; }
 .h-laptop .h-note h3 { font-size:4.3cqw; }
 .h-laptop .h-note .note-agenda { font-size:2.25cqw; }
 .h-laptop .h-detail { font-size:1.9cqw; }
 .h-laptop .h-note .hero-note-task { font-size:2cqw; }
}