<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap');
  *{box-sizing:border-box;margin:0;padding:0}
  .wrap{display:flex;min-height:560px;border-radius:var(--border-radius-lg);overflow:hidden;background:#faf6f1;position:relative;font-family:'Inter',sans-serif}
  .bg-art{position:absolute;inset:0;pointer-events:none}
  .left{flex:1;padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
  .logo{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5vw,3.4rem);font-weight:400;color:#1a1208;letter-spacing:-0.5px;line-height:1}
  .logo .dot{color:#c0521e}
  .tagline{font-size:1.05rem;color:#2d2010;margin-top:1rem;font-weight:300;letter-spacing:0.01em}
  .desc{font-size:0.82rem;color:#6b5a42;margin-top:0.75rem;line-height:1.6;max-width:280px}
  .right{width:360px;flex-shrink:0;padding:2rem;display:flex;align-items:center;position:relative;z-index:1}
  .card{background:#fff;border-radius:14px;padding:2rem 1.75rem;width:100%;box-shadow:0 2px 24px rgba(80,40,10,0.08)}
  .card h2{font-family:'Playfair Display',serif;font-size:1.55rem;font-weight:400;color:#1a1208;text-align:center;margin-bottom:0.3rem}
  .card .sub{font-size:0.8rem;color:#9a8470;text-align:center;margin-bottom:1.4rem}
  .field{margin-bottom:1rem}
  .field label{display:block;font-size:0.72rem;font-weight:500;color:#5a4a36;margin-bottom:0.35rem;letter-spacing:0.02em}
  .field input{width:100%;padding:0.6rem 0.85rem;border:1px solid #e2d9ce;border-radius:8px;font-size:0.83rem;color:#1a1208;background:#fcfaf8;outline:none;transition:border-color 0.2s;font-family:'Inter',sans-serif}
  .field input:focus{border-color:#c0521e}
  .field input::placeholder{color:#b8a898}
  .pw-wrap{position:relative}
  .pw-wrap input{padding-right:2.2rem}
  .pw-eye{position:absolute;right:0.7rem;top:50%;transform:translateY(-50%);color:#b8a898;cursor:pointer;font-size:15px}
  .btn-primary{width:100%;padding:0.7rem;background:#c0521e;color:#fff;border:none;border-radius:8px;font-size:0.88rem;font-weight:500;cursor:pointer;margin-top:0.5rem;transition:background 0.2s;font-family:'Inter',sans-serif;letter-spacing:0.01em}
  .btn-primary:hover{background:#a84218}
  .divider{display:flex;align-items:center;gap:0.6rem;margin:1.1rem 0 0.7rem;font-size:0.75rem;color:#b8a898}
  .divider::before,.divider::after{content:'';flex:1;height:0.5px;background:#e8dfd3}
  .signin-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.8rem}
  .signin-row .line{flex:1;height:0.5px;background:#e8dfd3}
  .signin-row span{font-size:0.75rem;color:#b8a898}
  .btn-outline{width:100%;padding:0.65rem;background:#fff;color:#c0521e;border:1px solid #e2d9ce;border-radius:8px;font-size:0.88rem;font-weight:500;cursor:pointer;transition:background 0.2s;font-family:'Inter',sans-serif}
  .btn-outline:hover{background:#fdf5f1}
  .btn-google{width:100%;padding:0.65rem;background:#fff;color:#2d2010;border:1px solid #e2d9ce;border-radius:8px;font-size:0.83rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.6rem;font-family:'Inter',sans-serif;transition:background 0.2s}
  .btn-google:hover{background:#f9f6f3}
  .or-row{display:flex;align-items:center;gap:0.6rem;margin:0.7rem 0;font-size:0.75rem;color:#b8a898}
  .or-row::before,.or-row::after{content:'';flex:1;height:0.5px;background:#e8dfd3}
</style>

<div class="wrap">
  <svg class="bg-art" viewBox="0 0 720 560" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
    <defs>
      <style>.sl{stroke:#d4b896;stroke-width:0.8;fill:none;opacity:0.35}</style>
    </defs>
    <ellipse cx="120" cy="430" rx="180" ry="60" class="sl" transform="rotate(-5 120 430)"/>
    <ellipse cx="60" cy="390" rx="80" ry="130" class="sl"/>
    <line x1="60" y1="260" x2="60" y2="390" class="sl"/>
    <ellipse cx="55" cy="280" rx="55" ry="40" class="sl"/>
    <ellipse cx="40" cy="255" rx="35" ry="25" class="sl"/>
    <line x1="200" y1="300" x2="200" y2="430" class="sl"/>
    <ellipse cx="200" cy="310" rx="60" ry="45" class="sl"/>
    <ellipse cx="185" cy="285" rx="38" ry="28" class="sl"/>
    <ellipse cx="215" cy="290" rx="32" ry="22" class="sl"/>
    <path d="M60 390 Q120 370 200 420 Q280 440 380 430" class="sl"/>
    <path d="M0 430 Q100 410 200 430 Q300 450 400 440" class="sl"/>
    <ellipse cx="330" cy="420" rx="90" ry="18" class="sl" opacity="0.2"/>
    <circle cx="305" cy="414" r="8" class="sl"/>
    <circle cx="320" cy="412" r="6" class="sl"/>
    <circle cx="340" cy="410" r="10" class="sl"/>
    <circle cx="358" cy="413" r="7" class="sl"/>
    <ellipse cx="260" cy="418" rx="50" ry="12" class="sl" opacity="0.2"/>
    <circle cx="248" cy="412" r="6" class="sl"/>
    <circle cx="265" cy="410" r="8" class="sl"/>
    <circle cx="280" cy="413" r="5" class="sl"/>
    <path d="M0 480 Q180 460 400 470" class="sl" opacity="0.5"/>
    <path d="M20 500 Q200 485 420 492" class="sl" opacity="0.3"/>
    <path d="M20 180 Q60 100 80 70" class="sl" stroke-width="0.6"/>
    <path d="M75 70 Q90 50 110 30" class="sl" stroke-width="0.6"/>
    <path d="M80 70 Q95 55 100 40" class="sl" stroke-width="0.6"/>
  </svg>

  <div class="left">
    <div class="logo">tuma<span class="dot">.</span>social</div>
    <div class="tagline">Create once. Adapt everywhere.</div>
    <div class="desc">The collaborative platform for modern teams to create, adapt, and share across channels.</div>
  </div>

  <div class="right">
    <div class="card">
      <h2>Create your account</h2>
      <p class="sub">Join tuma.social and start creating.</p>

      <div class="field">
        <label>Full name</label>
        <input type="text" placeholder="Enter your full name" />
      </div>
      <div class="field">
        <label>Work email</label>
        <input type="email" placeholder="you@company.com" />
      </div>
      <div class="field">
        <label>Password</label>
        <div class="pw-wrap">
          <input type="password" placeholder="Create a strong password" id="pw" />
          <span class="pw-eye" onclick="togglePw()" title="Toggle visibility"><i class="ti ti-eye" id="eye-icon"></i></span>
        </div>
      </div>

      <button class="btn-primary">Create account</button>

      <div class="signin-row" style="margin-top:1.1rem">
        <div class="line"></div>
        <span>Already have an account?</span>
        <div class="line"></div>
      </div>

      <button class="btn-outline" style="margin-bottom:0.7rem">Sign in</button>

      <div class="or-row">or</div>

      <button class="btn-google">
        <svg width="16" height="16" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
        Continue with Google
      </button>
    </div>
  </div>
</div>

<script>
function togglePw(){
  const pw=document.getElementById('pw');
  const ic=document.getElementById('eye-icon');
  if(pw.type==='password'){pw.type='text';ic.className='ti ti-eye-off';}
  else{pw.type='password';ic.className='ti ti-eye';}
}
</script>