:root{--paper:#E9E6DD;--card:#F7F5EF;--ink:#14140F;--muted:#6A6559;--rule:#D3CDBE;--accent:#C9331B;--ease:cubic-bezier(.23,1,.32,1);color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'Golos Text',Arial,sans-serif;background-image:linear-gradient(#14140f04 1px,transparent 1px),linear-gradient(90deg,#14140f04 1px,transparent 1px);background-size:36px 36px}a{color:inherit;text-underline-offset:4px}header,footer,main{max-width:1100px;margin:auto;padding-inline:28px}header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:22px;border-bottom:1px solid var(--rule)}header nav,footer nav{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--muted)}.image-brand{display:flex;gap:13px;align-items:center;font:600 23px 'Oswald',sans-serif;letter-spacing:2px;text-decoration:none}.image-brand svg{width:28px;height:28px}main{padding-block:32px 48px}.image-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}.eyebrow{font-size:12px;color:var(--muted);margin:0 0 10px}h1,h2,h3{margin:0;font-weight:500}h1{font:500 clamp(30px,3.8vw,42px)/1.2 'Oswald',sans-serif}.intro-copy{max-width:330px;font-size:14px;line-height:1.6;margin:0}.intro-copy span{display:block;color:var(--muted);font-size:11px;margin-top:8px}.small{font-size:12px;line-height:1.65;color:var(--muted)}.image-work{display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}.image-card{background:var(--card);border:1px solid var(--rule);border-radius:3px;margin:0;box-shadow:2px 6px 12px #14140f0b;transform:rotate(-.7deg);overflow:hidden}.image-card-head{display:flex;justify-content:space-between;gap:16px;padding:18px 22px 10px;font:10px/1.4 'JetBrains Mono',monospace;color:var(--muted)}.art-open{display:block;position:relative;border:0;padding:0;background:var(--card);width:100%;cursor:zoom-in}.art-open img{width:100%;height:auto;display:block;aspect-ratio:480/540}.art-zoom{position:absolute;right:12px;bottom:12px;border:1px solid var(--rule);background:var(--card);color:var(--muted);width:32px;height:32px;border-radius:50%;font:20px/30px Arial;opacity:.8;transition:opacity 140ms ease}.image-card figcaption{padding:8px 22px 18px}.image-card h2{font:600 30px/1.2 'Oswald',sans-serif;margin-bottom:16px}.image-signature{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--rule);padding-top:12px;font:9px 'JetBrains Mono',monospace;color:var(--muted)}.image-signature span:first-child{color:var(--ink);letter-spacing:1px}.card-tools{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:16px}.text-button,summary{font:13px/1.5 'Golos Text',sans-serif;color:var(--muted);background:none;border:0;text-underline-offset:4px;padding:10px 0;cursor:pointer;min-height:44px}.text-button{text-decoration:underline;text-decoration-color:var(--rule)}.card-tools details{position:relative}.card-tools summary{list-style:none}.card-tools summary::-webkit-details-marker{display:none}.card-tools summary::after{content:' +';color:var(--accent)}.card-tools details[open] summary::after{content:' −'}.share-options{position:absolute;right:0;top:44px;z-index:2;width:220px;background:var(--card);padding:12px 20px;border:1px solid var(--rule);box-shadow:0 8px 20px #14140f12}.share-options button{display:block;text-align:left}.share-options p{margin:8px 0}.exercise-column{padding-top:22px;max-width:470px}.step-progress{display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--muted);font-size:12px;margin-bottom:34px}.step-progress div{display:flex;gap:6px}.step-progress i{display:block;width:22px;height:3px;background:var(--rule);border-radius:2px}.step-progress i.active{background:var(--accent)}#stepTitle,.exercise-finished h2{font:500 clamp(28px,3vw,36px)/1.25 'Oswald',sans-serif;max-width:420px}#stepDescription{font-size:17px;line-height:1.75;margin:20px 0 14px;max-width:440px}.mental-note{color:var(--muted);font-size:13px;margin:0 0 30px}.note-disclosure{border-top:1px solid var(--rule);margin-bottom:26px}.note-disclosure summary{font-size:14px;color:var(--ink);padding-block:15px}.note-disclosure summary span{font-size:11px;color:var(--muted);margin-left:8px}.note-disclosure textarea{margin-top:4px}.note-disclosure .small{margin:10px 0 0}textarea{width:100%;font:16px/1.6 'Golos Text',sans-serif;background:var(--card);color:var(--ink);padding:14px;border:1px solid var(--rule);border-radius:2px;resize:vertical;min-height:100px}textarea::placeholder{color:var(--muted)}.primary,.secondary{font:500 15px/1.4 'Golos Text',sans-serif;min-height:48px;padding:14px 23px;border-radius:2px;cursor:pointer;transition:transform 140ms var(--ease),background-color 140ms ease}.primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}.secondary{background:transparent;color:var(--ink);border:1px solid var(--rule)}.step-actions{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}.step-actions .secondary{font-size:13px;padding-inline:14px}.step-actions #saveImageNote{flex-basis:auto}button:disabled{opacity:.55;cursor:default}button:not(:disabled):not(.art-open):active{transform:scale(.97)}button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h2:focus{outline:none}.art-open:focus-visible{outline-offset:-4px}.example-disclosure{border-top:1px solid var(--rule);margin-top:36px;padding-top:10px}.example-disclosure p{font-size:14px;line-height:1.75;margin:12px 0}.example-disclosure .small{font-size:12px}.exercise-finished p{font-size:17px;line-height:1.75;margin-top:20px}#imageStatus:empty{display:none}#imageStatus{margin-top:20px}.image-gallery,#imageSaved{border-top:1px solid var(--rule);padding-top:22px;margin-top:44px}.image-gallery summary{font-size:15px;color:var(--ink)}#imageGallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:22px}.image-thumb{border:1px solid var(--rule);background:var(--card);padding:12px}.image-thumb img{display:block;width:100%;height:auto}.image-thumb h3{font-size:15px;margin-top:10px}.image-thumb .small{margin:6px 0 0}.saved-observation{border-bottom:1px solid var(--rule);padding-block:20px}.saved-observation p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.saved-observation h3{font-size:18px}#imageSaved h2{font:500 28px 'Oswald',sans-serif}.purpose-note{max-width:650px;margin:28px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer{padding-block:26px 34px;border-top:1px solid var(--rule);display:flex;gap:28px;justify-content:space-between;font-size:12px}dialog{padding:22px;max-width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--card);border:1px solid var(--rule);border-radius:4px;color:var(--ink);overscroll-behavior:contain}dialog::backdrop{background:#14140fb3}.dialog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}.dialog-toolbar h2{font:500 25px 'Oswald',sans-serif}dialog img{display:block;width:100%;height:auto}dialog p{margin:14px 0 0}body:has(dialog[open]){overflow:hidden}@media(hover:hover) and (pointer:fine){.primary:not(:disabled):hover{background:#AC2D18}.art-open:hover .art-zoom{opacity:1}.text-button:hover,summary:hover{color:var(--ink)}}@media(max-width:800px){.image-intro{display:block}.intro-copy{max-width:560px;margin-top:14px}.intro-copy span{margin-top:6px}.image-work{grid-template-columns:minmax(0,1fr);gap:24px}.card-column{max-width:390px;width:100%;margin:auto}.exercise-column{padding-top:8px;width:100%;max-width:470px;margin:auto}.step-progress{margin-bottom:22px}.example-disclosure{margin-top:28px}#imageGallery{grid-template-columns:repeat(2,minmax(0,1fr))}header{align-items:flex-start;flex-direction:column;gap:10px;padding-block:18px}footer{flex-direction:column;gap:16px}header nav{font-size:12px;gap:18px}main{padding-top:24px}.image-intro{margin-bottom:28px}}@media(max-width:480px){header,footer,main{padding-inline:20px}.image-brand{font-size:21px}.card-column{max-width:335px}.image-card-head{padding-inline:18px}.image-card figcaption{padding-inline:18px}.image-card h2{font-size:28px}#stepDescription{font-size:16px}.note-disclosure summary span{display:inline-block}.step-actions .primary{flex:1;min-width:170px}.image-thumb{padding:8px}#imageGallery{gap:12px}dialog{padding:14px}}@media(prefers-reduced-motion:reduce){button,.art-zoom{transition:none}}[hidden]{display:none!important}

h1:focus,h2:focus,h3:focus{outline:none!important;box-shadow:none!important}
.finished-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.notes-jump{display:inline-flex;gap:8px;align-items:center;min-height:44px;margin-top:22px;font-size:12px;color:var(--muted);text-decoration-color:var(--rule)}
#notesCount{font-size:10px;border:1px solid var(--rule);border-radius:12px;min-width:22px;text-align:center;padding:1px 5px}
.mobile-notes-hint{display:none}
.exercise-column #imageSaved{margin-top:28px;padding-top:20px}
#imageSaved h2{font:500 22px 'Oswald',sans-serif}
#imageSaved .small{font-size:11px;margin:8px 0 12px}
#imageSavedList{max-height:280px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.saved-observation{padding:0;border-bottom:1px solid var(--rule)}
.saved-observation summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;padding-block:12px;color:var(--ink);list-style:none}
.saved-observation summary::-webkit-details-marker{display:none}
.saved-observation summary::after{content:'+';color:var(--muted)}
.saved-observation[open] summary::after{content:'−'}
.saved-observation time{font-size:10px;color:var(--muted);margin-left:auto}
.saved-observation>div{padding-bottom:10px}
.saved-observation p{font-size:12px;line-height:1.65;margin:6px 0}
.notes-empty{font-size:12px;color:var(--muted);margin:0;line-height:1.6}
@media(max-width:800px){.mobile-notes-hint{display:inline}.finished-actions{gap:14px 20px}#imageSavedList{max-height:none;overflow:visible}.exercise-column #imageSaved{margin-top:24px;scroll-margin-top:24px}}
