:root{--surface-window:#fff;--surface-panel:#f7f7f7;--surface-card:#fff;--surface-viewport:#f0f0f0;--text-primary:#707070;--text-secondary:#888;--text-muted:#9a9a9a;--text-on-accent:#fff;--control-bg:#f2f2f2;--control-hover:#ededed;--control-pressed:#d2d2d2;--control-selected:#ddd;--control-border:#e0e0e0;--accent:#49d7df;--accent-soft:#dffaff;--slider-track:#e3e3e3;--slider-thumb-border:#b8b8b8;--toggle-off:#b8b8b8;--toggle-thumb:#f7f7f7;--radius-window:7px;--radius-card:24px;--radius-popup:12px;--radius-tile:28px;--font-ui:"Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}html{background:var(--surface-viewport)}body{font-family:var(--font-ui);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow:hidden}button,input{font:inherit}button{color:inherit}.app-surface{background:var(--surface-viewport);width:100%;height:100%;position:relative;overflow:hidden}.screen{position:absolute;inset:0}.fade-screen{animation:.65s cubic-bezier(.65,0,.35,1) both screenIn}@keyframes screenIn{0%{opacity:0}to{opacity:1}}.back-button{z-index:60;width:20px;height:20px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:28px;font-weight:100;line-height:16px;position:absolute;top:5px;left:5px}.back-button:hover{color:var(--text-primary)}.intro-screen{place-items:center;display:grid}.intro-center{flex-direction:column;align-items:center;display:flex;transform:translateY(-10px)}.intro-title{min-height:42px;color:var(--text-primary);align-items:center;font-size:20px;font-weight:300;transition:transform .8s cubic-bezier(.65,0,.35,1);display:flex;transform:translateY(0)}.intro-title.raised{transform:translateY(-100px)}.intro-icon{object-fit:contain;width:24px;height:24px;margin-right:8px;animation:.9s cubic-bezier(.2,1.35,.35,1) both iconPop}@keyframes iconPop{0%{transform:scale(0)}to{transform:scale(1)}}.explore-button{border:1px solid var(--control-border);background:var(--surface-card);width:250px;height:45px;color:var(--text-primary);cursor:pointer;opacity:0;border-radius:22px;margin-top:-65px;font-size:16px;transition:background .16s;transform:scale(0)}.explore-button.show{opacity:1;animation:.8s cubic-bezier(.2,1.35,.35,1) both bubblePop}.explore-button:hover{background:var(--control-hover)}@keyframes bubblePop{0%{transform:scale(0)}to{transform:scale(1)}}.explore-scroll{scrollbar-width:none;overscroll-behavior-x:none;touch-action:pan-y;position:absolute;inset:55px 36px 35px;overflow:hidden auto}.explore-scroll::-webkit-scrollbar{display:none}.tile-grid{grid-template-columns:repeat(4,minmax(150px,1fr));width:min(100%,1120px);margin:0 auto;display:grid}.pattern-tile{aspect-ratio:1;border-radius:var(--radius-tile);border:1px solid var(--control-border);background:var(--surface-card);cursor:pointer;min-width:150px;min-height:150px;margin:14px;transition:transform .18s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;transform:scale(1)}.pattern-tile:hover{z-index:2;transform:scale(1.08)}.pattern-tile img{object-fit:cover;opacity:1;width:100%;height:100%;transition:opacity .18s linear;position:absolute;inset:0}.pattern-tile .tile-title{text-align:center;color:var(--text-primary);opacity:0;place-items:center;font-size:clamp(16px,2vw,26px);font-weight:300;transition:opacity .18s linear;display:grid;position:absolute;inset:22px}.pattern-tile:hover img{opacity:0}.pattern-tile:hover .tile-title{opacity:1}.pattern-tile.disabled{cursor:default}.pattern-tile.disabled .tile-title{opacity:1}.pattern-tile.disabled:hover{transform:scale(1)}.visualizer-screen{grid-template-columns:360px 20px minmax(0,1fr);padding:20px;display:grid}.control-card{background:var(--surface-panel);border-radius:var(--radius-card);grid-column:1;grid-template-rows:auto 10px minmax(0,1fr) auto;min-height:0;padding:14px 22px 22px;display:grid;overflow:hidden}.control-title{color:var(--text-primary);margin:0 0 6px;font-size:30px;font-weight:300;line-height:1.15}.control-header{min-height:26px}.control-scroll{scrollbar-width:thin;scrollbar-color:var(--control-border) transparent;grid-row:3;padding-right:3px;overflow:hidden auto}.control-utility{grid-row:4;margin-top:14px}.viewport-frame{border-radius:var(--radius-card);background:var(--surface-viewport);grid-column:3;min-width:0;min-height:0;position:relative;overflow:hidden}.viewport-frame canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.header-grid{grid-template-columns:auto 1fr 130px;align-items:start;display:grid}.header-grid.wide{grid-template-columns:auto 1fr 150px}.header-right{grid-column:3}.menu-selector{width:max-content;position:relative}.menu-trigger{cursor:pointer;background:0 0;border:0;align-items:center;height:18px;padding:0;display:flex}.hamburger{border-radius:8px;align-content:center;justify-items:center;gap:2.2px;width:22px;height:18px;display:grid}.menu-trigger:hover .hamburger{background:var(--control-hover)}.hamburger i{background:var(--text-muted);border-radius:1px;width:16px;height:1.4px;display:block}.menu-selected{color:var(--text-muted);margin-left:6px;font-size:13px}.popup-wrap{z-index:100;padding-top:6px;position:absolute;top:100%;left:0}.popup-wrap.above{padding-top:0;padding-bottom:6px;top:auto;bottom:100%}.popup-card{background:var(--surface-card);border:1px solid var(--control-border);border-radius:var(--radius-popup);opacity:0;min-width:110px;padding:8px;animation:.18s forwards popupIn;box-shadow:0 8px 30px #0000000a}@keyframes popupIn{to{opacity:1}}.popup-option{width:100%;min-height:28px;color:var(--text-secondary);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;margin:1px 0;padding:4px 6px;font-size:13px}.popup-option:hover{background:var(--control-hover);color:var(--text-primary)}.popup-option:active{background:var(--control-pressed)}.popup-option:disabled{opacity:.45;cursor:default}.section-header{width:100%;position:relative}.pill-button{background:var(--control-bg);width:100%;min-height:22px;color:var(--text-secondary);cursor:pointer;border:0;border-radius:7px;padding:2px 8px;font-size:13px;font-weight:600}.pill-button:hover{background:var(--control-hover)}.pill-button.selected{background:var(--control-selected);color:var(--text-primary)}.segmented{grid-template-columns:1fr 2px 1fr;margin-bottom:8px;display:grid}.segmented .pill-button:first-child{grid-column:1}.segmented .pill-button:last-child{grid-column:3}.toggle-row{grid-template-columns:1fr 48px;align-items:center;margin:0 0 10px;display:grid}.toggle-row.spaced{margin-top:22px}.toggle-label{color:var(--text-secondary);font-size:14px;font-weight:600}.toggle-switch{background:var(--toggle-off);cursor:pointer;width:34px;height:18px;box-shadow:none;border:0;border-radius:999px;outline:none;justify-self:end;padding:0;transition:background .16s ease-out;position:relative}.toggle-switch:after{content:"";background:var(--toggle-thumb);width:12px;height:12px;box-shadow:none;border:0;border-radius:50%;transition:transform .16s ease-out;position:absolute;top:50%;left:3px;transform:translateY(-50%)}.toggle-switch.on{background:var(--accent)}.toggle-switch.on:after{transform:translate(16px,-50%)}.labeled-slider{margin-bottom:12px;display:block}.slider-label{color:var(--text-muted);font-size:13px}.slider-row{grid-template-columns:minmax(0,1fr) 48px;align-items:center;height:28px;display:grid}.slider-wrap{align-items:center;height:32px;margin-right:10px;display:flex}.slider-input{--fill:0%;appearance:none;cursor:pointer;background:0 0;width:100%;height:24px}.slider-input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0 var(--fill), var(--slider-track) var(--fill) 100%);border-radius:3px;height:5px}.slider-input::-moz-range-track{background:var(--slider-track);border-radius:3px;height:5px}.slider-input::-moz-range-progress{background:var(--accent);border-radius:3px;height:5px}.slider-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--surface-card);border:1.5px solid var(--accent);width:13px;height:24px;box-shadow:none;filter:none;border-radius:7px;outline:none;margin-top:-9.5px}.slider-input::-moz-range-thumb{background:var(--surface-card);border:1.5px solid var(--accent);width:11px;height:22px;box-shadow:none;filter:none;border-radius:7px;outline:none}.slider-input.at-min::-webkit-slider-thumb{border-color:var(--slider-thumb-border)}.slider-input.at-min::-moz-range-thumb{border-color:var(--slider-thumb-border)}.slider-input.at-max::-webkit-slider-thumb{background:var(--accent);border-color:var(--accent)}.slider-input.at-max::-moz-range-thumb{background:var(--accent);border-color:var(--accent)}.value-box{width:48px;min-width:34px;color:var(--text-muted);text-align:right;background:0 0;border:1px solid #0000;border-radius:8px;outline:none;padding:1px 4px;font-size:13px}.value-box:hover{background:var(--control-bg);border-color:var(--control-border)}.value-box:focus{background:var(--surface-card);border-color:var(--slider-thumb-border)}.utility-bar{align-items:center;gap:8px;display:flex}.utility-item{position:relative}.utility-button{background:var(--control-selected);cursor:pointer;border:0;border-radius:12px;place-items:center;width:42px;height:42px;padding:0;display:grid}.utility-button:hover{background:var(--control-hover)}.utility-button:active{background:var(--control-pressed)}.utility-button img{object-fit:contain;opacity:.72;width:22px;height:22px}.layer-popup{min-width:245px}.popup-title{color:var(--text-primary);margin:0 2px 8px;font-size:14px;font-weight:600}.layer-row{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:8px;grid-template-columns:minmax(0,1fr) 48px;align-items:center;min-height:30px;margin:1px 0;padding:3px 6px;display:grid}.layer-row:hover{background:var(--control-hover)}.layer-row.dragging{opacity:.5;cursor:grabbing}.layer-name{color:var(--text-primary);font-size:13px;font-weight:600}.layer-toggle-cell{justify-content:flex-end;align-items:center;width:48px;display:flex}.layer-row .toggle-switch{margin:0}.preset-button{width:100%;height:36px;margin:0 0 8px}.preset-description{color:var(--text-muted);margin:10px 4px 0;font-size:12px;line-height:1.4}.panel-note{color:var(--text-secondary);margin:0 0 14px;font-size:13px;line-height:1.4}.color-control{width:100%}.color-picker{touch-action:none;width:190px;height:190px;margin:0 auto 14px;position:relative}.color-picker canvas{width:190px;height:190px;display:block}.color-handle{border:2px solid var(--surface-card);pointer-events:none;border-radius:50%;width:22px;height:22px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000001f}.color-preview{border:1px solid var(--control-border);border-radius:12px;grid-template-columns:1fr 1fr;height:34px;margin-bottom:14px;display:grid;overflow:hidden}.color-preview button{cursor:pointer;border:0}.color-preview div{min-width:0}.hex-input{border:1px solid var(--control-border);background:var(--surface-card);width:100%;color:var(--text-secondary);border-radius:10px;outline:none;margin-bottom:12px;padding:6px 8px;font-size:13px}.hex-input:focus{border-color:var(--slider-thumb-border)}.color-model-menu{margin-bottom:12px}.viewport-status{color:#7070708c;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:10px;position:absolute;bottom:10px;right:12px}@media (max-width:899px){.tile-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}}@media (max-width:620px){html,body{width:100%;max-width:100%;overflow-x:hidden}body{overflow-y:auto}.app-surface{width:100%;max-width:100%;height:auto;min-height:100%;overflow-x:hidden}.explore-scroll{overscroll-behavior-x:none;touch-action:pan-y;-webkit-overflow-scrolling:touch;inset:48px 12px 16px;overflow:hidden auto}.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}.pattern-tile{width:100%;min-width:0;min-height:0;margin:0}.visualizer-screen{grid-template-rows:auto 10px minmax(480px,1fr);grid-template-columns:1fr;min-height:100vh;padding:10px}.control-card{grid-column:1;max-height:48vh}.viewport-frame{grid-area:3/1;min-height:480px}}.penrose-canvas.duplicate-on{cursor:grab}.penrose-canvas.duplicate-on:active{cursor:grabbing}.penrose-animate-button{width:100%;height:34px;margin:4px 0 12px;font-weight:500}.icon-utility-button{color:var(--text-muted)}.icon-utility-button svg{fill:currentColor;width:21px;height:21px;display:block}.icon-utility-button.active{color:var(--accent)}.penrose-animation-row{grid-template-columns:1fr 48px;align-items:center;margin:2px 0 10px;display:grid}.inline-animation-button{border-radius:10px;justify-self:end;width:34px;height:34px}.inline-animation-button svg{width:18px;height:18px}:is(.viewport-frame:fullscreen,.viewport-frame.pseudo-fullscreen){background:var(--surface-viewport);border-radius:0}.viewport-frame.pseudo-fullscreen{z-index:10000!important;width:100vw!important;min-width:0!important;height:100dvh!important;min-height:0!important;position:fixed!important;inset:0!important}.fullscreen-overlay-controls{z-index:25;top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));position:absolute}.fullscreen-overlay-controls .utility-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f5f5f5e0}.density-slider{margin-bottom:16px}.density-track-row{align-items:center;height:28px;padding-right:0;display:flex}.density-track-row .slider-input{width:100%}.density-labels{color:var(--text-muted);text-transform:lowercase;grid-template-columns:1fr 1fr 1fr;margin-top:-3px;font-size:10px;line-height:1;display:grid}.density-labels span:first-child{text-align:left}.density-labels span:nth-child(2){text-align:center}.density-labels span:last-child{text-align:right}.fullscreen-overlay-controls{align-items:center;gap:8px;display:flex}.penrose-export-popup{width:292px;max-width:calc(100vw - 24px)}.export-config{padding:2px}.export-config-header{text-transform:lowercase;grid-template-columns:28px 1fr 28px;align-items:center;height:28px;margin-bottom:8px;font-size:13px;display:grid}.export-config-header strong{text-align:center;color:var(--text-primary);grid-column:2;font-weight:600}.export-back{width:26px;height:26px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:8px;grid-column:1;padding:0;font-size:23px;line-height:22px}.export-back:hover{background:var(--control-hover);color:var(--text-primary)}.export-size-label{color:var(--text-muted);margin:2px 2px 5px;font-size:11px}.export-ratio-grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.export-ratio{background:var(--control-bg);min-width:0;height:30px;color:var(--text-secondary);cursor:pointer;border:1px solid #0000;border-radius:8px;padding:0 5px;font-size:11px}.export-ratio:hover{background:var(--control-hover)}.export-ratio.selected{background:var(--control-selected);border-color:var(--control-border);color:var(--text-primary)}.export-resolution{min-height:24px;color:var(--text-muted);text-align:right;padding:5px 2px 4px;font-size:10px}.export-time-input{min-height:36px;color:var(--text-muted);grid-template-columns:1fr 62px 34px;align-items:center;gap:5px;margin:2px 0 10px;font-size:12px;display:grid}.export-time-input input{border:1px solid var(--control-border);background:var(--surface-card);width:62px;height:28px;color:var(--text-secondary);text-align:right;border-radius:8px;outline:none;padding:2px 5px}.export-time-input input:focus{border-color:var(--accent)}.export-time-input small{color:var(--text-muted);font-size:9px}.export-create-button,.export-ready button{background:var(--control-selected);width:100%;min-height:31px;color:var(--text-secondary);cursor:pointer;border:0;border-radius:9px;margin-top:4px;font-size:12px}.export-create-button:hover,.export-ready button:hover{background:var(--control-hover);color:var(--text-primary)}.export-create-button:disabled{cursor:wait;opacity:.72}.export-progress{background:var(--slider-track);border-radius:2px;height:3px;margin:7px 2px 1px;overflow:hidden}.export-progress i{background:var(--accent);border-radius:inherit;height:100%;transition:width .12s linear;display:block}.export-error{color:#a55;margin-top:7px;font-size:10px;line-height:1.3}.export-ready{grid-template-columns:1fr 1fr;gap:5px;margin-top:4px;display:grid}.export-ready .export-again{border:1px solid var(--control-border);background:0 0;grid-column:1/-1}@media (max-width:620px){.penrose-export-popup{width:min(292px,100vw - 34px)}}