:root{color-scheme:light;--base:#fcfcfc;--accent:#3e7e9a;--mid:#73a0b1;--light1:#bdcbcc;--light2:#98b6be;--ink:#1e2c33;--ink-dim:#4a6370;--wash:rgba(152,182,190,0.08);--bg:var(--base);--text:var(--ink);--muted:var(--ink-dim);--line:var(--light1);--panel:rgba(252,252,252,0.74);--panel-strong:#ffffff}*{box-sizing:border-box}body,html{min-height:100%;margin:0}body{position:relative;background:radial-gradient(ellipse 100% 54% at 50% -12%,rgba(152,182,190,.2),transparent 58%),radial-gradient(ellipse 52% 35% at 100% 100%,rgba(189,203,204,.14),transparent 58%),var(--bg);color:var(--text);font-family:fot-tsukuardgothic-std,Zen Maru Gothic,Hiragino Maru Gothic ProN,TsukuARdGothic-Regular,Noto Sans JP,ui-rounded,Hiragino Sans,Yu Gothic,sans-serif;font-weight:400;overflow-x:hidden}body:after{content:"";position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.42;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E")}button,input,select{font:inherit}.hidden-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.mobile-editor{display:none}.page-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);grid-gap:0;gap:0;min-height:100vh;isolation:isolate}.control-panel{display:flex;flex-direction:column;gap:18px;padding:46px 28px 48px;border-left:1px solid var(--line);background:rgba(252,252,252,.64);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow-y:auto;max-height:100vh}.brand-row{display:flex;align-items:center;margin-bottom:10px}.eyebrow{margin:0;color:var(--ink-dim);font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase}.section-block{display:grid;grid-gap:8px;gap:8px}.icon-grid{display:grid;grid-gap:6px;gap:6px;border:1px solid var(--line);background:rgba(252,252,252,.7);padding:4px}.control-card .icon-grid{border:0;background:transparent;padding:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;border-radius:6px;background:rgba(152,182,190,.06);color:var(--mid);cursor:pointer;font-size:12px;transition:all .25s cubic-bezier(.16,1,.3,1)}.icon-button:hover{background:rgba(62,126,154,.08);color:var(--accent)}.icon-button.active{background:var(--accent);color:var(--base);box-shadow:0 4px 12px rgba(62,126,154,.24)}.control-section{display:flex;flex-direction:column;gap:8px}.control-section-title{margin:0;color:var(--ink-dim);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding-left:4px;opacity:.8}.control-card{background:#ffffff;border:1px solid rgba(189,203,204,.5);border-radius:8px;padding:14px;box-shadow:0 4px 12px rgba(30,44,51,.03);transition:border-color .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;gap:12px}.control-card:hover{border-color:rgba(189,203,204,.8);box-shadow:0 6px 16px rgba(30,44,51,.05)}.input-label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:500;color:var(--ink-dim)}.input-label span{font-size:10px;color:var(--mid)}.text-input{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--wash);color:var(--ink);font-size:13px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(62,126,154,.15);background:#ffffff}.range-container{display:flex;flex-direction:column;gap:4px}.range-header{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-dim)}.range-value{font-size:11px;font-weight:600;color:var(--accent)}.range-input{width:100%;accent-color:var(--accent);cursor:pointer;height:6px}.palette-swatches{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:8px;gap:8px}.swatch-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border:2px solid transparent;border-radius:8px;padding:4px;transition:all .2s ease}.swatch-item:hover{background:rgba(152,182,190,.1)}.swatch-item.selected{border-color:var(--accent);background:rgba(62,126,154,.08)}.swatch-circle{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}.swatch-hex{font-size:9px;color:var(--ink-dim);letter-spacing:.05em;font-family:monospace}.color-adjust-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.color-picker-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--wash);padding:6px 10px;border-radius:6px;border:1px solid var(--line)}.color-picker-row label{font-size:11px;color:var(--ink-dim)}.color-picker-input{width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;background:transparent}.upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100px;border:1.5px dashed var(--light1);border-radius:6px;background:var(--wash);color:var(--mid);cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1)}.upload-placeholder span{font-size:11px;font-weight:500}.upload-placeholder:hover{background:rgba(115,160,177,.08);border-color:var(--mid);color:var(--accent)}.thumbnail-preview-container{position:relative;height:100px;border-radius:6px;overflow:hidden;border:1px solid var(--light1);background:var(--wash);box-shadow:inset 0 2px 4px rgba(0,0,0,.02)}.thumbnail-img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:opacity .25s ease}.thumbnail-img:hover{opacity:.85}.clear-btn{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#e5484d;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer;z-index:2;opacity:.9;transition:transform .2s ease,opacity .2s ease,background .2s ease}.clear-btn:hover{transform:scale(1.1);opacity:1;background:#ffffff}.canvas-wrapper{position:relative;align-self:center;justify-self:center;display:inline-flex;max-width:min(100%,540px);max-height:calc(100vh - 80px);border-radius:8px;box-shadow:0 22px 54px rgba(30,44,51,.14)}.canvas-actions{position:absolute;bottom:16px;right:16px;z-index:5;display:inline-flex;gap:8px}.canvas-wrapper .download-button,.canvas-wrapper .share-button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;min-height:auto;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:24px;background:rgba(252,252,252,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--accent);font-weight:500;font-size:13px;letter-spacing:.1em;box-shadow:0 8px 24px rgba(30,44,51,.12),inset 0 1px 0 rgba(255,255,255,.4);cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1)}.canvas-wrapper .download-button:hover,.canvas-wrapper .share-button:hover{background:var(--accent);color:#ffffff;border-color:var(--accent);box-shadow:0 12px 28px rgba(62,126,154,.24),0 2px 4px rgba(0,0,0,.05);transform:translateY(-2px)}.preview-panel{display:grid;grid-template-rows:auto 1fr;grid-gap:18px;gap:18px;min-width:0;padding:40px 44px 34px;align-items:center}.preview-toolbar{display:flex;justify-content:space-between;border-bottom:1px solid rgba(189,203,204,.82);padding-bottom:14px;color:var(--light2);font-size:10px;font-weight:400;letter-spacing:.24em;text-transform:uppercase}canvas{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 120px);border:1px solid rgba(189,203,204,.9);border-radius:8px;background:#fff;cursor:pointer;object-fit:contain}.toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{padding:10px 20px;background:rgba(30,44,51,.9);color:#ffffff;border-radius:20px;font-size:12px;box-shadow:0 8px 20px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeInOut 2.5s ease forwards}@keyframes fadeInOut{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.dropper-active-badge{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(30,44,51,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffffff;padding:6px 14px;border-radius:20px;font-size:12px;letter-spacing:.04em;pointer-events:none;z-index:10;display:flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18)}.dropper-badge-icon{width:14px;height:14px;flex-shrink:0}.preview-modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,23,28,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s cubic-bezier(.16,1,.3,1)}.preview-modal-content{background:#ffffff;border-radius:18px;max-width:min(92vw,420px);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2)}.preview-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--wash);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-dim);letter-spacing:.04em}.preview-modal-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:50%;background:rgba(152,182,190,.12);color:var(--mid);cursor:pointer;font-size:16px;line-height:1}.preview-modal-img{width:100%;height:auto;max-height:64vh;object-fit:contain;display:block;-moz-user-select:auto;user-select:auto;-webkit-user-select:auto}.preview-modal-actions{padding:14px 18px;display:flex;justify-content:center;background:#ffffff;border-top:1px solid var(--line)}.preview-modal-download-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:var(--accent);color:#ffffff;border-radius:24px;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.05em;box-shadow:0 4px 14px rgba(62,126,154,.25)}@media (max-width:900px){body{background:radial-gradient(ellipse 100% 38% at 50% -10%,rgba(152,182,190,.18),transparent 58%),var(--bg)}.page-shell{grid-template-columns:1fr;min-height:100svh;padding-bottom:150px}.control-panel{display:none}.preview-panel{min-height:calc(100svh - 150px);grid-template-rows:auto minmax(0,1fr);gap:14px;padding:18px 16px 16px}.preview-toolbar{padding-bottom:12px;font-size:9px;letter-spacing:.18em}.canvas-wrapper{align-self:start;justify-self:center;max-width:min(100%,360px);max-height:calc(100svh - 210px);box-shadow:0 16px 42px rgba(30,44,51,.12)}.dropper-active-badge{top:8px;padding:4px 10px;font-size:10.5px;border-radius:14px;gap:4px}.dropper-badge-icon{width:11px;height:11px}canvas{width:auto;height:auto;max-height:calc(100svh - 210px)}.canvas-actions{display:none}.mobile-editor{position:fixed;right:0;bottom:0;left:0;z-index:20;display:block;padding:0 12px calc(10px + env(safe-area-inset-bottom));pointer-events:none}.mobile-sheet{width:min(100%,680px);margin:0 auto 10px;padding:14px;border:1px solid rgba(189,203,204,.76);border-radius:12px;background:rgba(252,252,252,.94);box-shadow:0 18px 54px rgba(30,44,51,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:auto;max-height:60vh;overflow-y:auto}.mobile-sheet-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:0 2px;color:var(--ink-dim);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.mobile-sheet-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:50%;background:rgba(152,182,190,.1);color:var(--mid);cursor:pointer;font-size:18px;line-height:1}.mobile-toolbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:4px;gap:4px;width:min(100%,680px);margin:0 auto;padding:6px;border:1px solid rgba(189,203,204,.8);border-radius:10px;background:rgba(252,252,252,.92);box-shadow:0 18px 50px rgba(30,44,51,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:auto}.mobile-tool{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:54px;border:0;border-radius:6px;background:transparent;color:var(--mid);cursor:pointer;font-size:9px;line-height:1;letter-spacing:.08em;transition:background .2s ease,color .2s ease}.mobile-tool.active,.mobile-tool.save:not(:disabled),.mobile-tool.share:not(:disabled){background:var(--accent);color:var(--base)}.mobile-tool:disabled{cursor:not-allowed;opacity:.36}}