* {
         box-sizing: border-box;
     }

     html {
         -webkit-text-size-adjust: 100%;
     }

     body {
         margin: 0;
         min-height: 100vh;
         padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
         background: #0d0d0d;
         color: #e5e5e5;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
     }

     .container {
         width: 100%;
         max-width: 800px;
         margin: 0 auto;
     }

     h1 {
         margin: 0 0 28px 0;
         color: #9fc5e8;
         font-size: clamp(24px, 6vw, 34px);
         line-height: 1.2;
     }

     label {
         display: block;
         margin-bottom: 10px;
         color: #b7d7a8;
         font-size: 16px;
         font-weight: 600;
     }

     input[type="text"] {
         display: block;
         width: 100%;
         min-height: 52px;
         padding: 14px 16px;
         border: 1px solid #444;
         border-radius: 8px;
         outline: none;
         background: #181818;
         color: #fff;
         font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
         font-size: 16px;
     }

     input[type="text"]:focus {
         border-color: #9fc5e8;
     }

     button,
     a.button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         min-height: 48px;
         margin-top: 16px;
         padding: 12px 24px;
         border: 0;
         border-radius: 8px;
         background: #8e7cc3;
         color: #fff;
         font-size: 16px;
         font-weight: 600;
         cursor: pointer;
         touch-action: manipulation;
         text-decoration: none;
     }

     button:hover,
     a.button:hover {
         filter: brightness(1.08);
     }

     button:active,
     a.button:active {
         transform: translateY(1px);
     }

     button:disabled,
     a.button:disabled {
         opacity: 0.55;
         cursor: default;
     }

     .result-title {
         margin-top: 30px;
         margin-bottom: 10px;
         color: #b7d7a8;
         font-size: 16px;
         font-weight: 600;
     }

     #result,
     #api {
         width: 100%;
         min-height: 150px;
         padding: 18px;
         border: 1px solid #333;
         border-radius: 8px;
         background: #181818;
         color: #f6b26b;
         font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
         font-size: 14px;
         line-height: 1.55;
         white-space: pre-wrap;
         overflow-wrap: anywhere;
         word-break: break-word;
     }

     #api {
         min-height: 50px;
         white-space: normal;
         margin-top: 20px;
     }

     #result.error {
         border-color: #694141;
         color: #e6a1a1;
     }

     #result.success {
         border-color: #405e46;
     }

     @media (max-width: 600px) {
         button,
         a.button {
             width: 100%;
             min-height: 52px;
             font-size: 17px;
         }

         #result {
             min-height: 180px;
             padding: 15px;
             font-size: 13px;
         }
     }

     #gs1Image {
        width: 160px;
        height: 160px;
        margin-top: 10px;
     }