/* Ink & Paper Atelier / static-site stylesheet. Paper, graphite, cobalt, vermilion. */
:root{font-family:"IBM Plex Sans","Noto Sans JP",sans-serif;color:#262725;background:#f3efe7;--paper:#f3efe7;--paper-deep:#e9e2d6;--paper-light:#fbfaf6;--ink:#262725;--muted:#74736d;--line:rgba(38,39,37,.14);--line-strong:rgba(38,39,37,.28);--cobalt:#2146d0;--cobalt-dark:#1534a8;--cobalt-soft:#e6ebff;--verm:#e6533c;--ease:cubic-bezier(.23,1,.32,1)}*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:var(--paper)}body{font-synthesis:none;text-rendering:optimizeLegibility}button,input{font:inherit}button{border:0;cursor:pointer}button:disabled,input:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}.app-shell{min-height:100vh;overflow:hidden;background-color:var(--paper);background-image:url("assets/stampmark-paper-texture.jpg");background-size:900px auto;background-blend-mode:multiply}.app-shell:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.3;background-image:linear-gradient(90deg,rgba(33,70,208,.035) 1px,transparent 1px),linear-gradient(rgba(33,70,208,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 55%)}.topbar{position:relative;z-index:2;display:grid;grid-template-columns:250px 1fr auto;align-items:center;gap:28px;min-height:78px;padding:16px 34px 14px;border-bottom:1px solid var(--line);background:rgba(243,239,231,.78);backdrop-filter:blur(16px)}.brand-lockup{display:flex;align-items:center;gap:10px}.brand-mark-frame{width:36px;height:36px;padding:5px;border:1px solid var(--ink);background:var(--paper-light)}.brand-mark-frame img{display:block;width:100%;height:100%;object-fit:contain}.wordmark{font:700 18px/1 "Space Grotesk",sans-serif;letter-spacing:-.06em}.wordmark span{color:var(--cobalt)}.brand-caption{margin-top:5px;font-size:8px;font-weight:700;letter-spacing:.15em;color:var(--muted)}.topbar-center{display:flex;align-items:baseline;gap:15px}.topbar-kicker,.eyebrow{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.17em}.topbar-title{font:600 14px/1.2 "Noto Sans JP",sans-serif}.topbar-actions{display:flex;align-items:center;gap:18px}.save-note{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;white-space:nowrap}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 3px rgba(33,70,208,.12)}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 17px;color:#fff;background:var(--cobalt);box-shadow:4px 4px 0 rgba(33,70,208,.16);font-size:12px;font-weight:700;letter-spacing:.015em;transition:transform 160ms var(--ease),background 160ms var(--ease),box-shadow 160ms var(--ease)}.primary-button:hover:not(:disabled){background:var(--cobalt-dark);box-shadow:6px 6px 0 rgba(33,70,208,.14);transform:translate(-1px,-1px)}.primary-button:active:not(:disabled){transform:scale(.97);box-shadow:2px 2px 0 rgba(33,70,208,.16)}.primary-button:disabled{background:#a7b0c8;box-shadow:none}.primary-button.compact{min-height:38px;padding:0 14px}.primary-button.full{width:100%;min-height:48px}.workspace-layout{position:relative;z-index:1;display:grid;grid-template-columns:190px minmax(360px,1fr) 306px;width:min(1540px,100%);min-height:calc(100vh - 122px);margin:0 auto}.workflow-rail{display:flex;flex-direction:column;padding:43px 22px 24px 34px;border-right:1px solid var(--line)}.rail-heading{display:flex;align-items:baseline;justify-content:space-between}.folio-number{color:var(--verm);font:600 10px "Space Grotesk",sans-serif}.rail-rule{height:1px;margin:17px 0 21px;background:var(--line-strong)}.steps{display:flex;flex-direction:column;gap:19px}.step-item{position:relative;display:flex;gap:10px;min-height:43px;opacity:.5;transition:opacity 180ms var(--ease)}.step-item:after{content:"";position:absolute;top:28px;left:11px;width:1px;height:27px;background:var(--line)}.step-item:last-child:after{display:none}.step-item.is-active,.step-item.is-complete{opacity:1}.step-mark{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border:1px solid var(--line-strong);color:var(--muted);font:600 9px "Space Grotesk",sans-serif}.step-item.is-active .step-mark{color:var(--cobalt);border-color:var(--cobalt)}.step-item.is-complete .step-mark{color:#fff;border-color:var(--cobalt);background:var(--cobalt)}.step-text{display:flex;flex-direction:column;gap:3px;padding-top:1px}.step-text span{font-size:12px;font-weight:700}.step-text small{color:var(--muted);font-size:10px;line-height:1.45}.rail-note{display:flex;gap:9px;margin-top:auto;padding:13px 0;color:var(--muted);border-top:1px solid var(--line);font-size:10px;line-height:1.6}.rail-note span{color:var(--verm)}.rail-note p{margin:0}.rail-footer{display:flex;justify-content:space-between;padding-top:14px;color:var(--muted);font:600 8px "Space Grotesk",sans-serif;letter-spacing:.08em}.canvas-column{min-width:0;padding:43px clamp(28px,5vw,83px) 30px}.canvas-header{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:21px}.canvas-header h1{margin:7px 0 0;font:600 clamp(21px,2.2vw,29px)/1.1 "Space Grotesk","Noto Sans JP",sans-serif;letter-spacing:-.045em}.canvas-meta{display:flex;align-items:center;gap:11px;color:var(--muted);font:500 10px "Space Grotesk",sans-serif}.canvas-meta i{width:18px;height:1px;background:var(--line-strong)}.artboard-wrap{position:relative;width:min(100%,720px);margin:0 auto;padding:15px;background:rgba(38,39,37,.045);box-shadow:0 16px 48px rgba(48,42,33,.09)}.artboard{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(38,39,37,.1);touch-action:none}.template-layer{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}.crop-mark{position:absolute;z-index:4;width:12px;height:12px;border-color:var(--verm);pointer-events:none}.crop-tl{top:0;left:0;border-top:1px solid;border-left:1px solid}.crop-tr{top:0;right:0;border-top:1px solid;border-right:1px solid}.crop-bl{bottom:0;left:0;border-bottom:1px solid;border-left:1px solid}.crop-br{right:0;bottom:0;border-right:1px solid;border-bottom:1px solid}.safe-area-guide{position:absolute;z-index:1;inset:8%;border:1px dashed rgba(33,70,208,.28);pointer-events:none}.guide-label{position:absolute;z-index:3;color:rgba(33,70,208,.58);background:rgba(255,255,255,.62);font:700 7px "Space Grotesk",sans-serif;letter-spacing:.1em;pointer-events:none}.guide-top{top:calc(8% - 4px);left:8%;transform:translateY(-100%)}.guide-bottom{right:8%;bottom:calc(8% - 4px);transform:translateY(100%)}.source-layer{position:absolute;z-index:2;min-width:20px;cursor:grab;transform-origin:center;user-select:none;transition:filter 180ms var(--ease)}.source-layer:active{cursor:grabbing}.source-layer img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;box-shadow:0 13px 25px rgba(38,39,37,.14)}.selection-badge{position:absolute;right:0;top:-27px;padding:5px 7px;color:var(--cobalt);border:1px solid rgba(33,70,208,.27);background:rgba(255,255,255,.92);font-size:9px;font-weight:700;opacity:0;transform:translateY(3px);transition:opacity 150ms var(--ease),transform 150ms var(--ease);pointer-events:none;white-space:nowrap}.source-layer:hover .selection-badge,.source-layer.dragging .selection-badge{opacity:1;transform:translateY(0)}.empty-artboard{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}.empty-ribbon{position:absolute;right:-3%;bottom:-4%;width:62%;max-width:330px;mix-blend-mode:multiply;opacity:.7;-webkit-mask-image:radial-gradient(ellipse at 76% 76%,#000 0 34%,transparent 78%);mask-image:radial-gradient(ellipse at 76% 76%,#000 0 34%,transparent 78%);pointer-events:none}.empty-artboard-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(280px,75%);text-align:center}.empty-icon{display:grid;place-items:center;width:44px;height:44px;color:var(--cobalt);border:1px solid rgba(33,70,208,.5);background:rgba(255,255,255,.75);font-size:25px}.empty-artboard-copy strong{font:600 15px "Noto Sans JP",sans-serif}.empty-artboard-copy span{color:var(--muted);font-size:10px;line-height:1.6}.watermark-preview{position:absolute;right:3.5%;bottom:3.5%;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 7px;border:1px solid rgba(38,39,37,.1);border-radius:99px;background:rgba(255,255,255,.92);color:var(--ink);font:600 clamp(7px,1vw,11px) "IBM Plex Sans",sans-serif;transform-origin:right bottom;pointer-events:none;white-space:nowrap;box-shadow:0 2px 8px rgba(38,39,37,.08)}.watermark-preview b{color:var(--cobalt)}.canvas-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:11px;color:var(--muted);font-size:10px}.canvas-footer span:first-child{display:inline-flex;align-items:center;gap:7px;font-weight:600}.registration-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--verm)}.controls-panel{display:flex;flex-direction:column;min-width:0;border-left:1px solid var(--line);background:rgba(251,250,246,.52)}.panel-section{padding:26px 25px 24px;border-bottom:1px solid var(--line)}.first-section{padding-top:43px}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.section-heading h2{margin:6px 0 0;font:600 16px/1.1 "Space Grotesk","Noto Sans JP",sans-serif;letter-spacing:-.04em}.section-symbol{color:var(--cobalt);font-size:18px}.file-drop{display:flex;align-items:center;gap:9px;min-height:52px;margin-top:9px;padding:8px 9px;border:1px dashed rgba(38,39,37,.3);background:rgba(255,255,255,.45);transition:border 150ms var(--ease),background 150ms var(--ease),transform 150ms var(--ease)}.file-drop:hover{border-color:var(--cobalt);background:var(--cobalt-soft);transform:translateX(2px)}.file-drop input{display:none}.drop-icon{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;color:var(--cobalt);background:var(--cobalt-soft)}.drop-copy{display:flex;flex-direction:column;min-width:0;gap:2px}.drop-copy strong{overflow:hidden;color:var(--ink);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.drop-copy small{color:var(--muted);font-size:9px}.drop-arrow{margin-left:auto;color:var(--muted);font-size:22px}.control-toolbar{display:flex;align-items:center;justify-content:space-between;margin:-3px 0 15px}.text-button{display:inline-flex;align-items:center;gap:6px;padding:4px 0;color:var(--cobalt);background:transparent;font-size:10px;font-weight:700}.text-button:disabled{color:#a4a6ad}.icon-button{display:grid;place-items:center;width:25px;height:25px;color:var(--muted);border:1px solid var(--line);background:transparent;font-size:17px}.icon-button:disabled{opacity:.4}.slider-control{display:block;margin-top:15px}.slider-control>span{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;color:var(--muted);font-size:10px}.slider-control output{color:var(--ink);font:600 10px "Space Grotesk",sans-serif}.slider-control input[type=range]{display:block;width:100%;height:3px;accent-color:var(--cobalt);cursor:pointer}.slider-control input:disabled{opacity:.43}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:19px;color:var(--muted);font-size:10px}.toggle-row input{position:absolute;opacity:0;pointer-events:none}.toggle-ui{position:relative;display:inline-flex;align-items:center;width:32px;height:18px;padding:2px;border:1px solid var(--line-strong);background:var(--paper-deep)}.toggle-ui b{display:block;width:12px;height:12px;background:#fff;box-shadow:0 1px 3px rgba(38,39,37,.2);transition:transform 150ms var(--ease)}.toggle-row input:checked+.toggle-ui{background:var(--cobalt);border-color:var(--cobalt)}.toggle-row input:checked+.toggle-ui b{transform:translateX(14px)}.field-label{display:block;margin-bottom:7px;color:var(--muted);font-size:10px}.input-with-icon{display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);background:#fff;color:var(--cobalt)}.input-with-icon input{width:100%;min-height:36px;padding:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:11px}.stamp-note{display:flex;gap:7px;margin-top:17px;padding:10px 9px;color:var(--muted);background:rgba(230,235,255,.56);font-size:9px;line-height:1.55}.panel-bottom{margin-top:auto;padding:20px 25px 24px}.shortcut-hint{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:11px;color:var(--muted);font-size:9px}kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;border:1px solid var(--line-strong);background:rgba(255,255,255,.6);font:600 9px "Space Grotesk",sans-serif}.page-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;padding:10px 34px 13px;border-top:1px solid var(--line);color:var(--muted);font:600 8px "Space Grotesk",sans-serif;letter-spacing:.08em}.page-footer span:last-child{display:inline-flex;align-items:center;gap:7px}.page-footer i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--verm)}.toast{position:fixed;right:24px;bottom:24px;z-index:20;max-width:320px;padding:12px 15px;color:#fff;background:#262725;box-shadow:6px 6px 0 rgba(33,70,208,.18);font-size:11px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 180ms var(--ease),transform 180ms var(--ease)}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1150px){.topbar{grid-template-columns:220px 1fr auto;padding-inline:24px}.workspace-layout{grid-template-columns:165px minmax(320px,1fr) 280px}.workflow-rail{padding-left:24px;padding-right:18px}.panel-section{padding-inline:20px}.panel-bottom{padding-inline:20px}.save-note{display:none}}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto;gap:15px}.topbar-center{display:none}.workspace-layout{display:block;min-height:auto}.workflow-rail{display:block;padding:20px 24px 17px;border-right:0;border-bottom:1px solid var(--line)}.rail-rule,.rail-note,.rail-footer{display:none}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px}.step-item{min-height:30px;gap:7px}.step-item:after{top:11px;left:24px;width:calc(100% - 10px);height:1px}.step-mark{z-index:1;flex-basis:22px}.step-text small{display:none}.canvas-column{padding:31px 24px 26px}.controls-panel{display:grid;grid-template-columns:repeat(2,1fr);border-left:0;border-top:1px solid var(--line)}.first-section{padding-top:25px}.stamp-section,.panel-bottom{grid-column:1/-1}}
@media(max-width:580px){.topbar{min-height:65px;padding:11px 16px}.brand-mark-frame{width:31px;height:31px}.wordmark{font-size:16px}.brand-caption{font-size:7px}.primary-button.compact{min-height:36px;padding-inline:10px;font-size:10px}.workflow-rail{padding-inline:16px}.step-text span{font-size:10px}.canvas-column{padding:25px 16px 22px}.canvas-header{align-items:start;flex-direction:column;gap:11px}.canvas-header h1{font-size:23px}.canvas-meta{align-self:flex-end;margin-top:-29px}.artboard-wrap{padding:9px}.canvas-footer{flex-direction:column;align-items:flex-start;gap:5px}.controls-panel{display:block}.panel-section,.panel-bottom{padding-inline:16px}.page-footer{flex-direction:column;padding-inline:16px;font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}