:root{--bg: #e7ebf3;--bg-2: #dfe4ee;--panel: #ffffff;--ink: #263440;--ink-soft: #6b7889;--line: #d9e0ea;--brand: #ff7a45;--c-file: #4c9ae8;--c-excel: #34b36a;--c-pdf: #e24d6a;--c-mail: #9a6ad9;--c-notify: #f2b03a;--c-loop: #14b1bf;--stud: rgba(255, 255, 255, .6);--shadow: rgba(38, 51, 63, .16);--slot: rgba(255, 255, 255, .94);--slot-ink: #33404d;--sans: "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Segoe UI", system-ui, -apple-system, sans-serif;--mono: "Cascadia Mono", Consolas, "Courier New", monospace}@media(prefers-color-scheme:dark){:root{--bg: #161b27;--bg-2: #12161f;--panel: #212838;--ink: #ecf1f9;--ink-soft: #98a4b8;--line: #2f3849;--brand: #ff8a5c;--c-file: #5ba6ee;--c-excel: #45c47d;--c-pdf: #ec6382;--c-mail: #ae81e4;--c-notify: #f6c256;--c-loop: #38c6d3;--stud: rgba(255, 255, 255, .34);--shadow: rgba(0, 0, 0, .45);--slot: rgba(255, 255, 255, .92);--slot-ink: #2a3440}}:root[data-theme=dark]{--bg: #161b27;--bg-2: #12161f;--panel: #212838;--ink: #ecf1f9;--ink-soft: #98a4b8;--line: #2f3849;--brand: #ff8a5c;--c-file: #5ba6ee;--c-excel: #45c47d;--c-pdf: #ec6382;--c-mail: #ae81e4;--c-notify: #f6c256;--c-loop: #38c6d3;--stud: rgba(255, 255, 255, .34);--shadow: rgba(0, 0, 0, .45);--slot: rgba(255, 255, 255, .92);--slot-ink: #2a3440}:root[data-theme=light]{--bg: #e7ebf3;--bg-2: #dfe4ee;--panel: #ffffff;--ink: #263440;--ink-soft: #6b7889;--line: #d9e0ea;--brand: #ff7a45;--c-file: #4c9ae8;--c-excel: #34b36a;--c-pdf: #e24d6a;--c-mail: #9a6ad9;--c-notify: #f2b03a;--c-loop: #14b1bf;--stud: rgba(255, 255, 255, .6);--shadow: rgba(38, 51, 63, .16);--slot: rgba(255, 255, 255, .94);--slot-ink: #33404d}*{box-sizing:border-box}body{margin:0;font-family:var(--sans);color:var(--ink);background:radial-gradient(circle at 12% -5%,color-mix(in srgb,var(--c-file) 16%,transparent),transparent 40%),radial-gradient(circle at 92% -2%,color-mix(in srgb,var(--c-notify) 18%,transparent),transparent 42%),linear-gradient(180deg,var(--bg),var(--bg-2));background-attachment:fixed;-webkit-font-smoothing:antialiased}.app{max-width:1200px;margin:0 auto;padding:26px 22px 60px}.app-header{margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.app-header-text{min-width:0}.app-header h1{margin:0 0 4px;font-size:1.9rem;font-weight:800;letter-spacing:-.01em}.app-header p{margin:0;color:var(--ink-soft);font-size:.96rem}.howto-btn{flex:0 0 auto;border:none;cursor:pointer;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 90%,#fff 10%),var(--brand));color:#fff;font-family:var(--sans);font-weight:800;font-size:.86rem;padding:9px 15px;border-radius:12px;box-shadow:0 4px color-mix(in srgb,var(--brand) 66%,#000),0 10px 16px -8px var(--shadow);transition:transform .12s,box-shadow .12s}.howto-btn:hover{transform:translateY(-2px)}.howto-btn:active{transform:translateY(2px);box-shadow:0 2px color-mix(in srgb,var(--brand) 66%,#000)}.app-header-actions{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}.app-footer{margin-top:26px;text-align:center}.app-footer p{margin:0;font-size:.82rem;color:var(--ink-soft)}.app-footer a{color:var(--brand);font-weight:800;text-decoration:none}.app-footer a:hover{text-decoration:underline}.howto-btn.recipe-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--c-loop) 90%,#fff 10%),var(--c-loop));box-shadow:0 4px color-mix(in srgb,var(--c-loop) 66%,#000),0 10px 16px -8px var(--shadow)}.howto-btn.recipe-btn:active{box-shadow:0 2px color-mix(in srgb,var(--c-loop) 66%,#000)}.recipe-list{display:flex;flex-direction:column;gap:11px}.recipe-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--slot);border-radius:12px;padding:12px 13px}.recipe-info{min-width:0}.recipe-info b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:3px}.recipe-info p{margin:0;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}.recipe-card .copy-btn{flex:0 0 auto;font-size:.82rem;padding:8px 14px}.link-btn{border:none;background:none;padding:0;cursor:pointer;color:var(--brand);font:inherit;font-weight:800;text-decoration:underline}.link-btn:hover{opacity:.8}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;padding:20px;background:#10141f8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}.modal{background:var(--panel);border:1.5px solid var(--line);border-radius:20px;padding:22px 22px 18px;max-width:560px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:0 24px 60px -20px var(--shadow)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.modal-head h2{margin:0;font-size:1.12rem;font-weight:800}.modal-close{flex:0 0 auto;border:none;background:#0000000f;width:30px;height:30px;border-radius:50%;cursor:pointer;color:var(--ink);font-size:.9rem;font-weight:800}.modal-close:hover{background:#0000001f}.modal-lead{margin:0 0 14px;font-size:.9rem;line-height:1.6;color:var(--ink)}.modal-note{display:inline-block;margin-top:4px;font-size:.8rem;color:var(--ink-soft)}.howto-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}.howto-steps>li{background:var(--slot);border-radius:12px;padding:11px 13px}.howto-steps b{display:block;font-size:.92rem;color:var(--ink);margin-bottom:3px}.howto-steps p{margin:0;font-size:.84rem;line-height:1.55;color:var(--ink-soft)}.howto-img{display:block;width:100%;height:auto;margin-top:8px;border-radius:8px;border:1px solid var(--line);box-shadow:0 2px 8px -4px var(--shadow)}.howto-tips{margin-top:14px;font-size:.84rem;color:var(--ink-soft)}.howto-tips p{margin:0 0 4px}.howto-tips ul{margin:0 0 8px;padding-left:1.2em;line-height:1.6}.howto-safe{color:color-mix(in srgb,var(--brand) 45%,var(--ink));font-weight:700}.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}.howto-link{color:var(--brand);font-size:.82rem;font-weight:700;text-decoration:none}.howto-link:hover{text-decoration:underline}kbd{background:color-mix(in srgb,var(--ink) 12%,#fff);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:.82em;font-weight:700}.layout{display:grid;gap:18px;align-items:start;grid-template-columns:260px 1fr 350px;grid-template-areas:"palette canvas output"}.col-palette{grid-area:palette}.col-canvas{grid-area:canvas}.col-output{grid-area:output}@media(max-width:960px){.layout{grid-template-columns:220px 1fr;grid-template-areas:"palette canvas" "output  output"}}@media(max-width:640px){.layout{grid-template-columns:1fr;grid-template-areas:"palette" "canvas" "output"}}.col{background:var(--panel);border:1.5px solid var(--line);border-radius:22px;padding:16px 15px;box-shadow:0 10px 30px -18px var(--shadow)}.col h2{margin:2px 2px 14px;font-size:1.02rem;font-weight:800}.col-output{position:sticky;top:18px}@media(max-width:960px){.col-output{position:static}}.brick{--brick: var(--c-file);position:relative;border:none;width:100%;text-align:left;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--brick) 88%,#fff 12%),var(--brick));border-radius:14px;padding:13px;font-family:var(--sans);box-shadow:0 5px color-mix(in srgb,var(--brick) 70%,#000),0 11px 16px -6px var(--shadow)}.brick:before{content:"";position:absolute;top:-7px;left:15px;right:15px;height:11px;background-image:radial-gradient(circle at 8px 6px,var(--stud) 5.5px,transparent 6px);background-size:22px 12px;background-repeat:repeat-x;filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--brick) 60%,#000));pointer-events:none}.b-file{--brick: var(--c-file)}.b-excel{--brick: var(--c-excel)}.b-pdf{--brick: var(--c-pdf)}.b-mail{--brick: var(--c-mail)}.b-notify{--brick: var(--c-notify)}.b-loop{--brick: var(--c-loop)}.brick-row{display:flex;align-items:center;gap:9px}.brick-ico{font-size:1.3rem;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}.brick-name{font-weight:800;font-size:.9rem;line-height:1.25}.palette-group{margin-bottom:6px}.palette-cat{margin:15px 4px 9px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}.palette-group:first-child .palette-cat{margin-top:2px}.palette-item{margin-top:16px;cursor:grab;touch-action:none;transition:transform .13s cubic-bezier(.34,1.56,.64,1),box-shadow .13s}.palette-item:hover{transform:translateY(-3px) rotate(-.5deg);box-shadow:0 8px color-mix(in srgb,var(--brick) 70%,#000),0 16px 22px -8px var(--shadow)}.palette-item:active{cursor:grabbing;transform:translateY(2px)}.palette-item:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.palette-item.is-dragging{opacity:.38}.drag-ghost{cursor:grabbing;transform:rotate(-3deg) scale(1.04);box-shadow:0 7px color-mix(in srgb,var(--brick) 70%,#000),0 20px 28px -8px var(--shadow)}.canvas{display:flex;flex-direction:column;gap:15px;padding-top:6px;border-radius:18px;transition:outline-color .15s,background .15s;outline:3px dashed transparent;outline-offset:6px}.canvas-armed{outline-color:color-mix(in srgb,var(--brand) 45%,transparent)}.canvas-over{outline-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)}.canvas-empty{margin-top:6px;padding:40px 16px;text-align:center;color:var(--ink-soft);border:2.5px dashed var(--line);border-radius:16px;font-size:.9rem;transition:border-color .15s,color .15s}.canvas-armed .canvas-empty{border-color:var(--brand);color:var(--brand)}.drop-line{height:7px;margin:-4px 6px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 80%,#fff),var(--brand));box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 20%,transparent),0 4px 10px -3px color-mix(in srgb,var(--brand) 60%,transparent);animation:dropLinePulse .9s ease-in-out infinite}@keyframes dropLinePulse{0%,to{opacity:.75;transform:scaleX(.985)}50%{opacity:1;transform:scaleX(1)}}.card{margin-top:8px;width:auto}.card-head{display:flex;align-items:center;gap:9px}.drag-handle{border:none;background:#ffffff47;color:#fff;cursor:grab;font-size:1rem;line-height:1;padding:3px 5px;border-radius:7px;touch-action:none}.drag-handle:active{cursor:grabbing}.card-index{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;background:#ffffffeb;color:color-mix(in srgb,var(--brick) 60%,#000);border-radius:50%;font-size:.72rem;font-weight:800;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brick) 50%,#000)}.card-title{font-weight:800;font-size:.9rem;flex:1 1 auto}.remove{border:none;background:#ffffffd9;width:22px;height:22px;border-radius:50%;cursor:pointer;color:#8a2b2b;font-weight:800;font-size:.78rem;line-height:1}.remove:hover{background:#fff}.card-note{margin:9px 0 0;font-size:.76rem;color:#fffffff2}.brick.card.nested:after{content:"";position:absolute;left:-17px;top:5px;bottom:5px;width:5px;border-radius:999px;background:var(--c-loop);opacity:.5;box-shadow:0 1px color-mix(in srgb,var(--c-loop) 55%,#000);pointer-events:none}.card-fields{margin-top:10px;display:flex;flex-direction:column;gap:8px}.field{display:flex;flex-direction:column;gap:3px;background:var(--slot);border-radius:10px;padding:7px 10px}.field-bool{flex-direction:row;align-items:center;gap:8px}.field-label{font-size:.72rem;font-weight:800;color:color-mix(in srgb,var(--brick) 52%,#000)}.field input[type=text],.field input[type=number],.field select{border:none;background:transparent;padding:2px 0;width:100%;color:var(--slot-ink);font-family:var(--sans);font-size:.86rem}.field input:focus,.field select:focus{outline:none}.field:focus-within{box-shadow:0 0 0 2.5px color-mix(in srgb,var(--brick) 55%,transparent)}.field-bool input{width:auto}.field-bool span{color:color-mix(in srgb,var(--brick) 52%,#000);font-size:.82rem;font-weight:700}.field-help{color:color-mix(in srgb,var(--brick) 45%,#000);font-size:.68rem}.field.field-missing{box-shadow:0 0 0 2.5px #e5484d;background:color-mix(in srgb,#e5484d 10%,var(--slot))}.field.field-missing:after{content:"必須：埋めてね";display:block;margin-top:4px;color:#c62828;font-size:.66rem;font-weight:800}.field-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.wire-toggle{display:inline-flex;border-radius:999px;overflow:hidden;background:#0000000f}.wire-toggle button{border:none;background:transparent;color:color-mix(in srgb,var(--brick) 42%,#000);font-size:.66rem;font-weight:800;padding:3px 9px;cursor:pointer}.wire-toggle button.active{background:var(--brick);color:#fff}.wire-toggle button:disabled{opacity:.4;cursor:not-allowed}.field.wired select{background:linear-gradient(180deg,color-mix(in srgb,var(--wire) 90%,#fff),var(--wire));color:#fff;font-weight:800;padding:7px 12px;border-radius:999px;box-shadow:0 3px color-mix(in srgb,var(--wire) 66%,#000);cursor:pointer;--wire: var(--c-excel)}.field.wired.w-file select{--wire: var(--c-file)}.field.wired.w-excel select{--wire: var(--c-excel)}.field.wired.w-pdf select{--wire: var(--c-pdf)}.field.wired.w-mail select{--wire: var(--c-mail)}.field.wired.w-notify select{--wire: var(--c-notify)}.field.wired.w-loop select{--wire: var(--c-loop)}.field.wired option{color:#222}.field.wired .wire-col{margin-top:5px;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--wire, var(--c-loop)) 16%,#fff);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--wire, var(--c-loop)) 55%,transparent);color:var(--slot-ink);font-weight:700;font-size:.8rem}.field.wired .wire-col::placeholder{color:color-mix(in srgb,var(--slot-ink) 45%,transparent);font-weight:600}.output-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.output-head h2{margin:0}.copy-btn{border:none;cursor:pointer;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 90%,#fff 10%),var(--brand));color:#fff;font-family:var(--sans);font-weight:800;font-size:.9rem;padding:9px 16px;border-radius:12px;box-shadow:0 4px color-mix(in srgb,var(--brand) 66%,#000),0 10px 16px -8px var(--shadow);transition:transform .12s,box-shadow .12s}.copy-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px color-mix(in srgb,var(--brand) 66%,#000),0 14px 20px -8px var(--shadow)}.copy-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px color-mix(in srgb,var(--brand) 66%,#000)}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.output-pre{margin:0;padding:13px;background:#10141f;color:#dfe6f2;border-radius:14px;font-family:var(--mono);font-size:.74rem;line-height:1.55;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0;white-space:pre-wrap;word-break:break-all;max-height:60vh;overflow:auto;box-shadow:inset 0 0 0 1.5px #ffffff0f}.output-hint{margin:10px 2px 0;font-size:.78rem;color:var(--ink-soft)}.output-saved{margin:0 0 10px;padding:9px 13px;border-radius:11px;background:color-mix(in srgb,var(--brand) 14%,#fff);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--brand) 40%,transparent);color:color-mix(in srgb,var(--brand) 42%,#000);font-size:.82rem;font-weight:700;line-height:1.5}.output-saved strong{font-size:.95rem}.output-warning{margin:0 0 10px;padding:9px 13px;border-radius:11px;background:color-mix(in srgb,var(--c-loop) 15%,#fff);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c-loop) 45%,transparent);color:color-mix(in srgb,var(--c-loop) 40%,#000);font-size:.78rem;font-weight:700;line-height:1.5}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}