/* Echo composition: one focal object per chapter, supporting controls recede. */
html #home.hero{row-gap:22px;padding-bottom:92px}
html #home .home-afterword{grid-row:4;display:grid;grid-template-columns:.85fr 1.3fr;align-items:center;gap:48px;width:min(940px,100%);justify-self:center;margin:30px 0 8px;padding:34px 0;border-top:1px solid var(--line);text-align:left;z-index:2}
html #home .home-afterword .intro{grid-row:auto;max-width:310px;line-height:1.95}
html #home .home-afterword .intro br:first-of-type{display:block}
html #home .home-afterword .hello{display:inline-block;font:400 25px/1.6 var(--serif);color:var(--ink);margin:0 0 12px}
html #home .home-afterword .subscription-row{grid-row:auto;width:100%;margin:0}
html .home-afterword .sub-box{align-items:stretch;gap:15px}
html .home-afterword .sub-tout{justify-content:flex-start;gap:8px 16px}
html .home-afterword .sub-tout .tout-tail{text-align:left;font-size:23px;margin-bottom:0}
html .home-afterword .sub-tout .tout-item{padding:0;border:0;border-radius:0;background:none;font-size:13px;gap:6px}
html .home-afterword .subscription-feedback{text-align:left;padding-left:2px;line-height:1.7}
html .home-afterword .subscription-form{box-shadow:0 4px 18px #607c9408}

/* Chapter introductions read across the page, leaving the canvas for the work. */
html .chapter{display:block;min-height:0;padding:88px 0 96px}
html .chapter-heading{position:static;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:48px;row-gap:18px;padding:0;margin:0 0 44px;align-items:end}
html .chapter-kicker{grid-column:1;grid-row:1;margin:0;font-size:12px;letter-spacing:1.2px;color:#61768f;gap:12px}
html .chapter-kicker>span{border-color:#c9d6e2;width:30px;height:30px}
html .chapter h2{grid-column:1;grid-row:2;font:400 clamp(38px,3.8vw,56px)/1.25 var(--serif);letter-spacing:-1.5px;margin:0;color:var(--ink)}
html .chapter h2 em{color:#7187a2}
html .chapter-heading>p:not(.chapter-kicker){grid-column:2;grid-row:2;margin:0 0 5px;font-size:16px;line-height:1.95;max-width:360px}
html .chapter-note{grid-column:2;grid-row:1;margin:0;font-size:11px;letter-spacing:1px;color:#667b92;align-self:center}
html .component-label{font-size:12px;letter-spacing:.9px;color:#657a8a}
html .demo-panel{box-shadow:none}

/* The garden is the feature; sound controls form a quiet companion column. */
html .touch-chapter .chapter-content{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:36px;align-items:stretch}
html .seed-panel{padding:30px 34px 24px;border-color:#cad8d2;border-radius:24px;background:linear-gradient(135deg,#f8fbf5e6,#e7f0e5aa);overflow:hidden}
html .seed-panel h3{font:400 32px/1.4 var(--serif);letter-spacing:-.5px;margin:28px 0 10px}
html .seed-panel .panel-description{max-width:430px;font-size:15px;line-height:1.85;margin-bottom:24px}
html .seed-panel .ui-button.primary{background:#344f4b}
html .seed-panel .ui-button.primary:hover{background:#44645b}
html .seed-panel .ui-button.secondary{border-color:transparent;background:transparent;padding-inline:13px;color:#5b7167}
html .seed-panel .ui-button.secondary:hover{background:#ffffff80}
html .seed-panel .favorite-button{margin-left:auto;border-color:#bfd0c6;background:#ffffff65;color:#56796b}
html .seed-panel .favorite-button[aria-pressed=true]{color:#a56771;background:#fcecee;border-color:#e4c8cb}
html .seed-meadow{height:156px;margin-top:6px;background:radial-gradient(ellipse at 50% 110%,#ccdfc954,transparent 68%)}
html .garden-caption{border-color:#cbd9cf;padding-top:15px;color:#61776e}
html .two-panels{display:flex;flex-direction:column;margin:0;gap:0;border-left:1px solid #cedbd7;padding-left:32px}
html .two-panels .compact-panel{border:0;border-radius:0;background:none;box-shadow:none;padding:16px 0 25px}
html .two-panels .compact-panel+.compact-panel{border-top:1px solid #cedbd7;padding-top:24px;padding-bottom:8px}
html .switch-row{margin:21px 0 14px}
html .switch-row h3{font-size:18px;margin:0 0 8px}
html .switch-row p,html .setting-hint{font-size:13px;line-height:1.75}
html .range-label{margin:18px 0 12px;font-size:18px}
html .string-sound-setting{margin-top:21px;padding-top:18px;border-top:1px solid #d3dfd780}

/* A writing desk: the form stays calm and the live paper has room to breathe. */
html .note-workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:center;padding:36px 40px;background:#ffffff50;border:1px solid #d9dfe3;border-radius:24px}
html .note-form{border:0;border-radius:0;box-shadow:none;background:none;padding:0;min-width:0}
html .note-form .component-label{display:block;padding-bottom:17px;border-bottom:1px solid #d5dce2}
html .field-group{margin-top:25px}
html .input-shell input,html textarea{background:#ffffff75;border-color:#cad6e0;border-radius:9px}
html .input-shell input:focus,html textarea:focus{background:#fff}
html .note-form .form-footer{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
html .note-form .form-footer .ui-button{width:auto;min-width:200px}
html .form-footer>span{width:auto;text-align:left;font-size:12px}
html .note-preview-wrap{position:relative;isolation:isolate;width:100%;max-width:360px;margin:0 auto;padding:20px 8px}
html .note-preview-wrap::before{content:"";position:absolute;z-index:-1;inset:16% 8% 16%;border:1px solid #c9bba84d;border-radius:50%;transform:rotate(-12deg);pointer-events:none}
html .preview-label{font-size:11px;letter-spacing:1.25px;margin:0 0 24px 6px}
html .preview-note{min-height:330px;padding:32px 29px 27px;box-shadow:5px 9px 0 #7185980a,0 22px 40px #60779512;transform:rotate(2deg)}
html .preview-note h3{font-size:29px;line-height:1.45;margin:30px 0 22px;color:#3f5674}
html .preview-note>p{font-size:16px;line-height:1.95;min-height:90px}
html .note-feedback{max-width:300px;margin:26px auto 0;font-size:13px;line-height:1.85}

/* One large work, two lighter reading entries. No extra boxes around text. */
html .collection-toolbar{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #d2dde7;align-items:center}
html .filter-chips{gap:8px}
html .filter-chips button{font-size:14px;padding:9px 17px;min-height:40px}
html .search-shell{max-width:235px;width:235px;padding:4px 0;border-bottom-color:transparent}
html .search-shell:focus-within{border-bottom-color:#718baa}
html .collection-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 36px;align-items:stretch}
html .collection-card,html .collection-card:last-child{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-column:auto;gap:8px 20px;align-content:start;align-items:start;padding:22px 0;border:0;border-bottom:1px solid #cedbe6;border-radius:0;background:none;box-shadow:none}
html .collection-card:hover{transform:translateY(-3px);box-shadow:none;border-color:#9fb4c8}
html .collection-card .card-art,html .collection-card:last-child .card-art{grid-column:1;grid-row:1/4;height:150px;width:100%;margin:0;border-radius:14px}
html .collection-card .card-meta,html .collection-card:last-child .card-meta{grid-column:2;grid-row:1;margin:0;font-size:12px;letter-spacing:.3px}
html .collection-card .card-title{grid-column:2;grid-row:2;margin:0;font-size:20px;line-height:1.5}
html .collection-card .card-description{grid-column:2;grid-row:3;margin:0;font-size:14px;line-height:1.85;max-width:320px}
html .collection-card:first-child{grid-column:1;grid-row:span 2;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr;gap:12px;padding:0 0 22px;border-color:#cedbe6}
html .collection-card:first-child .card-art{grid-column:1;grid-row:1;height:260px;margin:0 0 9px}
html .collection-card:first-child .card-meta{grid-column:1;grid-row:2}
html .collection-card:first-child .card-title{grid-column:1;grid-row:3;font:400 29px/1.4 var(--serif)}
html .collection-card:first-child .card-description{grid-column:1;grid-row:4;max-width:100%;font-size:15px}
html .collection-card:first-child .art-work i{width:132px;height:160px;left:40%;top:19%;border-radius:70px 70px 5px 5px}
html .collection-card:first-child .art-work i:nth-child(2){left:27%;top:33%}
html .collection-card:first-child .card-art>span{left:49%;top:43%;font-size:53px}
html .collection-grid:has(.collection-card:first-child[hidden]){grid-template-columns:1fr 1fr}
html .collection-count{font-size:13px;margin:18px 0 36px}
html .ui-accordion{border-bottom:0}
html .ui-accordion summary{font-size:15px;padding:23px 0}
html .ui-accordion p{max-width:670px}
html .footer{padding-top:26px;border-top:1px solid var(--line);row-gap:18px}
html .music-attribution{margin-top:0;max-width:780px}

@media(min-width:741px) and (max-width:1100px){
  html .chapter{padding:66px 0 76px}
  html .chapter-heading{gap:18px 30px;margin-bottom:34px}
  html .chapter h2{font-size:42px}
  html .touch-chapter .chapter-content{grid-template-columns:minmax(0,1.6fr) minmax(235px,1fr);gap:25px}
  html .seed-panel{padding:27px 25px 22px}
  html .two-panels{padding-left:24px}
  html .seed-panel .button-samples{gap:8px}
  html .seed-panel .favorite-button{margin-left:0}
  html .note-workspace{padding:30px;gap:32px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  html .preview-note{padding:26px 22px;min-height:310px}
  html .preview-note h3{font-size:26px}
  html .collection-grid{gap:0 26px}
  html .collection-card,html .collection-card:last-child{grid-template-columns:86px minmax(0,1fr);column-gap:15px}
  html .collection-card:first-child{grid-template-columns:1fr}
  html .collection-card .card-title{font-size:18px}
  html #home .home-afterword{gap:32px}
}
@media(max-width:740px){
  html #home.hero{padding-bottom:85px}
  html #home .home-afterword{grid-template-columns:1fr;gap:30px;margin:21px 0 0;padding:26px 0 0;text-align:center}
  html #home .home-afterword .intro{max-width:100%;font-size:15px}
  html #home .home-afterword .hello{font-size:24px;margin-bottom:8px}
  html #home .home-afterword .subscription-row{padding-top:26px;border-top:1px solid var(--line)}
  html .home-afterword .sub-tout{justify-content:center;gap:10px 12px}
  html .home-afterword .sub-tout .tout-tail{text-align:center;font-size:21px;line-height:1.5}
  html .home-afterword .sub-tout .tout-item{font-size:12px}
  html .home-afterword .subscription-feedback{text-align:center;font-size:12px;padding:0}
  html .chapter{padding:57px 0 64px}
  html .chapter-heading{grid-template-columns:1fr;gap:18px;margin-bottom:30px}
  html .chapter-kicker{font-size:11px;letter-spacing:.7px}
  html .chapter h2{font-size:36px;line-height:1.25}
  html .chapter-heading>p:not(.chapter-kicker){grid-column:1;grid-row:3;font-size:15px;line-height:1.85;margin:0}
  html .chapter-note{display:none}
  html .touch-chapter .chapter-content{grid-template-columns:1fr;gap:26px}
  html .seed-panel{padding:24px 20px 21px;border-radius:20px}
  html .seed-panel h3{font-size:28px;margin-top:25px}
  html .seed-panel .panel-description{font-size:15px}
  html .seed-panel .favorite-button{margin-left:0}
  html .seed-panel .button-samples{gap:10px}
  html .seed-meadow{height:135px}
  html .two-panels{border-left:0;padding:0 6px}
  html .two-panels .compact-panel{padding:4px 0 25px}
  html .two-panels .compact-panel+.compact-panel{padding-top:25px}
  html .note-workspace{grid-template-columns:1fr;padding:24px 18px;gap:38px;border-radius:20px}
  html .note-form .form-footer{gap:12px}
  html .note-form .form-footer .ui-button{width:100%;min-width:0}
  html .note-form .form-footer>span{width:100%;text-align:center}
  html .note-preview-wrap{padding:20px 8px 0;border-top:1px solid #d5dce2;max-width:330px}
  html .note-preview-wrap::before{inset:20% 8% 14%}
  html .preview-label{margin-top:9px}
  html .preview-note{padding:29px 22px;min-height:305px;transform:rotate(1.5deg)}
  html .preview-note h3{font-size:27px}
  html .preview-note>p{font-size:15px}
  html .collection-toolbar{align-items:stretch;gap:13px;margin-bottom:25px;padding-bottom:15px}
  html .search-shell{width:100%;max-width:none}
  html .collection-grid,html .collection-grid:has(.collection-card:first-child[hidden]){grid-template-columns:1fr;gap:0}
  html .collection-card,html .collection-card:last-child{grid-template-columns:78px minmax(0,1fr);gap:7px 15px;padding:26px 0}
  html .collection-card .card-art,html .collection-card:last-child .card-art{height:122px;border-radius:11px}
  html .collection-card .card-title{font-size:18px}
  html .collection-card .card-meta{font-size:11px}
  html .collection-card:first-child{grid-column:auto;grid-row:auto;grid-template-columns:1fr;gap:11px;padding:0 0 25px}
  html .collection-card:first-child .card-art{height:225px}
  html .collection-card:first-child .card-title{font-size:27px}
  html .collection-card:first-child .card-description{font-size:15px}
  html .collection-card .card-description{font-size:14px;line-height:1.8}
  html .footer{row-gap:20px}
}
@media(max-width:360px){
  html .chapter h2{font-size:33px}
  html .seed-panel{padding:23px 17px 20px}
  html .seed-panel .ui-button{padding-inline:13px}
  html .collection-card,html .collection-card:last-child{grid-template-columns:60px minmax(0,1fr);column-gap:13px}
  html .collection-card:first-child{grid-template-columns:1fr}
  html .note-workspace{padding:23px 15px}
}

/* Keep the complete opening composition within a desktop viewport. */
html #home.hero{height:calc(100svh - 100px);min-height:590px;padding:20px 0 44px;grid-template-rows:auto auto minmax(190px,1fr) auto;row-gap:10px}
html #home .artwork{width:min(740px,100%);max-width:100%;height:100%;min-height:0;display:flex;flex-direction:column;justify-self:center;margin:0;padding:0}
html #home .art-surface{flex:1;min-height:0;height:auto;width:100%}
html #home .logo-stage{width:clamp(180px,24svh,230px);top:50%}
html #home .art-top{top:46%}
html #home .art-controls{flex-shrink:0;flex-wrap:nowrap;justify-content:center;gap:18px;margin:8px 0 0;min-height:48px}
html #home .pluck-hint{display:flex;flex-direction:column;gap:2px;line-height:1.5;font-size:13px;text-align:center;flex-basis:auto}
html #home .drag-hint{font-size:12px;color:#6b8098}
html #home .home-afterword{grid-row:4;margin:10px 0 0;padding:20px 0 0;gap:35px;width:min(1040px,100%);grid-template-columns:.7fr 1.5fr}
html #home .home-afterword .hello{font-size:23px;margin-bottom:6px}
html #home .home-afterword .intro{font-size:15px;line-height:1.8}
html .home-afterword .sub-box{max-width:none;gap:10px}
html .home-afterword .sub-tout .tout-tail{font-size:22px;line-height:1.5}
html .subscription-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px 15px;flex-wrap:wrap}
html .home-afterword .sub-topics{width:auto;margin:0;gap:7px 12px;flex-shrink:0}
html .home-afterword .sub-topics .tout-item{font-size:11px}
html .home-afterword .subscription-feedback{font-size:11px;line-height:1.6;margin:0 0 0 auto;text-align:right;padding:0;min-height:0}
html #home .explore-link{bottom:10px}
@media(min-width:741px) and (max-height:800px){
 html #home.hero{padding-top:12px;row-gap:7px}
 html #home .home-afterword{padding-top:15px;margin-top:5px}
 html #home .artwork{width:min(660px,100%)}
 html #home .orbit{width:72%}
 html #home .orbit-two{width:60%;height:95%}
 html #home .orbit-three{width:47%;height:95%}
 html #home .logo-stage{width:190px}
}
@media(max-width:740px){
 html #home.hero{height:calc(100svh - 142px);min-height:598px;padding:15px 0 38px;grid-template-rows:auto auto minmax(140px,1fr) auto;row-gap:9px}
 html #home .artwork{width:100%;margin:0;padding:0}
 html #home .art-surface{height:auto;min-height:140px}
 html #home .logo-stage{width:clamp(120px,17svh,155px)}
 html #home .art-controls{gap:8px;margin:8px 0 0;flex-wrap:wrap;justify-content:center;min-height:55px}
 html #home .pluck-controls{order:0}
 html #home .pluck-controls button{width:25px;min-height:36px}
 html #home .pluck-hint{order:1;font-size:11px;gap:1px;max-width:190px}
 html #home .drag-hint{font-size:10px}
 html #home .sound-toggle{order:2;font-size:11px;padding:7px 9px;min-height:32px}
 html #home .home-afterword{grid-template-columns:1fr;gap:12px;margin:4px 0 0;padding-top:12px}
 html #home .home-afterword .intro{font-size:13px;line-height:1.7;max-width:100%}
 html #home .home-afterword .hello{font-size:19px;line-height:1.4;margin-bottom:1px}
 html #home .home-afterword .subscription-row{padding-top:12px}
 html .home-afterword .sub-tout .tout-tail{font-size:20px}
 html .home-afterword .sub-box{gap:8px}
 html .subscription-meta{gap:4px 10px;justify-content:center}
 html .home-afterword .sub-topics{gap:7px 10px}
 html .home-afterword .sub-topics .tout-item{font-size:10px}
 html .home-afterword .subscription-feedback{font-size:10px;margin-left:auto}
 html #home .explore-link{bottom:8px;font-size:11px}
}
@media(max-width:360px){
 html #home .explore-link{bottom:3px}
 html #home.hero{min-height:598px;grid-template-rows:auto auto minmax(198px,1fr) auto;row-gap:7px;padding-top:12px}
 html #home .art-surface{min-height:110px}
 html #home .home-afterword{gap:7px;padding-top:9px}
 html #home .home-afterword .intro{font-size:12px;line-height:1.5}
 html #home .home-afterword .hello{display:inline;font-size:17px;margin:0 5px 0 0}
 html #home .home-afterword .intro br:first-of-type{display:none}
 html #home .home-afterword .subscription-row{padding-top:7px}
 html .home-afterword .sub-tout .tout-tail{font-size:19px}
 html .home-afterword .sub-box{gap:5px}
 html #home .art-controls{column-gap:5px}
 html #home .pluck-hint{order:2;flex-basis:100%}
 html #home .sound-toggle{order:1}
}