  <style>
	html, body {
	  height: 100%;
	  margin: 0;
	  padding: 0;
	  font-family: 'Segoe UI', Arial, sans-serif;
	  background: linear-gradient(135deg, #181f23 0%, #22343c 100%);
	  overflow: hidden;
	}
	body {
	   background: linear-gradient(135deg, #181f23 0%, #22343c 100%);
	}
	body { min-height: 100vh; }

/* Place all your other CSS here (modals, overlays, app styles, etc.) */
	#introOverlay {
	  position: fixed;
	  z-index: 99999;
	  inset: 0;
	  background: linear-gradient(135deg, #181f23 0%, #22343c 100%);
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.intro-text {
	  opacity: 0;
	  color: #3a4a5a;
	  font-family: 'Segoe UI Semibold', Arial, sans-serif;
	  font-weight: 700;
	  letter-spacing: 0.04em;
	  text-align: center;
	  margin: 0 auto;
	  text-shadow: 0 1px 2px #0006;
	  filter: none;
	  line-height: 1.13;
	  animation: introTextFadeIn 2.2s 0.2s forwards;
	  box-sizing: border-box;
	  white-space: nowrap;
	  overflow: hidden;
	  width: 90vw;
	  max-width: 90vw;
	}
	@keyframes introTextFadeIn {
	  0%   { opacity: 0; filter: blur(8px);}
	  100% { opacity: 1; filter: blur(0);}
	}
	.fingerprint-wrap {
	  opacity: 0;
	  margin-top: 5vh;
	  width: 100vw;
	  height: auto;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  pointer-events: auto;
	  transition: opacity 0.7s;
	}
	.fingerprint-btn {
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: relative;
	  background: none;
	  border: none;
	  outline: none;
	  box-shadow: none;
	  padding: 0;
	}
	.pulse-wrapper {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.pulse-stack {
	  position: relative;
	  width: 1em;
	  height: 1em;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  aspect-ratio: 1/1;
	}
	#pulse, #fingerprintSVGimg {
	  position: absolute;
	  left: 0; top: 0;
	  width: 100%;
	  height: 100%;
	  pointer-events: none;
	  display: block;
	  object-fit: contain;
	}

	/* Modal */
	.modal-bg {
	  position:fixed; top:0;left:0;width:100vw;height:100vh;
	  background:rgba(13,21,28,0.97); z-index:5555; display:flex;align-items:center;justify-content:center;
	  animation: fadeInModalBg 0.4s;
	}
	@keyframes fadeInModalBg {
	  from { opacity: 0; }
	  to { opacity: 1; }
	}
	.modal-box {
	  background: rgba(34, 44, 49, 0.95);
	  box-shadow: 0 10px 44px 7px rgba(40,70,100,0.26);
	  border: 2px solid #32525999;
	  border-radius: 18px;
	  padding: 47px 25px 36px 25px;
	  max-width: 94vw;
	  min-width: 240px;
	  width: 300px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  position: relative;
	  backdrop-filter: blur(6px);
	  animation: scaleInModalBox 0.4s;
	}
	@keyframes scaleInModalBox {
	  from { opacity: 0; transform: scale(0.92);}
	  to { opacity: 1; transform: scale(1);}
	}
	.modal-box .modal-title {
	  color: #90b7c2;
	  font-size: 1.2em;
	  margin-bottom: 5px;
	  font-weight: 600;
	  letter-spacing: 0.04em;
	}
	.modal-phrase, .modal-box label { display: none; }
	.codeModalInput {
	  width: 60%;
	  font-size: 1.18rem;
	  padding: 12px 48px;
	  border-radius: 10px;
	  border: 1.5px solid #5e7e87;
	  background: linear-gradient(90deg, #1e2d33 60%, #22343c 100%);
	  color: #ccebf9;
	  box-shadow: 0 2px 8px #17272f28 inset;
	  outline: none;
	  margin-bottom: 22px;
	  transition: border 0.2s, background 0.22s, box-shadow 0.22s;
	  font-family: 'Segoe UI', Arial, sans-serif;
	  letter-spacing: 0.04em;
	  text-align: center;
	}
	.codeModalInput:focus {
	  border: 2px solid #D7263D;
	  background: #223640;
	  box-shadow: 0 0 0 2px #D7263D44;
	}
	.modal-box button[type="submit"] {
	  font-size: 1.08rem;
	  border-radius: 9px;
	  background: linear-gradient(90deg, #40616a 60%, #22343c 100%);
	  color: #e0eff8;
	  border: none;
	  font-weight: 600;
	  padding: 10px 28px;
	  cursor: pointer;
	  transition: background 0.17s, box-shadow 0.12s;
	  box-shadow: 0 2px 7px 0 #28425444 inset, 0 1px 6px #1c2d3888;
	  text-shadow: 0 1px 4px #07344a88;
	  letter-spacing: .04em;
	}
	.modal-box button[type="submit"]:hover {
	  background: linear-gradient(90deg, #304a53 50%, #0c1317 100%);
	}

	/* Main App */
	.main {
	  display: flex;
	  background: linear-gradient(135deg, #222c31 70%, #274148 130%);
	  border-radius: 17px;
	  box-shadow: 0 8px 42px 7px rgba(40,70,100,0.20), 0 1.5px 20px 6px #2b384466;
	  max-width: 710px; width: 98vw; min-width: 320px;
	  padding: 26px 14px; gap: 26px; border: 1.5px solid #2c444e;
	  position:relative; z-index:1; margin: 60px auto 0 auto;
	  display: none;
	}
	.left-box {
	  min-width: 170px; display: flex; flex-direction: column; align-items: stretch; border-right: 2px solid #32525955; padding-right: 18px; flex-shrink: 0;
	  width: 242px;
	}

	/* FIXED LAYOUT FOR INPUT/TITLE */
	.input-title-row {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  width: 100%;
	  margin-bottom: 10px;
	  min-height: 44px;
	}
	.oneword-title {
	  display: flex;
	  align-items: center;
	  min-width: 90px;
	  min-height: 44px;
	  font-size: 1.18em;
	  font-family: 'Segoe UI Semibold', 'Segoe UI', Arial, sans-serif;
	  font-weight:700;
	  color: #86b0b9;
	  letter-spacing: 0.11em;
	  text-shadow: 0 2px 18px #29424388;
	  box-sizing: border-box;
	  text-align: left;
	  overflow: hidden;
	  white-space: nowrap;
	  padding: 0 0.3em 0 0;
	  border: none;
	  background: none;
	  margin: 0;
	  line-height: 1;
	}
	.oneword-title:empty::before {
	  content: "\00a0";
	  display: inline-block;
	  min-width: 90px;
	  min-height: 44px;
	}
	#userinput {
	  flex: 1 1 0;
	  height: 44px;
	  line-height: 44px;
	  font-size: 1.18rem;
	  padding: 0 16px;
	  border-radius: 10px;
	  border: 1.5px solid #5e7e87;
	  background: linear-gradient(90deg, #1e2d33 60%, #22343c 100%);
	  color: #ccebf9;
	  box-shadow: 0 2px 8px #17272f28 inset;
	  outline: none;
	  transition: border 0.2s, background 0.22s, box-shadow 0.22s;
	  font-family: 'Segoe UI', Arial, sans-serif;
	  letter-spacing: 0.04em;
	  text-align: center;
	  box-sizing: border-box;
	  margin-bottom: 0;
	  min-width: 0;
	  max-width: 100%;
	}

	/* Story display enhancements */
	.right-box {
	  min-width: 220px; flex: 1; display: flex; flex-direction: column;
	  background: linear-gradient(135deg, #151c1e 40%, #24373b 100%);
	  border-radius: 10px; border: 2.1px solid #35525c; padding: 18px 14px;
	  min-height: 260px;
	  max-height: 540px;
	  overflow-y: auto; color: #e0eff8; 
	  box-shadow: 0 8px 22px #131f2288 inset, 0 1px 8px #0004;
	  position: relative; transition: box-shadow 0.24s, border-color 0.23s;
	  font-size: 1.08em;
	  animation: fadeInStory 0.5s;
	}
	@keyframes fadeInStory {
	  from { opacity: 0; transform: translateY(20px);}
	  to { opacity: 1; transform: translateY(0);}
	}
	.story-content {
	  word-break: break-word;
	  white-space: pre-wrap;
	  line-height: 1.7;
	  font-size: 1.13em;
	  margin-bottom: 0.5em;
	}

	/* Code controls */
	.code-controls {
	  position: fixed;
	  right: 18px;
	  bottom: 18px;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  z-index: 9999;
	  gap: 10px;
	  font-size: 1.09em;
	}
	.code-controls .code-box {
	  background: #1b2a2f;
	  color: #a6d5da;
	  border-radius: 8px;
	  padding: 7px 16px;
	  font-family: 'Segoe UI Semibold', Arial, sans-serif;
	  font-size: 1.08em;
	  letter-spacing: 0.06em;
	  box-shadow: 0 2px 8px #17272f28 inset;
	  margin-left: 0;
	  user-select: all;
	}
	.code-controls button {
	  padding: 7px 13px;
	  font-size: 1em;
	  border-radius: 8px;
	  margin: 0;
	  min-width: 64px;
	}
	.code-controls .keep-btn { background: linear-gradient(90deg, #3a8b6c 60%, #22343c 100%);}
	.code-controls .keep-btn:hover { background: linear-gradient(90deg, #2a6b4c 60%, #0c1317 100%);}
	.code-controls .reset-btn { background: linear-gradient(90deg, #b03a3a 60%, #22343c 100%);}
	.code-controls .reset-btn:hover { background: linear-gradient(90deg, #8a2323 60%, #0c1317 100%);}

	/* Fingerprint button resets */
	.fingerprint-btn,
	.fingerprint-btn:focus,
	.fingerprint-btn:active,
	.fingerprint-btn:hover,
	.fingerprint-btn *:focus,
	.fingerprint-btn *:active,
	.fingerprint-btn *:hover {
	  background: none !important;
	  border: none !important;
	  outline: none !important;
	  box-shadow: none !important;
	  filter: none !important;
	  transition: none !important;
	  color: inherit !important;
	}

	/* Modal for notifications */
	#notifyModal {
	  display: none;
	  position: fixed;
	  z-index: 100000;
	  left: 0; top: 0; width: 100vw; height: 100vh;
	  background: rgba(13,21,28,0.82);
	  align-items: center;
	  justify-content: center;
	}
	#notifyModal .modal-box {
	  min-width: 220px;
	  max-width: 90vw;
	  padding: 32px 24px 24px 24px;
	  text-align: center;
	  font-size: 1.18em;
	  color: #e0eff8;
	  background: linear-gradient(130deg,#222c31 60%,#243f48 120%);
	  border-radius: 16px;
	  border: 2px solid #32525999;
	  box-shadow: 0 10px 44px 7px rgba(40,70,100,0.26);
	}
	#notifyModal button {
	  margin-top: 22px;
	  padding: 8px 22px;
	  font-size: 1.05em;
	  border-radius: 8px;
	  background: linear-gradient(90deg, #40616a 60%, #22343c 100%);
	  color: #e0eff8;
	  border: none;
	  font-weight: 600;
	  cursor: pointer;
	  transition: background 0.17s, box-shadow 0.12s;
	  box-shadow: 0 2px 7px 0 #28425444 inset, 0 1px 6px #1c2d3888;
	  text-shadow: 0 1px 4px #07344a88;
	  letter-spacing: .04em;
	}
	#notifyModal button:hover {
	  background: linear-gradient(90deg, #304a53 50%, #0c1317 100%);
	}

	/* Accessibility: focus outline for buttons */
	button:focus-visible {
	  outline: 2px solid #D7263D;
	  outline-offset: 2px;
	}

	/* Responsive adjustments */
	@media (max-width: 600px) {
	  .main {
		flex-direction: column;
		padding: 10px 2vw;
		gap: 10px;
	  }
	  .left-box {
		border-right: none;
		border-bottom: 2px solid #32525955;
		padding-right: 0;
		padding-bottom: 12px;
		width: 100%;
		min-width: 0;
	  }
	  .right-box {
		min-width: 0;
		padding: 10px 4vw;
	  }
	  .input-title-row {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		min-height: 0;
	  }
	  .oneword-title {
		min-width: 0;
		min-height: 36px;
		font-size: 1em;
		padding-bottom: 2px;
	  }
	  #userinput {
		height: 36px;
		line-height: 36px;
		font-size: 1em;
		padding: 0 10px;
	  }
	}
	#sendBtn {
	  height: 44px;
	  line-height: 44px;
	  font-size: 1.18rem;
	  border-radius: 10px;
	  background: linear-gradient(90deg, #40616a 60%, #22343c 100%);
	  color: #e0eff8;
	  border: none;
	  font-weight: 600;
	  padding: 0 28px;
	  cursor: pointer;
	  transition: background 0.17s, box-shadow 0.12s;
	  box-shadow: 0 2px 7px 0 #28425444 inset, 0 1px 6px #1c2d3888;
	  text-shadow: 0 1px 4px #07344a88;
	  letter-spacing: .04em;
	  margin-bottom: 0;
	  display: block;
	}
	#sendBtn:hover {
	  background: linear-gradient(90deg, #304a53 50%, #0c1317 100%);
	}
</style>
