:root{color-scheme:light;--paper:#f9f8f4;--ink:#33352f;--muted:#676a62;--accent:#52715e;--focus:#315f84;--line:#d8d8d1;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--max:1120px;--space:clamp(24px,5vw,72px);--radius:9px;--bevel:inset 0 1px 0 #fff,0 1px 2px #2731251f;--note:#f7e7a2;--note-edge:#e8d78d}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.65}img{max-width:100%;height:auto;vertical-align:middle}h1,h2,p{margin:0}h1,h2{font-weight:600;letter-spacing:-.035em;line-height:1.12}h1{font-size:clamp(38px,5vw,64px)}h2{font-size:clamp(34px,4.2vw,51px)}p{color:var(--muted);font-size:18px;line-height:1.6}fieldset{border:0;margin:0;padding:0;min-width:0}:focus-visible{outline:3px solid var(--focus);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;top:8px;left:16px;z-index:20;padding:10px 16px;background:var(--paper);transform:translateY(-150%)}.skip-link:focus{transform:none}
.site-header{max-width:var(--max);margin:auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:8px 24px;gap:24px}.wordmark{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:600;letter-spacing:-.03em}.wordmark img{width:40px;height:40px}.site-header nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}.site-header nav a{padding:12px 0;color:var(--muted)}.site-header nav a:hover{color:var(--ink)}
.hero{text-align:center;padding:44px 20px 48px}.hero-icon{width:148px;height:148px;object-fit:contain;margin-bottom:28px}.hero-copy{margin:20px auto 26px;font-size:21px;line-height:1.5}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 21px;background:linear-gradient(#fff,#eeeee8);border:1px solid #c9ccc2;border-radius:var(--radius);box-shadow:var(--bevel);font-size:15px;font-weight:500;white-space:nowrap}.button:hover{background:linear-gradient(#fff,#e7e9df)}.button:active{box-shadow:inset 0 1px 3px #26341f30;background:#e7e9df}.primary{background:linear-gradient(#587760,#47654f);color:#fff;border-color:#45624e;box-shadow:inset 0 1px 0 #ffffff45,0 2px 3px #27312520;font-size:16px;padding:12px 24px}.primary:hover{background:linear-gradient(#5d7b65,#4b6a53)}.primary:active{background:#45624e;box-shadow:inset 0 2px 3px #0003}.compatibility{font-size:13px;margin-top:16px;color:#676d61}
.collage-section{max-width:var(--max);margin:0 auto;padding:0 24px}.desktop-housing{position:relative;margin:0 0 28px}.display-bezel{padding:13px 13px 16px;background:linear-gradient(145deg,#4b4d49,#242723 50%,#343631);border-radius:18px 18px 10px 10px;box-shadow:inset 0 1px 1px #ffffff50,0 17px 36px -18px #32362b5c}.desktop-preview{position:relative;display:block;width:100%;padding:0;border:0;background:#c9dce7;aspect-ratio:1.6;overflow:hidden;border-radius:4px;cursor:zoom-in}.desktop-preview img{display:block;width:100%;height:100%;object-fit:cover}.desktop-preview:focus-visible{outline-offset:3px;outline-color:#fff}.expand-cue{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:6px;color:#fff;background:#1e2c236b;opacity:0;font-size:25px}.desktop-preview:hover .expand-cue,.desktop-preview:focus-visible .expand-cue{opacity:1}.display-foot{position:relative;width:calc(100% + 22px);margin-left:-11px;height:12px;background:linear-gradient(#e7e9e4,#abb0a7 55%,#8d9389);border-radius:1px 1px 50% 50% / 1px 1px 90% 90%;box-shadow:0 14px 18px -10px #25301d40}.display-foot:before{content:"";position:absolute;top:0;left:43%;width:14%;height:5px;background:linear-gradient(90deg,#b7bcb3,#d6d9d1,#b7bcb3);border-radius:0 0 6px 6px}
.scene-controls{display:flex;justify-content:center;align-items:center;gap:24px;min-height:54px}.mood-picker,.treatment-picker,.note-style-picker{display:flex;gap:3px;padding:4px;background:#e8e9e2;border:1px solid #d6d9ce;border-radius:10px;box-shadow:inset 0 1px 2px #2f382416}.mood-picker label,.treatment-picker label,.note-style-picker label,.note-colours label{position:relative;display:block;cursor:pointer}.mood-picker input,.treatment-picker input,.note-style-picker input,.note-colours input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}.mood-picker label>span,.treatment-picker label>span,.note-style-picker label>span{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid transparent;border-radius:7px;font-size:14px;line-height:1.4;white-space:nowrap}.mood-picker input:checked+span,.treatment-picker input:checked+span,.note-style-picker input:checked+span{background:linear-gradient(#fff,#f6f6ef);border-color:#77836e;font-weight:600;box-shadow:0 1px 3px #25301d19,inset 0 1px 0 #fff}.mood-picker input:focus-visible+span,.treatment-picker input:focus-visible+span,.note-style-picker input:focus-visible+span,.note-colours input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}.mood-dots{display:inline-block;width:20px;height:13px;border-radius:3px;background:linear-gradient(90deg,#6c9eb9 50%,#d7b64c 50%);box-shadow:inset 0 0 0 1px #00000014}.mood-dots.forest{background:linear-gradient(90deg,#647957 50%,#eee1bf 50%)}.mood-dots.sunday{background:linear-gradient(90deg,#54958d 50%,#bc7953 50%)}.shuffle{padding:9px 16px}.shuffle svg{width:19px;height:19px}.example-error,.no-script{font-size:14px;text-align:center;margin-top:14px}.example-error{color:#8b332f}.intro-copy{text-align:center;padding:88px 24px 100px}.intro-copy p{margin-top:22px}
.paper-section,.notes-section{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:48px;max-width:var(--max);margin:0 auto;padding:55px 64px 90px}.section-copy p{margin-top:22px;font-size:18px}.treatment-picker{margin-top:30px;display:inline-flex;flex-wrap:wrap}.treatment-picker label>span{padding:8px 13px}.print-example{display:flex;align-items:center;justify-content:center;min-width:0;aspect-ratio:1}.print-example img{width:100%;filter:drop-shadow(0 18px 15px #473b2420)}.notes-section{grid-template-columns:1.1fr 1fr;gap:95px;padding-top:60px;padding-bottom:110px}.note-example{padding:25px 12px;min-width:0}.sticky-note{position:relative;padding:34px 32px 42px;background:linear-gradient(135deg,var(--note),var(--note) 65%,var(--note-edge));min-height:322px;transform:rotate(-3deg);filter:drop-shadow(2px 8px 7px #403a292b);clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}.sticky-note:before{content:"";position:absolute;top:0;left:0;width:100%;height:15px;background:#8b783c10}.sticky-note:after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;background:linear-gradient(135deg,#fff9d5,#efe1aa);clip-path:polygon(0 0,100% 0,0 100%)}.note-title{font-size:21px;font-weight:600;display:block;margin-bottom:12px;color:#424334}.sticky-note textarea{display:block;width:100%;min-height:192px;resize:vertical;color:#424334;background:transparent;border:0;padding:0;border-radius:1px;font-size:21px;line-height:1.6;overflow-wrap:anywhere}.sticky-note textarea:focus-visible{outline-offset:7px}.sticky-note[data-style="flat"]{filter:none;transform:none;clip-path:none;background:var(--note)}.sticky-note[data-style="flat"]:before,.sticky-note[data-style="flat"]:after{display:none}.sticky-note[data-colour="sage"]{--note:#d5dfbc;--note-edge:#bdcda6}.sticky-note[data-colour="blue"]{--note:#c6dce8;--note-edge:#b4ccdc}.sticky-note[data-colour="rose"]{--note:#edc7c1;--note-edge:#deb6af}.note-style-picker{margin-top:28px;display:inline-flex}.note-style-picker label>span{min-width:74px}.note-colours{display:flex;gap:8px;margin-top:22px}.note-colours label{padding:5px}.swatch{display:block;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 1px 0 #fff9,inset 0 0 0 1px #00000014,0 1px 2px #0002}.swatch.butter{background:#f2df92}.swatch.sage{background:#c5d3a9}.swatch.blue{background:#b6d2e2}.swatch.rose{background:#e4b6ad}.note-colours input:checked+.swatch{outline:2px solid #5d6654;outline-offset:4px}
.closing{padding:76px 24px 100px;text-align:center;background:linear-gradient(#f9f8f4,#eeefe7)}.closing img{margin-bottom:28px}.closing p{margin-top:24px;font-size:17px}.text-link{display:inline-flex;align-items:center;gap:8px;color:#47654f;margin-top:24px;font-weight:500;padding:8px}.text-link:hover{text-decoration:underline;text-underline-offset:4px}footer{padding:27px 24px;max-width:var(--max);margin:auto;display:flex;justify-content:space-between;gap:18px;color:#676d61;font-size:12px}footer a{padding:5px 0}footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
dialog{padding:54px 12px 12px;max-width:min(98vw,1700px);max-height:96dvh;border:1px solid #888e80;border-radius:12px;background:#f6f6f0;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#19221bbb}dialog img{display:block;max-height:calc(96dvh - 78px);max-width:100%;width:auto;object-fit:contain}.dialog-close{position:absolute;top:7px;right:10px;min-height:36px;padding:4px 12px;font-size:14px}.dialog-close span{font-size:22px}
@media (max-width:900px){.site-header{min-height:70px}.hero{padding-top:32px}.hero-icon{width:124px;height:124px}.collage-section{padding-inline:25px}.paper-section,.notes-section{padding-inline:40px;gap:28px}.notes-section{gap:48px}.sticky-note{padding:28px 24px;min-height:290px}.sticky-note textarea{font-size:18px}.note-title{font-size:19px}.treatment-picker label>span{padding-inline:9px}.section-copy p{font-size:17px}.intro-copy{padding-block:75px}}
@media (max-width:620px){.site-header{padding-inline:18px;gap:16px}.wordmark{font-size:21px;gap:7px}.wordmark img{width:34px;height:34px}.site-header nav{gap:17px;font-size:12px}.site-header nav a{padding-block:14px}.hero{padding-top:31px;padding-bottom:38px}.hero-icon{width:120px;height:120px;margin-bottom:26px}h1{font-size:39px;letter-spacing:-.04em}.hero-copy{font-size:18px;margin:18px auto 25px}.primary{font-size:15px}.compatibility{font-size:12px}.collage-section{padding-inline:18px}.display-bezel{padding:6px 6px 8px;border-radius:10px 10px 5px 5px}.desktop-preview{border-radius:2px}.display-foot{height:7px;width:calc(100% + 12px);margin-left:-6px}.display-foot:before{height:3px}.desktop-housing{margin-bottom:22px}.scene-controls{gap:13px;flex-wrap:wrap}.mood-picker{padding:3px;gap:0}.mood-picker label>span{padding:7px 11px;gap:7px;font-size:13px;min-height:44px}.mood-dots{width:17px;height:12px}.shuffle{min-height:40px;font-size:13px;padding:8px 13px;gap:8px}.shuffle svg{width:17px;height:17px}.intro-copy{padding:65px 24px 48px}.intro-copy h2{font-size:36px}.intro-copy p{font-size:17px}.paper-section,.notes-section{grid-template-columns:1fr;padding:48px 28px 35px;gap:20px;text-align:center}.section-copy h2{font-size:38px}.section-copy p{font-size:17px;margin-top:20px}.paper-section .print-example{width:min(440px,100%);margin:0 auto;order:2}.treatment-picker{margin-top:26px}.notes-section{padding-top:48px;padding-bottom:45px}.notes-section .section-copy{grid-row:1}.note-example{width:min(360px,100%);margin:12px auto 0;padding:22px 12px}.note-style-picker{margin-top:24px}.note-colours{justify-content:center;margin-top:20px;gap:12px}.note-colours label{padding:7px}.swatch{width:30px;height:30px}.sticky-note{text-align:left;min-height:295px;padding:30px 28px}.sticky-note textarea{font-size:19px}.note-title{font-size:20px}.closing{padding-block:60px 68px}.closing h2{font-size:39px}.closing p{font-size:16px;max-width:260px;margin-inline:auto}.closing img{width:90px;height:90px}footer{padding:22px 20px;font-size:11px;gap:10px;flex-wrap:wrap}.expand-cue{width:28px;height:28px;font-size:21px;bottom:7px;right:7px;opacity:1}}
@media (max-width:360px){.site-header nav{gap:12px}.site-header nav a{font-size:11px}.wordmark{font-size:19px}.wordmark img{width:30px;height:30px}.hero h1{font-size:34px}.scene-controls{gap:12px}.mood-picker label>span{padding-inline:10px}.scene-controls .shuffle{width:auto}.paper-section,.notes-section{padding-inline:22px}.treatment-picker label>span{padding-inline:10px;font-size:13px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (forced-colors:active){.button,.mood-picker,.treatment-picker,.note-style-picker,.swatch{border:1px solid ButtonText}.mood-picker input:checked+span,.treatment-picker input:checked+span,.note-style-picker input:checked+span{outline:2px solid Highlight}.sticky-note{background:Canvas;clip-path:none;transform:none;filter:none;border:1px solid CanvasText}.sticky-note textarea,.note-title{color:CanvasText}.sticky-note:before,.sticky-note:after{display:none}.mood-dots{border:1px solid CanvasText}}