.study-invitation{border-top:1px solid var(--line);display:flex;align-items:center;gap:30px;padding:25px 0 33px}.invitation-line{width:110px;color:#837666}.invitation-line svg{display:block;width:100%}.study-invitation .eyebrow{font-size:9px;color:var(--muted);letter-spacing:.1em}.invitation-title{font:25px/1.2 var(--serif);letter-spacing:-.02em;margin:8px 0 0}.open-study{margin-left:auto;font-size:11px;display:flex;align-items:center;gap:30px;min-height:44px;border-bottom:1px solid var(--line);padding-inline:0}.open-study span{font-size:19px;font-weight:300}.open-study:hover{border-color:var(--ink)}
.gesture-studio{border:1px solid #d8d1c3;background:#f7f4ed;color:var(--ink);padding:0;width:min(1200px,96vw);max-width:96vw;max-height:94dvh;box-shadow:0 28px 100px #18150f33;overflow:auto;overscroll-behavior:contain}.gesture-studio::backdrop{background:#29251fbf;backdrop-filter:blur(8px)}.studio-shell{padding:27px 40px 24px}.studio-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px}.studio-wordmark{font-size:16px;letter-spacing:.24em}.studio-wordmark>span{font-size:9px;letter-spacing:.1em;color:var(--muted);margin-left:15px}.studio-top form{margin:0}.studio-close{display:flex;gap:20px;align-items:center;font-size:11px;min-height:44px}.studio-close>span{font:28px/1 var(--serif)}.studio-intro{position:relative;padding:27px 0 25px}.studio-intro .eyebrow{font-size:9px;letter-spacing:.12em;color:var(--muted)}.studio-intro h2{font:normal 57px/.98 var(--serif);letter-spacing:-.04em;margin:14px 0 0}.studio-intro>p:last-child{position:absolute;bottom:25px;right:0;color:var(--muted);font-size:12px;line-height:1.6;max-width:220px;margin:0}.studio-workspace{display:grid;grid-template-columns:.7fr 1fr;gap:32px}.gesture-source,.gesture-response{min-width:0}.study-label,.study-modes{height:45px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}.study-label h3{font-size:11px;font-weight:400;margin:0}.study-label>span{font-size:9px;color:var(--muted)}.gesture-pad{position:relative;height:290px;background:#eeeadf;touch-action:none;cursor:crosshair;overflow:hidden;border:1px solid #e1dbce;background-image:radial-gradient(#bcb4a666 .65px,transparent .65px);background-size:16px 16px}.gesture-pad>svg{height:100%;width:100%;overflow:visible}.gesture-pad path{fill:none;stroke:#5e5349;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.pad-hint{position:absolute;bottom:14px;left:16px;font-size:10px;color:var(--muted);pointer-events:none;transition:opacity .2s}.is-drawing .pad-hint{opacity:0}.source-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}.source-tools>button{font-size:10px;min-height:40px;text-decoration:underline;text-underline-offset:4px;padding:0}.source-tools>span{font-size:9px;color:var(--muted)}.study-modes{justify-content:flex-start;gap:22px}.study-modes button{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);height:100%;padding:0;position:relative}.study-modes button>span{font:14px/1 var(--serif)}.study-modes button[aria-pressed=true]{color:var(--ink)}.study-modes button[aria-pressed=true]:after{content:'';height:1px;background:var(--ink);position:absolute;left:0;right:0;bottom:0}.response-art{height:290px;position:relative;border:1px solid #e6e0d5;background:#f2eee5;overflow:hidden}.response-art>svg{width:100%;height:100%}.study-stamp{position:absolute;right:15px;bottom:14px;font-size:9px;letter-spacing:.15em;color:#8a8173}.response-caption{display:flex;align-items:baseline;justify-content:space-between;gap:15px;padding-top:13px}.response-caption p{font:17px/1.3 var(--serif);letter-spacing:-.02em;margin:0}.response-caption a{font-size:9px;display:inline-flex;gap:9px;align-items:center;min-height:24px;white-space:nowrap}.response-caption .arrow-icon{width:11px;height:11px}.studio-controls{display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-top:23px}.variation-control{display:flex;align-items:center;gap:15px}.variation-control label{font-size:10px}.variation-control input{accent-color:#857260;width:120px;min-height:32px;cursor:ew-resize}.variation-control output{font-size:9px;min-width:22px;color:var(--muted);font-variant-numeric:tabular-nums}.study-actions{display:flex;align-items:center;gap:25px}.study-actions button{font-size:11px;min-height:40px;padding:0}.study-actions button:last-child{border-bottom:1px solid #877968}.study-actions button>span{margin-left:18px}.studio-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:16px}.studio-bottom p{font-size:9px;line-height:1.7;color:var(--muted);margin:0}.studio-bottom p>span{color:#898174}.note-playing .tone-dot{fill:#b88733;stroke:#b8873333;stroke-width:15}
@media(min-width:1400px){.gesture-pad,.response-art{height:330px}}
@media(max-width:760px){.study-invitation{gap:17px;padding:25px 0 30px;flex-wrap:wrap}.invitation-line{width:55px}.study-invitation>div:nth-child(2){flex:1}.invitation-title{font-size:23px}.open-study{margin-left:72px;min-height:34px;margin-top:-4px}.gesture-studio{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0}.studio-shell{padding:15px 20px 26px}.studio-wordmark{font-size:14px;letter-spacing:.15em}.studio-wordmark>span{display:none}.studio-top{padding-bottom:10px}.studio-close{font-size:10px;gap:12px}.studio-intro{padding:23px 0 21px}.studio-intro h2{font-size:47px}.studio-intro>p:last-child{position:static;font-size:11px;max-width:none;margin-top:17px}.studio-workspace{grid-template-columns:1fr;gap:18px}.gesture-pad{height:180px}.gesture-pad>svg{position:absolute;inset:0}.response-art{height:235px}.study-label,.study-modes{height:42px}.study-modes{justify-content:space-between;gap:15px}.study-modes button{font-size:11px}.response-caption{gap:10px;padding-top:9px}.response-caption p{font-size:16px;max-width:180px}.response-caption a{font-size:9px}.studio-controls{flex-direction:column;align-items:stretch;gap:7px;margin-top:20px;padding:10px 0 17px}.variation-control{gap:12px}.variation-control input{flex:1;width:auto;min-width:60px}.study-actions{justify-content:flex-end}.studio-bottom{flex-direction:column;gap:8px}.studio-bottom p{font-size:10px}.source-tools>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.gesture-studio::backdrop{backdrop-filter:none}.gesture-studio *{transition:none!important}}
.studio-top{position:sticky;top:0;z-index:2;background:var(--paper)}
.variation-control input{appearance:none;-webkit-appearance:none;background:transparent;height:32px;border:0;padding:0}
.variation-control input::-webkit-slider-runnable-track{height:1px;background:#b8ac98}
.variation-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-5.5px;border-radius:50%;background:#857260;border:1px solid var(--paper)}
.variation-control input::-moz-range-track{height:1px;background:#b8ac98}
.variation-control input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#857260;border:1px solid var(--paper)}
.variation-control input:focus-visible{outline:2px solid #846018;outline-offset:4px}
@media(min-width:761px) and (max-height:800px){.studio-shell{padding:18px 32px}.studio-top{padding-bottom:10px}.studio-intro{padding:18px 0}.studio-intro h2{font-size:44px}.studio-intro>p:last-child{bottom:18px}.gesture-pad,.response-art{height:220px}.studio-controls{margin-top:15px;padding:8px 0}.studio-bottom{padding-top:10px}}