/* Original Apple hardware. The simplified note view follows Evernote's
   website hero; mobile controls follow the official mobile editor reference. */
.sync-demo{max-width:1180px;margin-top:12px}
.h-scene{position:relative;aspect-ratio:1180/540;height:auto;container-type:inline-size;overflow:visible}
.h-device{position:absolute;container-type:inline-size;color:#252525;font-family:Inter,Arial,sans-serif}
.h-laptop{width:78%;left:9%;bottom:auto;top:-4cqw;aspect-ratio:3400/2240;z-index:1}
.h-tablet{width:29%;left:auto;right:3%;bottom:0;aspect-ratio:1900/2620;z-index:2}
.h-phone{width:16%;left:3%;right:auto;bottom:0;aspect-ratio:1350/2760;z-index:3}
.device-frame{display:block;position:relative;z-index:2;width:100%;height:auto;pointer-events:none;user-select:none}
.h-screen{container-type:inline-size;position:absolute;z-index:1;display:flex;flex-direction:column;background:#fff;overflow:hidden;border: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:6.84211%;top:4.96183%;width:86.31579%;height:90.07634%;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}
/* One unobtrusive bar, with the note as the dominant surface. */
.en-topbar{display:flex;align-items:center;gap:1.4cqw;flex-shrink:0;min-height:5.5cqw;padding:1.05cqw 1.6cqw;background:#fff;color:#727270;font-size:1.35cqw;line-height:1.4;white-space:nowrap}
.en-topbar .ui-icon{width:1.65cqw;height:1.65cqw}
.en-window-tools{display:flex;gap:.8cqw;padding-right:1cqw;border-right:1px solid #ededeb;color:#92928e}
.en-breadcrumb{display:flex;align-items:center;gap:.55cqw;flex:1;min-width:0}
.en-breadcrumb .ui-icon:nth-of-type(2){width:1.2cqw}
.en-share{display:flex;align-items:center;gap:.8cqw;background:#655cf6;border-radius:.4cqw;color:#fff;padding:.6cqw 1.5cqw;font-size:1.3cqw}
.en-share .ui-icon{width:1.6cqw;height:1.6cqw}
.h-note-scroll{flex:1;min-height:0;overflow:hidden;position:relative}
.h-note-body{width:74%;margin:0 auto;padding:4cqw 0 3cqw;text-align:left}
.en-progress{display:flex;width:fit-content;align-items:center;gap:.55cqw;background:#f5eafd;border-radius:.5cqw;padding:.1cqw .65cqw;color:#755297;font-size:1.5cqw;line-height:1.5;margin-bottom:1.3cqw}
.en-progress>span:first-child{color:#a15bd7}
.h-note-body h3{font-family:Inter,Arial,sans-serif;font-weight:600;font-size:4.6cqw;letter-spacing:-.03em;line-height:1.18;margin:0 0 1.2cqw}
.en-intro{font-size:2.05cqw;line-height:1.5;margin:0 0 2.2cqw;color:#454540}
.en-intro mark{background:#e7f1dc;color:inherit;padding:.1cqw .4cqw}
/* Content expands in the note, never outside the device. */
.en-visual{height:auto;overflow:hidden;margin:0}
.en-visual-content{padding-bottom:2.1cqw}
.en-visual img{display:block;width:100%;height:18cqw;object-fit:cover;object-position:50% 55%;border-radius:.25cqw;transform-origin:50% 50%}
.en-visual-content>span{display:block;font-size:1.65cqw;line-height:1.5;margin-top:.75cqw;color:#81817c}
.en-continuation{font-size:2.25cqw;line-height:1.5;min-height:1.5em;margin:0 0 1.2cqw;color:#363631}
.en-typed-line{box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:.15em}
.en-typed-line.is-editing:after,.en-task-label.is-editing:after{content:'';display:inline-block;height:1em;border-right:1.5px solid #6e62d6;vertical-align:-.12em;margin-left:1px}
.h-device .hero-note-task{display:flex;align-items:center;gap:1.1cqw;min-height:4.3cqw;padding:.5cqw .25cqw;font-size:2.15cqw;line-height:1.4;margin:0;background:transparent;border-radius:.4cqw}
.h-device .hero-check{display:grid;place-items:center;position:relative;width:2.45cqw;height:2.45cqw;min-width:2.45cqw;border:.18cqw solid #a258db;border-radius:50%;color:transparent;background:#fff}
.hero-check svg{width:100%;height:100%;overflow:visible}
.h-device .hero-note-task.is-done .hero-check{background:#a258db;color:#fff}
.h-device .hero-note-task.is-done>span:nth-child(2){color:#85857e;text-decoration:line-through;text-decoration-thickness:.07em}
.en-tap-cue{display:none}
.h-device .is-editing{background:transparent!important}
.hero-tap-cue{position:absolute;z-index:5;left:0;top:0;width:clamp(17px,4cqw,26px);height:clamp(17px,4cqw,26px);border-radius:50%;background:rgba(0,168,45,.2);border:1px solid rgba(0,168,45,.5);opacity:0;pointer-events:none;transform-origin:center}
.hero-tap-cue:after{content:'';position:absolute;width:5px;height:5px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#00a82d}
.still-view .hero-tap-cue{display:none}
@media(prefers-reduced-motion:reduce){.hero-tap-cue{display:none}}
/* Native mobile structure: status, navigation, notebook, note. */
.en-status{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;line-height:1.2;color:#202020}
.en-status b{font-weight:600}.en-status>span{display:flex;align-items:center;gap:.8cqw}
.en-status .ui-icon{width:2.7cqw;height:2.7cqw}
.en-battery{display:block;width:4.6cqw;height:2.1cqw;border:1px solid #a4a4a4;border-radius:.55cqw;position:relative;padding:.22cqw;background:#fff}
.en-battery:before{content:'';display:block;width:100%;height:100%;border-radius:.15cqw;background:#262626}
.en-battery:after{content:'';position:absolute;right:-.6cqw;top:25%;height:50%;width:.3cqw;background:#a4a4a4;border-radius:1px}
.en-mobile-tools{display:flex;flex-shrink:0;align-items:center;color:#747473}
.en-mobile-tools>.ui-icon:first-child{color:#7561cb}
.en-tools-space{flex:1}.en-redo{color:#d1d1ce;display:flex}
.en-phone-notebook{display:flex;align-items:center;color:#85857e;flex-shrink:0}
.h-tablet .en-status{font-size:2.6cqw;padding:2.4cqw 4cqw 1cqw}
.h-tablet .en-mobile-tools{padding:2.4cqw 4cqw 3cqw;gap:3.4cqw}
.h-tablet .en-mobile-tools .ui-icon{width:4.5cqw;height:4.5cqw}
.h-tablet .en-phone-notebook{gap:1.4cqw;padding:2.8cqw 8cqw 0;font-size:2.9cqw}
.h-tablet .en-phone-notebook .ui-icon{width:3.2cqw;height:3.2cqw}
.h-tablet .h-note-body{width:84%;padding:4cqw 0 5cqw}
.h-tablet .en-progress{font-size:2.6cqw;margin-bottom:2cqw}
.h-tablet .h-note-body h3{font-size:7.6cqw;margin-bottom:2.8cqw}
.h-tablet .en-intro{font-size:3.5cqw;line-height:1.5;margin-bottom:4cqw}
.h-tablet .en-visual img{height:42cqw}
.h-tablet .en-visual-content{padding-bottom:4cqw}
.h-tablet .en-visual-content>span{font-size:2.5cqw;margin-top:1.5cqw}
.h-tablet .en-continuation{font-size:3.7cqw;min-height:1.5em;margin-bottom:2.5cqw}
.h-tablet .hero-note-task{font-size:3.7cqw;min-height:7cqw;gap:1.7cqw}
.h-tablet .hero-check{width:4.2cqw;height:4.2cqw;min-width:4.2cqw;border-width:.26cqw}
.h-phone .en-status{padding:5.6cqw 7cqw 4.6cqw;font-size:5cqw;min-height:18cqw}
.h-phone .en-status .ui-icon{width:5cqw;height:5cqw}.h-phone .en-status>span{gap:1.3cqw}
.h-phone .en-battery{width:7cqw;height:3.6cqw;border-radius:.8cqw;padding:.4cqw}
.h-phone .en-mobile-tools{padding:4cqw 5.5cqw;gap:5cqw}
.h-phone .en-mobile-tools .ui-icon{width:7cqw;height:7cqw}
.h-phone .en-phone-notebook{gap:1.7cqw;padding:5cqw 7.5cqw 1cqw;font-size:4.5cqw}
.h-phone .en-phone-notebook .ui-icon{width:4.8cqw;height:4.8cqw}
.h-phone .h-note-body{width:85%;padding:4cqw 0 9cqw}
.h-phone .en-progress{font-size:3.9cqw;gap:1cqw;border-radius:1.2cqw;padding:.3cqw 1.6cqw;margin-bottom:3cqw}
.h-phone .h-note-body h3{font-size:10.6cqw;line-height:1.2;margin-bottom:3.4cqw;letter-spacing:-.04em}
.h-phone .en-intro{font-size:5cqw;line-height:1.5;margin-bottom:5cqw}
.h-phone .en-visual img{height:48cqw;border-radius:.4cqw}
.h-phone .en-visual-content{padding-bottom:5cqw}
.h-phone .en-visual-content>span{font-size:3.6cqw;margin-top:2cqw;line-height:1.5}
.h-phone .en-continuation{font-size:5cqw;line-height:1.55;min-height:1.55em;margin-bottom:3cqw}
.h-phone .hero-note-task{font-size:5cqw;min-height:10cqw;gap:2.5cqw;padding:1.4cqw .25cqw}
.h-phone .hero-check{width:6cqw;height:6cqw;min-width:6cqw;border-width:.45cqw}
.en-home-indicator{height:8cqw;flex-shrink:0;position:relative}
.en-home-indicator:after{content:'';position:absolute;bottom:2.5cqw;left:33%;width:34%;height:1.5cqw;border-radius:2cqw;background:#333}
.sync-message{margin-top:18px;min-height:42px}
/* Retained feature-section surfaces and actions. */
:root{--ui-elevation:7px 8px 0 rgba(61,54,38,.065),0 2px 6px rgba(61,54,38,.045)}
.chapter-offline,.chapter-search{background:#f4eee5}
.chapter-offline .offline-document,.chapter-search .search-window,.chapter-search .search-note-preview{box-shadow:var(--ui-elevation)}
.connection-control{box-shadow:5px 6px 0 rgba(61,54,38,.065),0 1px 5px rgba(61,54,38,.04)}
.chapter-copy .chapter-try{border-color:#141414;min-height:48px;padding:14px 24px;border-radius:5px}
@media(max-width:820px){
 .h-scene{aspect-ratio:740/475}.h-laptop{width:98%;left:0;top:0;bottom:auto}.h-tablet{display:none}.h-phone{width:21%;left:auto;right:4%;bottom:0}
}
@media(max-width:680px){
 .sync-demo{margin-top:20px}.h-scene{aspect-ratio:320/310}.h-laptop{width:105%;left:-2.5%;top:0;bottom:auto}.h-phone{width:29%;left:auto;right:0;bottom:0}
 .sync-message{margin-top:16px;font-size:14px;line-height:1.45;gap:6px}.sync-message img{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){.h-note-body{will-change:auto}}

/* Editing stays inside the actual note: selection, highlights and task creation. */
.en-focus-phrase{color:inherit;background:linear-gradient(#fff0ad,#fff0ad) left center/100% 100% no-repeat;padding:.08em .12em;margin:0 -.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.en-new-task{height:auto;overflow:hidden}
.en-new-task-content{padding-top:.2cqw}
.en-new-task-label{min-height:1.4em}
.en-continuation{min-height:1.5em}
.h-phone .en-continuation{min-height:3.1em}

/* A working note with two visual references and a growing, native task list. */
.h-note-body{width:78%;padding-top:2.6cqw}
.h-note-body h3{margin-bottom:1cqw}
.en-intro{margin-bottom:1.65cqw}
.en-media-pair{display:flex;width:100%;align-items:stretch;overflow:hidden}
.en-photo-primary{flex:1;min-width:0;overflow:hidden}
.en-photo-added{width:48%;margin-left:2%;flex-shrink:0;overflow:hidden}
.en-visual img{height:17cqw}
.en-photo-added img{object-position:50% 67%}
.en-visual-content{padding-bottom:1.3cqw}
.en-visual-content>span{font-size:1.5cqw;margin-top:.6cqw}
.en-note-heading{font-family:Inter,Arial,sans-serif;font-weight:600;font-size:2.05cqw;line-height:1.35;letter-spacing:-.015em;margin:0 0 .5cqw}
.en-continuation{font-size:2.05cqw;line-height:1.4;min-height:2.8em;margin:0 0 1.3cqw}
.en-checklist-heading{display:flex;align-items:center;gap:1.3cqw;margin-bottom:.35cqw}
.en-checklist-heading .en-note-heading{margin:0}
.en-checklist-heading .en-progress{margin:0;font-size:1.35cqw}
.h-device .hero-note-task{font-size:1.95cqw;min-height:3.6cqw;padding:.35cqw .2cqw}
.en-task-reveal{height:auto;overflow:hidden}
.en-task-reveal-content{padding-top:0}
.en-task-label{min-height:1.4em}
.h-tablet .h-note-body{padding-top:3cqw}
.h-tablet .h-note-body h3{margin-bottom:2cqw}
.h-tablet .en-intro{font-size:3.3cqw;margin-bottom:2.6cqw}
.h-tablet .en-visual img{height:29cqw}
.h-tablet .en-visual-content{padding-bottom:2.8cqw}
.h-tablet .en-visual-content>span{font-size:2.5cqw;margin-top:1cqw}
.h-tablet .en-note-heading{font-size:3.5cqw;margin-bottom:1cqw}
.h-tablet .en-continuation{font-size:3.4cqw;line-height:1.45;min-height:2.9em;margin-bottom:2.6cqw}
.h-tablet .en-checklist-heading{gap:2cqw;margin-bottom:1cqw}
.h-tablet .en-checklist-heading .en-progress{font-size:2.5cqw}
.h-tablet .hero-note-task{font-size:3.3cqw;min-height:6.2cqw;gap:1.7cqw}
.h-tablet .hero-check{width:3.9cqw;height:3.9cqw;min-width:3.9cqw}
.h-phone .h-note-body{padding-top:3.3cqw}
.h-phone .h-note-body h3{font-size:10.2cqw;margin-bottom:2.8cqw}
.h-phone .en-intro{font-size:4.7cqw;margin-bottom:3.5cqw;white-space:nowrap}
.h-phone .en-visual img{height:36cqw}
.h-phone .en-visual-content{padding-bottom:3.8cqw}
.h-phone .en-visual-content>span{font-size:3.4cqw;margin-top:1.5cqw}
.h-phone .en-note-heading{font-size:4.8cqw;margin-bottom:1cqw}
.h-phone .en-continuation{font-size:4.7cqw;line-height:1.45;min-height:4.35em;margin-bottom:3.7cqw}
.h-phone .en-checklist-heading{gap:2cqw;margin-bottom:1.3cqw}
.h-phone .en-checklist-heading .en-progress{font-size:3.7cqw;padding:.25cqw 1cqw}
.h-phone .hero-note-task{font-size:4.7cqw;min-height:8.5cqw;gap:2cqw;padding:1cqw .2cqw}
.h-phone .hero-check{width:5.5cqw;height:5.5cqw;min-width:5.5cqw}
/* Fit the complete desktop note while retaining the original hardware proportions. */
.h-laptop .h-note-body{padding-top:1.6cqw}
.h-laptop .h-note-body h3{font-size:4.35cqw;line-height:1.15;margin-bottom:.8cqw}
.h-laptop .en-intro{font-size:1.9cqw;margin-bottom:1.2cqw}
.h-laptop .en-visual img{height:16cqw}
.h-laptop .en-continuation{font-size:2cqw;line-height:1.35;min-height:2.7em;margin-bottom:.8cqw}
.h-laptop .hero-note-task{min-height:3.3cqw;padding:.25cqw .2cqw}

/* Emphasize the actual upgrade within the established typography. */
.hero-intro>p strong{font-weight:600;color:var(--ink)}
.sync-message{font-size:16px;color:#555550}
.sync-message strong{font-weight:600;color:var(--ink)}
.en-photo-added{position:relative}
.en-photo-added img{position:relative;z-index:-1}
.en-photo-added{isolation:isolate}

/* A phone-sized poster of the same note: one image pair and one useful task.
   This is art-directed content inside the original hardware, not a camera zoom. */
@media(max-width:680px){
 .h-scene{aspect-ratio:320/335}
 .h-laptop{width:112%;left:-6%;top:-3cqw}
 .h-phone{width:36%;right:-1%;bottom:0}
 .h-device .en-intro,.h-device .en-visual-content>span,
 .h-device .en-note-heading,.h-device .en-continuation,
 .h-device .en-checklist-heading,.h-device .en-task-reveal,
 .h-device .hero-note-task:not([data-hero-task="references"]){display:none}
 .h-laptop .h-note-body{width:84%;padding:2.3cqw 0 3cqw}
 .h-laptop .h-note-body h3{font-size:6.2cqw;margin-bottom:2.2cqw}
 .h-laptop .en-visual img{height:26cqw}
 .h-laptop .en-visual-content{padding-bottom:2.8cqw}
 .h-laptop .hero-note-task{font-size:max(12px,5.1cqw);min-height:8cqw;gap:2.2cqw;line-height:1.3;padding:1cqw .4cqw}
 .h-laptop .hero-check{width:5.8cqw;height:5.8cqw;min-width:5.8cqw;border-width:.36cqw}
 .h-phone .h-note-body{width:85%;padding:3cqw 0 5cqw}
 .h-phone .h-note-body h3{font-size:12.5cqw;line-height:1.16;margin-bottom:5cqw}
 .h-phone .en-visual img{height:65cqw}
 .h-phone .en-visual-content{padding-bottom:6cqw}
 .h-phone .hero-note-task{font-size:max(9px,9.2cqw);min-height:25cqw;gap:3cqw;line-height:1.35;padding:1.5cqw .3cqw;align-items:flex-start}
 .h-phone .hero-check{width:max(9px,9.8cqw);height:max(9px,9.8cqw);min-width:max(9px,9.8cqw);border-width:.65cqw;margin-top:1cqw}
 .sync-message{font-size:14px;line-height:1.55;padding-right:33px;margin-top:20px;gap:9px;align-items:center}
 .sync-message>span>span,.sync-message strong{display:block}
}