@charset "UTF-8";
:root{--paper:#f7f5ef;--ink:#34352f;--muted:#777970;--line:#deded4;--sage:#65735d;--deep:#3c4d3d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Yu Gothic",Meiryo,sans-serif;font-size:13px}button,input,select{font:inherit}button,a,label{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #9faa83;outline-offset:3px}header{height:90px;padding:0 4.5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;gap:13px;align-items:center;color:var(--ink);text-decoration:none;font-family:Georgia,serif;font-size:25px;letter-spacing:4px}.brand-mark{width:43px;height:47px;border:1px solid #81867a;display:grid;place-items:center;font-family:"Yu Mincho",serif;font-size:27px;letter-spacing:0}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:4px;font-family:sans-serif}.header-note{margin-left:auto;color:var(--muted);font-size:11px;letter-spacing:1px}.header-note i{display:inline-block;width:6px;height:6px;background:#84917c;border-radius:50%;margin-right:9px}.quiet{border:0;background:transparent;color:var(--ink);padding:10px 0;font-size:12px}main{max-width:1600px;margin:auto;padding:34px 4.5% 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--sage)}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:31px;font-weight:500;letter-spacing:3px;margin:9px 0 10px}.intro p{color:var(--muted);font-size:12px;letter-spacing:.4px;margin:0}.intro-tag{border-left:1px solid var(--line);padding:6px 0 6px 25px;font-family:Georgia,serif;font-size:25px;line-height:1.2;letter-spacing:4px}.intro-tag small{font-family:sans-serif;font-size:9px;letter-spacing:1.5px}.mobile-break{display:none}.workspace{display:grid;grid-template-columns:274px minmax(360px,1fr) 194px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fcfbf7}.controls{padding:26px 22px;border-right:1px solid var(--line)}.controls section+section{border-top:1px solid var(--line);padding-top:22px;margin-top:24px}.section-heading{display:flex;gap:10px;align-items:center}.step{font-family:Georgia,serif;font-size:16px;color:#899180}h2{margin:0;font-size:13px;font-weight:600;letter-spacing:1px}.hint{color:var(--muted);font-size:10px;line-height:1.8;margin:9px 0 16px}.samples{display:flex;flex-direction:column;gap:8px}.sample{border:1px solid var(--line);background:transparent;display:flex;align-items:center;gap:11px;padding:8px;text-align:left;border-radius:2px}.sample.active{border-color:#77816d;box-shadow:inset 0 0 0 1px #77816d;background:#f1f3eb}.sample canvas{width:34px;height:34px;border-radius:50%;border:1px solid #c7cbbc}.sample span{flex:1}.sample strong{display:block;font-size:11px;font-weight:500}.sample small{font-size:9px;color:var(--muted);display:block;margin-top:3px}.sample .selected{color:var(--sage);font-size:13px}.fabric-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.upload{display:block;cursor:pointer;min-width:0}.upload canvas{width:100%;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:2px;display:block}.upload span{display:block;font-size:10px;margin-top:7px}.upload b{font-size:8px;font-weight:normal;color:var(--sage);display:block;margin-top:4px}.upload input{position:absolute;width:1px;height:1px;clip-path:inset(50%)}.upload:focus-within{outline:2px solid var(--sage)}.upload small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px;font-size:8px;color:var(--muted)}.privacy{font-size:8px;color:var(--muted);margin:13px 0 0}.field{display:block;font-size:10px;color:#62655c;margin-top:13px}.field select{display:block;width:100%;margin-top:7px;border:1px solid var(--line);background:#fcfbf7;padding:8px 22px 8px 8px;color:var(--ink);font-size:10px;min-height:33px;border-radius:2px}.range-label{display:flex;justify-content:space-between;margin-top:19px;font-size:10px}.range-label output{color:var(--sage)}input[type=range]{width:100%;margin:10px 0 3px;accent-color:var(--sage)}.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:8px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.reset{margin-top:24px;border:0;background:none;color:var(--muted);font-size:10px;padding:0}.preview-panel{min-width:0;display:flex;flex-direction:column;background:#f1efe8}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:24px 25px;gap:12px}.preview-toolbar h2{margin-top:6px;font-family:"Yu Mincho",serif;font-size:19px;font-weight:400}.segmented{display:flex;border:1px solid #d1d2c5;padding:3px;border-radius:3px;background:#f8f7f2}.segmented button{padding:7px 10px;background:none;color:var(--muted);border:0;font-size:10px;white-space:nowrap}.segmented button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #26302615;color:var(--ink);border-radius:2px}.stage{display:flex;align-items:flex-end;justify-content:center;gap:20px;padding:0 25px 20px;position:relative;min-height:420px;flex:1}.stage figure{margin:0;flex:1;max-width:300px;min-width:0}.stage canvas{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 7px 22px #292d2710}.stage figcaption{display:flex;align-items:center;justify-content:center;gap:12px;margin:15px 0 0;font-size:11px}.stage figcaption span{color:var(--muted);font-size:8px;letter-spacing:1.5px}.stage.single figure{max-width:320px}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#f1efe8;color:var(--muted);font-size:11px}.loading[hidden]{display:none}.preview-bottom{display:flex;justify-content:space-between;align-items:center;padding:16px 25px;border-top:1px solid #deded3;gap:14px}.original-toggle{font-size:10px;color:#686d60;display:flex;align-items:center;gap:6px}.original-toggle input{accent-color:var(--sage)}.download{background:var(--deep);color:#f7f6ef;border:0;border-radius:2px;padding:11px 15px;font-size:10px;letter-spacing:.6px}.preview-note{color:#777b70;font-size:9px;line-height:1.8;margin:0;padding:0 25px 18px}.patterns-panel{padding:26px 18px;border-left:1px solid var(--line)}.patterns{display:flex;flex-direction:column;gap:10px}.pattern{display:block;position:relative;border:1px solid var(--line);border-radius:3px;background:transparent;padding:8px;width:100%;text-align:left}.pattern.active{border-color:var(--sage);box-shadow:inset 0 0 0 1px var(--sage);background:#f1f3eb}.pattern-image{display:flex;gap:3px;height:74px;overflow:hidden;border-radius:2px}.pattern-image canvas{width:calc(50% - 1.5px);height:74px;object-fit:cover;object-position:center 40%}.pattern-name{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.pattern-name b{font-family:Georgia,serif;font-size:18px;font-weight:400}.pattern-name span{font-size:9px;color:var(--muted)}.pattern.active .pattern-name span{color:var(--sage)}.legend{display:flex;gap:12px;margin-top:22px;font-size:9px;color:var(--muted)}.legend i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%}.legend-front{background:#44504d}.legend-back{background:#cbbba2}.panel-note{font-size:9px;line-height:1.9;color:var(--muted);margin-top:14px}.status{font-size:10px;color:var(--sage);min-height:28px;margin-top:12px}footer{border-top:1px solid var(--line);padding:20px 0 25px;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:1px}footer em{font-style:normal;margin:0 8px}dialog{max-width:900px;width:90%;border:1px solid var(--line);background:#fcfbf7;border-radius:5px;padding:20px}dialog::backdrop{background:#25282088}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dialog-head button{border:0;background:none;font-size:25px}dialog img{display:block;width:100%}dialog p{font-size:11px;color:var(--muted)}[hidden]{display:none!important}
@media(min-width:1450px){.workspace{grid-template-columns:290px 1fr 220px}.patterns-panel{padding:26px 22px}.pattern-image,.pattern-image canvas{height:88px}.stage figure{max-width:315px}}
@media(max-width:1120px){main{padding:26px 3% 0}header{padding:0 3%}.workspace{grid-template-columns:244px minmax(300px,1fr) 150px}.controls{padding:22px 16px}.patterns-panel{padding:22px 12px}.preview-toolbar{padding:22px 16px}.stage{gap:10px;padding:0 16px 20px;min-height:350px}.preview-bottom{padding:15px 16px}.preview-note{padding:0 16px 18px}.pattern-image,.pattern-image canvas{height:66px}.patterns-panel .section-heading{gap:7px}.patterns-panel h2{font-size:11px}.legend{gap:6px}.header-note{display:none}}
@media(max-width:820px){.workspace{grid-template-columns:220px minmax(300px,1fr)}.patterns-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:18px}.patterns{flex-direction:row;gap:10px}.pattern{flex:1}.pattern-image,.pattern-image canvas{height:95px}.patterns-panel .hint{margin-bottom:10px}.legend{margin-top:13px}.panel-note{margin:7px 0 0}.preview-toolbar{align-items:flex-start}.segmented button{padding:6px 7px}.stage{align-items:center}}
@media(max-width:600px){header{height:72px;padding:0 20px}.brand{font-size:21px}.brand-mark{width:35px;height:40px;font-size:24px}.brand small{font-size:8px}.quiet{margin-left:auto;font-size:10px}main{padding:23px 15px 0}h1{font-size:26px;letter-spacing:2px;line-height:1.5}.intro{margin-bottom:21px}.intro p{font-size:10px}.intro-tag{font-size:20px;padding-left:15px}.mobile-break{display:block}.workspace{display:flex;flex-direction:column}.preview-panel{order:0}.patterns-panel{order:1}.controls{order:2;border-right:0;border-top:1px solid var(--line);padding:22px}.preview-toolbar{padding:20px}.stage{padding:0 15px 18px;gap:10px;min-height:300px}.preview-bottom{padding:14px 16px}.preview-note{font-size:8px}.patterns-panel{padding:20px}.pattern-image,.pattern-image canvas{height:85px}.pattern{padding:6px}.pattern-name b{font-size:16px}.pattern-name span{font-size:8px}.samples{flex-direction:row;gap:8px}.sample{flex:1;flex-direction:column;gap:5px;padding:8px 4px;text-align:center}.sample .selected{display:none}.sample small{font-size:8px}.fabric-pair{gap:16px}.upload canvas{height:95px}.upload span{display:flex;justify-content:space-between;font-size:11px}.upload b{margin-top:0;font-size:9px}.upload small{font-size:9px}.field select{font-size:12px}.field{font-size:11px}.privacy{font-size:9px}.range-label{font-size:11px}.status{font-size:9px}footer{font-size:8px;letter-spacing:0}footer span:last-child{display:none}}