/* Version 1 integration: local component tokens and material treatment. */ #thoughts{--font:var(--sans);--text:var(--ink);--mint:#b4c9d6;--pink:#c3bcc9;--blue:#a4bcde;--panel:#10141b;width:min(1380px,calc(100% - 56px));margin:0 auto;padding:100px 0 72px;scroll-margin-top:90px;color:var(--ink);font-family:var(--sans);position:relative;z-index:1} #thoughts .mind-intro{padding:0 20px;margin-bottom:34px;align-items:end}#thoughts h2{font:500 clamp(32px,3.8vw,52px)/1.08 var(--display);letter-spacing:-2px;margin:0;color:#f7f4ee;text-transform:none}#thoughts h2 em{font-family:"Libre Bodoni",Georgia,serif;font-weight:400;color:#d7dbe2}#thoughts .mind-hint{color:#aab1bd;font:400 12px/1.7 var(--sans)} #thoughts .workspace-version{background:radial-gradient(ellipse at 50% 30%,#202630 0%,#11161e 52%,#090d13 100%);border-color:#ffffff24;border-radius:24px;box-shadow:inset 0 1px 0 #ffffff07,0 32px 90px #0003}#thoughts .workspace-version:before{opacity:.32}#thoughts .desk-orbit{border-color:#bac7d012}#thoughts .brain-sculpture{filter:saturate(.2) drop-shadow(0 0 20px #b1c5d722)}#thoughts [data-phase=chaos] .brain-sculpture{filter:saturate(.2) drop-shadow(0 0 calc(18px + var(--engage,0)*15px) #b1c5d733)}#thoughts .thought-cloud{background:linear-gradient(145deg,#dde0df,#abb5bc);border-color:#e9eded;color:#38434d;box-shadow:inset 0 -7px 18px #6774802b,0 10px 24px #0005}#thoughts .thought-cloud span{color:#54616d}#thoughts .brain-caption{color:#8995a1;font-size:clamp(12px,1.35cqw,19px)} #thoughts .notebook-cover{background:linear-gradient(100deg,#292d33,#535b65);box-shadow:3px 4px 0 #a5adb3,6px 7px 0 #20252b}#thoughts .sticky-note .prop-motion{background:linear-gradient(125deg,#d8cbb0,#bcb09a);color:#48443d}#thoughts .sticky-curl{background:linear-gradient(135deg,#7b706044 50%,#c6b99e 52%,#e3d7bd)}#thoughts .mini-sticky .prop-motion{background:linear-gradient(135deg,#b9c4d0,#8c9bab);color:#2e3a47}#thoughts .paper-page,#thoughts .pad-page{filter:saturate(.35)}#thoughts .index-card .prop-motion{filter:saturate(.3)} /* Titanium frame, dark glass, speaker island, volume keys and controlled reflections. */ #thoughts .phone{--prop-width:12.8cqw}#thoughts .device-edge{position:relative;padding:4px;border:1px solid #a9acb2;border-radius:28px;background:linear-gradient(110deg,#a5a8af,#292c32 6%,#717780 49%,#171b22 94%,#bdc1c8);box-shadow:2px 1px 0 #d1d4d8,5px 7px 0 #20242b,6px 8px 1px #737b85,0 0 0 1px #0a0d12} #thoughts .device-edge:before{content:'';position:absolute;left:-4px;top:24%;height:18%;width:3px;border-radius:2px;background:linear-gradient(90deg,#777e86,#222832);box-shadow:0 -25px 0 -1px #9a9fa5}#thoughts .device-edge:after{content:'';position:absolute;right:-4px;top:28%;width:3px;height:12%;background:#5c626d;border-radius:2px} #thoughts .phone-screen{border:3px solid #05080c;border-radius:24px;background:linear-gradient(160deg,#141c28,#090f19);padding:10px 7px;box-shadow:inset 0 0 0 1px #ffffff16} #thoughts .phone-screen:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(117deg,#fff0 38%,#fff06 40%,#fff0 57%,#ffffff05);z-index:4} #thoughts .phone-island{width:38%;left:31%;top:6px;height:12px;background:#030609;box-shadow:0 1px 0 #ffffff08}#thoughts .phone-island:after{content:'';position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#577793,#101b2c 45%,#030509 70%)} #thoughts .phone-bar{font-size:clamp(6px,.66cqw,9px);padding:0 2px}#thoughts .phone-status{display:flex;gap:4px;align-items:center}#thoughts .phone-status i{display:block;width:9px;height:6px;border-top:2px solid #d5dce5;border-radius:50%}#thoughts .phone-status b{width:11px;height:6px;border:1px solid #a7b4c4;border-radius:2px;background:linear-gradient(90deg,#d6dde6 70%,transparent 71%)}#thoughts .phone-chat{margin-top:22px}#thoughts .phone-chat>p{font:600 clamp(8px,.86cqw,12px)/1.4 var(--sans);letter-spacing:0;color:#eff1f5;border-bottom:1px solid #ffffff15;padding-bottom:10px;margin:0 0 14px}#thoughts .phone-content{gap:9px}#thoughts .phone-content span{font:400 clamp(7px,.78cqw,11px)/1.4 var(--sans);background:#252d38;border:1px solid #ffffff05;border-radius:11px 11px 11px 3px;padding:8px;color:#e7ebf0}#thoughts .phone-content span.outgoing{background:linear-gradient(135deg,#355f90,#254b78);color:#f3f6fc;border-radius:11px 11px 3px 11px}#thoughts .phone-home{height:3px;background:#e2e8ed99} /* Slim landscape tablet with a designed store preview behind reflective glass. */ #thoughts .tablet-edge{position:relative;padding:10px;border:1px solid #b0b5bc;border-radius:19px;background:linear-gradient(135deg,#7d8792,#161c24 12%,#28313c 83%,#89949f);box-shadow:2px 2px 0 #c3cad0,5px 7px 0 #252d37,6px 8px 1px #7b8794}#thoughts .tablet-camera{right:auto;left:50%;top:3px;width:4px;height:4px;background:radial-gradient(circle,#668198,#111924 50%);z-index:3}#thoughts .tablet-screen{position:relative;border:1px solid #02060a;border-radius:10px;background:#eff0eb;color:#29352f;box-shadow:0 0 0 2px #080d14}#thoughts .tablet-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#fff0 35%,#fff4 36%,#fff0 62%);z-index:4} #thoughts .tablet-toolbar{padding:7px 12px;background:#e3e7e0;border-color:#cbd2c9;font:600 clamp(6px,.65cqw,9px)/1.4 var(--sans);letter-spacing:1.4px}#thoughts .store-menu{font-style:normal;font-size:12px}#thoughts .tablet-board{padding:7% 7% 10%}#thoughts .wire-header{font:600 clamp(14px,1.8cqw,25px)/1.12 var(--sans);letter-spacing:-.7px;transform:none;color:#293b30}#thoughts .wire-products{gap:8px;margin-top:12px}#thoughts .wire-products>div{border:1px solid #ced7ca;background:#e2e8dc;border-radius:6px;padding:7px 4px 5px}#thoughts .wire-products span{font:500 clamp(6px,.65cqw,9px)/1.2 var(--sans);color:#344638}#thoughts .wire-products .food-bag{position:relative;display:block;width:28px;height:35px;margin:0 auto 5px;background:linear-gradient(100deg,#b4ab8e,#e3dbc1 25%,#c6bc9d 90%);border-radius:3px 3px 5px 5px;box-shadow:3px 3px 4px #43513d33;border-top:3px double #998f72;transform:rotate(-5deg)}#thoughts .food-bag:after{content:'G';display:grid;place-items:center;position:absolute;inset:7px 5px 5px;background:#4a6550;color:#e7e9d9;border-radius:50%;font:600 11px Georgia}#thoughts .wire-products .bag-two{transform:rotate(3deg);filter:saturate(.4)}#thoughts .wire-products .bag-three{transform:rotate(-2deg);filter:brightness(.9)}#thoughts .wire-button{font:500 clamp(7px,.8cqw,11px)/1.4 var(--sans);width:max-content;padding:5px 11px;border:0;background:#344d3c;color:#f1f1e6;border-radius:4px;margin:10px 0 0}#thoughts .tablet-board p{font:400 clamp(6px,.63cqw,9px)/1.3 var(--sans);color:#667060;margin-top:8px}#thoughts .tablet-doodle{font:400 clamp(8px,.9cqw,12px)/1.3 var(--sans);transform:none;color:#687461;bottom:10%;right:7%} /* A restrained primary action, with a clear label and one quiet direction cue. */ #thoughts .workspace-start button{border:1px solid #a7b9ce66;border-radius:15px;background:linear-gradient(145deg,#27394f,#142335 70%,#101c2a);color:#f0f3f7;box-shadow:inset 0 1px 0 #ffffff25,0 2px 0 #060d18,0 18px 38px #0006;gap:18px;padding:20px 24px;font:500 clamp(17px,1.85cqw,25px)/1.23 var(--sans);letter-spacing:-.5px;transition:box-shadow .25s,border-color .25s,background .25s}#thoughts .workspace-start button:after{content:none;display:none;font:400 24px/1 var(--sans);color:#a8bdd7;margin-left:7px}#thoughts .workspace-start button:hover{border-color:#b7cce0;background:linear-gradient(145deg,#304862,#192e46 70%,#142536);box-shadow:inset 0 1px 0 #ffffff33,0 2px 0 #060d18,0 22px 48px #0008}#thoughts .workspace-start button:focus-visible{outline:2px solid #c7d7ea;outline-offset:7px}#thoughts .ask-label{max-width:295px}#thoughts .mike-orb{width:50px;height:50px;flex-basis:50px;border-color:#8799aa66;background:radial-gradient(circle at 30% 20%,#405269,#131e2b 65%);box-shadow:inset 0 -4px 9px #0006,0 4px 12px #0004}#thoughts .orb-rings{border-color:#a0b1c044}#thoughts .workspace-start .click-me{color:#aeb8c5;font-size:31px;margin-top:36px}#thoughts .mind-root{background:radial-gradient(circle at 35% 20%,#303c4b,#111d2c 75%);border-color:#aabdd0;box-shadow:0 8px 0 #080e17,0 24px 40px #0006} #thoughts .quiet-button{border:0;background:none;color:#aeb9c6;font:400 12px var(--sans);padding:8px 0}#thoughts .button{border:1px solid #ffffff30;border-radius:8px;padding:13px 18px;font:500 13px var(--sans);color:#eef2f5;background:#172334}#thoughts .button.primary{background:#e6ebef;color:#142031;border-color:#e6ebef}#thoughts .fine{font:400 11px/1.6 var(--sans);color:#aab1bd}#thoughts .kit-question p{font-family:var(--sans)} html[data-motion=off] #thoughts *,html[data-motion=off] #thoughts *:before,html[data-motion=off] #thoughts *:after{animation:none!important;transition:none!important} @media(max-width:600px){#thoughts{width:calc(100% - 24px);padding-top:60px}#thoughts .mind-intro{padding:0 10px}#thoughts h2{font-size:34px;letter-spacing:-1.3px}#thoughts .workspace-version{border-radius:16px}#thoughts .phone{--prop-width:26cqw}#thoughts .device-edge{padding:3px;border-radius:19px}#thoughts .phone-screen{padding:7px 4px;border-width:2px;border-radius:16px}#thoughts .phone-island{height:7px;top:4px}#thoughts .phone-island:after{width:3px;height:3px;top:2px;right:3px}#thoughts .phone-bar{font-size:5px}#thoughts .phone-status{gap:2px}#thoughts .phone-status i{width:6px;height:4px}#thoughts .phone-status b{width:7px;height:4px}#thoughts .phone-chat{margin-top:12px}#thoughts .phone-chat>p{font-size:6px;padding-bottom:5px;margin-bottom:7px}#thoughts .phone-content{gap:5px}#thoughts .phone-content span{font-size:6px;padding:5px;border-radius:7px}#thoughts .tablet-edge{padding:8px;border-radius:14px}#thoughts .tablet-toolbar{font-size:5px;padding:5px 8px}#thoughts .wire-header{font-size:15px}#thoughts .wire-products{gap:5px;margin-top:8px}#thoughts .wire-products>div{padding:5px 3px}#thoughts .wire-products .food-bag{width:21px;height:27px}#thoughts .food-bag:after{inset:5px 4px 3px;font-size:8px}#thoughts .wire-products span{font-size:6px}#thoughts .wire-button{font-size:7px;padding:4px 7px;margin-top:7px}#thoughts .tablet-board p{font-size:5px}#thoughts .tablet-doodle{font-size:7px}#thoughts .workspace-start button{font-size:16px;padding:16px 13px;gap:10px;letter-spacing:-.3px}#thoughts .workspace-start button:after{font-size:18px;margin-left:0}#thoughts .mike-orb{width:34px;height:34px;flex-basis:34px}#thoughts .workspace-start .click-me{font-size:28px}} #thoughts .workspace-prop img{max-width:100%;height:auto} @media(max-width:360px){#thoughts{width:calc(100vw - 40px)}#thoughts .kit-question>div{flex-wrap:wrap}#thoughts .workspace-start button{font-size:15px;gap:8px;padding:15px 11px}#thoughts .workspace-start button:after{display:none}} /* One photographed sheet, with a fixed crop and transparent frame sequence. */ #thoughts .frame-paper{aspect-ratio:1;animation:none!important;position:relative;--unfold:0} #thoughts .paper-canvas{position:absolute;width:190%;height:auto;aspect-ratio:1.28;max-width:none;left:-45%;top:-24.22%;display:block;pointer-events:none} #thoughts .paper-fallback{display:none;padding:20px;background:#e7e1d2;color:#354039;font:24px/1 Caveat,cursive;box-shadow:3px 8px 15px #0006} #thoughts [data-paper=fallback] .paper-canvas{display:none}#thoughts [data-paper=fallback] .paper-fallback{display:block} /* A separate sharp foreground sheet lets the plan move out of focus behind it. */ #thoughts .paper-camera-background{position:absolute;inset:0;z-index:20;transform-origin:50% 48%;pointer-events:none} #thoughts .paper-ball{z-index:30;pointer-events:none} #thoughts [data-phase=arranging] .paper-camera-background{animation:paper-camera-drift var(--paper-sequence-time) linear both;will-change:transform,filter} #thoughts [data-phase=arranging] .paper-ball{animation:paper-depth var(--paper-sequence-time) linear both} #thoughts :is([data-phase=arranging],[data-phase=organized]) .paper-ball .prop-shell{transform:none} #thoughts [data-phase=arranging] .paper-ball .prop-motion{animation:paper-frame-gather var(--paper-sequence-time) linear both;will-change:transform} #thoughts [data-phase=organized] .paper-ball{z-index:10;visibility:hidden} #thoughts [data-phase=organized] .paper-ball .prop-motion{transform:translate3d(var(--fly-x),var(--kept-y),0) rotateX(30deg) rotateZ(-8deg) scale(.15);opacity:0} @keyframes paper-depth{0%,100%{z-index:30}} @keyframes paper-camera-drift{ 0%,28%{transform:scale(1);filter:blur(0)} 58%{transform:scale(1.12) translateY(-12px);filter:blur(3px)} 71%{transform:scale(1.19) translateY(-24px);filter:blur(4px)} 84%{transform:scale(1.14) translateY(-10px);filter:blur(.65px);animation-timing-function:cubic-bezier(.22,.61,.36,1)} 89%{transform:scale(1.06) translateY(-3px);filter:blur(0)} 100%{transform:scale(1);filter:blur(0)} } @keyframes paper-frame-gather{ 0%,28%{transform:translate3d(0,0,110px) rotateZ(-12deg);opacity:1;animation-timing-function:cubic-bezier(.16,1,.3,1)} 58%{transform:translate3d(var(--reveal-x),var(--reveal-y),80px) rotateZ(0deg) scale(var(--paper-zoom));opacity:1} 71%{transform:translate3d(calc(var(--reveal-x) + 5px),calc(var(--reveal-y) - 5px),90px) rotateZ(1deg) scale(calc(var(--paper-zoom) * 1.025))} 75%{transform:translate3d(var(--reveal-x),var(--reveal-y),75px) rotateX(5deg) scale(var(--paper-zoom));animation-timing-function:cubic-bezier(.35,0,.55,1)} 84%{transform:translate3d(var(--curve-x),var(--curve-y),60px) rotateX(22deg) rotateZ(17deg) scale(calc(var(--paper-zoom) * .62));animation-timing-function:cubic-bezier(.2,.45,.4,1)} 88%{transform:translate3d(var(--entry-x),var(--entry-y),30px) rotateX(35deg) rotateZ(5deg) scale(.58);opacity:1;animation-timing-function:cubic-bezier(.15,.5,.3,1)} 96%,100%{transform:translate3d(var(--fly-x),calc(var(--kept-y) - 35px),0) rotateX(55deg) rotateZ(-8deg) scale(.15);opacity:0} } /* A solid receiving capsule: fixed tree ports, recessed well, and a hinged lid. */ #thoughts .workspace-version .mind-root{box-sizing:border-box;padding:0;display:block;perspective:650px;transform-style:preserve-3d;transform:translate(-50%,-50%);border:0;background:none;box-shadow:none;transform-origin:center} #thoughts .workspace-version[data-phase=organized] .mind-root{transform:translate(-50%,-50%)} #thoughts .mind-well{position:absolute;inset:0;border-radius:50%;border:3px solid #91a6ba;background:radial-gradient(ellipse at 50% 60%,#263b4c,#050b13 68%);box-shadow:inset 0 4px 14px #000c,inset 0 0 0 8px #101e2b,0 4px 0 #677a8d,0 9px 0 #0c1723,0 12px 0 #36495a,0 22px 35px #0008} #thoughts .mind-hinge{position:absolute;width:30%;height:10px;left:35%;top:-2px;border-radius:6px;background:linear-gradient(#b4c4d1,#334a60 45%,#101e2b);box-shadow:0 2px 4px #0008;transform:translateZ(4px)} #thoughts .mind-lid{position:absolute;inset:0;border-radius:50%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 8px 0;gap:5px;border:2px solid #b3c5d5;background:radial-gradient(circle at 35% 20%,#354556,#132133 75%);box-shadow:inset 0 2px 2px #ffffff33,inset 0 -4px 7px #0005,0 3px 0 #7e91a3,0 7px 0 #132131,0 9px 0 #52697c,0 12px 16px #0007;transform-origin:50% 4%;transform:translateZ(12px);transform-style:preserve-3d;backface-visibility:visible} #thoughts .mind-lid:before{content:'';position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle,#223c4b,#09121e 75%);border:2px solid #536c82;transform:translateZ(-9px) rotateY(180deg);backface-visibility:hidden} #thoughts .mind-lid>img{width:64px;height:64px;transform:translateZ(1px)} #thoughts .mind-lid>span{font-size:20px;line-height:1.15;transform:translateY(-2px) translateZ(1px)} #thoughts [data-phase=organized] .mind-lid{transform:translateZ(calc(12px + var(--engage,0)*6px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} #thoughts [data-phase=arranging] .mind-root{animation:receiver-appear .3s .05s both} #thoughts [data-phase=arranging] .mind-lid{animation:receive-items 3.3s .15s both,receive-sheet 1.8s 5.4s forwards} @keyframes receive-items{0%{transform:translateZ(12px) rotateX(0deg)}16%,84%{transform:translateY(-8px) translateZ(18px) rotateX(72deg)}100%{transform:translateZ(12px) rotateX(0deg)}} @keyframes receiver-appear{from{opacity:0}to{opacity:1}} @keyframes receive-sheet{ 0%{transform:translateZ(12px) rotateX(0deg)} 28%,64%{transform:translateY(-8px) translateZ(18px) rotateX(72deg);box-shadow:inset 0 2px 2px #ffffff33,0 4px 0 #7e91a3,0 9px 0 #132131,0 13px 0 #52697c,0 36px 32px #0007} 100%{transform:translateZ(12px) rotateX(0deg)} } #thoughts .workspace-version:not([data-phase=chaos]) .thought.added{font-size:clamp(14px,1.4cqw,18px);max-width:280px;width:max-content;white-space:nowrap;font-weight:500;line-height:1.35;color:#d3dce7} @media(max-width:850px){#thoughts .workspace-version .mind-lid{padding-top:8px;gap:4px}#thoughts .mind-lid>img{width:50px;height:50px}#thoughts .mind-lid>span{font-size:17px}} @media(max-width:600px){#thoughts .mind-lid>img{width:42px;height:42px}#thoughts .mind-lid>span{font-size:14px}#thoughts .workspace-version:not([data-phase=chaos]) .thought.added{font-size:12px;max-width:210px}} @media(prefers-reduced-motion:reduce){#thoughts .paper-camera-background{animation:none!important;transform:none!important;filter:none!important}#thoughts .paper-ball,#thoughts .paper-ball .prop-motion{animation:none!important}} #thoughts .workspace-start button{padding:15px 19px;gap:14px;border-radius:13px;font-size:clamp(17px,1.6cqw,22px);box-shadow:inset 0 1px 0 #ffffff1c,0 9px 28px #0005;background:linear-gradient(145deg,#253346,#152131);letter-spacing:-.3px} #thoughts .workspace-start button:after{font-size:14px;width:14px;margin-left:2px;opacity:.7}#thoughts .ask-label{max-width:260px}#thoughts .mike-orb{width:39px;height:39px;flex-basis:39px}#thoughts .orb-rings{inset:-4px}#thoughts .orb-rings:after{inset:-3px} #thoughts [data-phase=chaos] .click-me{animation:invitation-pulse 2.3s ease-in-out infinite;transform-origin:50% 50%} @keyframes invitation-pulse{0%,100%{opacity:.62;transform:translateY(3px) rotate(-6deg) scale(.98);filter:drop-shadow(0 0 0 #dbe6f000)}45%,55%{opacity:1;transform:translateY(-4px) rotate(-3deg) scale(1.09);filter:drop-shadow(0 0 12px #dbe6f066)}} #thoughts [data-idle=paused] .click-me{animation-play-state:paused} @media(prefers-reduced-motion:reduce){#thoughts .click-me{animation:none!important;opacity:1}} @media(max-width:600px){#thoughts .workspace-start button{padding:14px 12px;gap:10px;font-size:15px}#thoughts .mike-orb{width:32px;height:32px;flex-basis:32px}#thoughts .workspace-start button:after{font-size:12px;width:12px;margin-left:0}} #thoughts .kit-question{padding-top:38px}#thoughts .kit-question>p:first-child{font-size:clamp(23px,2.7vw,34px);font-weight:500;line-height:1.2;letter-spacing:-1px;margin-bottom:14px}#thoughts .kit-question .fine{margin-top:16px} #thoughts [data-phase=chaos] .paper-ball .prop-motion{transform:translateY(calc(var(--engage,0)*-34px)) rotateX(calc(var(--engage,0)*-6deg)) rotateZ(calc(var(--engage,0)*8deg))} /* Preparation story and quiet links to the original research. */ @media(max-width:600px){#thoughts .research-links>span{flex-basis:100%}#thoughts .handoff-reason{line-height:1.7}#thoughts .handoff-next{font-size:14px}} #thoughts #research-dialog{width:min(560px,calc(100vw - 40px));max-height:80vh;overflow:auto;box-sizing:border-box;border:1px solid #ffffff30;border-radius:16px;padding:28px;color:#edf2f8;background:#10151e;box-shadow:0 30px 120px #000a;font:400 15px/1.7 var(--sans)}#thoughts #research-dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}#thoughts .research-top{display:flex;align-items:start;justify-content:space-between;gap:20px}#thoughts #research-title{font:500 23px/1.25 var(--sans);margin:0 0 20px}#thoughts #close-research{white-space:nowrap;padding-top:0}#thoughts #research-summary{margin:0 0 18px}#thoughts #research-limit{font-size:13px;color:#aab1bd;margin:0 0 22px}#thoughts #research-source{color:#c6d2e0;text-underline-offset:4px}#thoughts #research-dialog :focus-visible{outline:2px solid #c7d7ea;outline-offset:5px}#thoughts #research-dialog .fine{margin-bottom:0} /* Stable desk layers: whole objects slide and meet, while their pages still open. */ #thoughts [data-phase=chaos] .workspace-world, #thoughts [data-phase=chaos] .workspace-prop{transform-style:flat} #thoughts [data-phase=chaos] .prop-shell{transform:translate(var(--dx,0px),var(--dy,0px)) rotateZ(calc(var(--base,0deg) + var(--spin,0deg)));filter:drop-shadow(calc(5px + var(--shadow-x,0px)) 10px 9px #0007)} #thoughts [data-phase=chaos] .prop-idle{animation:none;transform:none} #thoughts [data-phase=chaos] .pencil .prop-motion{transform-origin:50% 50%;transform:rotateY(calc(var(--engage,0)*18deg))} /* One promise, two examples, optional supporting detail. */ #thoughts .kit-question{padding:46px 20px 20px} #thoughts .kit-question>p:first-child{max-width:760px;margin:0 auto 22px;font-size:clamp(28px,3.1vw,42px);line-height:1.16;letter-spacing:-1.2px} @media(max-width:600px){#thoughts .kit-question{padding:32px 8px 12px}#thoughts .kit-question>.handoff-copy{font-size:15px}#thoughts .handoff-actions{gap:10px}#thoughts .handoff-actions .button{padding:13px 17px}#thoughts .preparation-details{margin-top:22px}} /* The desk objects enter through the front gap and remain behind the lid. */ #thoughts [data-phase=arranging] .workspace-world{z-index:25} #thoughts [data-phase=arranging] .workspace-world .workspace-prop .prop-shell{transform:none} #thoughts [data-phase=arranging] .workspace-world .workspace-prop .prop-motion{animation:none} #thoughts .mind-well{z-index:0} #thoughts .mind-contents{position:absolute;inset:8px;border-radius:50%;overflow:hidden;z-index:2;box-shadow:inset 0 -9px 10px #02060ab3;pointer-events:none} #thoughts .mind-hinge{z-index:4} #thoughts .mind-lid{z-index:6} #thoughts .workspace-version .workspace-prop[data-stored]{visibility:visible!important;opacity:1!important;z-index:2;animation:none!important;transform:translate(-50%,-50%) scale(var(--stored-scale)) rotateZ(var(--stored-turn));transform-style:flat;pointer-events:none} #thoughts .workspace-prop[data-stored] :is(.prop-shell,.prop-idle,.prop-motion){animation:none!important;transform:none!important;opacity:1!important;filter:none!important} #thoughts .workspace-prop[data-stored] :is(.thought-cloud,.brain-sculpture,.phone-content,.notebook-leaf,.pad-page){animation:none!important;opacity:1!important} #thoughts .workspace-prop[data-stored] .brain-caption{display:none} #thoughts .workspace-prop[data-stored] .prop-motion{filter:drop-shadow(3px 6px 7px #0009)!important} /* Balance the example label around the button center, with the brand at its left. */ #thoughts .workspace-start button{display:grid;grid-template-columns:22px minmax(0,1fr) 22px;width:min(220px,72cqw);gap:6px;padding:9px;font-size:clamp(14px,1.3cqw,16px);text-align:center;color:#172131;background:linear-gradient(135deg,#e7bb52,#d5a23d);border-color:#f1d28a} #thoughts .workspace-start .mike-orb{width:22px;height:22px;flex-basis:22px} #thoughts .workspace-start .ask-label{grid-column:2;justify-self:center;max-width:none;text-align:center} #thoughts .workspace-start .click-me{font-size:clamp(27px,3.1cqw,38px);white-space:nowrap} #thoughts [data-phase=chaos] .workspace-start button{animation:example-button-glow 3.4s ease-in-out infinite} #thoughts [data-idle=paused] .workspace-start button{animation-play-state:paused} @keyframes example-button-glow{0%,100%{border-color:#f1d28a;box-shadow:inset 0 1px 0 #ffffff1c,0 9px 28px #0005}50%{border-color:#ffe5a8;box-shadow:inset 0 1px 0 #ffffff35,0 9px 28px #0005,0 0 22px #e7bb522b}} #thoughts .brain-caption{left:50%;top:91%;transform:translateX(-50%) rotate(-6deg);font-size:clamp(18px,2.2cqw,28px);color:#b9c3cf} @media(max-width:600px){#thoughts .workspace-start button{grid-template-columns:22px minmax(0,1fr) 22px;gap:6px;padding:9px;font-size:14px}#thoughts .workspace-start .mike-orb{width:22px;height:22px;flex-basis:22px}#thoughts .workspace-start .click-me{font-size:27px}#thoughts .brain-caption{font-size:21px}} @media(prefers-reduced-motion:reduce){#thoughts .workspace-start button{animation:none!important}} /* A small turned corner stays attached instead of scaling into a loose flap. */ #thoughts .sticky-note .prop-motion{clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%);border-radius:2px} #thoughts .sticky-note .sticky-curl{width:18%;height:18%;right:0;bottom:0;border-radius:0;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#e7dcc2 0%,#d2c5a7 48%,#948970 96%);transform-origin:0 0;transform:none;filter:drop-shadow(-2px -2px 2px #62583d30)} #thoughts .workspace-version[data-phase=chaos] .sticky-note .sticky-curl{transform:translateZ(calc(1px + var(--engage,0)*3px)) rotateX(calc(var(--engage,0)*-12deg)) rotateY(calc(var(--engage,0)*8deg));transform-origin:0 0} /* Size the pad from its real writing so the front sheet covers the back sheet. */ #thoughts .ring-pad .prop-motion{aspect-ratio:auto} #thoughts .ring-pad .pad-front{position:relative;inset:auto;min-height:100%;box-sizing:border-box} #thoughts .ring-pad .pad-page{padding:16% 10% 12%;overflow:hidden} #thoughts .ring-pad .pad-page strong{display:block;font-size:clamp(14px,1.9cqw,25px);line-height:1.12} #thoughts .ring-pad .pad-page p{font-size:clamp(11px,1.3cqw,17px);line-height:1.25;margin:9px 0} #thoughts .ring-pad .pad-page .pencil-loop{font-size:clamp(12px,1.5cqw,18px);line-height:1.15;padding:3px 7px;max-width:100%;box-sizing:border-box} @media(max-width:600px){#thoughts .ring-pad .pad-page strong{font-size:20px}#thoughts .ring-pad .pad-page p{font-size:14px}#thoughts .ring-pad .pad-page .pencil-loop{font-size:15px}} /* Let the intake settle before drawing the six branches one section at a time. */ #thoughts .workspace-version[data-phase=arranging] .mind-lines path{animation-duration:.45s} #thoughts .workspace-version[data-phase=arranging] .thought:not(.loose){animation-duration:.3s} #thoughts .mind-well:after{content:'';position:absolute;inset:-8px;border:2px solid #bed5e9;border-radius:50%;opacity:0;pointer-events:none} #thoughts .workspace-version[data-phase=arranging] .mind-well:after{animation:processing-ring .95s 2.65s both} @keyframes processing-ring{0%,100%{opacity:0;transform:scale(1)}35%{opacity:.65;transform:scale(1.05)}70%{opacity:.25;transform:scale(1.14)}} #thoughts .workspace-version[data-phase=arranging] .sequence-caption span:nth-child(1){animation:sequence-word 2.3s .5s both} #thoughts .workspace-version[data-phase=arranging] .sequence-caption span:nth-child(2){animation:sequence-word 2.5s 3.2s both} #thoughts .workspace-version[data-phase=arranging] .sequence-caption span:nth-child(3){animation:sequence-word 1.5s 5.7s both} /* Two physical faces turn together around the notebook binding. */ #thoughts .notebook-leaf{position:absolute;inset:0;transform-origin:6% 50%;transform-style:preserve-3d} #thoughts .notebook-leaf .paper-page{transform-origin:50% 50%;backface-visibility:hidden} #thoughts .notebook-leaf .leaf-front{transform:translateZ(.7px)} #thoughts .notebook-leaf .leaf-back{transform:rotateY(180deg) translateZ(.7px);background:repeating-linear-gradient(0deg,transparent 0,transparent 25px,#a8b8bb44 26px,transparent 27px),linear-gradient(90deg,#e5e1d3,#f6f2e5 16%,#f1ecdf 88%,#d3d0c6);box-shadow:inset -8px 0 12px #39455316,1px 2px 2px #0005} /* An actual long tablet document, clipped by the glass screen. */ #thoughts .tablet-screen{position:absolute;inset:10px;height:auto} #thoughts .tablet-toolbar{position:absolute;inset:0 0 auto;z-index:2} #thoughts .tablet-viewport{position:absolute;inset:27px 0 0;overflow:hidden} #thoughts .workspace-version[data-phase=chaos] .tablet-board{transform:none} #thoughts .tablet-board{height:auto;min-height:100%;padding-bottom:6%} #thoughts .tablet-doodle{position:static;display:block;margin-top:12px} #thoughts .tablet-notes{margin-top:18px;display:grid;gap:13px} #thoughts .tablet-note-sheet{padding:12px;background:repeating-linear-gradient(0deg,#f7f4ea 0,#f7f4ea 20px,#a9b6b82b 21px);border:1px solid #b6bfb555;border-radius:3px;box-shadow:2px 3px 0 #a7afa433;transform:rotate(-1deg)} #thoughts .tablet-note-sheet:nth-child(even){transform:rotate(1.5deg)} #thoughts .tablet-note-sheet small{font-size:clamp(5px,.6cqw,8px);letter-spacing:1px;color:#6b756b} #thoughts .tablet-note-sheet p,#thoughts .tablet-note-sheet .tablet-scribble{font:500 clamp(12px,1.35cqw,19px)/1.25 Caveat,cursive;color:#42554b;margin:8px 0} #thoughts .tablet-dog-sketch{width:100%;height:auto;color:#586d5f;display:block;margin:8px 0} #thoughts .tablet-image-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px} #thoughts .tablet-image-pair>div{padding:4px;background:#fff;box-shadow:1px 2px 3px #4b665024;transform:rotate(-3deg)} #thoughts .tablet-image-pair>div:nth-child(2){transform:rotate(3deg)} #thoughts .tablet-image-pair svg{width:100%;display:block} #thoughts .tablet-image-pair span{font:500 clamp(8px,.9cqw,12px)/1.2 Caveat,cursive;display:block;text-align:center;color:#536356;margin-top:3px} #thoughts .tablet-flow{display:flex;align-items:center;justify-content:space-between;gap:3px;margin:14px 0} #thoughts .tablet-flow span{padding:6px;border:1px solid #839889;border-radius:3px;font:500 clamp(7px,.8cqw,11px)/1.2 var(--sans);color:#365444} #thoughts .tablet-flow i{font:16px Caveat,cursive;color:#648071} #thoughts .tablet-doodle-lines{width:100%;height:20px;color:#a48367} #thoughts .workspace-version[data-phase=arranging] .tablet-board{animation:tablet-content-scan 3s linear both} @keyframes tablet-content-scan{from{transform:translateY(0)}to{transform:translateY(var(--tablet-scroll,0px))}} @media(max-width:600px){#thoughts .tablet-screen{inset:8px}#thoughts .tablet-viewport{top:20px}#thoughts .tablet-note-sheet{padding:8px}} #thoughts .workspace-start button:hover{background:linear-gradient(135deg,#efc45d,#dfae47)} /* Grow the ripple's dimensions without scaling its position or stroke. */ #thoughts .workspace-sweep{left:50%;top:50%;scale:1;border-color:#b9d2dd;border-width:1px;box-sizing:border-box;z-index:0} #thoughts .workspace-version[data-phase=arranging] .workspace-sweep{animation:centered-organizing-wave 3.5s .5s both} @keyframes centered-organizing-wave{0%{width:70px;height:70px;opacity:0}20%{opacity:.18}100%{width:min(110cqw,1000px);height:min(110cqw,1000px);opacity:0}} #thoughts .desk-orbit{pointer-events:none;z-index:0} @media(max-width:600px){#thoughts .workspace-sweep{top:7%}} /* The three benefits introduce the organized plan above its central hub. */ #thoughts .workspace-version:not([data-phase=chaos]) .thought.added{font-size:clamp(18px,1.7cqw,22px);max-width:350px} @media(max-width:600px){#thoughts .workspace-version .mind-root{top:18%}#thoughts .workspace-sweep{top:18%}#thoughts .workspace-version:not([data-phase=chaos]) .thought.added{font-size:15px;max-width:calc(100% - 24px)}} /* A phone-sized desk: three focal objects, one action, then a readable plan. */ @media(max-width:600px){ #thoughts{width:calc(100% - 24px)} #thoughts .mind-intro{padding:0 4px;display:block} #thoughts .mind-hint{font-size:13px;max-width:290px;margin-top:16px} #thoughts .workspace-version{height:clamp(960px,200vw,1200px);perspective:1100px} #thoughts .workspace-world>.notebook{left:25%;top:36%;--prop-width:43cqw;--base:-8deg} #thoughts .workspace-world>.brain-object{left:50%;top:15%;--prop-width:55cqw;--base:0deg} #thoughts .thought-cloud{font-size:17px} #thoughts .cloud-left{left:-17%;top:6%;width:58%} #thoughts .cloud-right{left:66%;top:8%;width:58%} #thoughts .brain-caption{font-size:19px;white-space:nowrap;top:92%} #thoughts .workspace-world>.phone{left:77%;top:34%;--prop-width:32cqw;--base:8deg} #thoughts .phone-screen{aspect-ratio:1/2;padding:9px 6px} #thoughts .phone-bar{font-size:7px} #thoughts .phone-chat{margin-top:17px} #thoughts .phone-chat>p{font-size:9px;margin-bottom:9px} #thoughts .phone-content span{font-size:9px;padding:7px;line-height:1.3} #thoughts .paper-page strong{font-size:20px;line-height:1.05;margin:7px 0} #thoughts .paper-page p{font-size:14px;line-height:1.12;margin:5px 0} #thoughts .paper-page small{font-size:8px;letter-spacing:1px} #thoughts .paper-page .pencil-arrow{font-size:14px} #thoughts .notebook .sketch-wireframe,#thoughts .notebook .pencil-arrow{display:none} #thoughts .notebook .paper-page{padding:9% 7% 7% 14%;overflow:hidden} #thoughts .workspace-start{top:56%;width:calc(100% - 32px);max-width:none;transform:translate(-50%,-50%)} #thoughts .workspace-start button{width:min(248px,100%);min-height:58px;margin:0 auto;font-size:16px;padding:11px;border-radius:14px} #thoughts .workspace-start .click-me{font-size:25px;margin-top:19px} #thoughts .click-me svg{width:40px;height:40px} #thoughts .workspace-world>.tablet{left:62%;top:79%;--prop-width:63cqw;--base:-7deg} #thoughts .tablet-toolbar{font-size:7px;letter-spacing:1px} #thoughts .wire-header{font-size:21px} #thoughts .wire-products span{font-size:9px} #thoughts .wire-products .food-bag{width:25px;height:32px} #thoughts .wire-button{font-size:10px} #thoughts .tablet-board p{font-size:9px} #thoughts .paper-ball:not([data-stored]){left:19%;top:81%;--prop-width:20cqw} /* Retain measurable homes and original intake ownership for the quieter props. */ #thoughts .workspace-world>:is(.index-card,.mini-sticky,.receipt-note,.pencil,.ring-pad,.crinkled-note,.sticky-note){display:block;visibility:hidden;pointer-events:none} #thoughts .workspace-version .mind-root{top:19%;width:128px;height:128px} #thoughts .workspace-version .mind-lid{padding-top:9px} #thoughts .mind-lid>img{width:46px;height:46px} #thoughts .mind-lid>span{font-size:15px} #thoughts .workspace-version:not([data-phase=chaos]) .thought.topic{box-sizing:border-box;width:44%;max-width:none;min-width:0;font-size:15px;line-height:1.25;padding:12px 5px;border-radius:10px} #thoughts .workspace-version:not([data-phase=chaos]) .thought.subtopic{box-sizing:border-box;width:44%;max-width:none;font-size:14px;line-height:1.35;padding:4px 8px;text-align:left} #thoughts .workspace-version[data-phase=organized] .thought.topic:after{height:164px;border-radius:0 0 10px 10px} #thoughts .workspace-version:not([data-phase=chaos]) .thought.added{font-size:16px} #thoughts .workspace-sweep{top:19%} #thoughts .mind-lines{stroke-width:1.2;filter:none;opacity:.55} #thoughts .mind-corner{font-size:9px;bottom:12px} #thoughts .mind-actions #mind-status{font-size:12px;line-height:1.5} #thoughts .handoff-actions{flex-direction:column;align-items:stretch;max-width:300px;margin:auto} #thoughts .handoff-actions .button{justify-content:center;min-height:48px;font-size:15px} } @media(max-width:360px){ #thoughts .workspace-version:not([data-phase=chaos]) .thought.topic{font-size:14px} #thoughts .workspace-version:not([data-phase=chaos]) .thought.subtopic{font-size:13px} #thoughts .phone-content span{font-size:8px} } /* A closed capsule has one label, a real brand mark, and no exposed contents. */ #thoughts .mind-root[data-receiver-closed=true] .mind-hinge{visibility:hidden} #thoughts .mind-contents[hidden]{display:none!important} #thoughts .workspace-version .mind-lid{justify-content:center;padding:12px 18px;gap:8px} #thoughts .mind-lid>img{display:block;flex:0 0 auto;width:72px;height:32px;object-fit:contain} #thoughts .mind-lid>.mind-label{display:block;flex:0 0 auto;font-size:20px;line-height:1.15;transform:translateZ(1px);max-width:100%;text-align:center} #thoughts .scene-caption{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-4deg);z-index:22;pointer-events:none;font-size:clamp(18px,2.2cqw,28px)} #thoughts .workspace-version:not([data-phase=chaos]) .scene-caption{visibility:hidden} #thoughts .workspace-version .tablet-board{transform:none!important;animation:none!important} #thoughts .tablet-viewport{overscroll-behavior:contain;scroll-behavior:auto} @media(max-width:850px){#thoughts .mind-lid>img{width:60px;height:27px}#thoughts .mind-lid>.mind-label{font-size:17px}} @media(max-width:600px){ #thoughts .workspace-version .mind-root{top:21%} #thoughts .workspace-sweep{top:21%} #thoughts .workspace-version .mind-lid{padding:9px 12px;gap:6px} #thoughts .mind-lid>img{width:52px;height:24px} #thoughts .mind-lid>.mind-label{font-size:15px} #thoughts .scene-caption{top:26%;font-size:19px} }