/* Sandatelier — a quiet canvas, fine lines, and a compact tool shelf. */
.studio-v10{--bg:#101719;--panel:#172225;--text:#eef3ef;--muted:#abb9b7;--accent:#d5ee9a;--line:#dcebe424;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.studio-v10 #app{height:var(--atelier-height,100dvh);width:100%;min-width:0;overflow:hidden}
.studio-v10 button,.studio-v10 a,.studio-v10 label{touch-action:manipulation}
.studio-v10 button{border-radius:8px;font-weight:450}
.studio-v10 svg{width:20px;height:20px;flex:none}
.studio-v10 .topbar{min-height:54px;gap:12px;padding:5px 20px;background:#101719;border-bottom:1px solid var(--line)}
.studio-v10 .brand{min-width:0;flex:1}.studio-v10 .brand h1{font-size:20px;line-height:1.2;font-weight:580;letter-spacing:-.7px;white-space:nowrap}
.studio-v10 .brandmark,.studio-v10 .brand small,.studio-v10 .eyebrow,.studio-v10 .stage-label,.studio-v10 .history-bar,.studio-v10 .studio-footer{display:none}
.studio-v10 .top-actions{flex:none;gap:5px}.studio-v10 .top-actions button{height:42px;min-height:42px;min-width:42px;padding:9px;display:inline-flex;align-items:center;justify-content:center;border-color:transparent;background:transparent}
.studio-v10 .top-actions button:hover{background:#ffffff09;border-color:var(--line)}
.studio-v10 .top-actions #exportTop{font-size:14px;gap:7px;padding:8px 15px;background:var(--accent);color:#202817;border:0;border-radius:8px}
.studio-v10 .public-toolbar{min-height:32px;gap:10px;padding:0 20px;background:#101719;border-bottom:1px solid #ffffff0a}
.studio-v10 .public-links{gap:15px;flex:none}.studio-v10 .public-links a{border:0;background:transparent;padding:0;min-height:32px;font-size:12px;line-height:1.2;flex:none}
.studio-v10 .public-links .coffee-link{color:#d5ee9a}.studio-v10 .public-links a:hover{text-decoration:underline;text-underline-offset:3px}
.studio-v10 .language-switch{gap:0}.studio-v10 .language-switch button{min-width:32px;min-height:30px;padding:3px 6px;border:0;font-size:12px;color:var(--muted);border-radius:5px}
.studio-v10 .language-switch button[aria-pressed=true]{color:var(--text);background:#ffffff0b}
.studio-v10 .public-toolbar .full-label{display:none}.studio-v10 .public-toolbar .compact-label{display:inline}
.studio-v10 .workspace{position:relative;display:block;flex:1;min-height:0;min-width:0;width:100%;isolation:isolate;--tools-height:56px}
.studio-v10 .studio{position:absolute;inset:0;overflow:hidden;min-height:0;background:radial-gradient(ellipse at 45% 46%,#263638 0,#142124 60%,#101a1c 100%)}
.studio-v10 .studio-head{position:absolute;top:12px;left:22px;right:350px;padding:0;gap:12px;z-index:1;pointer-events:none;min-width:0}
.studio-v10 .studio-head>div{min-width:0}.studio-v10 .art-name{font-family:inherit;font-size:13px;font-weight:400;line-height:1.3;letter-spacing:0;margin:0;color:#bdcac7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-v10 .quality-badge{border:0;padding:0;font-size:11px;white-space:nowrap;color:#8faaa4}
.studio-v10 .stage{position:absolute;inset:32px 190px 64px 0;min-height:0;max-height:none;width:auto;height:auto}
.studio-v10 .stage canvas{filter:drop-shadow(0 14px 18px #0005)}
.studio-v10 .inspector{position:absolute;z-index:6;right:16px;top:16px;bottom:auto;width:310px;height:auto;min-height:0;max-height:calc(100% - 32px);display:flex;flex-direction:column;overflow:hidden;background:#152326b8;border:1px solid #daeae52b;border-radius:12px;box-shadow:0 12px 40px #0002;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.studio-v10 .tools-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;height:38px;flex:none;border:0;border-radius:0;padding:0 14px;color:#c8d4d0;font-size:12px;font-weight:500;touch-action:none}
#toolsChevron{display:flex}#toolsChevron svg{width:16px;height:16px}
.studio-v10:not(.tools-expanded) .tools-toggle,.studio-v10:not(.tools-expanded) .style-toolbar,.studio-v10:not(.tools-expanded) .inspector .tab-panel{display:none}
.studio-v10 .style-toolbar{display:flex;align-items:center;gap:8px;padding:0 12px 10px;flex:none;min-width:0;border-bottom:1px solid var(--line)}
.studio-v10 .style-select{flex:1;min-width:0}.studio-v10 .style-select select{margin:0;width:100%;min-width:0;height:36px;min-height:36px;padding:5px 27px 5px 10px;border:1px solid #dcebe421;background:#0f1a1c60;font-size:13px;border-radius:6px}
.studio-v10 #manageStyles{width:36px;min-width:36px;min-height:36px;height:36px;padding:2px;border:1px solid #dcebe421;font-size:23px;font-weight:300;border-radius:6px;background:transparent}
.studio-v10 .tabs{order:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:none;gap:0;position:static;border:0;border-top:1px solid var(--line);padding:0 5px;background:#1220237a}
.studio-v10 .tabs button{position:relative;min-width:0;min-height:50px;margin:0;padding:8px 2px;border:0;font-size:14px;line-height:1.2;white-space:nowrap;letter-spacing:-.1px;background:transparent;color:#b6c5c0;border-radius:0}
.studio-v10 .tabs button[aria-selected=true]{background:transparent;color:var(--accent)}
.studio-v10 .tabs button[aria-selected=true]:after{position:absolute;bottom:7px;left:calc(50% - 8px);width:16px;height:1px;content:'';background:var(--accent)}
.studio-v10 .tab-panel{order:2;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#869e9640 transparent;padding:2px 18px 16px;scroll-padding-block:12px}
.studio-v10 .inspector label.control{display:block;margin:0;padding:16px 0 12px;border-bottom:1px solid #dcebe412;touch-action:pan-y}
.studio-v10 .control-head{font-size:14px;line-height:1.4;gap:8px}.studio-v10 .control-head output{font-size:13px;font-variant-numeric:tabular-nums;font-family:inherit;color:var(--accent)}
.studio-v10 input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:36px;margin:5px 0 0;background:transparent;touch-action:pan-y;cursor:ew-resize;outline-offset:0}
.studio-v10 input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:#91a9a370}
.studio-v10 input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:#91a9a370}
.studio-v10 input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:#dbe9cf;border:3px solid #24382d;box-shadow:0 0 0 1px #d7e8cda6}
.studio-v10 input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#dbe9cf;border:3px solid #24382d;box-shadow:0 0 0 1px #d7e8cda6}
.studio-v10 input[type=range].touch-adjusting::-webkit-slider-thumb{background:var(--accent);box-shadow:0 0 0 5px #d5ee9a20}
.studio-v10 .inspector select,.studio-v10 .inspector input[type=text]{background:#0e1c1f80;border:1px solid #cbdcd633;color:var(--text);border-radius:6px;min-height:42px;max-width:100%}
.studio-v10 .inspector input[type=text]{font-size:16px;padding:10px}
.studio-v10 .inspector .checkbox{margin:14px 0;min-height:30px;touch-action:pan-y}
.studio-v10 .inspector button:not([role=tab]):not(.tools-toggle):not(#manageStyles){min-height:42px;font-size:14px;background:#12202450;border-color:#dcebe42b}
.studio-v10 .inspector button[aria-pressed=true]{background:#d5ee9a13!important;border-color:#d5ee9a60!important;color:var(--accent)}
.studio-v10 .inspector details{margin:4px 0;padding-bottom:12px;border-color:#dcebe418}.studio-v10 .inspector summary{font-size:13px;padding:16px 0 7px}
.studio-v10 .micro{font-size:12px;line-height:1.5}.studio-v10 .palette-grid{gap:8px;margin-top:12px}.studio-v10 .palette-card{padding:10px 8px}
.studio-v10 .grain-upload{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}.studio-v10 #uploadGrain{flex:1;width:auto}.studio-v10 #grainInfo{width:100%}
#grainPreview{width:56px;height:56px;object-fit:contain;border-radius:6px;background:#0b1517;margin-top:10px}
.studio-v10 .canvas-dock{position:absolute;z-index:3;left:calc((100% - 190px)/2);bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:3px;max-width:calc(100% - 20px);padding:4px;border:1px solid #daeae529;background:#14212470;border-radius:10px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.studio-v10 .canvas-dock button{width:36px;height:36px;min-width:36px;min-height:36px;padding:7px;border:0;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#cbd9d1;background:transparent}
.studio-v10 .canvas-dock #play{color:var(--accent);background:#d5ee9a0d}.studio-v10 .canvas-dock #play span{display:none}.studio-v10 .canvas-dock button:hover{background:#ffffff0b}
.studio-v10 .frame-quick{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;min-height:36px;margin:0;border-radius:6px;color:#82958e;cursor:pointer}
.studio-v10 .frame-quick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.studio-v10 .frame-quick:has(input:checked){color:var(--accent);background:#d5ee9a0d}.studio-v10 .frame-quick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.studio-v10 .touch-hint{position:absolute;left:0;right:190px;bottom:65px;display:block;margin:0;padding:0;text-align:center;font-size:12px;color:#a1b5ad;pointer-events:none;transition:opacity .2s}
.studio-v10.hints-dismissed .touch-hint{opacity:0}
.studio-v10 dialog{background:#142125f7;border:1px solid #dcebe438;border-radius:12px;padding:22px;box-shadow:0 24px 90px #0006;max-height:85dvh}
.studio-v10 dialog h2{font-family:inherit;font-size:21px;font-weight:500;letter-spacing:-.4px}.studio-v10 dialog .close-row>button{width:36px;min-height:36px;height:36px;padding:0;font-size:22px;border:0}
.studio-v10 dialog::backdrop{background:#04101480;backdrop-filter:blur(4px)}
.studio-v10 .atelier-menu{width:min(340px,calc(100% - 24px));margin:66px 12px auto auto}.atelier-actions{display:grid;gap:8px}.atelier-actions button{display:flex;align-items:center;gap:10px;width:100%;font-size:14px;min-height:44px;padding:10px 12px;text-align:left}
.studio-v10 .screen-note{display:block;margin:18px 0 0;padding:14px 0 0;background:transparent;border:0;border-top:1px solid var(--line);font-size:12px;line-height:1.5}.studio-v10 .screen-note .full-label{display:inline}.studio-v10 .screen-note .compact-label{display:none}
.studio-v10 .studio-export{width:min(640px,calc(100% - 24px));max-height:90dvh}.studio-v10 dialog .tab-panel{overflow:visible;padding:0}.studio-v10 .export-note{font-size:13px}
.detail-export{padding:0 0 20px;border-bottom:1px solid var(--line)}.detail-export h3{font-size:17px;font-weight:500;margin:10px 0}.detail-export button{margin:6px 6px 0 0}
.detail-selection{position:absolute;top:8px;left:10px;right:10px;z-index:9;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;border:1px solid var(--line);border-radius:8px;background:#112126e8;padding:10px;font-size:13px}
.studio-v10.selecting-detail .inspector,.studio-v10.selecting-detail .studio-head{display:none}.studio-v10.selecting-detail .stage{inset:95px 0 65px}.studio-v10.selecting-detail .canvas-dock{left:50%;bottom:10px}
#styleName{display:block;width:100%;padding:10px;background:#0d191c;color:var(--text);border:1px solid var(--line);border-radius:6px;min-height:44px;font-size:16px}
.style-card{border-top:1px solid var(--line);padding:14px 0;margin-top:12px}.style-card strong{display:block;overflow-wrap:anywhere;margin-bottom:9px}.style-card button{margin-right:6px;font-size:14px}
.studio-v10.work-focus .topbar,.studio-v10.work-focus .public-toolbar,.studio-v10.work-focus .inspector,.studio-v10.work-focus .studio-head{display:none}.studio-v10.work-focus .stage{inset:0 0 64px}.studio-v10.work-focus .canvas-dock{left:50%;bottom:10px}
.studio-v10 .toast{z-index:50;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(440px,calc(100% - 24px));bottom:max(14px,env(safe-area-inset-bottom));padding:8px 11px;pointer-events:auto;font-size:13px;line-height:1.4;color:#dce6e0;background:#152326f2;border:1px solid #dcebe42b;border-radius:8px;box-shadow:0 4px 14px #0003;cursor:pointer}.studio-v10 #toastText{min-width:0;overflow-wrap:anywhere}.studio-v10 #closeToast{flex:none;width:24px;min-width:24px;min-height:24px;height:24px;padding:0;border:0;border-radius:4px;font-size:18px;line-height:1;color:#abb9b7;background:transparent}.studio-v10 [hidden]{display:none!important}
.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}
@media(max-width:900px),(max-height:520px) and (pointer:coarse){
 .studio-v10 .topbar{min-height:50px;padding:3px 10px;gap:6px}.studio-v10 .brand h1{font-size:17px;letter-spacing:-.6px}.studio-v10 .top-actions{gap:0}.studio-v10 .top-actions button{min-width:38px;width:38px;padding:8px}.studio-v10 .top-actions #exportTop{width:auto;min-width:66px;padding:8px 10px;font-size:13px}.studio-v10 #exportTop svg{display:none}
 .studio-v10 .public-toolbar{min-height:30px;padding:0 13px}.studio-v10 .public-links{gap:14px;flex:none}.studio-v10 .public-links a{font-size:12px;min-height:30px}.studio-v10 .language-switch button{font-size:12px;min-height:30px;min-width:30px}
 .studio-v10 .workspace{flex-basis:0;min-height:0}.studio-v10 .studio-head{left:14px;right:14px;top:10px}.studio-v10 .art-name{font-size:12px;max-width:75vw}.studio-v10 .quality-badge{display:none}
 .studio-v10 .stage{inset:26px 0 108px;min-height:0}.studio-v10.tools-expanded .stage{bottom:calc(var(--tools-height)*.55 + 45px)}
 .studio-v10 .inspector{left:8px;right:8px;top:auto;bottom:max(6px,env(safe-area-inset-bottom));width:auto;max-height:48%;border-radius:12px;background:#122326ad;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
 .studio-v10 .tools-toggle{height:32px;min-height:32px;padding:0 14px}.studio-v10 .style-toolbar{padding:0 12px 9px;gap:6px}.studio-v10 .style-select select{height:34px;min-height:34px;font-size:13px}.studio-v10 #manageStyles{height:34px;min-height:34px;width:34px;min-width:34px;font-size:22px}
 .studio-v10 .tabs{padding:0 4px}.studio-v10 .tabs button{min-height:50px;font-size:14px}.studio-v10 .tab-panel{padding:0 20px 14px}.studio-v10 .inspector label.control{padding-top:12px;padding-bottom:8px}
 .studio-v10 .canvas-dock{left:50%;bottom:65px;gap:2px;padding:3px}.studio-v10.tools-expanded .canvas-dock{bottom:calc(var(--tools-height) + 16px)}
 .studio-v10 .touch-hint{right:0;bottom:112px;font-size:12px}.studio-v10.tools-expanded .touch-hint{display:none}
 .studio-v10.editing-text .topbar,.studio-v10.editing-text .public-toolbar,.studio-v10.editing-text .studio-head,.studio-v10.editing-text .canvas-dock,.studio-v10.editing-text .style-toolbar{display:none}
 .studio-v10.editing-text .inspector{max-height:76%}.studio-v10.editing-text .stage{inset:0}.studio-v10.editing-text .tabs{display:none}
 .studio-v10.work-focus .stage{inset:0 0 62px}.studio-v10.work-focus .canvas-dock{bottom:10px;left:50%}
 .studio-v10.selecting-detail .stage{inset:110px 0 64px}.studio-v10.selecting-detail .canvas-dock{bottom:10px}
}
@media(max-width:370px){.studio-v10 .top-actions #quickSave{display:none}.studio-v10 .brand h1{font-size:16px}.studio-v10 .tabs button{font-size:14px}.studio-v10 .public-links{gap:11px}}
@media(orientation:landscape) and (max-height:540px){
 .studio-v10 .public-toolbar{display:none}.studio-v10 .inspector{left:auto;right:8px;top:8px;bottom:auto;width:290px;max-height:calc(100% - 16px)}.studio-v10 .stage,.studio-v10.tools-expanded .stage{inset:10px 180px 62px 0}.studio-v10 .studio-head{display:none}.studio-v10 .canvas-dock,.studio-v10.tools-expanded .canvas-dock{left:calc((100% - 180px)/2);bottom:10px}.studio-v10.work-focus .stage{inset:0 0 62px}.studio-v10.work-focus .canvas-dock{left:50%}.studio-v10.selecting-detail .stage{inset:80px 0 62px}.studio-v10.selecting-detail .canvas-dock{left:50%}
}
@media(prefers-reduced-transparency:reduce){.studio-v10 .inspector,.studio-v10 .canvas-dock{background:#172326}}
@media(prefers-reduced-motion:reduce){.studio-v10 *{scroll-behavior:auto;transition:none}}

/* Custom grain: one compact edit action, with the material choice directly beside it. */
.studio-v10 .grain-options{display:grid;grid-template-columns:1fr;gap:8px;width:100%;padding:9px 0 3px}
.studio-v10 .grain-edit{width:max-content;max-width:100%;border:0;border-bottom:1px solid #d5ee9a78!important;border-radius:0;padding:6px 1px!important;min-height:34px!important;background:transparent!important;color:var(--accent);text-align:left}
.studio-v10 .grain-modes,.grain-crop-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border:1px solid #dcebe434;border-radius:8px;padding:3px;background:#0b181a80}
.studio-v10 .grain-modes button,.grain-crop-modes button{min-width:0;min-height:38px;padding:6px 4px;border:0;border-radius:5px;background:transparent;font-size:13px;white-space:nowrap}
.studio-v10 .grain-modes button[aria-pressed=true],.grain-crop-modes button[aria-pressed=true]{background:#d5ee9a20!important;color:#e5f6b8;border:1px solid #d5ee9a4d!important}
.studio-v10 .grain-crop-dialog{width:min(610px,calc(100vw - 20px));max-height:min(94dvh,780px);overflow:auto;overscroll-behavior:contain;padding:17px 18px 18px;background:#142125;border:1px solid #dcebe445;border-radius:12px;color:#e8f1e8}
.grain-crop-head h2{margin:0 0 4px!important;font-size:20px!important;line-height:1.25}.grain-crop-head p{margin:0 0 12px;color:#b7c8c0;font-size:13px;line-height:1.4}
.grain-crop-modes{margin:0 auto 12px;width:min(100%,420px)}
.grain-crop-work{display:flex;align-items:center;justify-content:center;min-height:130px}
.grain-crop-stage{position:relative;max-width:100%;overflow:hidden;border:1px solid #e4f1d536;border-radius:7px;background:#0c171a;touch-action:none;user-select:none}
.grain-crop-layer{position:absolute;inset:0;width:100%;height:100%;transform-origin:center;pointer-events:none}
.grain-crop-stage img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.grain-crop-circle{position:absolute;z-index:2;border:2px solid #e8f8c5;border-radius:50%;box-shadow:0 0 0 1000px #071719a8,inset 0 0 0 1px #14212599,0 0 0 1px #15202480;cursor:grab;touch-action:none;outline-offset:3px;pointer-events:auto}
.grain-crop-circle:active{cursor:grabbing}.grain-crop-circle:focus-visible{outline:2px solid var(--accent)}
.grain-crop-handle{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0d2221b5;cursor:nwse-resize;touch-action:none}
.grain-crop-handle:after{content:'';width:15px;height:15px;border:2px solid #e9f8c5;border-radius:50%;background:#294037}
.grain-crop-result{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0;color:#b7c8c0;font-size:13px}
.grain-crop-result canvas{width:56px;height:56px;flex:none;border:1px solid #dcebe438;border-radius:50%;background:#0d191b}
.grain-crop-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #dcebe421;padding-top:14px}.grain-crop-actions button{min-height:42px;font-size:14px}
@media(max-width:480px){.studio-v10 .grain-crop-dialog{padding:14px 12px 16px}.grain-crop-actions{display:grid;grid-template-columns:1fr 1fr}.grain-crop-actions button{padding:8px 5px}.grain-crop-head h2{font-size:18px!important}}