.paint-studio{--studio-ink:#334b45;--studio-green:#466c61;position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;isolation:isolate;color:var(--studio-ink);background:radial-gradient(ellipse at 2% 65%,#94ad9840,transparent 50%),radial-gradient(ellipse at 96% 20%,#a8c6b94d,transparent 48%),#eef0e6;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden;box-sizing:border-box;font:400 17px/1.5 var(--serif)}
.paint-studio:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23989988' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.paint-studio *{box-sizing:border-box}.paint-studio :is(button,input,select,textarea,h2,h3,strong,b,small,output,a){font-family:var(--serif);font-weight:400}.paint-studio button,.paint-studio a{font-size:inherit;line-height:1.3;cursor:pointer;min-height:42px;border:1px solid #acbbaa;border-radius:5px 11px 5px 11px;padding:8px 13px;background:#fbf8ed;color:var(--studio-ink);text-decoration:none;box-shadow:inset 0 0 0 2px #fff8;touch-action:manipulation}.paint-studio button:disabled{opacity:.45;cursor:default}.paint-studio button[aria-pressed=true],.paint-studio .paint-primary{background:var(--studio-green);color:#fff9e9;border-color:#36584e;box-shadow:inset 0 0 0 2px #f5efce26}.paint-studio :is(button,input,a):focus-visible{outline:3px solid #aa614b;outline-offset:3px}.paint-icon{width:25px;height:25px;flex:none;vertical-align:middle}
.paint-head{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;gap:12px;border-bottom:1px solid #a7b9a766;background:#f9f8ee70}.paint-title{display:flex;align-items:center;gap:12px}.paint-seal{writing-mode:vertical-rl;background:#a25947;color:#fff5dc;font-size:20px;letter-spacing:3px;padding:6px 5px;line-height:1.15;border:1px solid #ba705c;box-shadow:inset 0 0 0 2px #eee1c957;border-radius:2px;transform:rotate(-3deg)}.paint-head small{font-size:13px;letter-spacing:.13em;color:#667b6c}.paint-head h2{font-size:25px;margin:2px 0;letter-spacing:.06em}.paint-head>button{background:transparent;white-space:nowrap;box-shadow:none}
.paint-tabs{display:flex;gap:8px;padding:8px 24px;align-items:center}.paint-tabs button{display:flex;gap:10px;align-items:baseline;background:transparent;border-color:transparent;box-shadow:none;border-radius:3px;min-height:40px;padding:6px 12px}.paint-tabs button[aria-pressed=true]{background:#dce5d6;color:#294b41;border-color:#a6b7a3;box-shadow:inset 0 -2px #5b7e6d}.paint-tabs button span{font-size:12px;opacity:.8}.paint-save{font-size:13px;margin-left:auto;max-width:40%;line-height:1.4;color:#677969}
.paint-workspace{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;min-height:0;flex:1;padding:4px 24px 12px}.paint-studio[data-mode=guided] .paint-workspace{grid-template-columns:1fr}.paint-paper-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;min-width:0;gap:8px}.paint-frame{display:flex;align-items:center;justify-content:center;padding:54px 8px 12px;min-height:0;min-width:0;width:100%;flex:1}.paint-sheet{position:relative;flex:none;background:#f7efd9;box-shadow:0 0 0 1px #cabd9b,0 0 0 5px #f6edd8,1px 8px 0 2px #e1d7be,1px 14px 20px #42554c25}.paint-sheet:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 20px #b5986222;border:1px solid #b39c6d33}.paint-sheet canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:#f8f1df;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 21 25 2q2-1 4 1L18 24Z' fill='%23a67a43' stroke='%233c4939'/%3E%3Cpath d='m12 21 6 3c-3 5-7 6-14 6 5-3 3-7 8-9Z' fill='%233c4939'/%3E%3C/svg%3E") 4 30,crosshair}.paint-studio[data-mode=guided] canvas{cursor:default}.paint-companion{position:absolute;bottom:calc(100% - 4px);width:132px;max-width:36%;height:auto;aspect-ratio:4/3;background-image:url('assets/painting/companions-v50.png');background-repeat:no-repeat;background-size:200% 100%;pointer-events:none;user-select:none;z-index:1;filter:drop-shadow(0 3px 2px #3333)}.paint-su{left:1.5%;background-position:left bottom}.paint-heng{right:1.5%;background-position:right bottom}.paint-line{margin:4px 0 0;min-height:25px;text-align:center;max-width:600px;font-size:20px}.paint-guide-controls{font-size:15px;text-align:center;line-height:1.5;min-height:28px}.paint-guide-controls:empty{display:none}
.paint-tools{overflow-y:auto;padding:14px;background:linear-gradient(140deg,#faf8ec,#e5e9db);border:1px solid #acbca5;border-radius:18px 4px 18px 4px;box-shadow:inset 0 0 0 4px #ffffff60,0 3px 9px #35493c12;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9aaf9b transparent}.paint-tools[hidden],.paint-export[hidden]{display:none}.paint-section-title{display:flex;align-items:baseline;gap:9px;border-bottom:1px solid #bcc8b2;padding-bottom:5px}.paint-section-title strong{font-size:23px}.paint-section-title>span{font-size:12px;color:#74816c}.paint-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:10px 0}.paint-swatches button{border:0;background:transparent;box-shadow:none;min-height:52px;padding:0;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.paint-swatches button i{display:block;width:29px;height:26px;border:4px solid #f4f5e7;border-radius:48% 52% 45% 48%;background:radial-gradient(ellipse at 32% 27%,#fff5,transparent 60%),var(--pigment);box-shadow:0 1px 0 1px #b2bea9,inset 0 2px 4px #142d2955,0 3px 4px #42513622;transform:rotate(-7deg)}.paint-swatches button:nth-child(even) i{transform:rotate(8deg);border-radius:45% 50% 48% 55%}.paint-swatches button span{font-size:11px;white-space:nowrap;color:#687761}.paint-swatches button:hover i,.paint-swatches button:focus-visible i{box-shadow:0 0 0 2px #5b7966,inset 0 2px 4px #142d2955}.paint-color{display:flex;justify-content:space-between;align-items:center;font-size:15px}.paint-color input,.paint-tool-grid input{width:43px;height:30px;border:1px solid #bbc2a9;border-radius:50%;padding:3px;background:#f7f6e9;cursor:pointer}.paint-preview{height:38px;display:flex;align-items:center;gap:10px;margin:5px 0;border-bottom:1px solid #b5c1a866}.paint-preview i{display:inline-block;border-radius:50%}.paint-preview span{font-size:14px}.paint-slider{display:block;margin:8px 0;font-size:15px}.paint-slider output{float:right;font-variant-numeric:tabular-nums;color:#647c65}.paint-slider input{display:block;width:100%;height:26px;margin:3px 0;accent-color:#527867;cursor:pointer}.paint-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.paint-tool-grid button{font-size:15px;padding:6px;display:flex;align-items:center;justify-content:center;gap:5px}.paint-tool-grid button>span{font-size:24px;line-height:1}.paint-tool-grid label{display:flex;align-items:center;justify-content:space-around;font-size:14px}.paint-tip{font-size:13px;line-height:1.6;color:#73806a;margin-top:9px}.paint-footer{display:flex;align-items:center;gap:8px;padding:9px 24px;border-top:1px solid #b7c3ae;background:#faf8ed99}.paint-meta{font-size:13px;margin-right:auto;color:#647660}.paint-export{position:absolute;inset:0;background:#233c33dd;z-index:3;display:flex;align-items:center;justify-content:center;padding:18px}.paint-export-card{background:#f8f1df;border:1px solid #c2ad7c;border-radius:14px 4px;padding:16px;max-width:700px;max-height:100%;overflow:auto;text-align:center}.paint-export-card h3{margin:0 0 12px;font-size:24px}.paint-export-card img{width:100%;max-height:55vh;object-fit:contain;user-select:auto;-webkit-touch-callout:default}.paint-export-card p{font-size:15px;line-height:1.5;margin:10px 0}.paint-export-card>div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@media(max-width:600px) and (orientation:portrait){.paint-head{padding:9px 12px;gap:5px}.paint-title{gap:8px}.paint-seal{font-size:16px;padding:5px 3px}.paint-head small{font-size:11px;letter-spacing:.06em}.paint-head h2{font-size:20px;letter-spacing:0}.paint-head>button{font-size:14px;padding:7px 8px;min-height:40px}.paint-tabs{padding:5px 12px;flex-wrap:wrap;gap:5px}.paint-tabs button{padding:6px 8px;gap:5px;font-size:17px}.paint-tabs button span{font-size:12px}.paint-save{font-size:12px;max-width:100%;width:100%;min-height:17px;margin:0 3px}.paint-workspace{grid-template-columns:1fr;grid-template-rows:minmax(165px,1fr) minmax(170px,.8fr);padding:0 12px 9px;gap:9px}.paint-studio[data-mode=guided] .paint-workspace{grid-template-rows:1fr}.paint-frame{padding-top:54px}.paint-companion{width:84px;height:63px}.paint-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px 14px;padding:9px 12px;border-radius:12px 3px}.paint-section{grid-row:span 3}.paint-section-title strong{font-size:21px}.paint-section-title>span{font-size:10px}.paint-swatches{grid-template-columns:repeat(4,1fr);gap:3px;margin:5px 0}.paint-swatches button{min-height:40px;gap:2px}.paint-swatches button i{width:25px;height:22px;border-width:3px}.paint-swatches button span{font-size:10px}.paint-preview{margin:0;height:31px}.paint-slider{margin:0;font-size:14px}.paint-slider input{margin:1px 0;height:26px}.paint-tool-grid,.paint-tip{grid-column:1/-1}.paint-tool-grid{grid-template-columns:repeat(3,1fr);margin-top:5px}.paint-tip{margin:3px 0;font-size:12px}.paint-footer{padding:7px 12px;flex-wrap:wrap;gap:5px}.paint-meta{width:100%;font-size:12px}.paint-footer button{flex:1;padding:8px 6px;font-size:16px}.paint-line{font-size:19px}.paint-guide-controls{font-size:14px}}
@media(max-height:450px) and (orientation:landscape){.paint-head{padding:3px 12px}.paint-title{gap:7px}.paint-seal{writing-mode:horizontal-tb;font-size:15px;padding:3px}.paint-head h2{font-size:18px;display:inline;margin-left:8px}.paint-head small{font-size:11px}.paint-head button{min-height:32px;padding:4px 9px;font-size:14px}.paint-tabs{padding:2px 12px}.paint-tabs button{min-height:30px;padding:3px 10px;font-size:16px}.paint-workspace{padding:1px 12px 6px;gap:12px;grid-template-columns:minmax(0,1fr) 235px}.paint-frame{padding-top:34px}.paint-companion{width:57px;height:43px}.paint-footer{padding:4px 12px}.paint-footer button{min-height:32px;padding:4px 9px;font-size:14px}.paint-tools{padding:8px}.paint-line{font-size:15px;margin:0;min-height:20px}.paint-guide-controls{min-height:20px;font-size:13px}.paint-guide-controls button{min-height:30px;padding:4px 10px;font-size:14px}.paint-meta{font-size:11px}.paint-save{font-size:12px}}