:root {
    --td-paper:#f4f0e7;
    --td-paper2:#ece6d9;
    --td-ink:#171515;
    --td-muted:#746b61;
    --td-line:#d7cdbc;
    --td-red:#a84432;
    --td-copper:#c57a42;
    --td-dark:#1b1a19;
    --td-card:#faf7f1;
    --td-shadow:0 28px 70px rgba(48,38,28,.13)
}
* { box-sizing:border-box }
body { margin:0; background:linear-gradient(180deg,#1a1918 0 620px,var(--td-paper) 620px); color:var(--td-ink); font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif }
img { display:block; max-width:100% }
.td-wrap,.td-hero,.td-section,.td-cta { width:min(1230px,calc(100% - 36px)); margin:auto }
.td-kicker {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
    border:1px solid currentColor;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase
}
.td-hero { display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; padding:30px 0 30px; color:#f6f1e8 }
.td-copy h1 { margin:5px 0 0; font-family:Georgia,serif; font-size:clamp(48px,6.4vw,86px); line-height:.94; letter-spacing:-.05em }
.td-copy p { max-width:700px; margin:22px 0 0; color:#cfc7bc; font-size:16px; line-height:1.9 }
.td-tags { display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 }
.td-tags span { padding:8px 12px; border:1px solid #4a4641; border-radius:999px; color:#ddd4ca; font-size:12px; font-weight:800 }
.td-actions { display:flex; gap:12px; flex-wrap:wrap }
.td-actions a,.td-btn {
    display:inline-flex;
    min-height:50px;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:12px;
    text-decoration:none;
    font-weight:900;
    font-size:13px
}
.td-actions .primary,.td-btn { border:0; background:linear-gradient(100deg,var(--td-red),var(--td-copper)); color:#fff; box-shadow:0 18px 35px rgba(168,68,50,.22); cursor:pointer }
.td-actions .ghost { border:1px solid #4a4641; color:#fff }
.td-flash { position:relative; min-height:560px; border:1px solid #4b4641; border-radius:28px; background:#e9e1d2; box-shadow:0 30px 80px rgba(0,0,0,.28); overflow:hidden }
.td-flash:before {position:absolute; left:18px; top:5px; color:#776c5f; font:900 10px/1 monospace; letter-spacing:.13em; z-index:4 }
.td-flash:after {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(77,67,56,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,67,56,.06) 1px,transparent 1px);
    background-size:32px 32px
}
.td-flash-card { position:absolute; padding:9px 9px 30px; background:#fbf8f2; border:1px solid #cfc4b4; box-shadow:0 16px 30px rgba(45,37,30,.18); z-index:2 }
.td-flash-card img { width:100%; height:100%; object-fit:cover }
.td-flash-card b { position:absolute; left:10px; bottom:9px; color:#5a5148; font:900 10px monospace }
.td-flash-card.main { left:28%; top:14%; width:44%; height:60%; transform:rotate(-1deg) }
.td-flash-card.a { left:5%; top:19%; width:24%; height:34%; transform:rotate(-7deg) }
.td-flash-card.b { right:4%; top:16%; width:24%; height:34%; transform:rotate(7deg) }
.td-flash-card.c { left:8%; bottom:5%; width:25%; height:31%; transform:rotate(4deg) }
.td-flash-card.d { right:7%; bottom:5%; width:25%; height:31%; transform:rotate(-5deg) }
.td-stamp {
    position:absolute;
    right:30%;
    bottom:7%;
    z-index:5;
    padding:13px 16px;
    border:3px double var(--td-red);
    color:var(--td-red);
    transform:rotate(-7deg);
    font:900 12px monospace;
    letter-spacing:.1em;
    background:rgba(244,240,231,.8)
}
.td-section { padding:88px 0 }
.td-head { text-align:center; max-width:890px; margin:0 auto 38px }
.td-head h2 { margin:14px 0 10px; font-family:Georgia,serif; font-size:clamp(34px,5vw,58px); line-height:1.04; letter-spacing:-.04em }
.td-head p { margin:0; color:var(--td-muted); font-size:15px; line-height:1.85 }
.td-studio { border:1px solid var(--td-line); border-radius:28px; background:var(--td-card); box-shadow:var(--td-shadow); overflow:hidden }
.td-modebar { display:flex; gap:8px; padding:14px; border-bottom:1px solid var(--td-line); background:#eae3d7 }
.td-modebar button { min-height:42px; padding:0 16px; border:1px solid var(--td-line); border-radius:999px; background:#f8f4ed; color:#50483f; font-weight:900; cursor:pointer }
.td-modebar button.active { background:var(--td-dark); color:#fff; border-color:var(--td-dark) }
.td-builder { display:grid; grid-template-columns:1.1fr .9fr }
.td-form { padding:26px; border-right:1px solid var(--td-line) }
.td-summary { padding:26px; background:#ede6da }
.td-field { margin-bottom:20px }
.td-field>label { display:block; margin-bottom:9px; font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase }
.td-chips { display:flex; flex-wrap:wrap; gap:8px }
.td-chips button {
    min-height:38px;
    padding:0 12px;
    border:1px solid var(--td-line);
    border-radius:999px;
    background:#fffaf4;
    color:#544c43;
    font-size:12px;
    font-weight:850;
    cursor:pointer
}
.td-chips button.active { background:#2a2826; color:#fff; border-color:#2a2826 }
.td-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.td-grid label { font-size:11px; font-weight:850 }
.td-grid select,.td-field textarea,.td-search input,.td-search select {
    width:100%;
    border:1px solid var(--td-line);
    background:#fffaf4;
    color:var(--td-ink);
    outline:none;
    font:inherit
}
.td-grid select { height:46px; margin-top:7px; padding:0 10px; border-radius:11px }
.td-field textarea { min-height:120px; padding:14px; border-radius:14px; resize:vertical; line-height:1.65 }
.td-brief { padding:20px; border:1px dashed #b7a994; border-radius:18px; background:#faf6ef }
.td-brief h3 { margin:0 0 10px; font-family:Georgia,serif; font-size:24px }
.td-brief p { margin:0; color:#5f564d; font-size:13px; line-height:1.8 }
.td-brief-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px }
.td-brief-meta div { padding:12px; border:1px solid #d8cdbc; border-radius:12px; background:#f6f0e7 }
.td-brief-meta b { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#8b7d6f }
.td-brief-meta span { display:block; margin-top:5px; font-size:13px; font-weight:900 }
.td-note { margin-top:14px; color:#73695f; font-size:11px; line-height:1.7 }
.td-archive-tools { display:grid; grid-template-columns:1.2fr repeat(3,.8fr); gap:10px; margin-bottom:18px }
.td-search input,.td-search select { height:46px; padding:0 12px; border-radius:11px }
.td-gallery { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px }
.td-card { overflow:hidden; border:1px solid var(--td-line); border-radius:18px; background:#faf7f1; box-shadow:0 9px 22px rgba(45,37,30,.07) }
.td-card-media { position:relative; aspect-ratio:1; background:#eee6d8 }
.td-card-media img { width:100%; height:100%; object-fit:cover }
.td-card-media:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%,rgba(20,18,17,.74)); opacity:0; transition:.2s }
.td-card:hover .td-card-media:after { opacity:1 }
.td-card-action { position:absolute; left:10px; right:10px; bottom:10px; z-index:2; display:flex; opacity:0; transform:translateY(8px); transition:.2s }
.td-card:hover .td-card-action { opacity:1; transform:none }
.td-card-action a {
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#fff;
    color:#171515;
    text-decoration:none;
    font-size:11px;
    font-weight:900
}
.td-card-copy { padding:12px }
.td-card-copy strong { display:block; font-family:Georgia,serif; font-size:15px }
.td-card-copy span { display:block; margin-top:5px; color:var(--td-muted); font-size:10px; line-height:1.5; text-transform:uppercase; letter-spacing:.05em }
.td-load { display:flex; justify-content:center; margin-top:24px }
.td-info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.td-info { padding:22px; border:1px solid var(--td-line); border-radius:20px; background:#faf7f1 }
.td-info h3 { margin:0 0 8px; font-family:Georgia,serif; font-size:22px }
.td-info p { margin:0; color:var(--td-muted); font-size:13px; line-height:1.8 }
.td-warning { padding:28px; border:1px solid #c5a994; border-radius:24px; background:#eadfd1 }
.td-warning h3 { margin:0 0 10px; font-family:Georgia,serif; font-size:26px }
.td-warning p { margin:0; color:#5e5147; line-height:1.8; font-size:13px }
.td-faq { max-width:980px; margin:auto; border-top:1px solid var(--td-line) }
.td-faq details { border-bottom:1px solid var(--td-line) }
.td-faq summary { padding:20px 0; font-weight:900; cursor:pointer }
.td-faq p { margin:-3px 0 20px; color:var(--td-muted); line-height:1.8 }
.td-cta { padding:30px 0 100px }
.td-cta-box { padding:50px 24px; border-radius:30px; background:#1c1a19; color:#f6f1e8; text-align:center }
.td-cta-box h2 { margin:12px 0; font:700 clamp(36px,5vw,62px)/1.02 Georgia,serif }
.td-cta-box p { max-width:760px; margin:0 auto 24px; color:#ccc2b7; line-height:1.8 }
@media(max-width:1080px) {
    .td-hero { grid-template-columns:1fr }
    .td-copy { text-align:center }
    .td-tags,.td-actions { justify-content:center }
    .td-flash { max-width:760px; margin:auto }
    .td-builder { grid-template-columns:1fr }
    .td-form { border-right:0; border-bottom:1px solid var(--td-line) }
    .td-gallery { grid-template-columns:repeat(4,1fr) }
    .td-archive-tools { grid-template-columns:1fr 1fr }
    .td-info-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:680px) {
    body { background:linear-gradient(180deg,#1a1918 0 760px,var(--td-paper) 760px) }
    .td-wrap,.td-hero,.td-section,.td-cta { width:calc(100% - 20px) }
    .td-hero { padding:20px 0 20px }
    .td-copy h1 { font-size:46px }
    .td-flash { min-height:470px }
    .td-flash-card.main { left:24%; top:17%; width:52%; height:54% }
    .td-flash-card.a,.td-flash-card.b { width:28%; height:28% }
    .td-flash-card.c,.td-flash-card.d { width:28%; height:27% }
    .td-grid { grid-template-columns:repeat(2,1fr) }
    .td-brief-meta { grid-template-columns:1fr }
    .td-gallery { grid-template-columns:repeat(2,1fr); gap:10px }
    .td-archive-tools { grid-template-columns:1fr }
    .td-info-grid { grid-template-columns:1fr }
    .td-studio { border-radius:20px }
    .td-form,.td-summary { padding:16px }
}

/* T67_MOBILE_HERO_FIX_V3 */
@media (max-width:680px){
  .td-flash{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;min-height:0!important;height:auto!important;padding:12px!important;overflow:hidden!important;isolation:isolate}
  .td-flash:after{z-index:0!important;pointer-events:none}
  .td-flash-card,.td-flash-card.main,.td-flash-card.a,.td-flash-card.b,.td-flash-card.c,.td-flash-card.d{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:auto!important;min-width:0!important;aspect-ratio:4/5!important;transform:none!important;padding:5px 5px 22px!important;z-index:1!important}
  .td-flash-card.main{grid-row:span 2!important}
  .td-flash-card img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
  .td-flash-card b{left:7px!important;bottom:6px!important;font-size:8px!important}
  .td-stamp{display:none!important}
}

/* ===== Direct tattoo generator v2 ===== */
.td-hero-visual{position:relative;min-height:520px}
.td-hero-main{position:absolute;inset:20px 46px 0 92px;margin:0;overflow:hidden;border-radius:32px;background:#ddd;box-shadow:0 35px 80px rgba(0,0,0,.28)}
.td-hero-main img{width:100%;height:100%;object-fit:cover}
.td-hero-small{position:absolute;width:150px;margin:0;overflow:hidden;border:8px solid rgba(255,255,255,.92);border-radius:24px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.24)}
.td-hero-small img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.td-hero-small figcaption{padding:9px 10px;background:#fff;color:#201e1c;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.td-hero-body{left:0;top:76px;transform:rotate(-4deg)}
.td-hero-tattoo{right:0;bottom:42px;transform:rotate(4deg)}
.td-hero-badge{position:absolute;right:24px;top:0;padding:11px 14px;border-radius:999px;background:#fff;color:#171514;font-size:11px;font-weight:900;letter-spacing:.08em;box-shadow:0 12px 24px rgba(0,0,0,.16)}

.td-live-studio{padding:12px;border:1px solid var(--td-line);border-radius:28px;background:#e9e1d4;box-shadow:var(--td-shadow)}
.td-live-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,.88fr) minmax(340px,1.24fr);gap:12px}
.td-input-panel,.td-direction-panel,.td-result-panel{padding:18px;border:1px solid #c8baa6;border-radius:20px;background:#fffaf4}
.td-panel-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:15px}
.td-panel-head>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:8px;background:#251f1b;color:#fff;font-size:11px;font-weight:900}
.td-panel-head h3{margin:1px 0 4px;font:700 22px/1.12 Georgia,serif}
.td-panel-head p{margin:0;color:var(--td-muted);font-size:11px;line-height:1.55}
.td-drop{position:relative;min-height:360px;overflow:hidden;border:2px dashed #9d856e;border-radius:8px;background:#f8f0e5;cursor:pointer;transition:.18s}
.td-drop:hover,.td-drop.drag{border-color:var(--td-red);background:#f5e7df}
.td-drop-empty,.td-drop-preview{position:absolute;inset:0}
.td-drop-empty[hidden],.td-drop-preview[hidden],.td-result-panel[hidden],.td-busy[hidden],.td-download[hidden],.td-result-stage img[hidden]{display:none!important}
.td-drop-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center}
.td-drop-empty b{display:grid;place-items:center;width:70px;height:70px;margin-bottom:18px;border:1px solid #c6b49f;border-radius:4px;background:#fff;font-size:34px}
.td-drop-empty strong{font-size:18px}
.td-drop-empty small{max-width:28ch;margin-top:9px;color:var(--td-muted);line-height:1.6}
.td-drop-preview img{width:100%;height:100%;object-fit:cover}
.td-drop-preview button{position:absolute;right:12px;bottom:12px;min-height:36px;padding:0 13px;border:0;border-radius:4px;background:rgba(22,19,17,.8);color:#fff;font-weight:900;cursor:pointer}
.td-direction-panel{display:flex;flex-direction:column}
.td-sample{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:12px;padding:12px 14px;border:1px dashed #a3856f;border-radius:6px;background:#f4eadf;text-align:left;cursor:pointer}
.td-sample span{font-weight:900;color:var(--td-red);text-transform:uppercase;letter-spacing:.08em}
.td-sample small{color:var(--td-muted)}
#tdPrompt{width:100%;min-height:210px;padding:14px;border:1px solid #bba992;border-radius:6px;background:#fff;color:var(--td-ink);font:inherit;line-height:1.65;resize:vertical}
#tdPrompt:focus{outline:none;border-color:var(--td-red);box-shadow:0 0 0 3px rgba(168,68,50,.1)}
.td-live-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:16px}
.td-live-meta>div{min-width:0}
.td-live-meta strong{display:block;font-size:12px;line-height:1.55}
.td-live-meta strong a{color:var(--td-red)}
.td-live-status{display:block;margin-top:5px;color:var(--td-muted);font-size:11px;line-height:1.5}
.td-live-status.error{color:#a52d32}.td-live-status.success{color:#226f45}.td-live-status.queue{color:#89620c}
.td-generate{min-width:190px;min-height:50px;padding:0 18px;border:0;border-radius:6px;background:linear-gradient(100deg,var(--td-red),var(--td-copper));color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 26px rgba(168,68,50,.2)}
.td-generate:disabled{background:#c9c0b7;box-shadow:none;cursor:not-allowed}
.td-result-panel{margin-top:12px;animation:tdResultIn .22s ease both}
@keyframes tdResultIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.td-result-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;border:1px solid #c8baa6;border-radius:8px;background:#e4d8ca}
.td-result-stage.is-loading{min-height:330px;max-height:450px}
.td-result-stage>img{display:block;width:auto;max-width:100%;height:auto;max-height:450px;object-fit:contain;margin:auto}
.td-busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,17,15,.66);color:#fff;z-index:4}
.td-busy>div{display:flex;min-width:210px;flex-direction:column;align-items:center;gap:9px;padding:20px 22px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(18,15,13,.8)}
.td-busy i{width:42px;height:42px;border:3px solid rgba(255,255,255,.24);border-top-color:#fff;border-radius:50%;animation:tdSpin .9s linear infinite}
@keyframes tdSpin{to{transform:rotate(360deg)}}
.td-download{position:absolute;right:14px;bottom:14px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(20,18,16,.82);color:#fff;font-size:22px;cursor:pointer;z-index:3}
.td-clear{display:block;margin:14px auto 0;border:0;background:none;color:#65584e;font-weight:900;cursor:pointer}
.td-card-action button{width:100%;min-height:38px;border:0;border-radius:999px;background:#fff;color:#171515;font-size:11px;font-weight:900;cursor:pointer}

@media(max-width:1080px){
  .td-hero-visual{min-height:500px;max-width:760px;width:100%;margin:auto}
  .td-live-grid{grid-template-columns:1fr 1fr}
  .td-direction-panel{grid-column:1/-1}
  #tdPrompt{min-height:130px}
}
@media(max-width:680px){
  .td-hero-visual{min-height:345px}
  .td-hero-main{inset:16px 24px 0 42px;border-radius:23px}
  .td-hero-small{width:88px;border-width:5px;border-radius:15px}
  .td-hero-body{left:0;top:48px}.td-hero-tattoo{right:0;bottom:20px}
  .td-hero-small figcaption{padding:5px 7px;font-size:8px}
  .td-hero-badge{right:8px;padding:8px 10px;font-size:8px}
  .td-live-studio{padding:8px;border-radius:18px}
  .td-live-grid{grid-template-columns:1fr 1fr;gap:8px}
  .td-input-panel,.td-direction-panel,.td-result-panel{padding:10px;border-radius:12px}
  .td-panel-head{gap:7px;margin-bottom:9px}.td-panel-head>span{flex-basis:26px;height:26px;font-size:9px}.td-panel-head h3{font-size:15px}.td-panel-head p{font-size:9px}
  .td-drop{min-height:230px}.td-drop-empty{padding:10px}.td-drop-empty b{width:48px;height:48px;margin-bottom:10px;font-size:24px}.td-drop-empty strong{font-size:12px}.td-drop-empty small{display:none}
  .td-direction-panel{grid-column:1/-1}
  .td-sample{padding:10px}.td-sample small{font-size:9px}
  #tdPrompt{min-height:105px;font-size:14px}
  .td-live-meta{align-items:stretch;flex-direction:column}.td-generate{width:100%;min-width:0}
  .td-result-panel{grid-column:1/-1}.td-result-stage.is-loading{min-height:260px}.td-result-stage>img{max-height:380px}
}

/* Tool67 image-page dark compatibility patch — visual only */
html[data-theme="dark"],body.dark{--td-paper:#0b0e13;--td-paper2:#111722;--td-ink:#f4f6f8;--td-muted:#a3acb8;--td-line:#303846;--td-card:#151a22;--td-shadow:0 18px 48px rgba(0,0,0,.28);}
body.dark .td-chips button,body.dark .td-grid select,body.dark .td-field textarea,body.dark .td-search input,body.dark .td-search select,body.dark .td-card,body.dark .td-card-action a,body.dark .td-info,body.dark .td-hero-small,body.dark .td-hero-small figcaption,body.dark .td-hero-badge,body.dark .td-input-panel,body.dark .td-direction-panel,body.dark .td-result-panel,body.dark .td-drop-empty b,body.dark #tdPrompt,body.dark .td-card-action button{background:#151a22!important;border-color:#303846!important;color:#e5e7eb;}
body.dark input,body.dark select,body.dark textarea{background-color:#111722;color:#e5e7eb;border-color:#303846;}
body.dark input::placeholder,body.dark textarea::placeholder{color:#7f8a99;}