:root{font-family:system-ui,sans-serif;color:#292742;background:#f7f7fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button,a,input{touch-action:manipulation}button{transition:transform .2s,background .2s}button:hover{transform:translateY(-2px)}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #f19f32;outline-offset:4px}header{height:92px;padding:0 5%;display:flex;align-items:center;gap:24px;border-bottom:1px solid #e6e5f1;background:#fff}.brand{text-decoration:none;color:#292742;font:800 30px system-ui,sans-serif;display:flex;align-items:center;gap:9px;letter-spacing:-1.2px}.brand-icon{font-size:46px;color:#6b57dc;line-height:1}.brand-dot{color:#fa9866;margin-left:-9px}.header-note{font-size:14px;color:#838093;margin-left:20px}.button{border:0;border-radius:12px;font-weight:700;padding:13px 20px}.export{margin-left:auto;background:#efedff;color:#6553c6}main{max-width:1400px;margin:auto;padding:38px 5% 22px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:29px;gap:20px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;color:#89839d}h1{font:800 clamp(28px,3vw,43px)/1.2 system-ui,sans-serif;letter-spacing:-1.7px;margin:10px 0 0}h1 em{font-style:normal;color:#7058db}p{color:#817c90;font-size:14px;line-height:1.7}.intro p{margin:0}.studio{display:grid;grid-template-columns:294px 1fr;gap:24px}.controls{background:white;border:1px solid #e6e4f1;border-radius:22px;padding:25px;box-shadow:0 6px 20px #37306404}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.panel-heading h2{font:800 19px system-ui;margin:0}.panel-heading span{color:#f3ad4d;font-size:26px}.field-title{display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;color:#89839d;margin-bottom:12px}.segmented{display:flex;background:#f1f0f8;padding:4px;border-radius:11px;gap:4px}.segmented button{flex:1;background:none;border:0;color:#817a90;border-radius:8px;padding:9px 4px;font-size:14px;font-weight:600}.segmented button.selected{background:white;color:#6b52d4;box-shadow:0 2px 5px #34236712}.hint{font-size:12px;margin:10px 0 23px;line-height:1.5}.sliders label{display:flex;justify-content:space-between;font-size:14px;font-weight:600;align-items:center}.sliders output{background:#f0edfc;color:#7055d3;border-radius:6px;padding:3px 8px;font-size:12px;min-width:35px;text-align:center}input[type=range]{accent-color:#7960db;width:100%;cursor:pointer;height:20px;margin:10px 0 21px}.palettes{display:flex;gap:10px}.swatch{width:35px;height:35px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #e7e3ee;padding:0}.swatch.selected{box-shadow:0 0 0 2px #7560d7;transform:scale(1.06)}.ink-row{display:flex;align-items:center;justify-content:space-between;margin:18px 0;font-size:13px;color:#898196}input[type=color]{width:30px;height:25px;padding:0;border:0;background:none;cursor:pointer}.weight{display:flex;align-items:center;gap:10px;font-size:12px;white-space:nowrap}.weight input{margin:0;min-width:30px}.weight output{font-size:12px;color:#8e879c}.surprise{background:#f0edff;color:#6d51d4;width:100%;margin:22px 0 12px}.undo-row{display:flex;justify-content:center;gap:40px}.undo-row button{background:none;border:0;font-size:13px;color:#827a93}.undo-row button:disabled{opacity:.35;cursor:default}.drawing-panel{border:1px solid #e6e4f1;background:#fff;border-radius:22px;overflow:hidden;position:relative;display:flex;flex-direction:column;min-width:0;box-shadow:0 7px 25px #37306404}.canvas-toolbar{position:absolute;inset:20px 23px auto;display:flex;align-items:center;justify-content:space-between;z-index:1;gap:12px}.canvas-toolbar>span{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#a59daf;display:flex;align-items:center;gap:8px}.canvas-toolbar i{width:6px;height:6px;background:#baa6e4;border-radius:50%}.canvas-toolbar button{border:1px solid #e9e5f0;border-radius:8px;background:#ffffffda;color:#8a8095;padding:7px 10px;font-size:12px}.canvas-wrap{flex:1;min-height:440px;position:relative;background-image:radial-gradient(#b3abca35 .8px,transparent .8px);background-size:18px 18px}.canvas-wrap canvas{position:absolute;width:100%;height:100%;inset:0}.canvas-bottom{display:flex;justify-content:space-between;align-items:center;padding:21px 24px;border-top:1px solid #f0edf6;gap:15px}.canvas-bottom strong{display:block;font-size:14px;font-weight:600}.canvas-bottom span{display:block;color:#aaa1b5;font-size:12px;margin-top:5px}.draw{background:#7458d9;color:white;box-shadow:0 4px 9px #7458d923;font-size:14px;white-space:nowrap}.progress{height:3px;background:#f3f0fa}.progress div{height:100%;background:#b79bef;width:100%}.presets{display:flex;gap:28px;align-items:center;margin-top:30px}.preset-intro{width:230px;flex-shrink:0}.preset-intro h2{font:800 20px system-ui;letter-spacing:-.5px;margin:9px 0 0}.preset-intro p{margin:6px 0;font-size:13px}.preset-list{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;flex:1}.preset{background:#fff;border:1px solid #e5e2f0;border-radius:15px;text-align:left;padding:0 12px 12px;color:#6d637f;min-width:0}.preset canvas{width:100%;height:94px;display:block}.preset span{font-size:12px;font-weight:600}.preset.selected{border-color:#a58de5;background:#f1edff}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #e6e3ef;margin-top:30px;padding-top:20px;font-size:12px;color:#a59aae}details{max-width:500px}summary{cursor:pointer;color:#8a7d9c}details p{font-size:13px}#notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#34254f;color:white;border-radius:12px;padding:12px 20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}.dark .canvas-wrap{background-color:#211c38}.dark .canvas-toolbar>span{color:#c9bcdf}@media(min-width:1400px){main{padding-left:32px;padding-right:32px}}@media(max-width:850px){header{height:76px;padding:0 22px}.header-note{display:none}main{padding:25px 20px}.intro p{display:none}.studio{grid-template-columns:245px 1fr;gap:15px}.controls{padding:19px}.canvas-bottom{flex-direction:column;align-items:flex-start;padding:15px}.presets{gap:16px;flex-direction:column;align-items:stretch}.preset-intro{width:auto}.preset-intro p{display:none}.canvas-toolbar>span{display:none}.canvas-toolbar{justify-content:flex-end}.canvas-wrap{min-height:380px}}@media(max-width:600px){.studio{display:flex;flex-direction:column}.drawing-panel{order:-1}.canvas-wrap{height:360px;flex:auto;min-height:0}.canvas-bottom{flex-direction:row;align-items:center}.canvas-bottom span{max-width:150px;line-height:1.4}.draw{font-size:12px;padding:12px}.controls{padding:22px}.panel-heading{margin-bottom:18px}.sliders{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:center}.sliders input{margin:10px 0}.hint{margin-bottom:12px}.field-title{margin-top:14px}.palettes{gap:16px}.weight{font-size:14px}.weight input{max-width:200px}.preset-list{gap:8px}.preset{padding:0 8px 10px}.preset canvas{height:70px}.preset span{font-size:11px}.brand{font-size:26px}.export{font-size:13px;padding:12px}footer>span:last-child{display:none}footer{font-size:11px}h1{letter-spacing:-1px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.paper-menu{position:relative}
.canvas-toolbar .paper-menu>button{display:flex;align-items:center;gap:7px}
#paperChip{width:12px;height:12px;border-radius:3px;border:1px solid #00000024;background:#fff;flex:none}
#paperChip.none,.pop-none .checker{background-image:linear-gradient(45deg,#c3bed0 25%,transparent 25%,transparent 75%,#c3bed0 75%),linear-gradient(45deg,#c3bed0 25%,#fff 25%,#fff 75%,#c3bed0 75%);background-size:8px 8px;background-position:0 0,4px 4px}
.paper-pop{position:absolute;top:calc(100% + 8px);right:0;width:198px;padding:12px;background:#fff;border:1px solid #e9e5f0;border-radius:13px;box-shadow:0 10px 30px #3730641f;z-index:6;text-align:left}
.paper-pop[hidden]{display:none}
.pop-title{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#a59daf;margin-bottom:10px}
.paper-swatches{display:flex;gap:8px}
.canvas-toolbar .paper-swatches button{width:27px;height:27px;padding:0;border-radius:50%;border:1px solid #d9d3e4;cursor:pointer}
.canvas-toolbar .paper-swatches button[aria-pressed=true]{outline:2px solid #5749df;outline-offset:2px}
.canvas-toolbar .paper-pop .pop-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:7px;padding:7px 9px;font-size:12px;color:#6b6478;background:#fff;border:1px solid #e9e5f0;border-radius:9px;cursor:pointer}
.canvas-toolbar .paper-pop .pop-row input[type=color]{width:28px;height:20px;padding:0;border:1px solid #e0dbe9;border-radius:4px;background:none;cursor:pointer}
.pop-none .checker{width:28px;height:20px;border:1px solid #e0dbe9;border-radius:4px;flex:none}
.canvas-toolbar .pop-none[aria-pressed=true]{outline:2px solid #5749df;outline-offset:1px}
.canvas-wrap.none{background-color:#fff;background-image:linear-gradient(45deg,#d5d8e2 25%,transparent 25%,transparent 75%,#d5d8e2 75%),linear-gradient(45deg,#d5d8e2 25%,transparent 25%,transparent 75%,#d5d8e2 75%);background-size:24px 24px;background-position:0 0,12px 12px}
.dark .canvas-toolbar .paper-menu>button{background:#ffffff1c;border-color:#ffffff30;color:#e6ddf3}
.dark #paperChip{border-color:#ffffff40}
.check-row{display:flex;align-items:center;gap:9px;margin-top:11px;cursor:pointer;font-size:13px;color:#4c465c}
.check-row input{width:15px;height:15px;accent-color:#5749df;cursor:pointer;flex:none}
.recipe-row{margin-top:10px}
.recipe-row button{font-size:12px}
.sym-wrap{margin-top:12px}
.getclose{background:#fff3e0;color:#c2701c;width:100%;margin:0 0 12px}
.breeder{position:fixed;inset:0;background:#2a2340cc;display:flex;align-items:center;justify-content:center;z-index:20;padding:18px}
.breeder[hidden]{display:none}
.breeder-box{background:#fbfaff;border-radius:20px;width:min(940px,100%);max-height:96vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #1a143a55}
.breeder-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 12px}
.breeder-head strong{display:block;font-size:17px}
.breeder-head span{display:block;font-size:12px;color:#8b849a;margin-top:3px}
.breeder-head button{background:none;border:0;font-size:17px;color:#8b849a;padding:2px 6px}
.breeder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 20px;overflow:auto}
.tile{padding:0;border:2px solid #e6e2f0;border-radius:13px;overflow:hidden;background:#fff;line-height:0;transition:border-color .15s,transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile canvas{width:100%;height:auto;display:block}
.tile.picked{border-color:#7458d9;box-shadow:0 0 0 3px #7458d933}
.breeder-foot{display:flex;gap:10px;align-items:center;padding:16px 20px;flex-wrap:wrap}
.breeder-foot .draw{flex:1;min-width:150px}
.breeder-foot button:not(.draw){background:none;border:0;font-size:13px;color:#827a93}
.breeder-foot button:disabled{opacity:.4;cursor:default;transform:none}
@media(max-width:600px){.breeder{padding:0}.breeder-box{border-radius:0;max-height:100vh}.breeder-grid{gap:6px;padding:0 10px}.tile{border-radius:9px}}
.ink-row label small{color:#b0a8bd;font-size:11px}
.grad-menu{position:relative;display:flex}
.grad-btn{background:none;border:1px solid #e7e3ee;border-radius:8px;padding:4px 6px;line-height:0}
.grad-btn.selected{border-color:#7560d7;box-shadow:0 0 0 2px #7560d733}
.grad-pop{position:absolute;top:calc(100% + 8px);right:0;width:206px;padding:12px;background:#fff;border:1px solid #e9e5f0;border-radius:13px;box-shadow:0 10px 30px #3730641f;z-index:8;text-align:left}
.grad-pop[hidden]{display:none}
.grad-bar{height:26px;border-radius:7px;border:1px solid #e0dbe9;margin-bottom:4px}
.grad-pop .pop-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:7px;padding:7px 9px;font-size:12px;color:#6b6478;background:#fff;border:1px solid #e9e5f0;border-radius:9px;cursor:pointer}
.grad-pop .pop-row input[type=color]{width:30px;height:21px;padding:0;border:1px solid #e0dbe9;border-radius:4px}
.pop-swap{justify-content:center!important;color:#7055d3!important}
/* Square drawing area, matching the 3000x3000 export framing. Appended last so
   it also overrides the 850px/600px breakpoint heights. Two knobs: main's
   max-width caps how wide the studio gets, and aspect-ratio makes the canvas
   as tall as it is wide. Set max-width:none for true full-bleed. */
main{max-width:1760px;padding-left:3%;padding-right:3%}
.canvas-wrap{flex:none;height:auto;min-height:0;aspect-ratio:1}
/* Studio flush to the window edge: main loses its side padding, the other
   sections take their own back, and the control panel squares off its left
   corners so it reads as docked rather than clipped. */
main{max-width:none;margin:0;padding:30px 0 22px}
.intro,.presets,footer{padding-left:24px;padding-right:24px}
.studio{padding-right:24px}
.controls{border-radius:0 22px 22px 0;border-left:0}
.zoom-group{display:flex;gap:4px;pointer-events:auto}
.canvas-toolbar .zoom-group button{min-width:29px;padding:6px 8px;line-height:1}
#viewFit{font-size:11px;letter-spacing:.4px}
.canvas-wrap{cursor:grab}
.canvas-wrap.panning{cursor:grabbing}
.ink-row{gap:14px}
.ink-pair{display:flex;align-items:center;gap:8px}
.ink-pair>span{font-size:13px;color:#898196}
.grad-pop input[type=checkbox]{width:15px;height:15px;accent-color:#5749df}
.grad-pop input:disabled{opacity:.35}
/* The Lines control sits at the left of a panel that is now flush to the window
   edge, so a right-anchored popover opens off-screen. Anchor it left so it
   opens rightward instead. The Fill popover stays right-anchored. */
#linePop{left:0;right:auto}
.ink-random{display:flex;align-items:center;gap:6px;font-size:13px;color:#898196;cursor:pointer}
.ink-random input{width:15px;height:15px;accent-color:#5749df;cursor:pointer}
/* Three stacked controls: caption above, control below. The old single-line row
   ran out of width in a 294px panel and squeezed the middle item out. */
.ink-row{display:flex;align-items:flex-start;justify-content:space-around;gap:8px;flex-wrap:nowrap;margin:18px 0 20px}
.ink-pair,.ink-random{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;flex:0 0 auto}
.ink-pair>span,.ink-random>span{order:-1;font-size:11px;letter-spacing:.3px;color:#8f879d;white-space:nowrap}
.ink-random input{width:17px;height:17px;margin:3px 0}
.ink-modes{display:flex;flex-direction:column;gap:7px;align-items:flex-start;padding-top:2px}
.ink-modes label{display:flex;align-items:center;gap:6px;font-size:12px;color:#898196;cursor:pointer;white-space:nowrap}
.ink-modes input{width:15px;height:15px;accent-color:#5749df;cursor:pointer;margin:0}
/* Square thumbnails matching the square canvas and the square export. The old
   fixed height stretched them badly once the studio went full width, so the
   columns are capped rather than filling whatever space exists. */
.preset-list{grid-template-columns:repeat(4,minmax(0,232px));justify-content:start}
.preset canvas{width:100%;height:auto;aspect-ratio:1}
@media(max-width:850px){.preset-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Independent scrolling for the control panel. align-self:start is required —
   a stretched grid item cannot stick. overscroll-behavior:contain is the part
   that actually isolates: without it, reaching the end of the panel's scroll
   chains into the page and the canvas lurches away underneath you. */
.controls{position:sticky;top:14px;align-self:start;max-height:calc(100vh - 28px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ddd8e8 transparent}
.controls::-webkit-scrollbar{width:8px}
.controls::-webkit-scrollbar-track{background:transparent}
.controls::-webkit-scrollbar-thumb{background:#ddd8e8;border-radius:4px}
.controls::-webkit-scrollbar-thumb:hover{background:#c9c2d8}
@media(max-width:600px){.controls{position:static;max-height:none;overflow:visible}}
/* Room at the foot of the panel for the Lines / Fill popovers to open into.
   overflow-y:auto makes the panel a clipping box, so a popover anchored near
   the bottom gets cut off without slack below it. */
.controls{padding-bottom:180px}