@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Noto+Sans+JP:wght@400;600;700;900&display=swap";:root{--paper:#f4efe4;--paper-2:#ebe3d3;--white:#fffdf7;--ink:#172d29;--muted:#68736e;--green:#176b50;--coral:#ef684f;--yellow:#f2c84b;--blue:#5b91a8;--line:#172d2933;--shadow:0 18px 50px #20302b21;color:var(--ink);background:var(--paper);font-family:Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--paper);min-width:320px;overflow-x:hidden}button,input{font:inherit}button{color:inherit}.paper-noise{z-index:-1;opacity:.36;pointer-events:none;background-image:radial-gradient(#172d2938 .55px,#0000 .65px),radial-gradient(#fffc .7px,#0000 .8px);background-position:0 0,4px 5px;background-size:9px 9px,11px 11px;position:fixed;inset:0}.app-shell{grid-template-rows:auto 1fr auto;min-height:100vh;display:grid}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f4efe4f0;grid-template-columns:minmax(180px,1fr) minmax(280px,1.5fr) minmax(180px,1fr);align-items:center;gap:24px;min-height:84px;padding:13px clamp(18px,3.2vw,52px);display:grid}.brand{align-items:center;gap:12px;display:flex}.brand-mark{flex:none;width:43px;height:43px;position:relative}.brand-mark i{display:block;position:absolute;box-shadow:2px 2px #172d291f}.brand-mark i:first-child{background:var(--green);clip-path:polygon(8% 12%,92% 0,100% 77%,20% 100%);width:27px;height:25px;top:8px;left:0;transform:rotate(-8deg)}.brand-mark i:nth-child(2){background:var(--coral);clip-path:polygon(22% 0,100% 17%,80% 100%,0 78%);width:24px;height:27px;bottom:0;right:0;transform:rotate(6deg)}.brand-mark i:nth-child(3){background:var(--yellow);border-radius:50%;width:15px;height:15px;top:0;left:15px}.brand strong,.brand span{font-family:DM Sans,sans-serif;line-height:1;display:block}.brand strong{letter-spacing:.14em;font-size:14px}.brand span{color:var(--coral);letter-spacing:.24em;margin-top:5px;font-size:9px;font-weight:700}.studio-heading{text-align:center;min-width:0}.eyebrow{color:var(--coral);letter-spacing:.19em;font-family:DM Sans,sans-serif;font-size:9px;font-weight:700}.studio-heading h1{letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;margin:4px 0 0;font-size:clamp(14px,1.65vw,20px);overflow:hidden}.header-actions{justify-content:flex-end;align-items:center;gap:8px;display:flex}.header-button,.icon-button{border:1px solid var(--line);cursor:pointer;background:#ffffff73;min-height:42px;transition:transform .16s,background .16s,border-color .16s}.header-button{align-items:center;gap:8px;padding:0 16px;font-size:11px;font-weight:700;display:flex}.icon-button{border-radius:50%;width:42px;font:700 17px/1 DM Sans,sans-serif}.header-button:hover,.header-button:focus-visible,.icon-button:hover,.icon-button:focus-visible{border-color:var(--green);background:var(--white);outline:none;transform:translateY(-1px)}.workspace{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:start;gap:clamp(12px,2vw,28px);padding:clamp(20px,3vw,42px) clamp(18px,4vw,64px);display:grid;position:relative}.piece-layer{z-index:5;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.work-panel{min-width:0}.panel-heading{justify-content:space-between;align-items:center;gap:14px;min-height:48px;margin-bottom:10px;display:flex}.panel-heading>div:first-child{align-items:center;gap:10px;min-width:0;display:flex}.panel-heading h2{letter-spacing:.04em;white-space:nowrap;margin:0;font-size:14px}.step-number{background:var(--green);color:#fff;border-radius:50%;flex:none;place-content:center;width:29px;height:29px;font:700 9px/1 DM Sans,sans-serif;display:grid}.step-number.coral{background:var(--coral)}.source-actions{gap:8px;display:flex}.text-button{border:0;border-bottom:1px dashed var(--green);min-height:36px;color:var(--green);cursor:pointer;background:0 0;align-items:center;padding:0 3px;font-size:10px;font-weight:700;display:inline-flex}.text-button:hover,.text-button:focus-visible{color:var(--coral);border-color:var(--coral);outline:none}.canvas-frame{background:var(--white);box-shadow:var(--shadow);border:1px solid #172d2945;position:relative;overflow:hidden}.source-stage{aspect-ratio:3/2;width:100%}.source-stage canvas,.board-stage canvas{touch-action:none;width:100%;height:100%;display:block}.knife-tip{color:var(--green);pointer-events:none;background:#fffdf7e8;border-radius:4px;align-items:center;gap:9px;padding:10px 13px;transition:opacity .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-4deg);box-shadow:3px 4px #172d2924}.knife-tip.hidden{opacity:0}.knife-tip b{font-size:10px;line-height:1.5}.knife-icon{color:var(--coral);font-size:20px;transform:rotate(-18deg)}.cut-flash{border:3px solid var(--yellow);opacity:0;pointer-events:none;border-radius:50%;width:28px;height:28px;position:absolute}.cut-flash.pop{animation:.42s ease-out cutPop}@keyframes cutPop{0%{opacity:1;transform:scale(.5)}to{opacity:0;transform:scale(2.4)}}.panel-footer{align-items:center;gap:13px;min-height:58px;padding:8px 0;display:flex}.panel-footer p{color:var(--muted);flex:1;margin:0;font-size:9px;line-height:1.5}.tool-chip{border:1px solid var(--line);white-space:nowrap;background:#ffffff6b;align-items:center;gap:7px;padding:7px 10px;font-size:9px;display:flex}.tool-chip.active{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.blade{background:linear-gradient(135deg, transparent 28%, var(--coral) 29% 65%, transparent 66%);width:19px;height:8px;display:block;transform:rotate(-28deg)}.cuts-left{border:1px dashed var(--green);text-align:center;border-radius:50%;flex:none;place-content:center;width:46px;height:46px;display:grid;transform:rotate(3deg)}.cuts-left span{font:700 17px/1 DM Sans,sans-serif}.cuts-left small{margin-top:3px;font-size:7px}.mobile-only{display:none}.transfer-arrow{min-height:380px;color:var(--coral);place-items:center;display:grid;position:relative}.transfer-arrow:before{content:"";border-top:2px dashed #ef684f6b;position:absolute;top:50%;left:3px;right:3px}.transfer-arrow:after{content:"";border-top:2px solid var(--coral);border-right:2px solid var(--coral);width:8px;height:8px;position:absolute;top:calc(50% - 4px);right:3px;transform:rotate(45deg)}.transfer-arrow span{z-index:1;background:var(--paper);padding:7px 0;transform:rotate(-10deg)}.guide-toggle{min-height:36px;color:var(--muted);cursor:pointer;background:0 0;border:0;align-items:center;gap:7px;font-size:9px;font-weight:700;display:flex}.guide-toggle span{background:#b8b9b2;border-radius:99px;width:25px;height:14px;transition:all .2s;position:relative}.guide-toggle span:after{content:"";background:#fff;border-radius:50%;width:10px;height:10px;transition:all .2s;position:absolute;top:2px;left:2px}.guide-toggle.active{color:var(--green)}.guide-toggle.active span{background:var(--green)}.guide-toggle.active span:after{left:13px}.board-wrap{place-items:center;min-height:min(62vh,610px);display:grid}.board-stage{--board-ratio:.75;width:min(100%, calc(62vh * var(--board-ratio)));max-height:62vh;aspect-ratio:var(--board-ratio);transition:width .24s,aspect-ratio .24s}.empty-board{color:#176b505c;text-align:center;pointer-events:none;place-content:center;transition:opacity .24s;display:grid;position:absolute;inset:0}.empty-board.hidden{opacity:0}.empty-board i{font-size:36px;font-style:normal}.empty-board p{margin:8px 0 0;font-size:10px;line-height:1.75}.board-help{color:var(--muted);text-align:center;margin:8px auto 0;font-size:9px;line-height:1.55}.edit-toolbar{border:1px solid var(--line);background:#ffffff73;grid-template-columns:repeat(7,1fr);width:min(100%,620px);margin:10px auto 0;display:grid}.edit-toolbar button{border:0;border-right:1px solid var(--line);cursor:pointer;background:0 0;place-content:center;gap:3px;min-width:0;height:51px;display:grid}.edit-toolbar button:last-child{border-right:0}.edit-toolbar button:hover,.edit-toolbar button:focus-visible{background:#dceae1;outline:none}.edit-toolbar button:disabled{opacity:.25;cursor:not-allowed}.edit-toolbar span{font:700 19px/1 Arial,sans-serif}.edit-toolbar small{white-space:nowrap;font-size:7px}.edit-toolbar .danger:hover{background:#f5c7be}.bottom-bar{border-top:1px solid var(--line);background:#faf7eef5;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;min-height:82px;padding:12px clamp(18px,3vw,48px);display:grid}.privacy-note{align-items:center;gap:11px;min-width:0;display:flex}.privacy-note>span{border:1px dashed var(--green);width:38px;height:38px;color:var(--green);border-radius:50%;flex:none;place-content:center;font-size:21px;display:grid}.privacy-note p,.privacy-note b,.privacy-note small{margin:0;display:block}.privacy-note b{color:var(--green);font-size:9px}.privacy-note small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:8px;overflow:hidden}.piece-progress{justify-content:center;align-items:baseline;gap:7px;min-width:145px;display:flex}.piece-progress span{font-size:9px}.piece-progress b{min-width:28px;color:var(--green);text-align:center;font:700 21px/1 DM Sans,sans-serif}.piece-progress small{color:var(--muted);font-size:8px}.finish-button{background:var(--ink);width:min(100%,235px);height:52px;box-shadow:4px 5px 0 var(--coral);color:#fff;cursor:pointer;border:0;justify-content:space-between;justify-self:end;align-items:center;padding:0 8px 0 20px;font-weight:700;transition:all .15s;display:flex}.finish-button:hover,.finish-button:focus-visible{outline:2px dashed var(--yellow);outline-offset:4px;box-shadow:2px 3px 0 var(--coral);transform:translate(2px,2px)}.finish-button i{background:var(--coral);border-radius:50%;place-content:center;width:35px;height:35px;font-size:19px;font-style:normal;display:grid}.modal{z-index:50;place-items:center;padding:20px;display:none;position:fixed;inset:0}.modal.open{animation:.22s both modalIn;display:grid}@keyframes modalIn{0%{opacity:0}}.modal-backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c1f1bbd;position:absolute;inset:0}.modal-card{z-index:1;background:var(--paper);position:relative;box-shadow:0 30px 90px #0000004d}.modal-card:before{content:"";pointer-events:none;border:1px dashed #176b503d;position:absolute;inset:10px}.modal-close{z-index:3;cursor:pointer;background:0 0;border:0;border-radius:50%;width:38px;height:38px;font-size:25px;position:absolute;top:14px;right:14px}.intro-card{text-align:center;width:min(94vw,720px);padding:31px 52px 34px}.intro-card h2{letter-spacing:.04em;margin:8px 0;font-size:clamp(27px,4vw,43px);line-height:1.38}.intro-card h2 em{border-bottom:3px dashed var(--coral);color:var(--coral);font-style:normal}.intro-card>p{color:var(--muted);margin:12px auto 20px;font-size:12px;line-height:1.9}.intro-art{width:230px;height:88px;margin:0 auto 9px;position:relative}.intro-art i{display:block;position:absolute}.intro-art i:first-child{background:var(--green);clip-path:polygon(0 22%,85% 0,100% 78%,23% 100%);width:84px;height:55px;bottom:3px;left:20px;transform:rotate(-8deg)}.intro-art i:nth-child(2){background:var(--coral);clip-path:polygon(26% 0,100% 18%,76% 100%,0 74%);width:72px;height:66px;top:10px;right:24px;transform:rotate(8deg)}.intro-art i:nth-child(3){background:var(--yellow);border-radius:50%;width:62px;height:62px;top:0;left:86px}.intro-art span{z-index:2;font-size:25px;position:absolute;bottom:0;left:99px;transform:rotate(-13deg)}.howto{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin:0 0 20px;padding:16px 0;list-style:none;display:grid}.howto li{border-right:1px dashed var(--line);text-align:left;grid-template-columns:auto 1fr;gap:0 8px;padding:2px 18px;display:grid}.howto li:last-child{border-right:0}.howto span{background:var(--green);color:#fff;border-radius:50%;grid-row:span 2;place-content:center;width:27px;height:27px;font:700 10px DM Sans,sans-serif;display:grid}.howto b{font-size:11px}.howto small{color:var(--muted);margin-top:4px;font-size:8px}.primary-button,.secondary-button,.video-button{cursor:pointer;border:0;min-height:50px;padding:0 21px;font-weight:700}.primary-button{background:var(--ink);min-width:225px;box-shadow:4px 4px 0 var(--coral);color:#fff}.primary-button span{color:var(--yellow);margin-left:16px}.primary-button.full{width:100%}.secondary-button{border:1px solid var(--ink);background:0 0}.video-button{border:1px solid var(--green);color:var(--green);background:#dfeadf}.intro-note{color:var(--muted);margin-top:13px;font-size:8px;display:block}.settings-card{width:min(95vw,760px);max-height:94vh;padding:34px 42px 38px;overflow:auto}.settings-card h2{margin:5px 0 24px;font-size:28px}.setting-group{border:0;margin:0 0 23px;padding:0}.setting-group legend{border-bottom:1px solid var(--line);width:100%;margin-bottom:11px;padding-bottom:8px;font-size:11px;font-weight:700}.ratio-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.ratio-grid label{border:1px solid var(--line);cursor:pointer;background:#ffffff5c;align-content:center;place-items:center;gap:5px;min-height:108px;display:grid}.ratio-grid input{opacity:0;position:absolute}.ratio-grid label:has(input:checked){border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#dfeadf}.ratio-grid i{width:39px;max-height:47px;aspect-ratio:var(--r);background:var(--white);border:2px solid}.ratio-grid b{font:700 12px DM Sans,sans-serif}.ratio-grid small{color:var(--muted);font-size:7px}.limit-options{grid-template-columns:1fr 1fr auto;gap:9px;display:grid}.limit-options>label{border:1px solid var(--line);cursor:pointer;background:#ffffff5c;align-items:center;gap:9px;min-height:65px;padding:10px 12px;display:flex}.limit-options>label:has(input:checked){border-color:var(--green);background:#dfeadf}.limit-options b,.limit-options small{display:block}.limit-options b{font-size:10px}.limit-options small{color:var(--muted);margin-top:4px;font-size:8px}.number-field{border:1px solid var(--line);background:var(--white);align-items:center;min-height:65px;padding:8px 11px;display:flex}.number-field input{border:0;border-bottom:1px solid var(--green);text-align:right;background:0 0;width:62px;padding:5px;font:700 15px DM Sans,sans-serif}.number-field input:focus{outline:2px solid #176b5040}.number-field input:disabled{opacity:.35}.number-field span{white-space:nowrap;margin-left:5px;font-size:9px}.api-note{border:1px dashed var(--blue);background:#5b91a81a;align-items:center;gap:13px;margin:0 0 22px;padding:12px 14px;display:flex}.api-note>span{color:var(--blue);letter-spacing:.12em;flex:none;font:700 9px DM Sans,sans-serif}.api-note p,.api-note b,.api-note small{margin:0;display:block}.api-note b{font-size:9px}.api-note small{color:var(--muted);margin-top:4px;font-size:8px}.result-card{width:min(96vw,920px);padding:36px}.result-ribbon{z-index:4;background:var(--coral);box-shadow:3px 3px 0 var(--yellow);color:#fff;letter-spacing:.16em;white-space:nowrap;padding:8px 26px;font:700 10px DM Sans,sans-serif;position:absolute;top:-15px;left:50%;transform:translate(-50%)rotate(-1deg)}.result-layout{grid-template-columns:minmax(280px,.95fr) 1fr;align-items:center;gap:45px;display:grid}.result-preview{background:#fff;place-items:center;width:100%;max-height:72vh;padding:10px;display:grid;position:relative;transform:rotate(-1deg);box-shadow:5px 7px #172d291f}.result-preview canvas{width:auto;max-width:100%;height:auto;max-height:calc(72vh - 20px);display:block}.tape{background:#efd27eb8;width:74px;height:20px;position:absolute;left:50%;transform:translate(-50%)rotate(2deg)}.tape.top{top:-6px}.tape.bottom{bottom:-6px}.result-copy h2{margin:7px 0 22px;font-size:clamp(26px,3.2vw,39px);line-height:1.35}.title-field{color:var(--muted);gap:7px;font-size:8px;font-weight:700;display:grid}.title-field input{border:0;border-bottom:2px solid var(--green);width:100%;color:var(--ink);background:0 0;padding:9px 2px;font-size:15px}.title-field input:focus{border-color:var(--coral);outline:0}.artwork-meta{margin:20px 0}.artwork-meta div{border-bottom:1px dashed var(--line);justify-content:space-between;padding:8px 0;font-size:10px;display:flex}.artwork-meta dd{margin:0;font:700 11px DM Sans,sans-serif}.result-actions{grid-template-columns:1fr 1fr;gap:9px;display:grid}.result-actions .primary-button{min-width:0}.result-actions .secondary-button{grid-column:1/-1}.video-help{color:var(--muted);margin-top:10px;font-size:8px;display:block}.toast{z-index:80;opacity:0;pointer-events:none;background:var(--ink);max-width:min(90vw,520px);box-shadow:3px 3px 0 var(--coral);color:#fff;text-align:center;padding:12px 18px;font-size:10px;transition:all .22s;position:fixed;bottom:96px;left:50%;transform:translate(-50%,20px)}.toast.show{opacity:1;transform:translate(-50%)}@media (width<=980px){.topbar{grid-template-columns:auto 1fr auto;gap:14px}.brand>div{display:none}.workspace{padding-inline:17px}.board-wrap{min-height:min(54vh,540px)}.board-stage{width:min(100%, calc(54vh * var(--board-ratio)));max-height:54vh}}@media (width<=760px){.app-shell{padding-bottom:90px;display:block}.topbar{z-index:15;grid-template-columns:auto 1fr auto;min-height:66px;padding:9px 12px;position:sticky;top:0}.brand-mark{width:37px;height:37px}.studio-heading{text-align:left}.studio-heading .eyebrow{display:none}.studio-heading h1{white-space:normal;font-size:11px}.header-button{justify-content:center;width:40px;min-height:40px;padding:0;font-size:0;overflow:hidden}.header-button span{font-size:16px}.icon-button{width:40px;min-height:40px}#helpButton{display:none}.workspace{padding:17px 12px 26px;display:block}.source-panel{margin-bottom:25px}.transfer-arrow{min-height:28px;margin-bottom:16px;transform:rotate(90deg)}.transfer-arrow span{background:var(--paper)}.board-wrap{min-height:0}.board-stage{width:min(100%, calc(76vh * var(--board-ratio)));max-height:76vh}.panel-heading h2{font-size:12px}.desktop-only{display:none}.mobile-only{display:inline}.bottom-bar{z-index:14;min-height:76px;padding:9px 12px max(10px, env(safe-area-inset-bottom));grid-template-columns:1fr auto;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 30px #172d2921}.privacy-note{display:none}.piece-progress{justify-content:flex-start;min-width:100px}.piece-progress small{display:none}.finish-button{width:174px;height:46px;font-size:10px}.finish-button i{width:30px;height:30px}.edit-toolbar button{height:50px}.edit-toolbar small{display:none}.intro-card{max-height:94vh;padding:25px 22px 28px;overflow:auto}.intro-card>p br{display:none}.intro-art{height:68px;margin-top:-5px;margin-bottom:0;transform:scale(.78)}.howto{grid-template-columns:1fr;padding:7px 0}.howto li{border-right:0;border-bottom:1px dashed var(--line);padding:7px 18px}.howto li:last-child{border-bottom:0}.settings-card{padding:30px 20px 25px}.ratio-grid{grid-template-columns:repeat(5,minmax(54px,1fr));overflow-x:auto}.ratio-grid label{min-height:94px}.limit-options{grid-template-columns:1fr 1fr}.number-field{grid-column:1/-1}.result-card{max-height:94vh;padding:30px 20px 20px;overflow:auto}.result-ribbon{top:0}.result-layout{grid-template-columns:1fr 1fr;align-items:start;gap:20px}.result-copy h2{font-size:21px}.result-preview{max-height:65vh}.result-preview canvas{max-height:calc(65vh - 20px)}.result-actions{grid-template-columns:1fr}.result-actions .secondary-button{grid-column:auto}}@media (width<=540px){.source-actions .text-button:last-child{display:none}.result-layout{display:block}.result-preview{width:min(82%,340px);max-height:44vh;margin:0 auto 25px}.result-preview canvas{max-height:calc(44vh - 20px)}.ratio-grid{grid-template-columns:repeat(3,1fr)}.limit-options{display:block}.limit-options>label{margin-bottom:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}