body {
  --ezwk-theme:        var(--ezwk-repaper);
  --ezwk-theme-deep:   var(--ezwk-repaper-deep);
  --ezwk-theme-bright: var(--ezwk-repaper-bright);
  --ezwk-theme-rgb:    var(--ezwk-repaper-rgb);
}
.abstract-core {
  width: 180px;
  height: 212px;
  border-radius: 16px;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 78% 100%, 0 100%);
  background:
    linear-gradient(120deg, transparent 0 45%, rgb(var(--ezwk-theme-rgb) / .18) 45% 48%, transparent 48% 100%),
    linear-gradient(180deg, var(--ezwk-surface), color-mix(in srgb, var(--ezwk-theme-soft) 55%, #fff));
}
.abstract-core::before,
.abstract-core::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 34px;
  height: 9px;
  border-radius: 999px;
  background: rgb(var(--ezwk-theme-rgb) / .16);
}
.abstract-core::before { top: 70px; }
.abstract-core::after { top: 96px; right: 74px; }
.abstract-piece { border-radius: 12px; clip-path: polygon(0 8%, 88% 0, 100% 88%, 12% 100%); }
.abstract-piece.piece-b,
.abstract-piece.piece-c { width: 68px; height: 44px; }
.abstract-piece { animation-name: fragment-align; }
.abstract-core { animation-name: paper-restore; }

.dropzone { min-height: 185px; border: 2px dashed var(--ezwk-line); border-radius: 14px; background: var(--ezwk-surface); display: grid; place-content: center; text-align: center; gap: 10px; cursor: pointer; transition: border-color .18s, background .18s; }
.dropzone.drag, .dropzone:hover { border-color: var(--ezwk-action); background: var(--ezwk-action-soft); }
.dropzone strong { font-size: 19px; }
.dropzone span { color: var(--ezwk-app-muted); }
.dropzone small { color: var(--ezwk-app-muted); font-size: 12px; margin-top: 6px; }
.source-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.source-item { width: 152px; border: 1px solid var(--ezwk-app-line); border-radius: 11px; overflow: hidden; background: var(--ezwk-surface-soft); }
.source-item canvas { height: 92px; width: 100%; display: block; object-fit: contain; background: var(--ezwk-ink-soft); }
.source-item span { display: block; padding: 8px; color: var(--ezwk-app-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.demo-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.demo-actions .button { min-height: 40px; padding-inline: 13px; font-size: 13px; }
.actions.compact { margin-top: 0; }
.hidden { display: none !important; }
.stats { color: var(--ezwk-app-muted); font-size: 13px; text-align: right; }
.hint { color: var(--ezwk-app-muted); font-size: 13px; margin: -8px 0 20px; }
.workspace-tools { display: grid; justify-items: end; gap: 10px; }
.strip-board { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; min-height: calc(min(62vh, 680px) + 112px); padding: 55px 15px 55px; background: var(--ezwk-line-soft); border-radius: 14px; border: 1px solid var(--ezwk-app-line); overflow-x: auto; overflow-y: hidden; }
.strip-card { flex: 0 0 auto; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: grab; display: block; overflow: visible; position: relative; line-height: 1.45; }
.strip-card.dragging { opacity: .35; }
.strip-card-controls { position: absolute; top: -43px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility .14s ease; }
.strip-card-footer { position: absolute; bottom: -43px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility .14s ease; }
.strip-card.is-selected .strip-card-controls,
.strip-card.is-selected .strip-card-footer { opacity: 1; visibility: visible; }
.strip-card canvas { display: block; width: auto; height: min(62vh, 680px); background: white; }
/* Keep adjacent fragment seams tight while preserving a fine boundary line. */
.strip-boundary + .strip-card { margin-left: -1px; }
.strip-boundary { flex: 0 0 0; width: 0; height: min(62vh, 680px); position: relative; z-index: 4; }
.link-button { position: absolute; left: 0; top: calc(min(62vh, 680px) / 2 - 15px); transform: translateX(-50%); pointer-events: auto; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--ezwk-action-line); background: rgb(var(--c-surface) / .94); cursor: pointer; color: var(--ezwk-action-deep); font-size: 15px; line-height: 1.45; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgb(var(--c-ink) / .14); transition: background .15s, color .15s, transform .15s; }
.link-button:hover { background: var(--ezwk-action-soft); transform: translateX(-50%) scale(1.05); }
.link-button.active { background: var(--ezwk-action); color: var(--ezwk-surface); border-color: var(--ezwk-action); }
.trash-button, .restore-button { pointer-events: auto; min-height: 31px; min-width: 32px; border-radius: 7px; border: 1px solid var(--ezwk-app-line); background: rgb(var(--c-surface) / .94); cursor: pointer; color: var(--ezwk-app-muted); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgb(var(--c-ink) / .14); }
.trash-button:hover { color: var(--ezwk-danger); border-color: var(--ezwk-line); background: var(--ezwk-page-background); }
.restore-button { font-size: 12px; padding: 0 9px; color: var(--ezwk-action-deep); background: var(--ezwk-action-soft); border-color: var(--ezwk-action-line); }
.excluded-panel { margin-top: 16px; border: 1px dashed var(--ezwk-line); border-radius: 12px; padding: 14px; background: var(--ezwk-surface-soft); }
.excluded-head { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; font-size: 14px; }
.excluded-head span { color: var(--ezwk-app-muted); font-size: 12px; }
.excluded-panel p { color: var(--ezwk-app-muted); font-size: 12px; margin: 0 0 12px; }
.excluded-board { display: flex; flex-wrap: wrap; gap: 10px; }
.excluded-card { display: flex; align-items: center; gap: 9px; background: var(--ezwk-surface); border: 1px solid var(--ezwk-app-line); border-radius: 8px; padding: 6px; }
.excluded-card canvas { height: 88px; width: auto; background: var(--ezwk-line-soft); display: block; opacity: .7; }
.processing-canvas { display: none; }
.preview-status { color: var(--ezwk-action-deep); background: var(--ezwk-action-soft); border: 1px solid var(--ezwk-action-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 0 0 12px; }
.progress { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; margin-bottom: 12px; }
.progress div { height: 8px; border-radius: 4px; background: var(--ezwk-action); }
.progress span { color: var(--ezwk-app-muted); font-size: 13px; }

@media (max-width: 800px) {
  .section-head { align-items: start; flex-direction: column; }
  .demo-actions { width: 100%; justify-content: stretch; }
  .demo-actions .button { flex: 1 1 auto; }
  .workspace-tools { justify-items: start; width: 100%; }
  :root { --paper-work-height: min(52vh, 470px); }
}

.editor-label { font-size: 13px; color: var(--ezwk-app-muted); display: block; margin: 14px 0 8px; font-weight: 700; }


/* Paper rotation correction */
.strip-actions { display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; }
.rotate-button, .trash-button { opacity: 1; }
.rotate-button { pointer-events: auto; min-height: 31px; min-width: 32px; border-radius: 7px; border: 1px solid var(--ezwk-app-line); background: rgb(var(--c-surface) / .94); cursor: pointer; color: var(--ezwk-action-deep); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgb(var(--c-ink) / .14); line-height: 1.45; }
.rotate-button:hover { background: var(--ezwk-action-soft); border-color: var(--ezwk-action-line); }


/* Automatic analysis and guidance */
.analysis-guidance { margin-top: 16px; border: 1px solid var(--ezwk-line); background: var(--ezwk-page-background); border-radius: 12px; padding: 14px 16px; }
.analysis-guidance h3 { margin: 0 0 9px; }
.analysis-guidance ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: var(--ezwk-app-muted); font-size: 13px; line-height: 1.55; }


/* Public free-plan presentation */
.free-output-note { margin-top: 18px; border-radius: 12px; padding: 14px 16px; background: var(--ezwk-page-background); border: 1px solid var(--ezwk-line); display: flex; gap: 11px; align-items: baseline; flex-wrap: wrap; }
.free-output-note strong { font-size: 13px; color: var(--ezwk-formrecast-deep); }
.free-output-note span { font-size: 13px; color: var(--ezwk-app-muted); }
.button.locked { background: var(--ezwk-line-soft); border-color: var(--ezwk-line); color: var(--ezwk-muted); display: inline-flex; align-items: center; gap: 8px; }
.button.locked span { font-size: 10px; letter-spacing: .06em; border-radius: 999px; padding: 3px 7px; color: var(--ezwk-formrecast-deep); background: var(--ezwk-danger-soft); }

/* 繧ｯ繝ｭ繧ｹ繧ｫ繝・縺ｮ閾ｪ逕ｱ驟咲ｽｮ繝ｻ繧ｹ繝翫ャ繝嶺ｽ懈･ｭ蜿ｰ */
.strip-board.crosscut-board {
  display: block;
  position: relative;
  min-height: 720px;
  padding: 0;
  overflow: auto;
  background: var(--ezwk-line-soft);
  border: 1px solid var(--ezwk-app-line);
}
.crosscut-page-shadow {
  position: absolute;
  background: var(--ezwk-surface);
  box-shadow: 0 1px 1px rgb(var(--c-ink) / .06), 0 7px 26px rgb(var(--c-ink) / .1);
  border-radius: 2px;
  pointer-events: none;
}
.crosscut-card {
  position: absolute;
  touch-action: none;
  cursor: grab;
  z-index: 2;
  transition: box-shadow .13s ease;
}
.crosscut-card.dragging { opacity: .66; z-index: 9; cursor: grabbing; }
.crosscut-card canvas { width: 100%; height: 100%; object-fit: fill; display: block; background: transparent; }
.crosscut-card .strip-card-controls,
.crosscut-card .strip-card-footer {
  left: auto; right: 4px; transform: none;
}
.crosscut-card .strip-card-controls { top: 4px; }
.crosscut-card .strip-card-footer { bottom: 4px; }
.crosscut-card.is-selected { z-index: 20; }
.crosscut-card.is-selected .strip-card-controls,
.crosscut-card.is-selected .strip-card-footer { opacity: 1; visibility: visible; }
.crosscut-card .rotate-button,
.crosscut-card .trash-button { width: 30px; height: 30px; font-size: 14px; }
.crosscut-card .strip-card-controls { display: flex; gap: 3px; }
.crosscut-card .fine-rotate { width: 27px; font-size: 13px; }


/* 蜴溷刀雉ｪ繧ｯ繝ｭ繧ｹ繧ｫ繝・隱ｿ謨ｴ繝ｻ霎ｺ謗･蜷・繧ｺ繝ｼ繝 */
.zoom-indicator {
  min-width: 54px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--ezwk-line-soft);
  color: var(--ezwk-app-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.edge-legend {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ezwk-app-muted);
  font-size: 12px;
}
.legend-edge {
  display: inline-block;
  width: 28px;
  height: 4px;
  border-radius: 4px;
  margin-left: 8px;
}
.legend-edge.open { background: var(--ezwk-formrecast-deep); }
.edge-tools {
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1px solid var(--ezwk-line-strong);
  border-radius: 11px;
  background: var(--ezwk-line-soft);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ezwk-app-muted);
  font-size: 13px;
}
.edge-tools strong { color: var(--ezwk-action); }
.edge-tools .button { min-height: 34px; padding: 0 12px; font-size: 12px; }
.strip-board.crosscut-board { cursor: grab; user-select: none; touch-action: none; overscroll-behavior: contain; overflow: auto; }
.strip-board.crosscut-board.panning { cursor: grabbing; }
.crosscut-stage { position: relative; transform-origin: top left; }
.crosscut-card { overflow: visible; }
.piece-edge {
  position: absolute;
  display: block;
  z-index: 5;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  pointer-events: none;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.piece-edge.top, .piece-edge.bottom { left: 0; right: 0; height: 4px; }
.piece-edge.left, .piece-edge.right { top: 0; bottom: 0; width: 4px; }
.piece-edge.top { top: -2px; }
.piece-edge.right { right: -2px; }
.piece-edge.bottom { bottom: -2px; }
.piece-edge.left { left: -2px; }
.piece-edge.open { background: var(--ezwk-formrecast-deep); }
.crosscut-card .strip-card-controls, .crosscut-card .strip-card-footer { z-index: 12; }
@media (max-width: 800px) {
  .edge-tools { align-items: start; flex-direction: column; }
  .zoom-indicator { display: none; }
}


/* 繧ｸ繧ｰ繧ｽ繝ｼ縺ｮ螟牙援蠖｢迥ｶ繝代せE譛ｪ謗･邯哘蜃ｹ蜃ｸ霎ｺ縺縺代ｒ陦ｨ遉ｺ */
.jigsaw-edge-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.jigsaw-edge-path {
  fill: none;
  stroke: var(--ezwk-formrecast-deep);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgb(var(--c-surface) / .48));
}


/* Integrated restoration stage */
.main-viewport {
  position: relative;
  min-height: min(76vh, 850px);
  height: min(76vh, 850px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ezwk-line-soft);
  border: 1px solid var(--ezwk-app-line);
}
.source-stage, .workspace-viewport {
  position: absolute;
  inset: 0;
}
.source-stage {
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--ezwk-line-soft);
  opacity: 1;
  transition: opacity .68s ease;
}
.source-stage.dissolve { opacity: 0; pointer-events: none; }
.source-preview-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--ezwk-ink-soft);
}
.source-empty-prompt {
  position: absolute;
  inset: 22px;
  min-height: auto;
  margin: 0;
}
.source-restore-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgb(var(--c-ink) / .18);
}
.restore-action {
  min-height: 60px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: 18px;
  box-shadow: 0 14px 34px rgb(var(--c-ink) / .24);
}
.analysis-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  color: white;
  background: rgb(var(--c-ink) / .48);
  backdrop-filter: blur(2px);
}
.analysis-overlay strong { font-size: 19px; }
.analysis-overlay span:last-child { font-size: 13px; opacity: .88; }
.analysis-spinner {
  display: block;
  width: 42px;
  height: 42px;
  border: 3px solid rgb(var(--c-surface) / .24);
  border-top-color: white;
  border-radius: 50%;
  animation: repaperSpin .8s linear infinite;
}
@keyframes repaperSpin { to { transform: rotate(360deg); } }
.workspace-viewport { z-index: 2; background: transparent; }
.workspace-viewport .preview-status {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 30;
  margin: 0;
}
.workspace-viewport .strip-board,
.workspace-viewport .strip-board.crosscut-board {
  height: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.main-viewport[data-phase="editing"] .workspace-viewport .strip-board,
.main-viewport[data-phase="editing"] .workspace-viewport .strip-board.crosscut-board {
  background: var(--ezwk-line);
}
.main-viewport[data-phase="animating"] .crosscut-page-shadow { opacity: 0; }
.main-viewport[data-phase="editing"] .crosscut-page-shadow {
  opacity: 1;
  background: transparent;
  box-shadow: none;
  transition: opacity .35s ease;
}
.main-viewport[data-phase="animating"] .strip-card-controls,
.main-viewport[data-phase="animating"] .strip-card-footer,
.main-viewport[data-phase="animating"] .piece-edge,
.main-viewport[data-phase="animating"] .jigsaw-edge-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}
.crosscut-card.assembly-piece, .strip-card.assembly-piece {
  will-change: transform, opacity;
  z-index: 15;
}
.studio-file-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.studio-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.studio-edit-actions.hidden { display: none; }
.upload-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.editing-panel { margin-top: 16px; }
.editing-stats { margin: 0 0 10px; }
.editing-panel .edge-legend { margin-bottom: 10px; }

@media (max-width: 800px) {
  .main-viewport { min-height: 60vh; height: 60vh; }
  .source-empty-prompt { inset: 10px; }
  .restore-action { font-size: 16px; min-height: 53px; padding-inline: 26px; }
  .studio-file-actions { flex-wrap: wrap; }
}


/* H1: 陬∵妙縺輔ｌ縺滓枚蟄励′繧ｿ繧､繝医Ν縺ｸ謌ｻ繧句ｰ殺繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ */
.restore-title {
  position: relative;
  min-height: calc(2em * 1.02);
  overflow: visible;
}
.restore-title-line {
  display: block;
  white-space: nowrap;
}
.restore-title-char {
  position: relative;
  display: inline-block;
  transform-origin: 50% 52%;
  will-change: transform, opacity, filter;
}
.restore-title.is-scattered .restore-title-char {
  transform:
    translate(var(--scatter-x), var(--scatter-y))
    rotate(var(--scatter-angle))
    scale(var(--scatter-scale));
  opacity: .17;
  filter: blur(.3px);
}
.restore-title.is-scattered.is-assembled .restore-title-char {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0);
  transition:
    transform 780ms cubic-bezier(.16, .9, .18, 1) var(--settle-delay),
    opacity 300ms ease var(--settle-delay),
    filter 340ms ease var(--settle-delay);
}


/* 繝｢繝舌う繝ｫ蠕ｩ蜈・繝･繝ｼEE菴楢｡ｨ遉ｺ縺ｨ繝斐Φ繝∵桃菴・*/
.workspace-viewport, .workspace-viewport .strip-board.crosscut-board {
  touch-action: none;
  overscroll-behavior: contain;
}
@media (max-width: 800px) {
  .workspace-viewport .preview-status {
    top: 8px;
    left: 8px;
    right: 8px;
    font-size: 12px;
  }
  .crosscut-card .strip-card-controls,
  .crosscut-card .strip-card-footer {
    transform: scale(.92);
    transform-origin: top right;
  }
  .crosscut-card .strip-card-footer { transform-origin: bottom right; }
}


/* Flat premium material theme */
.restore-title {
  margin-bottom: 20px;
  min-height: calc(2em * 1.02);
}
.restore-title-line:first-child,
.restore-title-line:first-child .restore-title-char {
  color: var(--ezwk-ink);
}
.restore-title-line:nth-child(2),
.restore-title-line:nth-child(2) .restore-title-char {
  color: var(--ezwk-action);
}
.lead {
  max-width: 560px;
  color: var(--ezwk-app-muted);
  font-size: 16px;
  line-height: 1.9;
}
#studioPanel .studio-panel {
  border-radius: 23px;
  border-color: var(--ezwk-app-line-strong);
}
.main-viewport {
  border-color: var(--ezwk-app-line-strong);
  background: var(--ezwk-success-soft);
  box-shadow: inset 0 1px 2px rgb(var(--c-ink) / .06);
}
.source-stage {
  background: var(--ezwk-success-soft);
}
.source-restore-overlay {
  background: rgb(var(--c-ink) / .14);
}
.dropzone {
  border-color: var(--ezwk-line);
  background: rgb(var(--c-surface) / .78);
}
.dropzone.drag,
.dropzone:hover {
  border-color: var(--ezwk-action);
  background: var(--ezwk-line-soft);
}
.preview-status {
  background: var(--ezwk-line-soft);
  border-color: var(--ezwk-line);
}
.progress div {
  position: relative;
  overflow: hidden;
  background: var(--ezwk-line);
}
.progress div::before {
  content: "";
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ezwk-action);
  transition: width .16s ease;
}
.free-output-note {
  background: var(--ezwk-danger-soft);
  border-color: var(--ezwk-line);
}


@media (max-width: 800px) {
  .studio-edit-actions {
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }
  .studio-edit-actions .button {
    min-height: 41px;
    padding-inline: 12px;
    font-size: 13px;
  }
}


/* EZ-WK flow layout: hero -> image import -> restoration result */
.product-flow-section > h2 + .stage-description {
  margin-top: calc(clamp(16px, 2.2vw, 28px) * -0.52);
  margin-bottom: clamp(18px, 2.6vw, 32px);
}
.c-panel-head .stage-description { margin-top: 7px; color: var(--ezwk-app-muted); font-size: 13px; }
.result-stage-banner {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--ezwk-line-strong);
  border-radius: 999px;
  background: rgb(var(--c-surface) / .94);
  box-shadow: 0 4px 14px rgb(var(--c-ink) / .06);
}
.result-stage-banner span { color: var(--ezwk-action); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.result-stage-banner strong { color: var(--ezwk-app-ink); font-size: 12px; }
.workspace-viewport .preview-status { top: 63px; }
@media (max-width: 800px) {
  .result-stage-banner { left: 10px; top: 10px; max-width: calc(100% - 20px); }
  .workspace-viewport .preview-status { top: 57px; left: 10px; }
}