:root{--canvas:#0b1420;--panel-deep:#0f172a;--panel-light:#172852;--icon:#203057;--cyan:#19a4e0;--cyan-hover:#2cb7f2;--cyan-pressed:#2097c9;--selected-line:#88c8e3;--text:#ccc;--muted:#999;--danger:#d47731;--ui-scale:1}*{box-sizing:border-box}html,body{background:#050b13;width:100%;min-width:320px;min-height:100%;margin:0}body{color:var(--text);font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid var(--selected-line);outline-offset:2px}.tool-app{background:radial-gradient(circle at 74% 38%,#19a4e014,#0000 34%),#070f1b;grid-template-rows:70px minmax(0,1fr);width:100vw;height:100dvh;display:grid}.app-titlebar{z-index:30;justify-content:flex-end;align-items:center;min-width:0;height:54px;margin:5px 30px 0 10px;padding:5px;display:flex;position:relative;overflow:visible}.titlebar-surface{z-index:0;object-fit:fill;pointer-events:none;width:100%;height:54px;display:block;position:absolute;inset:0}.app-brand{align-items:center;gap:11px;display:flex}.app-brand>div{align-items:baseline;gap:12px;display:flex}.app-brand strong{color:#edf8ff;letter-spacing:-.02em;font-size:15px;font-weight:620}.app-brand div>span{color:#60758c;letter-spacing:.08em;font-size:11px}.app-logo{object-fit:contain;width:44px;height:44px;display:block}.titlebar-brand{z-index:1;width:282px;height:44px;position:absolute;top:50%;left:calc(50% + 10px);transform:translate(-50%,-50%)}.prototype-badge{color:#6f8aa3;height:28px;font-family:var(--font-geist-mono), monospace;letter-spacing:.12em;background:#0c1e31b8;border:1px solid #459ecc33;border-radius:8px;align-items:center;gap:8px;padding:0 11px;font-size:10px;display:flex}.prototype-badge span{background:#19a4e0;border-radius:50%;width:5px;height:5px;box-shadow:0 0 8px #19a4e0}.workspace{grid-template-columns:clamp(370px,29vw,453px) minmax(0,1fr);height:100%;min-height:0;display:grid}.control-rail{background:#0d1728;border-right:1px solid #3e5f8924;grid-template-rows:minmax(0,1fr) 90px;gap:10px;min-height:0;padding:10px;display:grid;overflow:visible}.control-rail-scroll{--controls-card-gap:6px;align-items:stretch;gap:var(--controls-card-gap);flex-direction:column;min-height:0;margin-top:-15px;display:flex;overflow:hidden}.pattern-controls-container,.parameter-controls-container{min-width:0;box-shadow:none;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-radius:14px;position:relative}.pattern-controls-container{background-image:url(/ui-assets/pattern-controls-container.svg?v=20260901);flex:0 0 170px;align-content:center;gap:4px;height:170px;padding:8px 14px 10px;display:grid}fieldset{border:0;min-width:0;margin:0;padding:0}legend{color:#aeb8c4;height:20px;padding:0;font-size:13px;line-height:20px}.pattern-options,.hole-options{grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;gap:0;display:grid}.pattern-options button,.hole-options button{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:9px;justify-self:center;place-items:center;width:44px;height:44px;padding:0;transition:border-color .14s,background .14s,transform .1s;display:grid}.pattern-options img,.hole-options img{filter:brightness(0)saturate()invert(66%)sepia(0%)saturate(15%)hue-rotate(197deg)brightness(92%)contrast(91%);width:100%;height:100%;transition:filter .14s;display:block}.pattern-options button:hover img,.hole-options button:hover img,.pattern-options button.is-selected img,.hole-options button.is-selected img{filter:none}.pattern-options button:hover,.hole-options button:hover{border-color:var(--icon);background:0 0}.pattern-options button.is-selected,.hole-options button.is-selected{border-color:var(--selected-line);box-shadow:none;background:0 0}.pattern-options button:active,.hole-options button:active{transform:scale(.95)}.hole-options button:disabled{cursor:default;opacity:.42}.hole-options button:disabled:active{transform:none}.parameter-controls-container{background-image:url(/ui-assets/parameter-controls-container.svg?v=20260901);flex:0 auto;min-height:0;display:flex;overflow:hidden}.parameter-controls-scroll{overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;flex:auto;width:100%;min-width:0;min-height:0;overflow-y:auto}.parameter-controls-scroll::-webkit-scrollbar{width:0;height:0;display:none}.parameter-controls-frame{--parameter-edge-gap:20px;width:100%;height:max-content;min-height:max-content;padding:var(--parameter-edge-gap) 22px calc(var(--parameter-edge-gap) + 1px) 16px;display:block}.parameter-scrollbar{z-index:4;cursor:pointer;touch-action:none;width:12px;position:absolute;top:10px;bottom:10px;right:4px}.parameter-scrollbar-thumb{cursor:grab;touch-action:none;background:#31425e;border-radius:99px;width:4px;display:block;position:absolute;top:0;left:4px}.parameter-scrollbar-thumb:active{cursor:grabbing}.parameter-heading{align-items:flex-start;min-height:20px;margin-bottom:10px;display:flex}.parameter-heading>span{color:#cad2db;font-size:16px;line-height:20px}.parameter-row{cursor:pointer;min-height:56px;display:block}.parameter-row>span{justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px;display:flex}.parameter-row em{color:#a9b4c0;align-items:center;gap:7px;font-size:15px;font-style:normal;display:inline-flex}.parameter-row output{color:#58ccfa;font-family:var(--font-geist-mono), monospace;font-size:14px}.parameter-controls-frame>.parameter-row:last-child{min-height:0}.parameter-row input[type=range],.preview-menu input{appearance:none;background:linear-gradient(90deg, #2c57a5 0 var(--range-progress), #33435b var(--range-progress) 100%);border-radius:99px;outline:0;width:100%;height:4px;margin:0}.parameter-row input[type=range]::-webkit-slider-thumb{appearance:none;cursor:grab;background:#28549d;border:2px solid #19a4e0;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 2px #19a4e014}.preview-menu input::-webkit-slider-thumb{appearance:none;cursor:grab;background:#28549d;border:2px solid #19a4e0;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 2px #19a4e014}.parameter-row input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}.preview-menu input:active::-webkit-slider-thumb{cursor:grabbing}.parameter-row input[type=range]::-moz-range-thumb{cursor:grab;background:#28549d;border:2px solid #19a4e0;border-radius:50%;width:14px;height:14px}.preview-menu input::-moz-range-thumb{cursor:grab;background:#28549d;border:2px solid #19a4e0;border-radius:50%;width:14px;height:14px}.advanced-option-toggle{accent-color:#19a4e0;cursor:pointer;width:13px;height:13px;margin:0}.parameter-row.is-disabled output,.parameter-row.is-disabled em{opacity:.48}.parameter-row input[type=range]:disabled{cursor:default;opacity:.42}.parameter-footer{border-top:1px solid #5c82ae1a;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:0;min-height:40px;display:grid}.parameter-dock{z-index:4;background:#0d1728;grid-template-rows:40px 42px;gap:8px;min-width:0;display:grid;position:relative}.check-control{color:#8797a9;cursor:pointer;justify-self:center;align-items:center;gap:6px;font-size:14px;display:inline-flex}.check-control input{opacity:0;pointer-events:none;position:absolute}.check-control span{background:#111f34;border:1px solid #42536b;border-radius:3px;place-items:center;width:13px;height:13px;display:grid}.check-control input:checked+span{background:#19a4e0;border-color:#36bcec}.check-control input:checked+span:after{content:"";border-bottom:1.5px solid #fff;border-left:1.5px solid #fff;width:6px;height:3px;transform:translateY(-1px)rotate(-45deg)}.check-control.is-disabled{cursor:default;opacity:.48}.parameter-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.parameter-actions button{color:#a9b8c6;cursor:pointer;background:#17263c;border:1px solid #31445e;border-radius:7px;min-height:42px;font-size:14px;transition:border-color .14s,color .14s,transform .1s}.parameter-actions button:hover{color:#5bd0ff;border-color:#19a4e0}.parameter-actions button:active{transform:scale(.98)}.preview-workspace{background:var(--canvas);grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative}.top-actions{z-index:2;flex:none;align-items:center;gap:15px;display:flex;position:relative}.action-icon,.random-action,.add-compare,.help-button,.like-button{cursor:pointer;background:0 0;border:0;place-items:center;padding:0;transition:border-color .14s,background .14s,transform .1s;display:grid}.action-icon{border:0;border-radius:12px;width:42px;height:42px;transition:background .14s,box-shadow .14s,transform .1s;overflow:hidden}.top-action-artwork{pointer-events:none;width:42px;height:42px;display:block}.top-action-artwork svg,.random-action img,.add-compare img{width:100%;height:100%;display:block}.top-action-artwork svg>path:last-child{fill:#19a4e0;transition:fill .14s}.framed-artwork svg>path:first-child{fill:#0000;stroke:#0000;transition:fill .14s}.action-icon:not(.framed-action):not(:disabled):hover,.action-icon:not(.framed-action).is-active,.action-icon:not(.framed-action):not(:disabled):active,.action-icon:not(.framed-action):focus-visible{background:#19a4e0}.action-icon:not(:disabled):hover .top-action-artwork svg>path:last-child,.action-icon.is-active .top-action-artwork svg>path:last-child,.action-icon:not(:disabled):active .top-action-artwork svg>path:last-child,.action-icon:focus-visible .top-action-artwork svg>path:last-child{fill:#203057}.action-icon.framed-action:not(:disabled):hover .framed-artwork svg>path:first-child,.action-icon.is-active .framed-artwork svg>path:first-child,.action-icon.framed-action.is-active:hover .framed-artwork svg>path:first-child,.action-icon:not(:disabled):active .framed-artwork svg>path:first-child,.action-icon:focus-visible .framed-artwork svg>path:first-child{fill:#19a4e0;stroke:#0000}.action-icon.framed-action.is-active,.action-icon.framed-action.is-active:hover,.action-icon.framed-action:not(:disabled):active,.action-icon.framed-action:focus-visible{box-shadow:none;background:0 0}.action-icon:active,.random-action:active,.add-compare:active,.help-button:active,.like-button:active,.out-button:active{transform:scale(.95)}.action-icon:disabled{cursor:default;background:0 0}.action-icon:disabled .top-action-artwork svg>path:last-child{fill:#383838}.pattern-options button:focus-visible,.hole-options button:focus-visible,.action-icon:focus-visible,.random-action:focus-visible,.add-compare:focus-visible{outline:0}.pattern-options button:focus-visible,.hole-options button:focus-visible,.action-icon:focus-visible{border-color:var(--selected-line)}.popover-anchor{position:relative}.out-button{cursor:pointer;background:0 0;border:0;border-radius:0;width:114px;height:40px;margin-left:0;padding:0;transition:transform .1s;overflow:hidden}.out-button-artwork,.out-button-artwork svg{width:114px;height:40px;display:block}.out-button-artwork svg>path:first-child{fill:#19a4e0;transition:fill .14s}.out-button-artwork svg>g path{fill:#203057}.out-button:hover .out-button-artwork svg>path:first-child{fill:#2cb7f2}.out-button[aria-expanded=true] .out-button-artwork svg>path:first-child,.out-button:active .out-button-artwork svg>path:first-child{fill:#2097c9}.popup-panel{z-index:50;color:var(--muted);background:linear-gradient(90deg,#172852,#0f172a);border:1px solid #466b9e3d;border-radius:8px;animation:.16s cubic-bezier(.2,.8,.2,1) both popup-in;position:absolute;box-shadow:0 12px 30px #00000061}@keyframes popup-in{0%{opacity:0;transform:translateY(-4px)scale(.98)}}.export-menu{border-radius:10px;width:200px;padding:10px;top:calc(100% + 10px);right:0}.export-menu button{color:#999;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;width:100%;height:38px;font-size:15px;transition:color .12s,border-color .12s,transform .1s}.export-menu button:hover{color:#19a4e0;border-color:#203057}.export-menu button:active{color:#19a4e0;border-color:#88c8e3;transform:scale(.98)}.import-popover{width:148px;padding:10px;top:calc(100% + 10px);right:0}.import-popover>span{color:#73869c;margin-bottom:8px;font-size:11px;display:block}.import-popover>div{gap:6px;display:flex}.import-popover button{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;place-items:center;width:42px;height:36px;display:grid}.import-popover button:hover{border-color:#203057}.import-popover button:active{background:#43598f;border-color:#88c8e3}.boundary-circle,.boundary-square{border:2px solid #999;width:20px;height:20px;display:block}.boundary-circle{border-radius:50%}.boundary-square{border-radius:2px}.import-popover button:hover span{border-color:#19a4e0}.preview-menu{width:172px;height:80px;padding:6px;top:calc(100% + 10px);right:0}.preview-menu>button,.preview-menu label{color:#999;background:0 0;border:1px solid #0000;border-radius:6px;min-height:0;padding:0 8px;font-size:18px}.preview-menu>button{cursor:pointer;justify-content:space-between;align-items:center;width:100%;height:30px;display:flex}.preview-menu>button:hover{color:#19a4e0;border-color:#203057}.preview-menu>button strong{color:#19a4e0;font-weight:500}.preview-menu label{grid-template-rows:18px 14px;grid-template-columns:1fr auto;align-items:center;gap:0 8px;height:32px;margin-top:6px;display:grid}.preview-menu label output{color:#19a4e0}.preview-menu label input{--range-progress:50%;grid-column:1/-1;align-self:center;margin:0}.preview-canvas{background:#0b1522;min-width:0;min-height:0;position:relative;overflow:hidden}.canvas-instructions{z-index:6;color:#465d76;pointer-events:none;margin:0;font-size:11px;line-height:16px;position:absolute;top:-6px;left:30px}.canvas-grid{opacity:.34;background:linear-gradient(#3e689314 1px,#0000 1px) 0 0/48px 48px,linear-gradient(90deg,#3e689314 1px,#0000 1px) 0 0/48px 48px,radial-gradient(circle,#19a4e014,#0000 50%);position:absolute;inset:0}.guide{z-index:2;pointer-events:none;opacity:0;background:#3c88b63d;transition:opacity .14s;position:absolute}.show-guides .guide{opacity:1}.guide.horizontal{width:100%;height:1px;top:50%}.guide.vertical{width:1px;height:100%;left:50%}.preview-disc{aspect-ratio:1;z-index:3;background:radial-gradient(circle at 38% 30%,#142a43,#0d1d30 72%,#091421);border:2px solid #354861;border-radius:50%;width:min(56vw,100dvh - 235px,690px);transition:transform .18s;position:absolute;top:calc(50% - 22px);left:50%;overflow:hidden;translate:-50% -50%;box-shadow:22px 22px #0003,inset 0 0 90px #19a4e00a,0 20px 70px #00000052}.pattern-svg{shape-rendering:geometricprecision;width:94%;height:94%;position:absolute;inset:3%;overflow:visible}.pattern-svg g{fill:#36b8ea;fill-opacity:.9}.placeholder-pattern{opacity:.86;background-color:#0000;background-image:radial-gradient(circle,#36b8ea 0 2px,#0000 2.4px);background-position:50%;background-size:32px 32px;border-radius:50%;position:absolute;inset:8%;-webkit-mask-image:radial-gradient(circle,#000 0 66%,#0000 90%);mask-image:radial-gradient(circle,#000 0 66%,#0000 90%)}.pattern-1 .placeholder-pattern{background-image:radial-gradient(circle,#36b8ea 0 2.3px,#0000 2.8px),radial-gradient(circle,#36b8ea 0 2.3px,#0000 2.8px);background-position:0 0,17px 10px;background-size:34px 20px}.pattern-2 .placeholder-pattern{background-image:radial-gradient(at 50% 48%,#36b8ea 0 2px,#0000 2.6px),repeating-radial-gradient(#0000 0 24px,#36b8ea24 25px 26px,#0000 27px 48px);background-size:30px 44px,100% 100%}.pattern-3 .placeholder-pattern{background-image:repeating-conic-gradient(from 8deg, transparent 0 8deg, #36b8ea40 9deg 10deg, transparent 11deg 18deg), repeating-radial-gradient(circle, transparent 0 22px, #36b8ea8c 23px 25px, transparent 26px 47px);background-size:100% 100%}.pattern-4 .placeholder-pattern{background-image:repeating-conic-gradient(from 0deg, transparent 0 7deg, #36b8eaad 8deg 9deg, transparent 10deg 17deg);background-size:100% 100%}.pattern-5 .placeholder-pattern{background-image:repeating-linear-gradient(34deg,#0000 0 27px,#36b8ea7a 28px 30px,#0000 31px 58px),repeating-linear-gradient(-34deg,#0000 0 27px,#36b8ea7a 28px 30px,#0000 31px 58px)}.pattern-6 .placeholder-pattern{background-image:radial-gradient(circle,#36b8ea 0 2.4px,#0000 2.9px);background-size:38px 38px}.pattern-7 .placeholder-pattern{background-image:repeating-conic-gradient(from 18deg, transparent 0 12deg, #36b8ea57 13deg 17deg, transparent 18deg 30deg), repeating-radial-gradient(circle, transparent 0 28px, #36b8ea52 29px 33px, transparent 34px 58px);background-size:100% 100%}.preview-center{background:#19a4e0;border:1px solid #7edeffb8;border-radius:50%;width:9px;height:9px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 18px #19a4e09e}.hole-square .preview-center{border-radius:2px}.hole-hexagon .preview-center{clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);border-radius:0}.hole-triangle .preview-center{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}.preview-caption{z-index:5;pointer-events:none;flex-direction:column;gap:5px;width:220px;display:flex;position:absolute;bottom:82px;left:28px}.preview-caption span{color:#2d7fa6;font-family:var(--font-geist-mono), monospace;letter-spacing:.16em;font-size:12px}.preview-caption strong{color:#93aabe;font-size:14px;font-weight:520}.preview-caption small{color:#41566b;font-size:10px}.right-tools{z-index:10;flex-direction:column;align-items:center;gap:0;width:44px;display:flex;position:absolute;top:33.333%;right:27px;transform:translateY(-22px)}.random-action,.add-compare{border-radius:10px;width:44px;height:44px}.add-compare{margin-top:20px}.random-action:hover{border-color:#0000}.add-compare:hover{box-shadow:inset 0 0 0 2px var(--icon)}.add-compare:hover img{filter:brightness(0)saturate()invert(57%)sepia(80%)saturate(1917%)hue-rotate(162deg)brightness(91%)contrast(94%)}.random-action:hover img{content:url(/ui-assets/preview-action-random-hover.svg);filter:none}.random-action:active img{content:url(/ui-assets/preview-action-random-pressed.svg);filter:none}.scheme-list{flex-direction:column;align-items:flex-start;gap:3px;width:57px;margin-top:4px;display:flex;transform:translate(6.5px)}.scheme-item{background:0 0;grid-template-columns:44px 13px;width:57px;height:44px;transition:transform .1s;display:grid;overflow:visible}.scheme-select:hover,.scheme-item.is-active .scheme-select{background:#19a4e0}.scheme-select,.scheme-delete{color:#999;cursor:pointer;background:0 0;border:0;place-items:center;min-width:0;height:44px;padding:0;display:grid;overflow:hidden}.scheme-select{border-radius:9px;width:44px;font-size:15px;transition:color .12s,background .12s,border-radius 80ms}.scheme-select:hover,.scheme-item.is-active .scheme-select{color:#203057}.scheme-item:has(.scheme-delete:hover) .scheme-select{border-radius:9px 0 0 9px}.scheme-item:active{transform:scale(.95)}.scheme-delete{width:13px;position:relative;overflow:visible}.scheme-delete:after{content:"";z-index:2;opacity:0;pointer-events:none;background:linear-gradient(45deg,#0000 39%,#fff 40% 60%,#0000 61%),linear-gradient(-45deg,#0000 39%,#fff 40% 60%,#0000 61%);width:8px;height:8px;transition:opacity 80ms;position:absolute;top:18px;left:2.5px}.scheme-delete img{z-index:1;opacity:0;width:13px;height:44px;transition:opacity 80ms;display:block;position:relative}.scheme-delete:hover img,.scheme-delete:focus-visible img,.scheme-delete:hover:after,.scheme-delete:focus-visible:after{opacity:1}.scheme-delete:active img{content:url(/ui-assets/preview-compare-delete-pressed.svg)}.help-anchor{z-index:12;position:absolute;bottom:74px;right:14px}.help-button{border-radius:50%;width:47px;height:47px}.help-button img{filter:saturate(.5)brightness(.9);width:47px;height:47px;transition:filter .14s;display:block}.help-button:hover img,.help-button.is-active img{filter:saturate()brightness(1.35)}.help-popover{width:260px;padding:16px;bottom:calc(100% + 10px);right:0}.help-popover strong{color:#7edcff;font-size:13px;font-weight:520}.help-popover p{color:#8596a8;margin:9px 0 0;font-size:11px;line-height:1.7}.status-bar{z-index:10;background:linear-gradient(90deg,#172852 0%,#0f172a 100%);border-radius:8px;grid-template-columns:auto minmax(120px,1fr) auto 42px auto;align-items:center;gap:22px;min-height:52px;padding:0 12px 0 18px;display:grid;position:absolute;bottom:10px;left:14px;right:14px;box-shadow:0 8px 25px #00000038}.icp-link{color:#557087;white-space:nowrap;font-size:10px;line-height:1.2;text-decoration:none}.icp-link:hover,.icp-link:focus-visible{color:#88c8e3;outline:none}.status-summary{align-items:center;gap:20px;display:flex}.status-summary span,.zoom-status{color:#8393a4;white-space:nowrap;font-size:14px}.status-summary strong,.zoom-status strong{color:#b8c6d3;margin-left:4px;font-weight:500}.status-bar p{color:#557087;text-align:center;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;font-size:12px;overflow:hidden}.like-button{border-radius:10px;width:40px;height:40px;transition:background .14s,transform .1s;position:relative;overflow:visible}.like-button img{z-index:2;filter:grayscale(.72)brightness(.66);width:40px;height:40px;transition:filter .14s;position:relative}.like-button:hover img{filter:none}.like-button:hover{background:#19a4e0}.like-button.is-liked{background:#1677ff}.like-button.is-liked img{filter:hue-rotate(18deg)saturate(1.35)}.like-burst{z-index:3;pointer-events:none;width:0;height:0;position:absolute;top:50%;left:50%}.like-burst:after{content:"";opacity:0;border:2px solid #7edcff;border-radius:50%;width:18px;height:18px;animation:.76s ease-out both like-ring;position:absolute;top:-9px;left:-9px}.like-burst i{opacity:0;background:var(--burst-color);width:6px;height:6px;box-shadow:0 0 8px color-mix(in srgb, var(--burst-color) 65%, transparent);animation:like-firework .98s cubic-bezier(.18, .62, .28, 1) var(--burst-delay) both;border-radius:2px;position:absolute;top:-3px;left:-3px}.like-burst i:nth-child(3n){border-radius:50%}.like-burst i:nth-child(2n){width:4px;height:9px}@keyframes like-firework{0%{opacity:0;transform:rotate(var(--burst-angle)) translateY(-6px) scale(.25)}12%,68%{opacity:1}to{opacity:0;transform:rotate(var(--burst-angle)) translateY(calc(var(--burst-distance) * -1)) rotate(160deg) scale(.2)}}@keyframes like-ring{0%{opacity:.9;transform:scale(.4)}70%{opacity:.55}to{opacity:0;transform:scale(3.5)}}@media (width<=1500px){.canvas-brand div>span{display:none}}@media (width<=1250px){.canvas-brand>div{display:none}}@media (width<=1180px){.workspace{grid-template-columns:360px minmax(0,1fr)}.control-rail{grid-template-rows:minmax(0,1fr) 90px}.control-rail-scroll{gap:var(--controls-card-gap)}.pattern-controls-container{flex-basis:158px;height:158px}.pattern-options,.hole-options{gap:2px}.pattern-options button,.hole-options button{flex-basis:38px;width:38px;height:38px}.canvas-header{padding-left:20px}.canvas-title span,.status-bar p{display:none}.status-bar{grid-template-columns:1fr auto 42px auto}.status-summary{gap:12px}}@media (width<=900px){body{overflow:auto}.tool-app{width:100%;height:auto;min-height:100dvh}.workspace{grid-template-columns:320px minmax(580px,1fr);min-height:100dvh;overflow-x:auto}.control-rail{min-height:100dvh}.pattern-options button,.hole-options button{flex-basis:33px;width:33px;height:33px}.parameter-footer{gap:8px}}@media (width<=620px){.app-titlebar{padding-inline:12px}.app-brand div>span,.prototype-badge{display:none}.workspace{min-height:0;display:block;overflow:visible}.control-rail{border-right:0;min-height:920px}.pattern-options button,.hole-options button{flex-basis:40px;width:40px;height:40px}.preview-workspace{grid-template-rows:minmax(640px,1fr);min-height:720px}.top-actions{justify-content:flex-end;width:100%}.preview-disc{width:min(84vw,480px);top:43%}.preview-caption{display:none}.status-bar{grid-template-columns:1fr auto 40px;gap:8px;padding-left:12px}.status-summary span:nth-child(2),.status-summary span:nth-child(3),.zoom-status{display:none}.icp-link{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}