/* Notch's long-form product chapters. Local to the Notch website. */
.story-section{padding:110px 0;border-top:1px solid var(--line);scroll-margin-top:94px}
.story-heading{display:grid;grid-template-columns:1fr 1fr;gap:18px 90px;margin-bottom:54px;align-items:end}
.story-heading>.eyebrow{grid-column:1/-1}.story-heading h2,.privacy-lead h2{font:600 clamp(36px,4vw,54px)/1.1 var(--sans);letter-spacing:-.055em}.story-heading>p:last-child{font-size:17px;line-height:1.8;color:var(--muted);max-width:470px}
.keyboard-story{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:stretch}
.shortcut-steps{display:flex;flex-direction:column;justify-content:center}.shortcut-step{display:flex;align-items:center;text-align:left;gap:16px;padding:26px 20px;border:1px solid transparent;border-bottom-color:var(--line);background:transparent;border-radius:14px;color:var(--ink)}.shortcut-step[aria-pressed=true]{background:#e9f0ea;border-color:#cbdcd1}.step-index{font-size:11px;color:#74857c;align-self:flex-start;padding-top:4px}.shortcut-step>span:nth-child(2){flex:1}.shortcut-step strong{font-size:16px;font-weight:600;display:block}.shortcut-step small{font-size:13px;color:var(--muted);display:block;line-height:1.6;margin-top:6px}.key-combo{display:flex;gap:4px}kbd{font-family:inherit}.key-combo kbd{font-size:12px;min-width:25px;height:28px;display:grid;place-items:center;border:1px solid #d2dcd5;border-radius:5px;background:#fafcfb;box-shadow:0 2px 0 #dbe2dc}
.keyboard-visual{min-height:470px;padding:29px 32px;background:#e9ede8;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}.story-sample{display:block;font-size:9px;letter-spacing:.12em;color:#667b6d;line-height:1.5}.shortcut-island{position:relative;background:#151b18;color:#f2f6f1;width:min(370px,100%);height:187px;padding:40px 22px 20px;border-radius:23px;box-shadow:0 18px 27px -19px #12271a90}.island-camera{position:absolute;top:0;left:50%;transform:translateX(-50%);width:92px;height:20px;border-radius:0 0 10px 10px;background:#080b09}.island-camera:after{content:'';position:absolute;right:16px;top:8px;width:4px;height:4px;border-radius:50%;background:#283a30}.island-search{display:flex;align-items:center;gap:9px;border-bottom:1px solid #ffffff1c;color:#b6c5b9;font-size:11px;padding-bottom:12px}.island-search svg{width:14px}.shortcut-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:17px}.shortcut-tool-grid>span{display:flex;align-items:center;flex-direction:column;gap:8px;font-size:9px;color:#cbd6cd}.shortcut-tool-grid i{padding:7px;border-radius:8px;background:#ffffff0a}.shortcut-tool-grid svg{width:18px;height:18px;color:#a9cbb5}.island-label{display:flex;justify-content:space-between;font-size:13px;font-weight:500}.island-label>span{font-size:9px;color:#98aa9f}.shortcut-files{display:flex;justify-content:space-around;margin-top:20px}.shortcut-files>span{font-size:10px;display:grid;justify-items:center;gap:9px}.shortcut-files svg{width:31px;height:31px;color:#acc7b5}.shortcut-music{display:flex;align-items:center;gap:16px;margin-top:20px}.record-art{flex:none;width:65px;height:65px;background:repeating-radial-gradient(circle,#17392d 0 3px,#87aa91 4px 5px,#1c332b 6px 9px);border:6px solid #344b3b;border-radius:50%}.shortcut-music>div{flex:1}.shortcut-music strong{display:block;font-size:11px}.shortcut-music small{display:block;font-size:9px;color:#a9b7ac;margin-top:5px}.music-line{display:block;height:3px;background:linear-gradient(90deg,#b4d8bf 35%,#ffffff20 35%);margin-top:16px;border-radius:3px}.shortcut-timer{font-size:43px;text-align:center;line-height:1.1;margin-top:15px;font-variant-numeric:tabular-nums;letter-spacing:-.05em}.shortcut-timer>span{color:#87aa91}.shortcut-timer small{display:block;font-size:10px;color:#a8b9ac;letter-spacing:0;margin-top:6px}.oversized-keys{display:flex;gap:12px;transform:rotate(-5deg);margin:26px 0 14px}.oversized-keys>span{min-width:75px;height:73px;padding:0 16px;display:grid;place-items:center;background:linear-gradient(#fff,#e5ebe4);border:1px solid #c1cec3;border-radius:12px;box-shadow:0 5px 0 #bdc8bf,0 12px 12px #374a3820;font-size:30px;font-weight:500;white-space:nowrap}.keyboard-visual>p{font-size:12px;color:#566a5b}.story-footnotes{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:37px;font-size:14px;line-height:1.8;color:var(--muted)}.story-footnotes strong{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.custom-playground{display:grid;grid-template-columns:1.45fr 1fr;border:1px solid #d2ddd6;border-radius:26px;overflow:hidden;background:#f0f4f0}.custom-desktop{position:relative;min-height:550px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 12% 100%,#c9dec2,transparent 65%),linear-gradient(150deg,#7b9886,#b1c3ac 45%,#516d5e);padding:0 25px}.custom-desktop:after{content:'';position:absolute;z-index:-1;width:650px;height:600px;border:1px solid #ffffff26;left:-300px;top:100px;border-radius:45%;transform:rotate(-25deg);box-shadow:0 0 0 35px #ffffff0d,0 0 0 85px #ffffff0a,0 0 0 150px #ffffff08}.custom-menu{display:flex;justify-content:space-between;color:#f7fbf5;font-size:8px;padding:12px 0}.custom-island{position:relative;margin:-30px auto 0;width:70%;max-width:330px;min-width:210px;background:#131a16;color:#e8f0e9;border-radius:0 0 23px 23px;padding:30px 19px 20px;box-shadow:0 14px 35px #152d2940;transition:width .3s, max-width .3s,padding .3s;z-index:2}.custom-desktop[data-size=spacious] .custom-island{width:96%;max-width:430px;padding-bottom:35px}.custom-idle{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#c2d7c7}.custom-idle>span{display:flex;align-items:center;gap:6px}.battery-drawing{display:inline-block;width:17px;height:9px;border:1px solid #a7c4b0;border-radius:2px;box-shadow:inset -3px 0 #17251c;background:#9cc6a8}.custom-idle-dot{width:5px;height:5px;border-radius:50%;background:#94c7a2}.custom-island-content{padding-top:28px}.custom-island-content>strong{font-size:17px;line-height:1.5;font-weight:500}.custom-modules{display:flex;flex-wrap:wrap;gap:7px;margin-top:23px}.custom-modules>span{font-size:10px;display:flex;gap:5px;align-items:center;background:#ffffff0d;border-radius:7px;padding:7px}.custom-modules svg{width:13px;height:13px;color:#acd3b9}.custom-empty{font-size:11px;color:#b8cabb;display:block;line-height:1.6}.desktop-document{position:absolute;z-index:0;left:16%;bottom:63px;width:66%;height:248px;background:#f4f5eadb;box-shadow:0 17px 40px #213e362b;border:1px solid #ffffff50;border-radius:12px;transform:rotate(-5deg);padding:34px;color:#506554}.desktop-document>span{font-size:8px;letter-spacing:.13em}.desktop-document>b{font-size:31px;line-height:1.1;display:block;margin:16px 0 23px;letter-spacing:-.05em;font-weight:500}.desktop-document>i{display:block;width:85%;height:3px;border-radius:3px;background:#899b7d30;margin-top:7px}.desktop-document>i:last-child{width:56%}.custom-desktop-note{position:absolute;bottom:23px;left:25px;right:25px;display:flex;justify-content:center;align-items:center;gap:7px;font-size:11px;color:#274131}.custom-controls{padding:32px}.custom-controls>.story-sample{margin-bottom:28px}.custom-control{border-bottom:1px solid var(--line);padding:0 0 21px;margin-bottom:22px}.custom-control h3{font-size:15px;letter-spacing:-.025em;margin-bottom:13px;font-weight:600}.story-segment{display:flex;background:#e4ebe4;border-radius:10px;padding:4px;gap:3px}.story-segment button{flex:1;padding:9px 6px;background:transparent;font-size:12px;border-radius:7px;color:#526556}.story-segment button[aria-pressed=true]{background:white;color:#243d2e;box-shadow:0 1px 5px #1b321119}.custom-control label{display:flex;align-items:center;gap:9px;font-size:13px;min-height:35px;cursor:pointer}.custom-control label>span{width:16px}.custom-control input{accent-color:#326e4d;margin-left:auto;width:16px;height:16px}.custom-disclaimer{font-size:11px;line-height:1.75;color:var(--muted)}.story-text-button{display:flex;gap:12px;align-items:center;background:transparent;padding:0;color:#345f43;font-size:12px;margin-top:17px}.custom-details{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:40px}.custom-details article>span{display:block;width:26px;color:#5d7c65;margin-bottom:17px}.custom-details h3{font-size:18px;font-weight:600;letter-spacing:-.03em;margin-bottom:12px}.custom-details p{font-size:14px;line-height:1.8;color:var(--muted)}
.privacy-chapter{padding:100px 0;background:#eaf0e9;margin-top:40px;scroll-margin-top:76px}.privacy-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:60px 100px}.privacy-seal{width:60px;height:60px;background:#d6e5d7;border:1px solid #bbd1be;border-radius:18px;display:grid;place-items:center;margin-bottom:30px;box-shadow:0 3px 0 #c3d7c5}.privacy-seal svg{width:28px;color:#426a4b}.privacy-lead .eyebrow{margin-bottom:17px}.privacy-lead>p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--muted);margin:25px 0}.privacy-principles{display:grid;grid-template-columns:1fr 1fr;gap:43px 32px;align-content:center}.privacy-principles article{border-top:1px solid #c9d7ca;padding-top:20px}.privacy-principles article>span{font-size:10px;color:#6b856f}.privacy-principles h3{font-size:18px;line-height:1.35;letter-spacing:-.035em;margin:15px 0 12px}.privacy-principles p{font-size:14px;line-height:1.8;color:#617467}.privacy-network{grid-column:1/-1;font-size:12px;line-height:1.8;color:#627768;border-top:1px solid #cad8cc;padding-top:23px;max-width:1000px}.landing-menu{display:none}
@media(min-width:851px){.hero{padding-block:110px 90px}.hero h1{font-size:clamp(54px,5.2vw,76px)}.desktop-stage{border-bottom-width:11px}.proof-strip{margin-top:15px}}
@media(max-width:1050px){.story-heading{gap:20px 45px}.keyboard-story{gap:25px}.shortcut-step{padding:23px 12px;gap:9px}.shortcut-step strong{font-size:14px}.shortcut-step small{font-size:12px}.key-combo kbd{min-width:21px}.keyboard-visual{padding:27px 23px}.privacy-layout{gap:45px}.custom-controls{padding:25px}.custom-island-content>strong{font-size:15px}.custom-modules>span{font-size:9px}.custom-details{gap:28px}}
@media(max-width:850px){.story-section{padding:75px 0}.story-heading{display:block;margin-bottom:36px}.story-heading .eyebrow{margin-bottom:18px}.story-heading>p:last-child{margin-top:22px;font-size:16px;max-width:590px}.keyboard-story{grid-template-columns:1fr;gap:25px}.keyboard-visual{min-height:430px;grid-row:1}.shortcut-step{padding:21px 15px}.shortcut-step strong{font-size:16px}.shortcut-step small{font-size:13px}.story-footnotes{gap:35px}.custom-playground{grid-template-columns:1fr}.custom-desktop{min-height:440px}.custom-island{max-width:350px}.custom-desktop[data-size=spacious] .custom-island{max-width:460px}.desktop-document{left:24%;width:52%;height:195px;bottom:43px;padding:23px}.desktop-document>b{font-size:26px;margin:10px 0}.custom-controls{padding:28px}.custom-details{gap:22px}.privacy-layout{grid-template-columns:1fr;gap:38px}.privacy-lead{max-width:600px}.privacy-seal{float:right;margin-left:25px}.privacy-network{font-size:12px}.privacy-chapter{padding:70px 0}.privacy-principles{gap:30px}}
@media(max-width:600px){.site-header{gap:15px}.site-header>.button{margin-left:auto;font-size:10px;padding:11px 12px;gap:8px}.landing-menu{display:block;position:relative}.landing-menu summary{list-style:none;cursor:pointer;font-size:12px;border:1px solid var(--line);border-radius:22px;padding:9px 12px}.landing-menu summary::-webkit-details-marker{display:none}.landing-menu nav{position:absolute;right:0;top:47px;background:#fafcfb;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex!important;flex-direction:column;gap:0!important;width:200px;box-shadow:0 20px 40px #18382820}.landing-menu nav a{display:block!important;padding:11px 14px;font-size:13px}.story-section{padding:64px 0}.story-heading h2,.privacy-lead h2{font-size:39px}.story-heading>p:last-child{font-size:15px}.keyboard-visual{min-height:408px;padding:25px 20px}.shortcut-island{padding-inline:16px;height:177px}.shortcut-steps{gap:4px}.shortcut-step{padding:19px 9px;gap:8px}.step-index{display:none}.shortcut-step strong{font-size:14px}.shortcut-step small{font-size:12px;max-width:205px}.key-combo{gap:3px}.key-combo kbd{font-size:10px;min-width:21px;height:25px}.story-footnotes{grid-template-columns:1fr;gap:24px;font-size:13px}.story-footnotes strong{font-size:15px}.custom-desktop{padding:0 14px;min-height:415px}.custom-menu{font-size:6px}.custom-island{min-width:205px;margin-top:-25px;padding:29px 14px 18px}.custom-island-content{padding-top:21px}.custom-island-content>strong{font-size:15px}.custom-modules{gap:4px}.custom-modules>span{padding:6px;font-size:9px;gap:4px}.custom-modules svg{width:11px}.custom-desktop[data-size=spacious] .custom-island{width:100%;padding-bottom:28px}.desktop-document{left:17%;width:66%;bottom:40px;height:175px;padding:23px}.desktop-document>b{font-size:26px}.custom-desktop-note{bottom:16px;font-size:10px}.custom-controls{padding:25px 21px}.custom-details{grid-template-columns:1fr;gap:30px;margin-top:33px}.custom-details article{display:grid;grid-template-columns:29px 1fr;gap:0 17px}.custom-details article>span{grid-row:1/3}.custom-details p{font-size:14px}.privacy-chapter{padding:60px 0;margin-top:20px}.privacy-principles{grid-template-columns:1fr;gap:25px}.privacy-principles article{display:grid;grid-template-columns:27px 1fr;column-gap:13px}.privacy-principles article>span{grid-row:1/3;padding-top:3px}.privacy-principles h3{margin:0 0 10px;font-size:18px}.privacy-principles p{font-size:14px}.privacy-seal{width:46px;height:46px;border-radius:14px}.privacy-seal svg{width:24px}.privacy-network{font-size:11px}.wordmark{font-size:22px}.wordmark svg{width:25px}}
@media(prefers-reduced-motion:reduce){.custom-island{transition:none}}

/* Anchor landings account for the chapter padding and sticky header. */
#shortcuts,#widgets,#customize,#privacy{scroll-margin-top:-60px}

/* Rearrangement works with pointer, touch and keyboard, without dragging. */
.custom-order-hint{font-size:11px;color:var(--muted);margin:-4px 0 12px;line-height:1.6}
.custom-tool-row{display:flex;align-items:center;gap:16px;min-height:42px;border-top:1px solid #dbe4dc}
.custom-tool-row:first-child{border-top:0}
.custom-tool-row label{flex:1;gap:8px;min-width:0}
.custom-order-actions{display:flex;gap:4px}
.custom-order-actions button{width:30px;height:30px;border-radius:7px;background:#e4ebe4;color:#365942;font-size:16px}
.custom-order-actions button:hover:not(:disabled){background:#d2e1d3}
.custom-order-actions button:disabled{opacity:.25;cursor:default}
@media(max-width:600px){.custom-order-actions button{width:36px;height:36px}.custom-tool-row{min-height:46px}}