@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap";:root{font-family:Plus Jakarta Sans,Avenir Next,ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#22304a;background:#fbf7ef;--accent: #3c6df0;--accent-soft: #dfe8ff;--accent-wash: #f3f6ff;--border: #eadfce;--border-strong: #d8cbb7;--ink: #22304a;--muted: #6f7a8d;--panel: rgba(255, 253, 248, .92);--surface: #ffffff;--warm-bg: #fbf7ef;--shadow-soft: 0 18px 46px rgba(58, 47, 31, .09);--shadow-lift: 0 14px 32px rgba(43, 54, 82, .12);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{height:100%}body{background:radial-gradient(circle at 18% 10%,rgba(255,255,255,.95),transparent 34%),linear-gradient(135deg,#fbf7ef 0%,#f8f1e5 100%);margin:0;min-width:320px;min-height:100vh;overflow:hidden}button,input,select{font:inherit}button,.file-button{align-items:center;background:#ffffff;border:1px solid #d9e2f8;border-radius:8px;color:#22304a;cursor:pointer;display:inline-flex;gap:8px;height:40px;justify-content:center;min-height:40px;padding:8px 12px;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}button:hover,.file-button:hover{border-color:#9db7ff;box-shadow:var(--shadow-lift);transform:translateY(-1px)}button.active,button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button:disabled{cursor:wait;opacity:.58}button:focus-visible,.file-button:focus-visible,input:focus-visible,select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px #3c6df029;outline:none}input[type=file]{display:none}select,input[type=number],input[type=text],input[type=color]{background:#ffffff;border:1px solid #d9e2f8;border-radius:8px;color:#22304a;height:40px;min-height:40px;padding:6px 8px;width:100%}input[type=range]{accent-color:var(--accent);width:100%}.background-inputs,.background-main-row{display:grid;gap:6px;grid-template-columns:48px 86px}.background-main-row{align-items:center;grid-template-columns:48px 86px max-content}.background-main-row .transparent-toggle:first-child{grid-column:1 / -1}.background-section{align-items:start}.background-colour-control{display:grid;gap:4px;min-width:268px!important}.background-pattern-control{display:grid;gap:4px;min-width:172px!important;padding-top:0}.background-style-row{display:grid;gap:6px;grid-template-columns:minmax(104px,1fr) 42px}.background-style-row input[type=color]{min-height:40px;width:42px}.transparent-toggle{align-items:center;color:var(--muted)!important;display:flex!important;flex-direction:row;font-size:.72rem!important;gap:6px!important;min-height:40px;min-width:0!important;white-space:nowrap}.transparent-toggle input{width:auto}.hex-input{min-height:40px;text-transform:uppercase}.field-caption{color:var(--muted);display:block;font-size:.68rem;font-weight:750;margin-top:0}.pattern-name-input{min-width:0}.pattern-name-control{min-width:0!important}.suggested-colour-block{display:grid;gap:3px;margin-top:4px}.suggested-colour-block span{color:var(--muted);font-size:.68rem;font-weight:750}.suggested-colours,.suggested-colour-row{display:grid;gap:5px;grid-template-columns:repeat(6,18px)}.suggested-title{color:var(--muted);font-size:.68rem;font-weight:750;margin-top:2px}.colour-swatch{border:1px solid rgba(34,48,74,.22);border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff80;display:block;height:18px;min-height:18px;min-width:18px;padding:0;width:18px}.topbar .colour-swatch{height:18px;min-height:18px;min-width:18px;width:18px}.colour-swatch:hover{border-color:var(--accent);box-shadow:0 0 0 2px #3c6df024;transform:none}.app-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;min-height:100vh;overflow:hidden}.topbar{align-items:center;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:rgba(255,253,248,.94);border-bottom:1px solid var(--border);display:grid;gap:14px;grid-template-columns:minmax(230px,1fr) max-content max-content;padding:12px 16px;position:sticky;top:0;z-index:2}.topbar-section{align-items:end;border-left:1px solid var(--border);display:flex;gap:10px;min-width:0;padding-left:14px}.topbar-section label{min-width:84px}.topbar-section select{min-width:96px}.reset-section{align-self:end}.topbar button,.topbar input,.topbar select,.topbar .file-button{font-size:.92rem;font-weight:750}.topbar button,.topbar .file-button{flex:0 0 auto;height:40px;white-space:nowrap}.topbar .file-button{display:inline-flex}.export-size-control label{display:grid;gap:4px}.export-size-control select{min-width:0}.watermark-toggle{align-items:center;color:var(--muted)!important;display:flex!important;flex-direction:row;font-size:.72rem!important;gap:6px!important;min-width:0!important}.watermark-toggle input{width:auto}.custom-size-fields{display:grid;gap:8px;grid-template-columns:1fr 1fr}.custom-size-fields label{min-width:0}.export-panel{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,251,244,.72));border:1px solid #eadfce;border-radius:10px;box-shadow:0 10px 24px #3a2f1f0d;display:grid;gap:10px;padding:12px}.export-panel h2{margin-bottom:2px}.export-panel .pattern-name-input,.export-panel select,.export-panel input[type=number]{font-size:.88rem;font-weight:750}.export-panel .export-size-control{display:grid;gap:7px}.export-size-note{color:var(--muted);font-size:.7rem;line-height:1.3;margin:-2px 0 0}.export-warning{background:#fff8e7;border:1px solid #ead8ae;border-radius:8px;color:#70512d;font-size:.72rem;font-weight:750;line-height:1.3;margin:0;padding:8px 9px}.export-action-row{align-items:end;display:grid;gap:8px;grid-template-columns:88px 1fr}.export-action-row button,.project-action-row button,.project-action-row .file-button{width:100%}.project-action-row{display:grid;gap:8px;grid-template-columns:1fr 1fr}.project-action-row .file-button{display:inline-flex;flex-direction:row;font-size:.92rem;font-weight:750}.sample-pattern-button{min-height:42px;width:100%}.brand{align-items:center;display:flex;gap:8px;min-width:0}.brand-logo{aspect-ratio:1;border:0;border-radius:0;box-shadow:none;flex:0 0 auto;height:56px;object-fit:contain;object-position:center;width:56px}h1,h2,h3,p{margin:0}h1{font-family:Fraunces,Plus Jakarta Sans,ui-serif,Georgia,serif;font-size:1.34rem;font-weight:700;letter-spacing:0;line-height:1.1}h2{font-family:Fraunces,Plus Jakarta Sans,ui-serif,Georgia,serif;font-size:.98rem;font-weight:700;letter-spacing:0}h3{color:var(--ink);font-size:.86rem;font-weight:800;line-height:1.25}.brand span,.soft-text,.canvas-caption{color:var(--muted);font-size:.86rem}.topbar label,.sidebar label{color:#48556b;display:grid;font-size:.76rem;font-weight:800;gap:5px}.local-trust-note{border-top:1px solid rgba(234,223,206,.7);color:#87909e;font-size:.68rem;font-weight:650;line-height:1.4;padding:8px 16px 10px;text-align:center}.local-trust-note a{color:#6f7a8d;font-weight:800;text-decoration:none}.local-trust-note a:hover,.coffee-link:hover{color:var(--accent)}.coffee-link{align-items:center;background:#fff8ec;border:1px solid #ead8ae;border-radius:999px;color:var(--ink);display:inline-flex;font-weight:850;min-height:38px;padding:8px 14px;text-decoration:none}.topbar label.file-button{display:inline-flex;min-width:0}.workspace{display:grid;gap:16px;grid-template-columns:300px minmax(360px,1fr) 300px;min-height:0;overflow:hidden;padding:14px 18px}.workspace-no-tools{grid-template-columns:300px minmax(360px,1fr)}.sidebar{align-content:start;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 34px #3a2f1f0d;display:grid;gap:14px;height:100%;max-height:none;min-height:0;overflow:auto;padding:14px}.left-panel{grid-template-rows:auto minmax(0,1fr);overflow:hidden}.elements-panel{align-content:start;display:grid;gap:14px;min-height:0}.upload-box{align-items:center;background:#f5f8ff;border:1px dashed #9eb8f6;border-radius:10px;color:#3f5f9c;cursor:pointer;justify-items:center;min-height:108px;padding:16px;text-align:center}.dragging-upload .upload-box{background:#edf4ff;border-color:var(--accent);box-shadow:inset 0 0 0 2px #3c6df021}.motif-list{display:grid;gap:10px;overflow:auto;padding-right:4px}.motif-card{align-items:center;background:#ffffff;border:1px solid #e2e8f7;border-radius:10px;box-shadow:0 8px 18px #2b36520a;display:grid;gap:8px;grid-template-columns:54px minmax(0,1fr);justify-content:start;min-width:0;padding:8px;text-align:left}.motif-card img{aspect-ratio:1;background:#f7f4ef;border-radius:8px;object-fit:contain;padding:4px;width:54px}.motif-details{display:grid;gap:5px;min-width:0}.motif-details span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.magic-toggle{align-items:center;color:var(--muted)!important;display:flex!important;flex-direction:row;font-size:.72rem!important;gap:6px!important}.magic-toggle input{height:17px;width:17px}.add-motif-button,.fill-tile-button,.delete-motif-button{align-items:center;display:inline-flex;justify-content:center;line-height:1;min-height:34px;padding-bottom:0;padding-top:0}.add-motif-button{grid-column:1}.fill-tile-button{grid-column:2}.delete-motif-button{grid-column:1 / -1}.canvas-zone{align-content:start;display:grid;gap:12px;min-height:0;min-width:0;overflow:auto;padding-bottom:8px}.starter-card{align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,248,231,.78));border:1px solid #eadfce;border-radius:12px;box-shadow:0 14px 34px #3a2f1f0f;display:grid;gap:12px;grid-template-columns:minmax(0,1fr) auto;justify-self:center;max-width:780px;padding:14px 16px;width:min(100%,780px)}.starter-card h2{margin:1px 0 4px}.starter-card p:not(.eyebrow){color:var(--muted);font-size:.84rem;line-height:1.35;margin:0}.starter-actions{display:flex;gap:8px}.starter-actions button{white-space:nowrap}.canvas-stage{align-items:start;display:grid;gap:16px;grid-template-columns:minmax(320px,1fr) minmax(220px,320px);justify-items:center;width:100%}.large-preview-stage{align-items:start;grid-template-columns:minmax(420px,1fr) minmax(220px,320px)}.large-preview-stage .editor-panel{order:2}.large-preview-stage .live-preview-panel{order:1}.editor-panel,.live-preview-panel{display:grid;gap:10px;justify-items:center;min-width:0;width:100%}.live-preview-panel{align-content:start;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 42px #3a2f1f0f;overflow:hidden;padding:12px}.tile-canvas,.preview-canvas{aspect-ratio:1;background:#ffffff;border:2px solid #25324b;border-radius:10px;box-shadow:var(--shadow-soft);cursor:grab;display:block;height:auto;max-width:min(100%,720px);touch-action:none}.preview-canvas{border-color:var(--accent);cursor:zoom-in;max-width:100%}.preview-canvas-wrap{display:grid;justify-items:center;position:relative;width:100%}.large-preview-panel .preview-canvas{max-width:min(100%,760px)}.locked-tile-badge{align-items:center;background:#fff8e7;border:1px solid #ead8ae;border-radius:10px;color:#25324b;display:flex;gap:10px;max-width:min(100%,640px);padding:9px 12px;text-align:left}.locked-tile-badge svg{color:#c9812d;flex:0 0 auto}.locked-tile-badge span{color:var(--muted);font-size:.76rem;line-height:1.25}.locked-tile-badge strong{color:#25324b;display:block;font-size:.82rem}.preview-tools{align-items:end;display:grid;gap:8px;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(130px,190px));width:100%}.preview-tools label{min-width:0}.preview-control{color:#48556b;display:grid;font-size:.72rem;font-weight:800;gap:4px}.preview-control select{font-size:.88rem;font-weight:750}.preview-center-toggle{grid-column:1 / -1}.control-stack,.generator-panel,.transform-panel{display:grid;gap:12px}.generator-panel,.transform-panel{border-top:1px solid var(--border);margin-top:4px;padding-top:14px}.selected-panel{border-bottom:1px solid var(--border);padding-bottom:14px}.selected-panel+.transform-panel{border-top:0;margin-top:0;padding-top:0}.panel-toggle{justify-content:space-between;width:100%}.panel-toggle span{color:inherit;font-size:.72rem;opacity:.75}.icon-button{min-width:40px;padding:8px}.info-button{background:#fff8ec;border-color:#ead8ae}.info-modal-backdrop{align-items:center;background:rgba(34,48,74,.36);display:grid;top:0;right:0;bottom:0;left:0;justify-items:center;padding:18px;position:fixed;z-index:20}.info-modal{background:#fffdf8;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 90px #19202f47;display:grid;max-height:min(780px,calc(100vh - 36px));max-width:900px;overflow:hidden;width:min(900px,100%)}.info-modal-header{align-items:center;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:18px 20px}.eyebrow{color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.info-modal-layout{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0}.info-nav{background:#fbf6ed;border-right:1px solid var(--border);display:grid;gap:8px;padding:16px;align-content:start}.info-nav button{justify-content:center;text-align:center;width:100%}.info-nav button.active{background:var(--accent);border-color:var(--accent);color:#fff}.info-content{display:grid;gap:12px;max-height:calc(min(780px,100vh - 36px) - 78px);overflow:auto;padding:20px}.info-content>h2{font-size:1.18rem}.info-content p,.info-content li{color:var(--muted);font-size:.86rem;line-height:1.55}.info-content strong{color:var(--ink)}.info-content a{color:var(--accent);font-weight:800}.info-card{background:#ffffff;border:1px solid #e7dece;border-radius:10px;display:grid;gap:8px;padding:14px}.info-card ul{display:grid;gap:6px;margin:0;padding-left:18px}.quickstart-poster{background:radial-gradient(circle at top left,rgba(230,196,132,.24),transparent 34%),linear-gradient(135deg,#fffaf0 0%,#ffffff 58%,#f8fbf6 100%);border:1px solid #eadfcf;border-radius:16px;display:grid;gap:14px;padding:16px}.quickstart-hero{background:rgba(255,255,255,.78);border:1px solid #ead8ae;border-radius:12px;padding:16px}.quickstart-hero h3{font-size:1.35rem;line-height:1.12;margin:4px 0 0}.mode-cards{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.mode-cards div,.quickstart-steps li{background:rgba(255,255,255,.9);border:1px solid #dfe7ff;border-radius:12px;box-shadow:0 10px 24px #1e2d4a0f}.mode-cards div{display:grid;gap:4px;padding:12px}.mode-cards span{color:var(--ink);font-weight:800}.quickstart-steps{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));list-style:none;margin:0;padding:0}.quickstart-steps li{align-content:start;display:grid;gap:8px;min-height:160px;padding:12px}.step-badge{align-items:center;background:var(--accent);border-radius:999px;color:#fff;display:inline-flex;font-size:.78rem;font-weight:900;height:28px;justify-content:center;width:28px}.quickstart-steps h3{font-size:.95rem;margin:0}.quickstart-steps p,.mode-cards p,.quickstart-tips p{margin:0}.quickstart-tips{background:rgba(247,251,246,.9);border:1px dashed #bdd1b6;border-radius:12px;display:grid;gap:4px;padding:12px}.feature-map{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.feature-map section{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,251,243,.96));border:1px solid #e7dece;border-radius:12px;box-shadow:0 10px 26px #1e2d4a0d;display:grid;gap:8px;padding:14px}.feature-map h3{font-size:.98rem;margin:0}.feature-map ul{display:grid;gap:5px;margin:0;padding-left:18px}.release-notes{display:grid;gap:12px}.release-card{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,251,243,.96));border:1px solid #e7dece;border-radius:12px;box-shadow:0 10px 26px #1e2d4a0d;display:grid;gap:8px;padding:14px}.release-card.current{background:linear-gradient(135deg,rgba(255,248,226,.96),rgba(247,251,246,.96));border-color:#ead8ae}.release-card h3,.release-card p{margin:0}.release-card h3{font-size:1rem}.release-card ul{display:grid;gap:5px;margin:0;padding-left:18px}.privacy-card{align-items:start;grid-template-columns:32px 1fr}.privacy-card svg{color:#4a8a62}.faq-list{display:grid;gap:8px}.faq-list details{background:#ffffff;border:1px solid #e7dece;border-radius:10px;padding:12px 14px}.faq-list summary{color:var(--ink);cursor:pointer;font-weight:800}.faq-list p{margin-top:8px}.generator-panel-collapsed{padding-top:12px}.range-with-value{align-items:center;display:grid;gap:8px;grid-template-columns:1fr 64px}.range-with-value input[type=number]{text-align:center}.compact-range{gap:6px;grid-template-columns:minmax(72px,1fr) 58px}.hint-text{color:var(--muted);font-size:.78rem;line-height:1.35}.button-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.button-grid button{min-width:0}.variation-reset-button{grid-column:1 / -1}.split-row{display:grid;gap:8px;grid-template-columns:1fr 1fr}.mode-switch{background:#f6f1e8;border:1px solid var(--border);border-radius:10px;display:grid;gap:4px;grid-template-columns:1fr 1fr;padding:4px}.mode-switch button{border:0;box-shadow:none;height:34px;min-height:34px;padding:6px 8px}.mode-switch button:not(.active){background:transparent}.mode-switch button:hover{box-shadow:none}.repeat-source-card{align-items:center;background:#ffffff;border:1px solid #e3e8f6;border-radius:10px;display:grid;gap:10px;grid-template-columns:48px 1fr;min-height:62px;padding:8px}.repeat-source-card img{aspect-ratio:1;background:#f7f4ef;border-radius:8px;object-fit:contain;padding:4px;width:48px}.repeat-source-card div{display:grid;gap:2px;min-width:0}.repeat-source-card>.hint-text{grid-column:1 / -1}.repeat-source-card span,.repeat-source-card small{color:var(--muted);font-size:.7rem}.repeat-source-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.checkbox-line{align-items:center;display:flex!important;flex-direction:row;gap:6px!important;justify-content:center;min-width:0!important;white-space:normal}.checkbox-line input{width:auto}@media (max-width: 1160px){.topbar{grid-template-columns:1fr}.topbar-section{border-left:0;border-top:1px solid var(--border);flex-wrap:wrap;padding-left:0;padding-top:10px}.workspace,.workspace-no-tools{grid-template-columns:280px minmax(320px,1fr)}.canvas-stage,.starter-card{grid-template-columns:1fr}.starter-actions{flex-wrap:wrap}.large-preview-stage{grid-template-columns:1fr}.large-preview-stage .editor-panel,.large-preview-stage .live-preview-panel{order:initial}.right-panel{grid-column:1 / -1;grid-template-columns:minmax(220px,1fr) minmax(300px,1fr);max-height:none}.left-panel{max-height:none;overflow:visible}}@media (max-width: 760px){.topbar,.workspace,.right-panel,.feature-map,.mode-cards,.info-modal-layout{grid-template-columns:1fr}.info-nav{border-bottom:1px solid var(--border);border-right:0;display:flex;overflow-x:auto}.info-nav button{flex:0 0 auto;min-width:132px;width:auto}.topbar-section{align-items:stretch;display:grid;grid-template-columns:1fr}.sidebar{max-height:none}.button-grid,.split-row{grid-template-columns:1fr}}