:root {
  color-scheme: light;
  font-family: "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: #35435b;
  background: #e9f0ef;
  font-size: 16px;
  --ink: #35435b;
  --ink-soft: #6f7c8f;
  --navy: #273851;
  --navy-deep: #17263d;
  --paper: #fbf8ed;
  --paper-deep: #eee6d3;
  --gold: #c3a363;
  --gold-pale: #ead9ad;
  --aqua: #69b6ae;
  --aqua-deep: #438d8c;
  --line: #d9ccb2;
  --shadow: 0 14px 35px rgba(39, 56, 81, .14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.9) 0 3%, transparent 19%),
    radial-gradient(circle at 70% 75%, rgba(130,190,184,.12), transparent 28%),
    linear-gradient(135deg, #edf4f3, #e4eceb 50%, #f4efe4);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  color: rgba(195, 163, 99, .2);
  font-family: Georgia, serif;
  pointer-events: none;
}

body::before { content: "✦"; top: 130px; right: 6vw; font-size: 54px; }
body::after { content: "✧"; bottom: 5vh; left: 31vw; font-size: 38px; }

header {
  height: 90px;
  border-bottom: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 38px;
  color: #fffdf4;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(135deg, #314b64, #253a55 55%, #1e3048);
  box-shadow: 0 4px 18px rgba(24, 38, 60, .2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .04em;
}

.mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-pale);
  border-radius: 50% 50% 46% 54%;
  color: #fff1bd;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.05), 0 0 18px rgba(234,217,173,.15);
  font-family: Georgia, serif;
  font-size: 27px;
  transform: rotate(6deg);
}

.brand small {
  display: block;
  margin-top: 5px;
  color: #cddedc;
  font-family: "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.2px;
}

.privacy {
  padding: 9px 14px;
  border: 1px solid rgba(234,217,173,.5);
  border-radius: 999px;
  color: #e9f4ef;
  background: rgba(14, 30, 50, .22);
  font-size: 12px;
}

.privacy::before { content: "✦"; margin-right: 7px; color: #ffeba9; }

main {
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  min-height: calc(100vh - 90px);
}

aside {
  position: relative;
  padding: 34px 30px;
  border-right: 1px solid #cdbb91;
  background:
    linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(195,163,99,.08) 27px);
  box-shadow: 10px 0 30px rgba(39, 56, 81, .08);
}

aside::after {
  content: "✦";
  position: absolute;
  top: 16px;
  right: 22px;
  color: rgba(195, 163, 99, .42);
  font-size: 18px;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--aqua-deep);
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.step::before {
  content: "✦";
  color: var(--gold);
  font-size: 10px;
}

h1 {
  margin: 13px 0 8px;
  color: var(--navy);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: .02em;
  text-shadow: 0 2px #fff;
}

p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
}

.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 24px 10px;
  overflow: hidden;
  border: 1px dashed #a98e57;
  border-radius: 18px 6px 18px 6px;
  color: var(--navy);
  background:
    radial-gradient(circle at 50% -20%, rgba(105,182,174,.2), transparent 55%),
    rgba(255, 253, 245, .78);
  box-shadow: inset 0 0 0 4px rgba(234,217,173,.2);
  cursor: pointer;
}

.drop::before,
.drop::after {
  content: "✦";
  position: absolute;
  color: rgba(195,163,99,.55);
  font-size: 12px;
}

.drop::before { top: 9px; left: 12px; }
.drop::after { right: 12px; bottom: 9px; }

.drop:hover,
.drop.drag {
  border-color: var(--aqua-deep);
  background-color: #eff8f3;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 4px rgba(105,182,174,.12), 0 8px 18px rgba(67,141,140,.12);
}

.drop:focus-within { outline: 3px solid rgba(105,182,174,.32); outline-offset: 3px; }
.drop input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.drop span { color: #7d8a98; font-size: 12px; }
.drop .upload { color: var(--aqua-deep); font-family: Georgia, serif; font-size: 35px; line-height: 1; }
.drop strong { color: var(--navy); font-family: "Yu Mincho", serif; font-size: 15px; }
.filename { min-height: 20px; overflow-wrap: anywhere; text-align: center; font-size: 12px; }

button,
select { font: inherit; }

button {
  padding: 10px 14px;
  border: 1px solid #b8a77f;
  border-radius: 16px 5px 16px 5px;
  color: var(--navy);
  background: linear-gradient(#fffef8, #eee8d9);
  box-shadow: 0 3px 0 rgba(162, 140, 91, .18);
  font-size: 13px;
  cursor: pointer;
}

button:hover:enabled {
  border-color: var(--gold);
  color: #31575b;
  background: #fffdf6;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(67, 76, 98, .14);
}

button:disabled { opacity: .44; cursor: not-allowed; filter: grayscale(.2); }
button:focus-visible,
select:focus-visible { outline: 3px solid rgba(105,182,174,.35); outline-offset: 3px; }
.secondary { width: 100%; }

hr {
  height: 13px;
  margin: 26px 0 22px;
  border: 0;
  background:
    linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 43%, transparent 43% 57%, var(--line) 57% 82%, transparent) center / 100% 1px no-repeat;
}

hr::after { content: "✦"; }

.field {
  display: block;
  margin: 17px 0;
  color: #536078;
  font-size: 13px;
  font-weight: 700;
}

select {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding: 12px 38px 12px 13px;
  border: 1px solid #cabb9b;
  border-radius: 9px;
  color: var(--navy);
  background: #fffdf6;
  box-shadow: inset 0 1px 3px rgba(46, 61, 83, .06);
}

select:disabled { color: #9299a4; background: #efede5; }

input[type=range] {
  display: block;
  width: 100%;
  margin-top: 17px;
  accent-color: var(--aqua-deep);
}

output { float: right; color: var(--aqua-deep); font-size: 12px; }
.hint { color: #7a8494; font-size: 11px; line-height: 1.75; }

.primary {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px solid #3d7477;
  color: #fffdf3;
  background: linear-gradient(135deg, #66aca7, #477f83);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), 0 7px 16px rgba(55,104,105,.22);
  font-weight: 700;
}

.primary:hover:enabled { color: #fff; background: linear-gradient(135deg, #79beb5, #4b8589); }
.primary span { color: #ffe7a0; }

#status {
  min-height: 50px;
  margin-top: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(195,163,99,.35);
  border-radius: 7px;
  color: #68758a;
  background: rgba(255,253,246,.62);
  font-size: 12px;
  line-height: 1.7;
}

.error { color: #b65057 !important; border-color: #d7a0a0 !important; }

.workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 30px 20px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.toolbar-left { min-width: 0; display: flex; align-items: center; gap: 11px; }

.tabs {
  display: flex;
  padding: 4px;
  border: 1px solid #d1c4a8;
  border-radius: 18px 7px 18px 7px;
  background: rgba(255,253,246,.78);
  box-shadow: 0 5px 16px rgba(43, 59, 80, .08);
}

.tabs button { border: 0; box-shadow: none; background: transparent; }
.tabs button.active { color: #fffdf4; background: linear-gradient(135deg, #6eaaa6, #477f83); }

.style-badge {
  padding: 7px 12px;
  border: 1px solid #bda979;
  border-radius: 999px;
  color: #71603a;
  background: #fff9e9;
  box-shadow: 0 3px 10px rgba(111,94,55,.08);
  font-size: 11px;
  white-space: nowrap;
}

.style-badge::before { content: "✦"; margin-right: 6px; color: var(--gold); }
.zoom { display: flex; gap: 5px; }
.zoom button { min-width: 42px; border-radius: 12px 5px 12px 5px; }

.canvas-wrap {
  position: relative;
  min-height: 440px;
  flex: 1;
  overflow: hidden;
  border: 1px solid #9d895f;
  border-radius: 22px 8px 22px 8px;
  background:
    radial-gradient(circle at 78% 20%, rgba(105,182,174,.1), transparent 25%),
    linear-gradient(145deg, #1b2b42, #203650 55%, #18283d);
  box-shadow:
    inset 0 0 0 4px rgba(234,217,173,.15),
    inset 0 0 55px rgba(9,19,34,.38),
    var(--shadow);
}

.canvas-wrap::before,
.canvas-wrap::after {
  position: absolute;
  z-index: 2;
  color: #d8bd7c;
  font-family: Georgia, serif;
  font-size: 22px;
  pointer-events: none;
}

.canvas-wrap::before { content: "✦"; top: 10px; left: 14px; }
.canvas-wrap::after { content: "✦"; right: 14px; bottom: 9px; transform: rotate(45deg); }

canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

canvas:active { cursor: grabbing; }

#empty {
  position: absolute;
  top: 38%;
  width: 100%;
  color: #eef6f2;
  text-align: center;
  pointer-events: none;
}

#empty h2 {
  margin: 10px 0 5px;
  color: #fff9e9;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .04em;
}

#empty p { color: #acbfca; font-size: 13px; }
.empty-icon { color: #d8bd7c; font-size: 31px; letter-spacing: 13px; text-shadow: 0 0 18px rgba(255,226,156,.35); }

.legend {
  position: absolute;
  bottom: 18px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(234,217,173,.28);
  border-radius: 12px 4px 12px 4px;
  color: #c2d2da;
  background: rgba(16, 31, 51, .82);
  backdrop-filter: blur(7px);
  font-size: 11px;
}

.legend i { width: 20px; height: 2px; background: #72d3be; }
.legend i.data { margin-left: 12px; background: #e1b767; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 2px 10px;
  color: #738094;
  font-size: 11px;
}

#stats { color: #53677c; font-weight: 700; }
.note { color: #89929f; font-size: 11px; line-height: 1.7; }

@media (max-width: 850px) {
  header { height: auto; padding: 16px 20px; }
  .privacy { display: none; }
  main { grid-template-columns: 1fr; }
  aside { padding: 27px 23px; border-right: 0; border-bottom: 1px solid #cdbb91; }
  h1 { font-size: 26px; }
  h1 br { display: none; }
  .drop { margin-top: 14px; }
  .workspace { padding: 16px 14px; }
  .toolbar { align-items: flex-start; }
  .toolbar-left { align-items: flex-start; flex-direction: column; }
  .canvas-wrap { height: 520px; flex: auto; border-radius: 16px 6px 16px 6px; }
  footer { flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .brand { font-size: 18px; }
  .mark { width: 40px; height: 40px; }
  .workspace { padding: 13px 10px; }
  .toolbar { flex-direction: column; }
  .zoom { align-self: flex-end; }
}

@media (prefers-reduced-motion: no-preference) {
  button,
  .drop,
  .tabs button { transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; }
}